/* ==========================================================================
   DESIGN TO 3D — site.css
   Hero, sections, cards, sliders, forms, page components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home hero
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(5,8,14,.96) 0%,rgba(5,8,14,.9) 26%,rgba(5,8,14,.42) 48%,rgba(5,8,14,.06) 66%,transparent 80%),
    linear-gradient(to top,var(--bg) 1%,rgba(5,8,14,.2) 24%,transparent 54%);
}
@media (max-width:1100px){
  .hero::after{
    background:
      radial-gradient(ellipse 90% 62% at 50% 46%,rgba(5,8,14,.9),rgba(5,8,14,.6) 52%,rgba(5,8,14,.35) 78%),
      linear-gradient(to top,var(--bg) 1%,rgba(5,8,14,.3) 26%,transparent 60%);
  }
}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(56px,9vh,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,4vw,64px);align-items:center}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr}}

.hero h1{margin-bottom:.34em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(105%);animation:lineUp 1.15s var(--e) forwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.10s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.20s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.30s}
@keyframes lineUp{to{transform:none}}

.hero-sub{max-width:54ch;font-size:clamp(1rem,1.3vw,1.13rem);color:var(--tx-2)}
.fade-1,.fade-2,.fade-3,.fade-4{opacity:0;animation:fadeUp .95s var(--e) forwards}
.fade-1{animation-delay:.06s}
.fade-2{animation-delay:.5s}
.fade-3{animation-delay:.64s}
.fade-4{animation-delay:.82s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero-side{display:flex;flex-direction:column;gap:14px}
@media (max-width:1100px){.hero-side{display:none}}
.hero-card{
  border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;
  background:linear-gradient(160deg,rgba(14,24,38,.82),rgba(6,10,17,.66));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 50px -30px rgba(0,0,0,.9);
}
.hero-kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-card .k{font-family:var(--f-display);font-size:2.3rem;font-weight:600;letter-spacing:-.045em;line-height:1}
.hero-card .k em{font-style:normal;color:var(--orange-lt);font-size:1.3rem;vertical-align:super}
.hero-card .v{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin-top:9px}
.hero-flags{display:flex;flex-wrap:wrap;gap:8px}

.hero-scroll{
  position:absolute;left:var(--gut);bottom:24px;z-index:3;display:flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-3);
}
.hero-scroll .track{width:1px;height:44px;background:var(--line-2);position:relative;overflow:hidden}
.hero-scroll .track::after{content:"";position:absolute;inset:0;background:var(--orange);animation:scrollDot 2.2s var(--e-io) infinite}
@keyframes scrollDot{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero-badge{position:absolute;right:var(--gut);bottom:24px;z-index:3;display:flex;align-items:center;gap:10px}
@media (max-width:940px){.hero-scroll,.hero-badge{display:none}}

/* --------------------------------------------------------------------------
   2. Inner page hero
   -------------------------------------------------------------------------- */
.phero{position:relative;padding-top:calc(var(--nav-h) + clamp(52px,8vw,110px));padding-bottom:clamp(46px,7vw,88px);overflow:hidden}
.phero h1{font-size:clamp(2.5rem,6vw,4.8rem);margin-bottom:.3em}
.phero .lead{max-width:60ch}
.crumb{display:flex;gap:.6em;align-items:center;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);margin-bottom:1.5rem}
.crumb a:hover{color:var(--orange-lt)}
.crumb i{font-style:normal;opacity:.45}
.phero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,60px);align-items:end}
@media (max-width:920px){.phero-grid{grid-template-columns:1fr;align-items:start}}

/* --------------------------------------------------------------------------
   3. Marquee (logos / tools)
   -------------------------------------------------------------------------- */
