/* ==========================================================================
   sections.css — layout for each named block of the page, in page order
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(52px,6.5vw,84px) clamp(64px,8vw,110px) }
.hero__bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(120% 88% at 70% 30%, #000 12%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 88% at 70% 30%, #000 12%, transparent 78%);
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1fr 1.14fr; gap:clamp(2rem,4vw,3.4rem); align-items:center }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; color:var(--field);
  background:rgba(29,90,224,.07); border:1px solid rgba(29,90,224,.18);
  border-radius:100px; padding:.4rem .85rem; margin-bottom:1.4rem;
}
.hero h1{ margin-bottom:1.2rem }
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.11em; margin-bottom:-.11em }
.hero h1 .ln > span{ display:block; transform:translateY(115%); animation:riseIn .95s var(--ease-out) forwards }
.hero h1 .ln:nth-child(1) > span{ animation-delay:.08s }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.19s }
.hero h1 .ln:nth-child(3) > span{ animation-delay:.30s }

.hero__sub{ max-width:48ch; margin-bottom:1.9rem; opacity:0; animation:fadeUp .8s var(--ease-out) .5s forwards }
.hero__acts{ display:flex; gap:.7rem; flex-wrap:wrap; opacity:0; animation:fadeUp .8s var(--ease-out) .62s forwards }
.hero__meta{
  margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  display:flex; gap:clamp(1.2rem,3vw,2.4rem); flex-wrap:wrap;
  opacity:0; animation:fadeUp .8s var(--ease-out) .78s forwards;
}
.hero__meta b{ display:block; font-family:var(--display); font-size:1.45rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
.hero__meta span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--muted); display:block; margin-top:.4rem }

.hero__visual{ position:relative; opacity:0; animation:fadeUp 1s var(--ease-out) .3s forwards }
.hero__visual > img{
  width:100%; border:1px solid var(--rule); border-radius:3px;
  aspect-ratio:4/3.3; object-fit:cover;
  box-shadow:0 30px 60px -46px rgba(13,27,62,.55);
}
.hero__visual .docket{
  position:absolute; right:clamp(-22px,-1.6vw,-8px); bottom:clamp(-40px,-3vw,-24px);
  width:min(330px, 68%);
}

/* --- about --------------------------------------------------------------- */
.about__top{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2rem,5vw,4.4rem); align-items:center }
.about__art{ border:1px solid var(--rule); border-radius:3px; overflow:hidden }
.approach{ margin-top:clamp(2.6rem,5vw,4rem); display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule) }
.appr{ padding:1.7rem 1.5rem 1.7rem 0; border-right:1px solid var(--rule); position:relative }
.appr:last-child{ border-right:0 }
.appr::before{ content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--field); transition:width .8s var(--ease-out) }
.appr.is-lit::before{ width:calc(100% - 1.5rem) }
.appr h3{ margin-bottom:.5rem }
.appr p{ font-size:.89rem; color:var(--muted); margin:0; max-width:30ch }

/* --- services ledger ------------------------------------------------------ */
.ledger{ border-top:1px solid var(--rule) }
.svc{ border-bottom:1px solid var(--rule) }
.svc__btn{
  display:grid; grid-template-columns:56px 1fr auto; gap:1.4rem; align-items:center;
  padding:1.5rem 0; transition:padding-left .45s var(--ease);
}
.svc__btn:hover{ padding-left:.9rem }
.svc__no{ font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.06em }
.svc__ttl{ font-family:var(--display); font-size:clamp(1.18rem,2.3vw,1.65rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; transition:color .3s }
.svc__plus{ width:34px; height:34px; border:1px solid var(--rule); border-radius:50%; position:relative; flex:none; transition:background .35s, border-color .35s, transform .45s var(--ease) }
.svc__plus::before,.svc__plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--ink); transition:background .3s }
.svc__plus::before{ width:12px; height:1.5px }
.svc__plus::after{ width:1.5px; height:12px }
.svc[open] .svc__plus{ background:var(--field); border-color:var(--field); transform:rotate(135deg) }
.svc[open] .svc__plus::before,.svc[open] .svc__plus::after{ background:var(--white) }
.svc[open] .svc__ttl{ color:var(--field) }
.svc__inner{ display:grid; grid-template-columns:56px 1.1fr 1fr; gap:1.4rem 2rem; padding:0 0 2.2rem; align-items:start }
.svc__body{ grid-column:2 }
.svc__body p{ color:var(--muted); font-size:.94rem; max-width:46ch }
.svc__tags{ display:flex; flex-wrap:wrap; gap:.42rem; margin-top:1.1rem }
.svc__art{ grid-column:3; border:1px solid var(--rule-soft); border-radius:3px; overflow:hidden }

