/* ============================================================
   AJ PROJECTS PARTNERS — site.css
   Imitates the QDT template: one rounded card on deep teal,
   ink/paper alternating sections, point-cloud signature.
   Mobile-first. 8pt grid. 44px min touch targets.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS  (SEO plan §4 item 1.8 — Core Web Vitals)
   ============================================================
   Previously loaded render-blocking from fonts.googleapis.com, which cost two
   extra third-party DNS+TLS handshakes (googleapis for the CSS, gstatic for the
   files) before a single glyph could be requested. Now first-party.

   All three families are VARIABLE fonts on a single `wght` axis, so each is ONE
   file covering every weight — the old CSS declared 11 @font-face blocks but
   they resolved to only 3 unique URLs. Files are Google's own latin-subset
   woff2, re-instanced with fontTools to clip the wght axis to the range this
   site actually uses (see the weight audit below). That clipping is where the
   byte savings come from, not from dropping weight declarations.

   Weights in use, verified by grepping every `font-weight` in this file and in
   all 11 HTML files, plus the browser-default bold on <strong>/<b>/<hN>/<th>:
     Schibsted Grotesk (--ff-display) 400,500,600,700  → axis clipped 400–700
     Inter             (--ff-body)    400,500,600,700  → axis clipped 400–700
     Geist Mono        (--ff-mono)    400,500          → axis clipped 400–500
   Inter 300 was requested from Google but NOTHING selects it — dropped.
   Geist Mono is deliberately capped at 500: bold-by-default mono elements
   (.footer h4, .dtable thead th) already clamp to 500 today, so keeping the cap
   preserves current rendering exactly rather than silently restyling them.

   unicode-range mirrors Google's `latin` subset verbatim. Characters outside it
   (← U+2190, → U+2192, ▾ U+25BE) fall through to the next family in the stack —
   which is exactly what happens on the live site today, since those codepoints
   are in no Google subset for these families either. No visual change.

   woff2 only: supported by every browser released since 2016.
   ------------------------------------------------------------ */