.mq{position:relative;overflow:hidden;padding-block:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;gap:0;animation:mq 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;gap:clamp(28px,4vw,60px);padding-right:clamp(28px,4vw,60px)}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{
  font-family:var(--f-display);font-size:clamp(.98rem,1.3vw,1.22rem);font-weight:500;letter-spacing:-.015em;
  color:var(--tx-3);white-space:nowrap;display:flex;align-items:center;gap:.6em;
  transition:color .35s ease;
}
.mq-item:hover{color:var(--tx)}
.mq-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--navy-lt);opacity:.7;flex:none}
.mq-rev .mq-track{animation-direction:reverse}
.bg-paper .mq-item{color:#8A94A0}
.bg-paper .mq-item:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   4. Service cards
   -------------------------------------------------------------------------- */
.card{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.042),rgba(255,255,255,.008));
  padding:clamp(24px,2.4vw,34px);
  transition:border-color .5s ease,transform .6s var(--e),background .5s ease;
}
.card::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(234,99,1,.16),transparent 62%);
  transition:opacity .5s ease;
}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}
.card:hover::before{opacity:1}
.card .num{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--tx-3);
  display:block;margin-bottom:20px;
}
.card h3{margin-bottom:.5em}
.card p{font-size:.945rem;line-height:1.66}
.card-ico{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(150deg,rgba(30,107,184,.28),rgba(234,99,1,.16));
  border:1px solid var(--line);color:var(--orange-lt);
  transition:transform .55s var(--e),color .4s ease;
}
.card:hover .card-ico{transform:translateY(-3px) rotate(-4deg);color:#fff}
.card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.card-tags span{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);border:1px solid var(--line);border-radius:100px;padding:.42em .8em;
}
.card-link{display:inline-flex;align-items:center;gap:.5em;margin-top:22px;font-family:var(--f-display);font-weight:600;font-size:.85rem;color:var(--orange-lt)}
.card-link .ico{transition:transform .45s var(--e)}
.card:hover .card-link .ico{transform:translate(4px,-4px)}

.bg-paper .card{background:rgba(255,255,255,.66);border-color:rgba(10,15,22,.1)}
.bg-paper .card:hover{border-color:rgba(10,15,22,.22)}
.bg-paper .card .num,.bg-paper .card-tags span{color:#7B8794}
.bg-paper .card-tags span{border-color:rgba(10,15,22,.13)}
.bg-paper .card-ico{background:linear-gradient(150deg,rgba(15,75,138,.14),rgba(234,99,1,.12));border-color:rgba(10,15,22,.1);color:var(--orange-deep)}
.bg-paper .card:hover .card-ico{color:var(--navy)}
.bg-paper .card-link{color:var(--orange-deep)}

/* feature card variants */
.card-tall{grid-row:span 2}
.card-wide{grid-column:span 2}
@media (max-width:1040px){.card-wide{grid-column:span 2}}
@media (max-width:660px){.card-wide,.card-tall{grid-column:auto;grid-row:auto}}
.card-accent{background:linear-gradient(150deg,rgba(15,75,138,.42),rgba(5,8,14,.2));border-color:rgba(30,107,184,.34)}

/* --------------------------------------------------------------------------
   5. Sketch → 3D compare slider
   -------------------------------------------------------------------------- */
.compare{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  /* matches the render's native 1626x967 so the traced elevation lines up
     with the photograph pixel-for-pixel as the handle moves */
  aspect-ratio:1626/967;background:#0A1220;touch-action:pan-y;cursor:ew-resize;user-select:none;
}
@media (max-width:700px){.compare{aspect-ratio:4/3.4}}
.compare .layer{position:absolute;inset:0}
.compare .layer svg,.compare .layer picture,.compare .layer img{width:100%;height:100%;display:block}
.compare .layer img{object-fit:cover;object-position:center}
.compare .layer-b{clip-path:inset(0 0 0 var(--split,50%))}
.compare .handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:rgba(255,255,255,.85);
  z-index:4;transform:translateX(-1px);box-shadow:0 0 22px rgba(255,255,255,.4);
}
.compare .knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:transform .35s var(--e);
}
.compare:hover .knob{transform:translate(-50%,-50%) scale(1.08)}
.compare .tagline{
  position:absolute;z-index:5;bottom:16px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.55em 1em;border-radius:100px;background:rgba(5,8,14,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);
}
.compare .tagline.l{left:16px;color:var(--navy-glow)}
.compare .tagline.r{right:16px;color:var(--orange-lt)}