/* --- pipeline (one file, five stages) -------------------------------------- */
.pipeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); margin-top:clamp(2.2rem,4vw,3.2rem) }
.stage{ background:var(--ink); padding:clamp(1.4rem,2.2vw,1.9rem); position:relative; transition:background .45s var(--ease) }
.stage:hover{ background:var(--ink-2) }
.stage__no{ font-family:var(--mono); font-size:.72rem; color:var(--muted-on-ink); letter-spacing:.08em }
.stage__bar{ width:34px; height:3px; background:var(--signal); margin:.7rem 0 1.1rem; transform-origin:left; transform:scaleX(0); transition:transform .6s var(--ease-out) }
.pipeline.is-lit .stage__bar{ transform:scaleX(1) }
.pipeline.is-lit .stage:nth-child(1) .stage__bar{ transition-delay:.1s }
.pipeline.is-lit .stage:nth-child(2) .stage__bar{ transition-delay:.28s }
.pipeline.is-lit .stage:nth-child(3) .stage__bar{ transition-delay:.46s }
.pipeline.is-lit .stage:nth-child(4) .stage__bar{ transition-delay:.64s }
.pipeline.is-lit .stage:nth-child(5) .stage__bar{ transition-delay:.82s }
.stage h3{ margin-bottom:.55rem }
.stage p{ font-size:.855rem; color:var(--muted-on-ink); margin:0; line-height:1.6 }
.stage__auto{
  display:inline-block; margin-top:1rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.1em; color:var(--signal); border:1px solid rgba(247,128,30,.4);
  background:rgba(247,128,30,.1); border-radius:100px; padding:.28rem .6rem;
}

/* --- office library (interactive) ------------------------------------------ */
.library__top{ max-width:64ch }
.picker{ display:inline-flex; gap:.2rem; background:var(--paper-2); border:1px solid var(--rule); border-radius:100px; padding:.28rem; margin-top:1.6rem }
.picker button{
  border:0; background:transparent; cursor:pointer;
  padding:.6rem 1.3rem; border-radius:100px; font-size:.9rem; font-weight:500;
  color:var(--muted); transition:background .35s var(--ease), color .35s var(--ease);
}
.picker button[aria-selected="true"]{ background:var(--field); color:var(--white) }
.picker-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; color:var(--muted); margin:2.2rem 0 0 }

.outcomes{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1rem }
.outcome{
  border:1px solid var(--rule); border-radius:3px; background:var(--paper-2);
  padding:clamp(1.3rem,2.2vw,1.8rem); transition:border-color .4s var(--ease), background .4s var(--ease);
}
.outcome.is-saved{ border-color:var(--field); background:var(--white) }
.outcome__head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.9rem }
.outcome__head h3{ display:flex; align-items:center; gap:.55rem }
.outcome__status{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--muted) }
.outcome.is-saved .outcome__status{ color:var(--field) }
.outcome p{ font-size:.92rem; color:var(--muted); margin:0; min-height:3.2em }
.outcome__gain{
  font-family:var(--mono); font-size:.76rem; color:var(--field);
  margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--rule);
  display:block; opacity:0; transition:opacity .4s var(--ease);
}
.outcome.is-saved .outcome__gain{ opacity:1 }

/* --- desks --------------------------------------------------------------- */
.desks{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:clamp(2.2rem,4vw,3.2rem) }
.desk{
  border:1px solid var(--rule); border-radius:3px; background:var(--paper-2);
  padding:1.5rem 1.3rem; position:relative; overflow:hidden;
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.desk:hover{ transform:translateY(-6px); background:var(--white); border-color:var(--field) }
.desk__ico{ width:34px; height:34px; stroke:var(--field); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1.1rem }
.desk h3{ font-size:1.02rem; margin-bottom:.5rem }
.desk p{ font-size:.855rem; color:var(--muted); margin:0; line-height:1.6 }
.desk::after{ content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--signal); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease-out) }
.desk:hover::after{ transform:scaleY(1) }