@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/schibsted-grotesk-latin-var.03d06576.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/inter-latin-var.c851b74b.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url(../assets/fonts/geist-mono-latin-var.ce467716.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --outer:#000000;
  --ink:#0B0B0C;
  --ink-2:#101113;
  --ink-3:#16181B;
  --paper:#FFFFFF;
  --paper-2:#F6F5F2;
  --teal:#1C8268;
  --teal-glow:#39C9A3;
  --line-dark:rgba(255,255,255,.08);
  --line-light:rgba(0,0,0,.09);
  --tx-on-dark:#F3F4F2;
  --tx-dim:rgba(243,244,242,.56);
  --tx-dimmer:rgba(243,244,242,.34);
  --tx-on-light:#0B0B0C;
  --tx-mid:#5A5C5E;
  --radius-card:22px;
  --radius:12px;
  --maxw:1280px;
  /* 8pt spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:80px; --s8:96px; --s9:128px; --s10:160px;
  --ff-display:"Schibsted Grotesk","Inter",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"Geist Mono","IBM Plex Mono",ui-monospace,monospace;
  --kicker-scale:1;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  font-family:var(--ff-body);
  background:var(--outer);
  color:var(--tx-on-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
canvas{display:block}

/* page-load wipe */
.load-wipe{
  position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.load-wipe span{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.3em;
  color:var(--tx-mid);text-transform:uppercase;
}

/* ---- the card shell ---- */
.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0;
  background:var(--ink);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
@media(min-width:1340px){ body{padding:28px} }

.container{
  width:100%;max-width:1120px;margin:0 auto;
  padding-left:var(--s3);padding-right:var(--s3);
}

/* section bases */
.section{padding:var(--s7) 0}
@media(min-width:901px){ .section{padding:var(--s9) 0} }
.sec-ink{background:var(--ink);color:var(--tx-on-dark)}
.sec-ink-2{background:var(--ink-2);color:var(--tx-on-dark)}
.sec-paper{background:var(--paper);color:var(--tx-on-light)}
.sec-paper-2{background:var(--paper-2);color:var(--tx-on-light)}

/* kicker / eyebrow pill */
.kicker{
  /* section label: same typeface as the section heading, at body-text size,
     inheriting the heading's alignment. No pill, so it sits flush left with
     the heading below it. */
  display:block;
  font-family:var(--ff-display);font-weight:500;font-size:1rem;
  letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:var(--s2);
  color:var(--tx-dim);
}
.sec-paper .kicker,.sec-paper-2 .kicker,.hero-bottom .kicker{color:var(--tx-mid)}

/* headings */
.h-display{
  font-family:var(--ff-display);font-weight:400;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(2rem,5.4vw,4.4rem);
}
.h2{
  font-family:var(--ff-display);font-weight:400;line-height:1.08;letter-spacing:-.018em;
  font-size:clamp(1.75rem,3.6vw,3rem);
}
.h3{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.01em}
.lead{font-size:clamp(1rem,1.3vw,1.18rem);color:var(--tx-dim);max-width:44ch}
.sec-paper .lead,.sec-paper-2 .lead{color:var(--tx-mid)}
.mono-i{font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;color:var(--teal-glow)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:13px 22px;border-radius:8px;font-weight:600;font-size:.94rem;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-dark);color:var(--tx-on-dark)}
.btn-ghost:hover{border-color:var(--teal-glow);color:#fff}
.sec-paper .btn-ghost,.sec-paper-2 .btn-ghost{border-color:var(--line-light);color:var(--ink)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,11,12,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s;
}
.nav--scrolled{background:rgba(11,11,12,.9);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo-img{height:clamp(22px,2.6vw,30px);width:auto;display:block}
.nav-logo b{font-family:var(--ff-display);font-weight:600;letter-spacing:.01em;color:#fff;font-size:.96rem}
.nav-logo i{width:1px;height:24px;background:var(--line-dark);display:inline-block}
.nav-logo small{font-style:italic;color:var(--tx-on-dark);font-size:.72rem;line-height:1.2;max-width:90px}
.nav-links{display:flex;align-items:center;gap:var(--s4);list-style:none}
.nav-links a{color:var(--tx-dim);font-size:.9rem;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{display:inline-flex}
.nav-burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-burger span{width:22px;height:1.5px;background:#fff;transition:.3s}
.nav-burger--open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger--open span:nth-child(2){opacity:0}
.nav-burger--open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================ HERO ============================ */
.hero{position:relative;background:var(--ink)}
.hero-top{
  position:relative;min-height:46vh;overflow:hidden;
  display:flex;align-items:stretch;
  background:radial-gradient(120% 140% at 70% 10%,#15ararara 0%,transparent 60%),
             linear-gradient(160deg,#0d2b34 0%,#0a1c25 45%,#0b0c0d 100%);
}
.hero-canvas-wrap{position:absolute;inset:0;opacity:.9}
.hero-canvas-wrap canvas{width:100%;height:100%}
.hero-top-inner{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  flex:1 1 auto;
  padding:120px var(--s3) var(--s6);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);
}
.hero-top-inner .hero-socials{align-self:flex-start}
.hero-eyebrow{font-family:var(--ff-display);font-weight:400;color:rgba(243,244,242,.9);font-size:clamp(1.7rem,4.4vw,2.8rem);line-height:1.08;letter-spacing:-.015em;max-width:13ch}
.hero-socials{display:flex;gap:10px}
.hero-socials a{
  width:40px;height:40px;border-radius:9px;border:1px solid var(--line-dark);
  display:grid;place-items:center;color:var(--tx-dim);transition:.25s;background:rgba(255,255,255,.02);
}
.hero-socials a:hover{color:#fff;border-color:var(--teal-glow);transform:translateY(-2px)}
.hero-socials svg{width:16px;height:16px}

.hero-bottom{background:var(--paper);position:relative;z-index:3}
.hero-bottom-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s3) var(--s7);
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:end;
}
.hero-headline{overflow:hidden}
.hero-headline .line{display:block;overflow:hidden}
.hero-headline .line>span{display:block}
.hero-sub{color:var(--tx-mid);max-width:42ch;margin-top:var(--s3);font-size:1.05rem}
.hero-cta-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}

/* ============================ PRODUCTS ============================ */
.prod-head{text-align:center;max-width:38ch;margin:0 auto var(--s6)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.prod-card{
  border:1px solid var(--line-dark);border-radius:16px;padding:var(--s3);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  transition:transform .35s ease,border-color .35s ease;overflow:hidden;
}
.prod-card:hover{transform:translateY(-5px);border-color:rgba(57,201,163,.4)}
.prod-canvas{width:100%;height:190px;margin-bottom:var(--s3)}
.prod-card h3{margin-bottom:8px;color:#fff}
.prod-card p{color:var(--tx-dim);font-size:.92rem;margin-bottom:var(--s3)}
.prod-link{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-glow);display:inline-flex;gap:8px}

/* ============================ PROBLEM ============================ */
.prob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s5)}
.prob-cell{border:1px solid var(--line-dark);border-radius:14px;padding:var(--s4);background:rgba(255,255,255,.015)}
.prob-cell .n{font-family:var(--ff-mono);font-size:.74rem;color:var(--teal-glow);letter-spacing:.14em}
.prob-cell p{margin-top:12px;font-size:1.02rem;color:var(--tx-on-dark)}

/* ============================ STORY / VALUES ============================ */
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:start}
.story-copy p{color:var(--tx-mid);margin-bottom:var(--s2);font-size:1.03rem}
.story-copy .sig{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-top:var(--s3)}
.values-card{border:1px solid var(--line-light);border-radius:18px;overflow:hidden}
.value-row{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-light);display:flex;gap:var(--s3);align-items:baseline}
.value-row:last-child{border-bottom:none}
.value-row .vi{font-family:var(--ff-mono);font-size:.78rem;color:var(--teal);min-width:34px}
.value-row h4{font-family:var(--ff-display);font-weight:500;font-size:1.12rem;margin-bottom:4px}
.value-row p{font-size:.9rem;color:var(--tx-mid)}

/* ============================ TECHNOLOGY (morphing accordion) ============================ */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:stretch}
.tech-left .h2{margin-bottom:var(--s3)}
.tech-select-label{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.14em;color:var(--tx-dimmer);text-transform:uppercase;margin:var(--s4) 0 var(--s2);border-bottom:1px solid var(--line-dark);padding-bottom:10px}
.tech-item{
  width:100%;text-align:left;display:flex;align-items:center;gap:14px;
  padding:16px 16px;border-radius:12px;color:var(--tx-dim);
  border:1px solid transparent;transition:.3s;min-height:44px;
}
.tech-item .dot{width:9px;height:9px;border-radius:50%;background:var(--tx-dimmer);transition:.3s}
.tech-item:hover{color:#fff}
.tech-item--active{background:linear-gradient(90deg,rgba(57,201,163,.12),transparent);border-color:var(--line-dark);color:#fff}
.tech-item--active .dot{background:var(--teal-glow);box-shadow:0 0 10px var(--teal-glow)}
.tech-panel{
  position:relative;border:1px solid var(--line-dark);border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%,rgba(57,201,163,.06),transparent 55%),#0c0d0f;
  padding:var(--s4);display:flex;flex-direction:column;min-height:420px;
}
.tech-canvas{flex:1 1 0;min-height:0;width:100%;display:block}
.tech-index{font-family:var(--ff-mono);font-size:.8rem;color:var(--tx-dimmer);letter-spacing:.1em}
.tech-panel-title{font-family:var(--ff-display);font-weight:500;font-size:1.4rem;color:#fff;margin:14px 0 8px}
.tech-panel-copy{color:var(--tx-dim);font-size:.95rem;max-width:46ch}

/* ============================ MID CTA ============================ */
.midcta{position:relative;text-align:center;overflow:hidden;color:var(--tx-on-dark);background:
  radial-gradient(90% 120% at 50% 0%,rgba(28,130,104,.22),transparent 60%),var(--ink)}
.midcta .h2{color:var(--tx-on-dark)}
.midcta .h2{max-width:18ch;margin:0 auto var(--s3)}
.midcta .lead{margin:0 auto var(--s4);text-align:center}
.midcta .micro{font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;color:var(--tx-dimmer);margin-top:var(--s3);text-transform:uppercase}

/* ============================ TESTIMONIAL + TICKER ============================ */
.test-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s6);align-items:center}
.test-left .h2{max-width:14ch}
.test-quote{display:flex;gap:var(--s3);align-items:flex-start}
.test-avatar{width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1c8268,#0d2b34);display:grid;place-items:center;color:#fff;font-family:var(--ff-display);font-size:1.2rem}
.quote-reveal{font-family:var(--ff-display);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5;letter-spacing:-.01em}
.quote-reveal span{color:rgba(11,11,12,.22);transition:color .2s}
.test-name{margin-top:var(--s3);font-weight:600}
.test-role{color:var(--tx-mid);font-size:.9rem}
.ticker{margin-top:var(--s7);overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:var(--s7);width:max-content;animation:tick 26s linear infinite}
.ticker-track span{font-family:var(--ff-display);font-size:1.05rem;color:var(--tx-mid);white-space:nowrap;opacity:.7}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============================ FAQ ============================ */
.faq-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s4)}
.faq-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s4)}
.faq-pill{padding:9px 16px;border-radius:999px;border:1px solid var(--line-dark);color:var(--tx-dim);font-size:.82rem;min-height:38px;transition:.25s}
.faq-pill--active{background:rgba(57,201,163,.12);border-color:rgba(57,201,163,.5);color:#fff}
.faq-item{border-bottom:1px solid var(--line-dark)}
.faq-q{width:100%;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;text-align:left;color:var(--tx-on-dark);min-height:44px}
.faq-q .fn{font-family:var(--ff-mono);font-size:.8rem;color:var(--tx-dimmer);min-width:34px}
.faq-q .ft{flex:1;font-size:1.05rem}
.faq-q .fi{font-size:1.4rem;color:var(--tx-dim);transition:transform .3s}
.faq-item--open .fi{transform:rotate(45deg);color:var(--teal-glow)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding:0 0 var(--s3) calc(34px + var(--s3));color:var(--tx-dim);max-width:80ch}

/* ============================ CASE STUDIES ============================ */
.cases-head{text-align:center;max-width:40ch;margin:0 auto var(--s6)}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.case-card{border:1px solid var(--line-light);border-radius:16px;overflow:hidden;transition:transform .35s ease,box-shadow .35s}
.case-card:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.case-canvas{width:100%;height:200px;background:linear-gradient(160deg,#0d2b34,#0a1c25)}
.case-body{padding:var(--s3)}
.case-tag{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.case-body h3{margin:10px 0 6px;font-size:1.1rem;color:var(--ink)}
.case-body p{color:var(--tx-mid);font-size:.9rem}

/* ============================ CONTACT + FOOTER ============================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:stretch}
.contact-form .field{margin-bottom:var(--s4)}
.contact-form label{display:block;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-dimmer);margin-bottom:10px}
.contact-form input,.contact-form textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-dark);
  color:#fff;padding:10px 0;font-size:1rem;font-family:var(--ff-body);transition:border-color .3s;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--teal-glow)}
.contact-form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.contact-visual{position:relative;border-radius:18px;overflow:hidden;min-height:360px;
  background:linear-gradient(120deg,#0a1c25,#16323a 50%,#0b0c0d)}
.silk{position:absolute;inset:0}
.silk canvas{width:100%;height:100%}
.contact-badge{position:absolute;right:var(--s3);bottom:var(--s3);background:rgba(11,11,12,.6);backdrop-filter:blur(8px);
  border:1px solid var(--line-dark);border-radius:14px;padding:var(--s3)}
.contact-badge p{font-size:.85rem;margin-bottom:12px;color:#fff}
.contact-badge .row{display:flex;gap:10px}
.contact-badge a{width:38px;height:38px;border-radius:9px;background:#fff;color:#0b0b0c;display:grid;place-items:center}

.footer{padding:var(--s7) 0 var(--s4)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s5)}
.footer h4{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-dimmer);margin-bottom:var(--s3)}
.footer ul{list-style:none}
.footer li{margin-bottom:12px}
.footer a,.footer li{color:var(--tx-dim);font-size:.92rem}
.footer a:hover{color:#fff}
.footer-brand b{font-family:var(--ff-display);color:#fff;font-size:1.05rem}
.footer-logo-img{height:clamp(26px,3vw,32px);width:auto;display:block;margin-bottom:4px}
.footer-brand .tg{font-style:italic;color:var(--tx-on-dark);font-size:.8rem;margin:6px 0 var(--s3)}
.footer-brand p{color:var(--tx-dim);font-size:.9rem;max-width:34ch}
.footer-social{display:flex;gap:10px;margin-top:var(--s3)}
.footer-social a{width:40px;height:40px;border-radius:9px;border:1px solid var(--line-dark);display:grid;place-items:center;font-size:.8rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s7);padding-top:var(--s3);border-top:1px solid var(--line-dark);color:var(--tx-dimmer);font-size:.82rem}
.back-top{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.74rem}

/* ============================ BLOG ============================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);transition:transform .35s ease,border-color .35s}
.blog-card:hover{transform:translateY(-5px);border-color:rgba(57,201,163,.4)}
.blog-thumb{width:100%;height:178px;display:block;background:linear-gradient(160deg,#0d2b34,#0a1c25)}
.bc-body{padding:var(--s3);display:flex;flex-direction:column;gap:12px;flex:1}
.blog-tag{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-glow)}
.blog-card h3{font-family:var(--ff-display);font-weight:500;font-size:1.1rem;color:#fff;line-height:1.28}
.blog-card p{color:var(--tx-dim);font-size:.9rem;flex:1}
.blog-readmore{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;display:inline-flex;gap:8px}

/* ============================ TESTIMONIALS ============================ */
.tm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s5)}
.tm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3);align-items:start}
.tm-image-tile{grid-row:span 2;border-radius:18px;overflow:hidden;border:1px solid var(--line-light);box-shadow:0 18px 50px rgba(0,0,0,.16);background:#0b0b0c}
.tm-image-tile img{width:100%;height:auto;display:block}
.tm-card{border:1px solid var(--line-light);border-radius:18px;padding:var(--s4);background:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:210px;transition:transform .35s ease,box-shadow .35s}
.tm-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.10)}
.tm-quote{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.tm-quote::before{content:"\201C";color:var(--teal);font-size:2rem;line-height:0;vertical-align:-.35em;margin-right:4px}
.tm-meta{margin-top:var(--s3)}
.tm-name{font-weight:600;color:var(--ink)}
.tm-role{color:var(--tx-mid);font-size:.88rem}

/* social icons inside footer / contact badge */
.footer-social a svg,.contact-badge a svg{width:16px;height:16px}

/* ============================ RESPONSIVE ============================ */
@media(max-width:900px){
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);
    background:rgba(11,11,12,.97);backdrop-filter:blur(16px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s4);
    padding:var(--s6);transform:translateX(100%);transition:transform .4s ease;z-index:90;
  }
  .nav-links--open{transform:translateX(0)}
  .nav-links a{font-size:1.2rem}
  .nav-cta{display:inline-flex;padding:9px 14px;font-size:.82rem}
  .nav-logo i,.nav-logo small{display:none}
  .nav-burger{display:flex;z-index:95}
  .hero-bottom-inner{grid-template-columns:1fr;gap:var(--s4)}
  .hero-top-inner{padding-top:96px}
  .prod-grid,.cases-grid,.blog-grid{grid-template-columns:1fr}
  .tm-grid{grid-template-columns:1fr}
  .tm-image-tile{grid-row:auto}
  .tm-head{flex-direction:column;align-items:flex-start}
  .prob-grid{grid-template-columns:1fr}
  .story-grid,.tech-grid,.test-grid,.contact-grid{grid-template-columns:1fr;gap:var(--s5)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .contact-form .two{grid-template-columns:1fr}
  .faq-top{flex-direction:column;align-items:flex-start}
}
@media(max-width:540px){
  .footer-grid{grid-template-columns:1fr}
  .hero-socials{display:none}
  .footer-bottom{flex-direction:column;gap:14px;align-items:flex-start}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ticker-track{animation:none}
}