/* --------------------------------------------------------------------------
   6. Process timeline
   -------------------------------------------------------------------------- */
.steps{position:relative;display:flex;flex-direction:column;gap:0}
.step{
  display:grid;grid-template-columns:104px 1fr minmax(0,.85fr);gap:clamp(18px,3vw,48px);
  padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--line);
  align-items:start;transition:background .5s ease;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step:hover{background:rgba(255,255,255,.022)}
.bg-paper .step{border-color:rgba(10,15,22,.12)}
.bg-paper .step:hover{background:rgba(255,255,255,.5)}
@media (max-width:860px){.step{grid-template-columns:64px 1fr;gap:16px}.step .step-note{grid-column:2}}
.step-n{
  font-family:var(--f-display);font-size:clamp(2rem,3.6vw,3.1rem);font-weight:600;letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);transition:color .5s ease,-webkit-text-stroke-color .5s ease;
}
.step:hover .step-n{color:var(--orange);-webkit-text-stroke-color:transparent}
.bg-paper .step-n{-webkit-text-stroke-color:rgba(10,15,22,.3)}
.step h3{margin-bottom:.45em}
.step p{font-size:.95rem;margin:0}
.step-note{display:flex;flex-direction:column;gap:9px}
.step-note span{
  display:flex;gap:.6em;align-items:baseline;font-size:.855rem;color:var(--tx-3);
}
.step-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--navy-lt);flex:none;transform:translateY(-2px)}
.bg-paper .step-note span{color:#69757F}

/* --------------------------------------------------------------------------
   7. Stats
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--bg);padding:clamp(24px,3vw,40px);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--navy),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.stat:hover::after{transform:scaleX(1)}
.stat .k{font-family:var(--f-display);font-size:clamp(2.3rem,4.2vw,3.5rem);font-weight:600;letter-spacing:-.05em;line-height:1;display:flex;align-items:baseline;gap:.06em}
.stat .k em{font-style:normal;color:var(--orange);font-size:.5em}
.stat .v{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;color:var(--tx-3);margin-top:14px}
.stat p{font-size:.86rem;margin-top:10px;color:var(--tx-3)}
.bg-paper .stats{background:rgba(10,15,22,.12);border-color:rgba(10,15,22,.12)}
.bg-paper .stat{background:var(--paper)}
.bg-paper .stat .v,.bg-paper .stat p{color:#7B8794}

/* --------------------------------------------------------------------------
   8. Region / global reach
   -------------------------------------------------------------------------- */
.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px)}
@media (max-width:1040px){.regions{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.regions{grid-template-columns:1fr}}
.region{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);background:linear-gradient(170deg,rgba(255,255,255,.04),rgba(255,255,255,.006));
  transition:transform .6s var(--e),border-color .5s ease;
  display:flex;flex-direction:column;min-height:100%;
}
.region:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}
/* Country codes rather than flag emoji: regional-indicator glyphs fall back to
   bare letter pairs on Windows, and an approximated national flag is worse
   than none. These read the same on every platform. */