/* --- the report ---------------------------------------------------------- */
.report{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.4rem); align-items:center }
.checklist{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:.9rem }
.checklist li{ display:grid; grid-template-columns:22px 1fr; gap:.8rem; align-items:start; font-size:.94rem }
.checklist svg{ width:20px; height:20px; margin-top:2px; flex:none }
.checklist circle{ fill:var(--field) }
.checklist path{ stroke:var(--white); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round }

.doc{ background:var(--white); border:1px solid var(--rule); border-radius:3px; box-shadow:0 34px 64px -50px rgba(13,27,62,.6) }
.doc__head{ display:flex; align-items:center; gap:.9rem; padding:1.2rem 1.4rem; border-bottom:2px solid var(--field) }
.doc__head img{ width:38px; height:38px }
.doc__head b{ font-family:var(--display); font-size:1rem; font-weight:600; display:block; letter-spacing:-.015em }
.doc__head small{ font-size:.74rem; color:var(--muted) }
.doc__rows{ margin:0; padding:.4rem 1.4rem }
.doc__row{ display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-bottom:1px solid var(--rule-soft); font-size:.88rem }
.doc__row:last-child{ border-bottom:0 }
.doc__row dt{ color:var(--muted) }
.doc__row dd{ margin:0; font-weight:500; text-align:right }
.doc__row dd.mono{ font-family:var(--mono); font-size:.8rem }
.doc__verdict{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:.6rem 1.4rem 1.4rem; padding:.85rem 1.1rem; background:var(--field); color:var(--white); border-radius:2px;
}
.doc__verdict b{ font-family:var(--display); font-size:1rem; letter-spacing:.08em }
.doc__verdict small{ font-size:.72rem; opacity:.85 }

/* --- why grid ------------------------------------------------------------ */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(2.2rem,4vw,3.2rem) }
.why__cell{ background:var(--paper-2); padding:clamp(1.6rem,2.6vw,2.2rem); position:relative; overflow:hidden; transition:background .45s var(--ease) }
.why__cell:hover{ background:var(--white) }
.why__cell .ico{ width:34px; height:34px; margin-bottom:1.1rem; stroke:var(--field); fill:none; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round }
.why__cell h3{ margin-bottom:.6rem }
.why__cell p{ font-size:.89rem; color:var(--muted); margin:0 }
.why__cell::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out) }
.why__cell:hover::after{ transform:scaleX(1) }

/* --- counters ------------------------------------------------------------ */
.counters{ background:var(--field); color:var(--white); padding-block:clamp(3rem,5vw,4.4rem) }
.counters .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem }
.ct b{ display:block; font-family:var(--display); font-size:clamp(2.2rem,4.4vw,3.3rem); font-weight:600; letter-spacing:-.035em; line-height:1 }
.ct span{ display:block; font-size:.85rem; color:rgba(255,255,255,.78); margin-top:.6rem; max-width:22ch }

/* --- industries ---------------------------------------------------------- */
.ind-wrap{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.4rem); align-items:center }
.ind-list{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
.ind{ background:var(--paper); display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:center; padding:1.5rem 1.6rem; transition:background .4s var(--ease), padding-left .4s var(--ease) }
.ind:hover{ background:var(--white); padding-left:2.1rem }
.ind__mark{ width:44px; height:44px; border-radius:2px; background:rgba(29,90,224,.08); display:grid; place-items:center; flex:none }
.ind__mark img{ width:26px; height:26px }
.ind h3{ font-size:1.04rem; margin-bottom:.25rem }
.ind p{ font-size:.87rem; color:var(--muted); margin:0 }

/* --- testimonials -------------------------------------------------------- */
.quotes{ position:relative; margin-top:clamp(2rem,4vw,3rem) }
.quotes__viewport{ overflow:hidden }
.quotes__track{ display:flex; transition:transform .6s var(--ease-out) }
.quote{ flex:0 0 100%; padding-right:1px }
.quote__body{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:3px;
  padding:clamp(1.8rem,3.4vw,3rem);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:start;
}
.quote__mark{ width:64px; height:60px; flex:none; opacity:.9 }
.quote blockquote{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.36; letter-spacing:-.018em;
}
.quote figcaption{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--rule); font-size:.87rem; color:var(--muted) }
.quote figcaption b{ display:block; color:var(--ink); font-weight:500 }
.quotes__nav{ display:flex; align-items:center; gap:.7rem; margin-top:1.6rem }
.quotes__nav button{
  width:44px; height:44px; border:1px solid var(--rule); background:transparent;
  border-radius:50%; cursor:pointer; display:grid; place-items:center;
  transition:background .3s, border-color .3s, color .3s;
}
.quotes__nav button:hover{ background:var(--ink); border-color:var(--ink); color:var(--white) }
.quotes__nav svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.quotes__dots{ display:flex; gap:.4rem; margin-left:.6rem }
.quotes__dots button{ width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--rule); cursor:pointer; transition:background .3s, width .3s }
.quotes__dots button[aria-current="true"]{ background:var(--field); width:22px; border-radius:100px }