/* ============================ BLOG POST (v2) ============================ */
.post-hero{position:relative;background:var(--ink);overflow:hidden;padding:150px 0 var(--s7)}
.post-hero .hero-canvas-wrap{position:absolute;inset:0;opacity:.45}
.post-hero .container{position:relative;z-index:2}
.post-hero h1{font-family:var(--ff-display);font-weight:400;line-height:1.06;letter-spacing:-.02em;font-size:clamp(2rem,4.6vw,3.4rem);color:#fff;max-width:20ch;margin:var(--s3) 0}
.aeo-block{border-left:2px solid var(--teal-glow);background:linear-gradient(90deg,rgba(57,201,163,.07),transparent);padding:var(--s3) var(--s4);border-radius:0 12px 12px 0;color:var(--tx-dim);font-style:italic;max-width:72ch;margin:var(--s4) 0;line-height:1.6}
.aeo-block strong{color:#fff;font-style:normal}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:var(--tx-dim);font-size:.86rem;font-family:var(--ff-mono);letter-spacing:.04em}
.post-meta .dot{color:var(--tx-dimmer)}

.post-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);align-items:start}
.post-toc{position:sticky;top:110px}
.post-toc p{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mid);margin-bottom:var(--s2)}
.post-toc a{display:block;color:var(--tx-mid);font-size:.9rem;padding:7px 0 7px 14px;border-left:2px solid var(--line-light);transition:.2s}
.post-toc a:hover{color:var(--ink);border-color:var(--teal)}