.cc{
  display:inline-grid;place-items:center;min-width:27px;height:18px;padding:0 5px;
  border:1px solid var(--line-2);border-radius:3px;background:rgba(255,255,255,.06);
  font-family:var(--f-mono);font-size:.58rem;font-style:normal;font-weight:500;
  letter-spacing:.06em;color:var(--tx-2);flex:none;
}
.bg-paper .cc{border-color:rgba(10,15,22,.18);background:rgba(10,15,22,.04);color:#4A5867}
.region-flag{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:18px;
  border:1px solid rgba(234,99,1,.42);border-radius:11px;
  background:linear-gradient(150deg,rgba(234,99,1,.16),rgba(30,107,184,.12));
  font-family:var(--f-display);font-size:.95rem;font-weight:700;letter-spacing:.04em;
  color:var(--orange-lt);
  transition:transform .55s var(--e);
}
.region:hover .region-flag{transform:translateY(-3px) rotate(-4deg)}
.region h3{font-size:1.28rem;margin-bottom:.3em}
.region .zone{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-lt);margin-bottom:16px}
.region ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.86rem;color:var(--tx-3)}
.region ul li{display:flex;gap:.65em;align-items:baseline}
.region ul li::before{content:"→";color:var(--navy-glow);flex:none;font-size:.8em}
.region .clock{
  margin-top:auto;padding-top:20px;font-family:var(--f-mono);font-size:.74rem;color:var(--tx-2);
  display:flex;align-items:center;gap:.6em;letter-spacing:.06em;
}
.region .clock .dot{width:6px;height:6px;border-radius:50%;background:#34D399}

/* --------------------------------------------------------------------------
   9. Portfolio
   -------------------------------------------------------------------------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,42px)}
.pf-filters button{
  border:1px solid var(--line);background:transparent;border-radius:100px;cursor:pointer;
  padding:.62em 1.15em;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);transition:color .35s ease,border-color .35s ease,background .35s ease;
}
.pf-filters button:hover{color:var(--tx);border-color:var(--line-2)}
.pf-filters button.is-on{background:var(--orange);border-color:var(--orange);color:#fff}

.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
@media (max-width:1040px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf{
  position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--bg-3);aspect-ratio:4/3.15;display:block;
  transition:transform .7s var(--e),border-color .5s ease,opacity .5s ease;
}
.pf.is-hidden{display:none}
.pf:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22)}
/* isolate: keeps the photo's z-index inside the artwork layer, so the caption
   scrim and text still paint above it */
.pf .art{position:absolute;inset:0;z-index:0;isolation:isolate;transition:transform 1.1s var(--e)}
.pf:hover .art{transform:scale(1.055)}
.pf .art svg{width:100%;height:100%}
.pf .veil{z-index:1}

/* ---- real photography, with the line-art symbol as a fallback -------------
   The drawn symbol sits underneath; the photo fades in over it once it has
   genuinely decoded, so a project still missing from assets/projects/ shows
   artwork rather than a broken-image box.

   Faded with OPACITY, never display:none — a display:none image has no box,
   so it never intersects the viewport and loading="lazy" would never fire it.
   That deadlocks: hidden until loaded, never loaded because hidden. */
.pf .art img[data-fallback],
.frame > img[data-fallback]{opacity:0;transition:opacity .6s var(--e)}
.pf .art img.is-ok,
.frame > img.is-ok{opacity:1}

.pf .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.pf .art > svg{position:absolute;inset:0;z-index:1}

/* the image defines the frame's height; the fallback overlays it */
.frame > img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;position:relative;z-index:2}
.frame > img[data-fallback] ~ svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pf .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,7,12,.94) 4%,rgba(4,7,12,.35) 42%,transparent 72%)}
.pf .meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,26px);z-index:2}
.pf .meta .cat{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;color:var(--orange-lt);margin-bottom:9px}
.pf .meta h3{font-size:1.17rem;margin:0 0 6px}
.pf .meta .loc{font-size:.82rem;color:var(--tx-3);margin:0}
.pf .go{
  position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(-8px) scale(.9);transition:all .5s var(--e);
}
.pf:hover .go{opacity:1;transform:none}
.pf-tall{grid-row:span 2;aspect-ratio:auto}
@media (max-width:640px){.pf-tall{grid-row:auto;aspect-ratio:4/3.15}}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.quotes{position:relative;overflow:hidden}
.quotes-track{display:flex;transition:transform .85s var(--e)}
.quote{flex:0 0 100%;padding-right:0}
.quote blockquote{
  margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-.028em;line-height:1.28;
  font-size:clamp(1.4rem,3.1vw,2.5rem);color:var(--tx);text-wrap:balance;
}
.bg-paper .quote blockquote{color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,38px)}
.quote .av{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy),var(--orange));color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:-.02em;
}
.quote .who b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.quote .who span{font-size:.82rem;color:var(--tx-3)}
.quotes-nav{display:flex;gap:10px;margin-top:clamp(26px,3vw,40px);align-items:center}
.qbtn{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--tx-2);transition:all .4s var(--e);
}
.qbtn:hover{border-color:transparent;background:var(--orange);color:#fff;transform:translateY(-2px)}
.bg-paper .qbtn{border-color:rgba(10,15,22,.16);color:#4A5867}
.qdots{display:flex;gap:7px;margin-left:12px}
.qdots i{width:22px;height:2px;background:var(--line-2);border-radius:2px;cursor:pointer;transition:background .4s ease,width .4s var(--e)}
.qdots i.is-on{background:var(--orange);width:34px}
.bg-paper .qdots i{background:rgba(10,15,22,.16)}

/* --------------------------------------------------------------------------
   11. Accordion / FAQ
   -------------------------------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.bg-paper .acc,.bg-paper .acc-item{border-color:rgba(10,15,22,.12)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{
  width:100%;background:transparent;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:20px;padding:clamp(20px,2.2vw,28px) 0;
  font-family:var(--f-display);font-size:clamp(1.02rem,1.6vw,1.24rem);font-weight:500;letter-spacing:-.02em;
  color:var(--tx);transition:color .35s ease;
}
.bg-paper .acc-q{color:var(--ink)}
.acc-q:hover{color:var(--orange-lt)}
.acc-q .sign{margin-left:auto;position:relative;width:17px;height:17px;flex:none}
.acc-q .sign::before,.acc-q .sign::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .45s var(--e),opacity .3s ease}
.acc-q .sign::before{left:0;right:0;top:8px;height:1.5px}
.acc-q .sign::after{top:0;bottom:0;left:8px;width:1.5px}
.acc-item.is-open .acc-q .sign::after{transform:rotate(90deg);opacity:0}
.acc-item.is-open .acc-q{color:var(--orange-lt)}
.acc-a{overflow:hidden;height:0;transition:height .55s var(--e)}
.acc-a > div{padding-bottom:clamp(20px,2.2vw,28px);max-width:78ch;font-size:.96rem;color:var(--tx-2)}
.bg-paper .acc-a > div{color:#4A5867}

/* --------------------------------------------------------------------------
   12. Split feature block
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.split.is-rev > *:first-child{order:2}
@media (max-width:920px){.split{grid-template-columns:1fr;gap:34px}.split.is-rev > *:first-child{order:0}}
.frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#0C1826,#060A11);
}
.frame svg{width:100%;height:auto;display:block}
.frame-label{
  position:absolute;left:16px;top:16px;z-index:2;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;color:var(--tx-2);
  background:rgba(5,8,14,.6);border:1px solid var(--line);border-radius:100px;padding:.5em 1em;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--tx-2)}
.bg-paper .checks li{color:#42515F}
.checks li svg{flex:none;margin-top:3px;color:var(--orange)}

/* --------------------------------------------------------------------------
   13. Capability / AI section
   -------------------------------------------------------------------------- */
.cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:920px){.cap{grid-template-columns:1fr}}
.cap > div{background:var(--bg-2);padding:clamp(26px,3vw,40px);transition:background .5s ease}
.cap > div:hover{background:var(--bg-3)}
.cap h4{margin-bottom:.55em;font-size:1.06rem}
.cap p{font-size:.92rem;margin:0}
.cap .badge{
  display:inline-block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--navy-glow);border:1px solid rgba(59,147,224,.34);border-radius:100px;padding:.4em .8em;margin-bottom:18px;
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(140deg,#0B2E52 0%,#0F4B8A 42%,#C64F00 118%)}
.cta .shell{position:relative;z-index:2}
.cta h2{font-size:clamp(2.2rem,5.4vw,4.3rem)}
.cta p{color:rgba(255,255,255,.82)}
.cta-rings{position:absolute;inset:0;z-index:1;opacity:.28;pointer-events:none}
.cta-rings i{position:absolute;border:1px solid rgba(255,255,255,.4);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form{display:grid;gap:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.f-row{grid-template-columns:1fr}}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;
  padding:.95em 1.05em;font-size:.95rem;color:var(--tx);
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
  appearance:none;-webkit-appearance:none;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C7C90' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1em center;padding-right:2.6em}
.field select option{background:#0B1421;color:var(--tx)}
.field textarea{resize:vertical;min-height:132px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#4E5C6E}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:rgba(234,99,1,.65);background:rgba(255,255,255,.05);box-shadow:0 0 0 4px rgba(234,99,1,.1)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#E0534F}
.field .err{font-size:.76rem;color:#FF8A86;display:none}
.field.has-error .err{display:block}
.form-note{font-size:.8rem;color:var(--tx-3)}
.form-ok{
  display:none;border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.08);
  border-radius:var(--r);padding:20px 22px;
}
.form-ok.is-on{display:block}
.form-ok b{color:#6EE7B7;display:block;margin-bottom:6px;font-family:var(--f-display)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{
  display:inline-block;cursor:pointer;border:1px solid var(--line);border-radius:100px;
  padding:.6em 1.05em;font-size:.82rem;color:var(--tx-2);transition:all .35s var(--e);
}
.chip input:checked + span{background:var(--orange);border-color:var(--orange);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--orange-lt);outline-offset:2px}

/* contact info list */
.cinfo{display:flex;flex-direction:column;gap:2px}
.cinfo a,.cinfo div{
  display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--e);
}
.cinfo a:hover{padding-left:8px}
.cinfo .ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--orange-lt);flex:none}
.cinfo b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600}
.cinfo span{font-size:.86rem;color:var(--tx-3)}

