/* Northloop — concept talent network. Zero dependencies. */
:root{
  --paper:#FAF9F6; --ink:#111318; --cobalt:#2B44E7;
  --hair:#DEDCD4; --hair-dark:#C9C6BB; --mut:#55534C;
  --card:#FFFFFF; --radius:10px;
  --sans:"Helvetica Neue",Helvetica,"Segoe UI",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
::selection{background:var(--cobalt);color:#fff}

/* Reveal: content is visible by default; hidden state exists ONLY under body.anim (added by JS). */
body.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
body.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body.anim .rv{opacity:1;transform:none;transition:none}
}

/* Header */
.site-head{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--hair-dark);z-index:40}
.head-in{display:flex;align-items:center;gap:28px;height:62px}
.brand{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-dot{color:var(--cobalt)}
.main-nav{display:flex;gap:22px;margin-left:auto}
.main-nav a{color:var(--ink);font-size:15px;font-weight:600}
.main-nav a:hover{color:var(--cobalt);text-decoration:none}

/* Buttons */
.btn{display:inline-block;background:var(--cobalt);color:#fff;font-weight:700;font-size:16px;padding:13px 24px;border:1px solid var(--cobalt);border-radius:var(--radius);cursor:pointer;font-family:inherit}
.btn:hover{background:#1F34BC;text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-small{padding:9px 16px;font-size:14px;margin-left:auto}
.head-in .btn-small{margin-left:0}

/* Hero */
.hero{padding:84px 24px 64px;border-bottom:1px solid var(--hair-dark)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:22px}
.hero h1{font-size:clamp(44px,7.2vw,84px);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin-bottom:26px}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:#2A2C31;max-width:720px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:58px}
.counters{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--hair-dark)}
.counter{padding:20px 18px 18px 0;border-right:1px solid var(--hair)}
.counter:last-child{border-right:0;padding-right:0}
.counter dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.counter dd{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.counter .unit{font-size:.45em;font-weight:700;color:var(--cobalt);margin-left:5px;letter-spacing:0}
.counter .count{display:inline-block;min-width:3ch}
.counters-note{font-size:14px;color:var(--mut);margin-top:14px}

/* Sections */
.section{padding:76px 24px;border-bottom:1px solid var(--hair-dark)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}
.sec-no{font-size:15px;font-weight:800;color:var(--cobalt);font-variant-numeric:tabular-nums}
.sec-head h2{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.025em;font-weight:800;line-height:1.05}
.sec-lede{font-size:18px;color:#2A2C31;max-width:680px;margin-bottom:36px}

/* How it works */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.col-title{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.steps{list-style:none;counter-reset:st}
.steps li{padding:16px 0;border-bottom:1px solid var(--hair);display:grid;gap:2px}
.step-t{font-weight:700;font-size:17px}
.step-t::before{counter-increment:st;content:counter(st,decimal-leading-zero);color:var(--cobalt);font-weight:800;margin-right:12px;font-size:14px}
.step-d{color:var(--mut);font-size:15.5px;padding-left:34px}

/* Rates table */
.table-scroll{overflow-x:auto;border:1px solid var(--hair-dark);border-radius:var(--radius);background:var(--card)}
table.rates{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.rates th,.rates td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.rates thead th{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);border-bottom:2px solid var(--ink);background:var(--paper)}
.rates tbody th{font-weight:700;background:#F3F1EB}
.rates tbody tr:last-child th,.rates tbody tr:last-child td{border-bottom:0}
.rates td:nth-child(3),.rates td:nth-child(4){font-weight:700}
.table-note{font-size:14.5px;color:var(--mut);margin-top:14px}

/* Calculator */
.calc{margin-top:44px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--card);padding:28px}
.calc-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.calc-sub{color:var(--mut);font-size:15px;margin-bottom:22px}
.calc-form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.field .opt{text-transform:none;letter-spacing:0;font-weight:500}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--hair-dark);border-radius:8px;padding:11px 13px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cobalt);outline:2px solid var(--cobalt);outline-offset:1px}
.calc-out{border-top:1px solid var(--hair);padding-top:18px}
.calc-line{font-size:19px;margin-bottom:4px}
.calc-line strong{font-size:24px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.calc-cur{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--cobalt);margin-right:8px}
.calc-per{color:var(--mut);font-size:15px}
.calc-note{color:var(--mut);font-size:14px;margin-top:8px}

/* Work rules */
.rules{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.rules li{padding:15px 0;border-bottom:1px solid var(--hair);font-size:16.5px}
.rules strong{font-weight:800}

/* Roles */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.chip{font:inherit;font-size:14.5px;font-weight:700;padding:8px 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.chip:hover{background:#EFEDE6}
.chip.is-on{background:var(--ink);color:#fff}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.role-card{background:var(--card);border:1px solid var(--hair-dark);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:9px}
.role-card[hidden]{display:none}
.role-co{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.sample{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--cobalt);border:1px solid var(--cobalt);border-radius:4px;padding:1px 6px;margin-left:8px;vertical-align:2px;text-transform:uppercase}
.role-title{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.role-desc{color:var(--mut);font-size:15.5px}
.role-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14.5px;font-weight:600;border-top:1px solid var(--hair);padding-top:12px;margin-top:2px}
.role-rate{color:var(--cobalt);font-weight:800;font-variant-numeric:tabular-nums}
.role-tags{font-size:13.5px;color:var(--mut)}
.role-card .btn{align-self:flex-start;margin-top:6px}
.roles-empty{color:var(--mut);font-size:16px;padding:18px 0}

/* Apply */
.apply-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px}
.apply-form[hidden]{display:none}
.field-wide{grid-column:1/-1}
.apply-form .btn{justify-self:start}
.form-err{grid-column:1/-1;color:#B3261E;font-weight:600;font-size:15px}
.form-note{grid-column:1/-1;font-size:13.5px;color:var(--mut)}
.apply-done{border:1px solid var(--ink);border-radius:var(--radius);background:var(--card);padding:34px;max-width:820px}
.done-kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin-bottom:10px}
.done-code{font-size:clamp(40px,6vw,58px);font-weight:800;letter-spacing:-.01em;line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.done-text{color:#2A2C31;max-width:560px;margin-bottom:22px}

/* Vetting */
.vetting{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vetting li{background:var(--card);border:1px solid var(--hair-dark);border-radius:var(--radius);padding:22px;display:grid;gap:5px}
.vet-no{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.vet-t{font-size:18.5px;font-weight:800}
.vet-d{color:var(--mut);font-size:15.5px}

/* FAQ */
.faq-list{border-top:2px solid var(--ink);max-width:820px}
.faq-list details{border-bottom:1px solid var(--hair-dark)}
.faq-list summary{font-size:17.5px;font-weight:700;padding:18px 4px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--cobalt);font-weight:800}
.faq-list details[open ] summary::after{content:"–"}
.faq-list details p{padding:0 4px 20px;color:var(--mut);font-size:16px;max-width:700px}

/* Footer */
.site-foot{padding:56px 0 40px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--hair);margin-bottom:24px}
.foot-line{color:var(--mut);font-size:15px;margin-top:8px;max-width:380px}
.foot-nav{display:flex;flex-direction:column;gap:9px}
.foot-nav a{color:var(--ink);font-weight:600;font-size:15px}
.foot-note{font-size:14px;color:var(--mut);max-width:760px;margin-bottom:10px}
.foot-note a,.foot-line a{text-decoration:underline;text-underline-offset:3px}
.foot-fine{font-size:13px;color:var(--mut)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(17,19,24,.55);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:0}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--paper);width:100%;max-width:640px;max-height:92vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:32px 30px 36px;position:relative}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--ink);padding:6px}
.modal-title{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:6px 0 10px;padding-right:36px}
.modal .role-meta{margin-bottom:16px}
.modal-about{color:#2A2C31;margin-bottom:18px}
.modal-h{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin:18px 0 8px}
.modal-list{padding-left:20px;color:var(--mut);display:grid;gap:5px;font-size:15.5px}
.modal-terms{font-size:14.5px;color:var(--mut);border-top:1px solid var(--hair);padding-top:14px;margin:20px 0 22px}

/* Anchored sections clear the sticky header */
section[id]{scroll-margin-top:78px}

/* Menu button — an enhancement only: rendered solely when JS is live (body.js)
   and the viewport is narrow. Without JS it never appears, so there is no dead
   hamburger; the nav below simply stacks. */
.menu-btn{display:none;font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:999px;padding:9px 18px;cursor:pointer;margin-left:auto}
.menu-btn:hover{background:var(--ink);color:#fff}

/* Full-screen mobile menu overlay */
.menu-overlay{position:fixed;inset:0;background:var(--paper);z-index:80;display:flex;flex-direction:column;padding:0 24px 30px;overflow-y:auto}
.menu-overlay[hidden]{display:none}
.menu-overlay.open{animation:ovin .28s ease}
@keyframes ovin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.menu-overlay.open{animation:none}}
body.menu-open{overflow:hidden}
.ov-head{display:flex;align-items:center;justify-content:space-between;min-height:62px;border-bottom:1px solid var(--hair-dark);flex:none}
.ov-head .brand{font-size:25px}
.ov-close{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;border:0;font-size:25px;line-height:1;cursor:pointer;flex:none}
.ov-close:hover{background:var(--cobalt)}
.ov-nav{display:flex;flex-direction:column;padding:14px 0 20px}
.ov-nav a{color:var(--ink);font-size:clamp(29px,8.2vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.15;padding:9px 0;border-bottom:1px solid var(--hair);display:flex;align-items:baseline;gap:15px}
.ov-nav a:hover{color:var(--cobalt);text-decoration:none}
.ov-no{font-size:14px;color:var(--cobalt);font-weight:800;font-variant-numeric:tabular-nums}
.ov-foot{margin-top:auto;display:grid;gap:13px}
.ov-apply{text-align:center;border-radius:999px;padding:16px 24px;font-size:17px}
.ov-mail{text-align:center;color:var(--ink);font-weight:600;font-size:15.5px}

/* Photography — warm, quiet treatment inside hairline frames */
.photo-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
.photo{border:1px solid var(--hair-dark);background:var(--card);border-radius:var(--radius);overflow:hidden}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:sepia(.16) saturate(.85) contrast(1.03)}
.photo figcaption{font-size:13.5px;color:var(--mut);padding:11px 13px;border-top:1px solid var(--hair);line-height:1.45}
.fig-no{color:var(--cobalt);font-weight:800;margin-right:8px;font-variant-numeric:tabular-nums}
.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.life-card{border:1px solid var(--hair-dark);background:var(--card);border-radius:var(--radius);overflow:hidden}
.life-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:sepia(.16) saturate(.85) contrast(1.03)}
.life-card figcaption{padding:16px 18px 19px;display:grid;gap:5px}
.life-t{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.life-d{color:var(--mut);font-size:15px}

/* Playground tools */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tool{border:1px solid var(--ink);border-radius:var(--radius);background:var(--card);padding:26px}
.tool-title{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.tool-sub{color:var(--mut);font-size:15px;margin-bottom:18px}
.tool .field{margin-bottom:12px}
.tool-out-label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:16px 0 7px}
.tool-out{background:var(--paper);border:1px solid var(--hair-dark);border-radius:8px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto;color:var(--ink)}
.ascii-out{white-space:pre;word-break:normal;font-size:10.5px;line-height:1.2;overflow-x:auto;min-height:96px}
.btn-tool{margin-top:14px}
.tool-hint{color:var(--mut);font-size:14px;margin-top:13px}
.tool-note{border:1px solid var(--hair-dark);border-radius:8px;padding:13px 16px;color:var(--mut);font-size:15px;margin-bottom:18px;background:var(--card)}

/* Footer sitemap */
.sitemap{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:34px;padding-bottom:32px;border-bottom:1px solid var(--hair);margin-bottom:24px}
.site-col{display:flex;flex-direction:column;gap:9px}
.site-h{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-bottom:4px}
.site-col a{color:var(--ink);font-weight:600;font-size:15px}
.site-about .foot-line:first-of-type{margin-top:10px}

/* Footer theatre — oversized watermark + cobalt loop motif (pure CSS/SVG) */
.foot-theatre{position:relative;overflow:hidden;margin-top:8px}
.loop-motif{position:absolute;right:-46px;top:-38px;width:290px;height:290px;pointer-events:none}
.watermark{display:block;width:100%;height:auto;transform:translateY(20%);cursor:default}
.watermark text{font-family:inherit;font-size:205px;font-weight:800;letter-spacing:-9px;fill:rgba(17,19,24,.055);transition:fill .6s ease}
.watermark:hover text{fill:rgba(43,68,231,.13)}
.wm-dot{fill:rgba(43,68,231,.16)}

/* Nav collapses: with JS, behind the overlay toggle; without JS, stacked + visible */
@media (max-width:900px){
  .head-in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:13px;row-gap:10px}
  .main-nav{margin-left:0;width:100%;flex-wrap:wrap;gap:7px 17px}
  .head-in .btn-small{margin-left:auto}
  body.js .head-in{flex-wrap:nowrap;height:62px;padding-top:0;padding-bottom:0}
  body.js .main-nav{display:none}
  body.js .menu-btn{display:inline-block}
  body.js .head-in .btn-small{margin-left:0}
}

/* Mobile */
@media (max-width:760px){
  .wrap{padding:0 18px}
  .hero{padding:56px 18px 48px}
  .section{padding:54px 18px}
  .counters{grid-template-columns:1fr 1fr}
  .counter{border-bottom:1px solid var(--hair);padding-right:12px}
  .two-col{grid-template-columns:1fr;gap:40px}
  .rules{grid-template-columns:1fr}
  .calc-form{grid-template-columns:1fr}
  .role-grid{grid-template-columns:1fr}
  .vetting{grid-template-columns:1fr}
  .apply-form{grid-template-columns:1fr}
  .calc{padding:22px 18px}
  .modal{padding:26px 20px 30px}
  .photo-band{grid-template-columns:1fr 1fr;gap:11px;margin-top:34px}
  .life-grid{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .tool{padding:21px 18px}
  .sitemap{grid-template-columns:1fr 1fr;gap:26px}
  .loop-motif{width:180px;height:180px;right:-30px;top:-22px}
}