.article{max-width:70ch}
.article .lead{font-size:1.22rem;color:var(--ink);margin-bottom:var(--s3)}
.article h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.015em;margin:var(--s6) 0 var(--s2);color:var(--ink);line-height:1.15}
.article h3{font-family:var(--ff-display);font-weight:600;font-size:1.2rem;margin:var(--s4) 0 10px;color:var(--ink)}
.article p{color:var(--tx-mid);margin-bottom:var(--s2);font-size:1.05rem;line-height:1.72}
.article ul,.article ol{color:var(--tx-mid);margin:0 0 var(--s3) 1.2em;font-size:1.05rem;line-height:1.7}
.article li{margin-bottom:10px}
.article strong{color:var(--ink)}
.callout{border-left:2px solid var(--teal);background:var(--paper-2);padding:var(--s3) var(--s4);border-radius:0 12px 12px 0;margin:var(--s4) 0}
.callout p{margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.inline-cta{background:var(--ink);border-radius:18px;padding:var(--s5);text-align:center;margin:var(--s5) 0;color:var(--tx-on-dark)}
.inline-cta p{color:var(--tx-dim);margin-bottom:var(--s3);font-size:1.05rem}

.article-steps{display:grid;gap:var(--s2);margin:var(--s4) 0}
.article-step{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line-light)}
.article-step .sn{font-family:var(--ff-mono);color:var(--teal);font-size:.85rem;min-width:40px;flex-shrink:0}
.article-step h3{margin:0 0 8px}
.article-step p{margin:0}