/* --- team ---------------------------------------------------------------- */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:clamp(2.2rem,4vw,3.2rem) }
.member{ position:relative; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--paper-2) }
.member__photo{ position:relative; overflow:hidden; aspect-ratio:4/4.6 }
.member__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out) }
.member:hover .member__photo img{ transform:scale(1.05) }
.member__body{ padding:1.25rem 1.35rem }
.member__body b{ display:block; font-family:var(--display); font-size:1.1rem; font-weight:600; letter-spacing:-.018em }
.member__role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--field); margin-top:.4rem; display:block }
.member__body p{ font-size:.86rem; color:var(--muted); margin:.8rem 0 0; line-height:1.6 }

/* --- careers ------------------------------------------------------------- */
.car{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.4rem); align-items:center }
.roles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:1.8rem }
.role{ background:var(--paper); padding:1.05rem 1.2rem; font-size:.9rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:background .35s }
.role:hover{ background:var(--white) }
.role em{ font-family:var(--mono); font-style:normal; font-size:.62rem; letter-spacing:.1em; color:var(--muted) }

/* --- split (ops / quality) ------------------------------------------------ */
.split{ display:grid; grid-template-columns:1fr 1fr }
.split > div{ padding:clamp(2.6rem,5vw,4.4rem) clamp(1.6rem,4vw,3.4rem) }
.split .split__a{ background:var(--ink-2) }
.split .split__b{ background:var(--ink) }
.split h2{ font-size:clamp(1.55rem,2.7vw,2.05rem); margin-bottom:1rem }
.split p{ color:var(--muted-on-ink); font-size:.94rem }
.split__art{ margin-top:1.8rem; border:1px solid rgba(255,255,255,.14); border-radius:3px; overflow:hidden }

/* --- commitment ---------------------------------------------------------- */
.commit{ text-align:center }
.commit blockquote{ margin:0 auto; max-width:22ch; font-family:var(--display); font-weight:500; font-size:clamp(2rem,4.5vw,3.3rem); line-height:1.1; letter-spacing:-.028em }
.commit__after{ max-width:56ch; margin:1.8rem auto 0; color:var(--muted); font-size:1rem }

/* --- faq ----------------------------------------------------------------- */
.faq-list{ border-top:1px solid var(--rule); max-width:880px }
.q{ border-bottom:1px solid var(--rule) }
.q__btn{ display:flex; justify-content:space-between; gap:1.4rem; align-items:center; padding:1.25rem 0; font-family:var(--display); font-size:1.05rem; font-weight:500; letter-spacing:-.012em; transition:color .3s }
.q__btn:hover{ color:var(--field) }
.q__btn .ch{ width:11px; height:11px; border-right:1.6px solid var(--ink); border-bottom:1.6px solid var(--ink); transform:rotate(45deg); flex:none; margin-bottom:4px; transition:transform .45s var(--ease), border-color .3s }
.q[open] .q__btn .ch{ transform:rotate(-135deg); border-color:var(--field); margin-bottom:-4px }
.q .acc-panel p{ padding-bottom:1.4rem; margin:0; color:var(--muted); font-size:.94rem; max-width:68ch }

/* --- contact ------------------------------------------------------------- */
.ct-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.2rem,5vw,4.4rem) }
.ct-info{ display:grid; gap:1.4rem; margin-top:2.2rem }
.ct-item small{ display:block; font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; color:var(--signal); margin-bottom:.4rem }
.ct-item p,.ct-item a{ margin:0; font-size:1rem; color:#DCE6F5 }
.ct-item a:hover{ color:var(--signal) }
.ct-legal{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--muted-on-ink); line-height:2 }