/* --------------------------------------------------------------------------
   16. Misc
   -------------------------------------------------------------------------- */
.tick{display:flex;flex-wrap:wrap;gap:10px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
@media (max-width:1040px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team{grid-template-columns:1fr}}
.member{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);transition:transform .6s var(--e),border-color .5s ease}
.member:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}
.member .ph{aspect-ratio:1/1;background:linear-gradient(155deg,#10263E,#070C14);display:grid;place-items:center;position:relative;overflow:hidden}
.member .ph b{font-family:var(--f-display);font-size:2.6rem;font-weight:600;letter-spacing:-.05em;color:rgba(255,255,255,.14)}
.member .ph::after{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.member .bd{padding:20px 22px}
.member h4{margin-bottom:5px}
.member .role{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-lt)}

.note-box{border-left:2px solid var(--orange);padding:6px 0 6px 22px;color:var(--tx-2);font-size:.95rem}
.bg-paper .note-box{color:#42515F}

.badge-row{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);align-items:center}
.badge-item{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--tx-3)}
.badge-item svg{color:var(--navy-glow);flex:none}

.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);font-weight:500}
.tbl td{color:var(--tx-2)}
.tbl tr:hover td{color:var(--tx)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.bg-paper .tbl-wrap{border-color:rgba(10,15,22,.12)}
.bg-paper .tbl th,.bg-paper .tbl td{border-color:rgba(10,15,22,.1)}
.bg-paper .tbl td{color:#42515F}

.back-top{
  position:fixed;right:22px;bottom:22px;z-index:820;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(5,8,14,.72);color:var(--tx);cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .5s var(--e);
}
.back-top.is-on{opacity:1;visibility:visible;transform:none}
.back-top:hover{background:var(--orange);border-color:transparent}
@media (max-width:900px){.back-top{right:16px;bottom:16px;width:44px;height:44px}}

.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--navy-lt),var(--orange));z-index:950;width:0;transition:width .12s linear}