.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}

@media(max-width:900px){
  .post-layout,.related-grid{grid-template-columns:1fr}
  .post-toc{display:none}
}

/* ============================ SERVICE PAGE (v2) ============================ */
.subhero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s6);border-top:1px solid var(--line-dark);padding-top:var(--s4)}
.stat .sv{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;line-height:1}
.stat .sl{color:var(--tx-dim);font-size:.9rem;margin-top:8px}
.sub-twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.dtable-wrap{overflow-x:auto;margin-top:var(--s4);border-radius:14px}
.dtable{width:100%;border-collapse:collapse;font-size:.96rem;min-width:560px}
.dtable th,.dtable td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-light);vertical-align:top}
.dtable thead th{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mid)}
.dtable td strong{color:var(--ink)}
.dtable .pos{color:var(--teal);font-weight:500}
.sec-ink .dtable th,.sec-ink .dtable td,.sec-ink-2 .dtable th,.sec-ink-2 .dtable td{border-color:var(--line-dark);color:var(--tx-on-dark)}
.sec-ink .dtable thead th,.sec-ink-2 .dtable thead th{color:var(--tx-dim)}
.sec-ink .dtable td strong,.sec-ink-2 .dtable td strong{color:#fff}
.sec-ink .dtable .pos,.sec-ink-2 .dtable .pos{color:var(--teal-glow)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.tags span{border:1px solid var(--line-light);border-radius:999px;padding:9px 16px;font-size:.86rem;color:var(--tx-mid)}
.sec-ink .tags span,.sec-ink-2 .tags span{border-color:var(--line-dark);color:var(--tx-dim)}
@media(max-width:900px){
  .sub-twocol{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr;gap:var(--s2)}
}

/* ============================ CONTENT PROSE PARAGRAPHS ============================ */
/* Plain prose paragraphs placed directly in a section .container (service pages,
   solution/problem/trust blocks). Excludes the centered .midcta CTAs. */
.section:not(.midcta) .container > p{
  text-align:left;
  line-height:1.7;
  max-width:74ch;
  margin-bottom:var(--s2);
}
.section:not(.midcta) .container > p:not(.lead){ font-size:1.05rem; }
.sec-paper .container > p, .sec-paper-2 .container > p{ color:var(--tx-mid); }
.sec-ink .container > p, .sec-ink-2 .container > p{ color:var(--tx-dim); }
.section:not(.midcta) .container > p.lead{ margin-bottom:var(--s3); }

/* ============================ FAQ ON LIGHT SECTIONS (blog posts) ============================ */
.sec-paper .faq-item,.sec-paper-2 .faq-item{border-color:var(--line-light)}
.sec-paper .faq-q,.sec-paper-2 .faq-q{color:var(--ink)}
.sec-paper .faq-q .fn,.sec-paper-2 .faq-q .fn{color:var(--tx-mid)}
.sec-paper .faq-q .fi,.sec-paper-2 .faq-q .fi{color:var(--tx-mid)}
.sec-paper .faq-item--open .fi,.sec-paper-2 .faq-item--open .fi{color:var(--teal)}
.sec-paper .faq-a p,.sec-paper-2 .faq-a p{color:var(--tx-mid)}

.footer-logo-link{display:inline-block;width:max-content}

/* ============================ RELATED ARTICLES (centered, max 3) ============================ */
.blog-grid--center{display:flex;flex-wrap:wrap;justify-content:center}
.blog-grid--center .blog-card{flex:0 1 340px;max-width:360px}
.related-more{text-align:center;margin-top:var(--s5)}

/* ============================ NAV SERVICES DROPDOWN ============================ */
.nav-dd{position:relative}
.nav-links .nav-dd-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--tx-dim);font-size:.9rem;font-family:inherit;background:none;border:none;cursor:pointer;padding:0;transition:color .2s}
.nav-links .nav-dd-toggle:hover{color:#fff}
.nav-dd-caret{font-size:.62em;line-height:1;transition:transform .25s ease}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:210px;list-style:none;margin:0;padding:14px 8px 8px;
  background:rgba(13,14,16,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line-dark);border-radius:12px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:130;
}
.nav-dd-menu li{margin:0}
.nav-dd-menu a{display:block;padding:11px 14px;border-radius:8px;color:var(--tx-dim);font-size:.9rem;white-space:nowrap;transition:.18s}
.nav-dd-menu a:hover{background:rgba(57,201,163,.12);color:#fff}

/* desktop: hover / keyboard-focus opens */
@media(min-width:901px){
  .nav-dd:hover .nav-dd-menu,
  .nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .nav-dd:hover .nav-dd-caret,
  .nav-dd:focus-within .nav-dd-caret{transform:rotate(180deg)}
}

/* mobile: accordion inside the slide-in panel */
@media(max-width:900px){
  .nav-dd{width:100%}
  .nav-links .nav-dd-toggle{width:100%;justify-content:space-between;font-size:1.2rem;min-height:44px}
  .nav-dd-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;background:none;border:none;box-shadow:none;backdrop-filter:none;
    max-height:0;overflow:hidden;padding:0 0 0 16px;
    transition:max-height .3s ease;
  }
  .nav-dd--open .nav-dd-menu{max-height:260px;padding:6px 0 6px 16px}
  .nav-dd--open .nav-dd-caret{transform:rotate(180deg)}
  .nav-dd-menu a{font-size:1.02rem;padding:10px 0;color:var(--tx-dim)}
  .nav-links{overflow-y:auto}
}

/* ============================ SUMMIT PAGE ============================ */
.summit-video-wrap{
  position:relative;margin:var(--s5) 0 0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-dark);background:#0c0d0f;
  aspect-ratio:16/9;
}
.summit-video-wrap video{width:100%;height:100%;display:block;object-fit:cover}
.summit-video-cap{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-dimmer);margin-top:14px;
}
.pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s5)}
.pkg-card{
  border:1px solid var(--line-dark);border-radius:18px;padding:var(--s4);
  background:radial-gradient(120% 120% at 80% 0%,rgba(57,201,163,.06),transparent 55%),#0c0d0f;
  display:flex;flex-direction:column;
}
.pkg-card--feature{border-color:rgba(57,201,163,.34)}
.pkg-fmt{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-glow);
}
.pkg-price{font-family:var(--ff-display);font-weight:400;font-size:2.3rem;color:#fff;margin:10px 0 4px;letter-spacing:-.02em}
.pkg-note{font-size:.86rem;color:var(--tx-dim);margin:0 0 var(--s3)}
.pkg-list{list-style:none;padding:0;margin:0 0 var(--s3)}
.pkg-list li{
  position:relative;padding-left:20px;margin-bottom:9px;font-size:.9rem;color:var(--tx-dim);
}
.pkg-list li::before{content:"→";position:absolute;left:0;color:var(--teal-glow);font-size:.85rem}
.pkg-card .btn{margin-top:auto;align-self:flex-start}
@media(max-width:900px){
  .pkg-grid{grid-template-columns:1fr}
}

/* --- context fixes: components used on both light and dark sections --- */
.micro{font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;color:var(--tx-dimmer);margin-top:var(--s3);text-transform:uppercase}
.sec-paper .micro,.sec-paper-2 .micro{color:var(--tx-mid)}
.sec-paper .mono-i,.sec-paper-2 .mono-i{color:var(--teal)}
.sec-ink .article-step,.sec-ink-2 .article-step{border-bottom-color:var(--line-dark)}
.sec-ink .article-step .sn,.sec-ink-2 .article-step .sn{color:var(--teal-glow)}

/* ============================ HOMEPAGE RESTRUCTURE ============================ */
.section--tight{padding:var(--s5) 0}
@media(min-width:901px){
  .section--tight{padding:var(--s6) 0}
  .prod-grid--2,.cases-grid--2{grid-template-columns:repeat(2,1fr)}
}
.sec-paper .prod-link,.sec-paper-2 .prod-link{color:var(--teal)}
.hero-bottom .micro{color:var(--tx-mid)}
.hero-eyebrow{max-width:20ch}
.proof-label{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-mid);margin-bottom:var(--s2);
}

/* video frame on light sections (homepage AI Conductor) */
.sec-paper .summit-video-wrap,.sec-paper-2 .summit-video-wrap{
  border-color:var(--line-light);background:#ECEAE6;
}
.sec-paper .summit-video-cap,.sec-paper-2 .summit-video-cap{color:var(--tx-mid)}