:root{
  --ink:#090c0e;
  --ink-2:#0f1417;
  --panel:#151b1e;
  --paper:#f3f2ed;
  --paper-2:#e9e8e2;
  --line:rgba(9,12,14,.14);
  --muted:#667077;
  --light:#f8faf9;
  --accent:#c9ff19;
  --accent-2:#91ff00;
  --accent-soft:rgba(201,255,25,.12);
  --white:#fff;
  --max:1440px;
  --radius:18px;
  --shadow:0 22px 70px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.45;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.noise{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header{
  height:100px;
  width:100%;
  position:absolute;
  top:0;left:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
  padding:0 clamp(28px,5vw,82px);
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.08em}
.brand-word{font-size:25px;letter-spacing:.045em}
.brand-mark{
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.brand-mark-svg{
  width:100%;
  height:100%;
  display:block;
}
.brand-mark-svg polygon{
  fill:var(--accent);
}
.brand-mark-large{
  width:72px;
  height:72px;
  margin-bottom:12px;
}
.brand-mark-large .brand-mark-svg{
  filter:drop-shadow(0 0 20px rgba(201,255,25,.12));
}
.desktop-nav{display:flex;gap:34px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.desktop-nav a{opacity:.82;transition:.2s}
.desktop-nav a:hover{opacity:1;color:var(--accent)}
.header-cta{justify-self:end}
.button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:0 26px;
  border-radius:2px;
  border:1px solid transparent;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:11px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.button:hover{transform:translateY(-2px)}
.button-accent{background:var(--accent);color:var(--ink);box-shadow:0 10px 30px rgba(201,255,25,.12)}
.button-accent:hover{background:#d7ff53;box-shadow:0 14px 34px rgba(201,255,25,.2)}
.menu-toggle{display:none;background:none;border:0;color:#fff;width:42px;height:42px;position:relative}
.menu-toggle span{position:absolute;left:8px;width:26px;height:1px;background:#fff;transition:.2s}
.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:25px}
.mobile-nav{display:none}

.hero{
  min-height:800px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 38%,rgba(201,255,25,.12),transparent 24%),
    linear-gradient(108deg,#090c0e 0%,#0b1013 58%,#11181b 100%);
  color:var(--white);
  padding:186px clamp(24px,6vw,92px) 92px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  gap:56px;
  align-items:center;
}
.hero-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(90deg,transparent 0,#000 55%,#000 100%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}
.hero-glow-one{width:360px;height:360px;background:var(--accent);right:14%;top:18%}
.hero-glow-two{width:420px;height:420px;background:#008dff;right:38%;bottom:-28%}
.hero-copy{position:relative;z-index:2;max-width:760px}
.eyebrow{margin:0 0 22px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--accent)}
.eyebrow-dark{color:#5b6469}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;margin:0;line-height:.98;letter-spacing:-.045em}
h1{font-size:clamp(58px,6.1vw,96px);max-width:900px}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.hero-lede{font-size:clamp(17px,1.45vw,22px);line-height:1.52;max-width:690px;color:#cbd1d3;margin:28px 0 34px}
.hero-actions{display:flex;align-items:center;gap:34px}
.text-link{display:inline-flex;align-items:center;gap:13px;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.text-link strong{display:block;font-size:11px}.text-link small{display:block;color:#9ba3a7;margin-top:2px}
.play{width:46px;height:46px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-size:11px;padding-left:2px}

.hero-stage{
  position:relative;
  z-index:2;
  min-height:530px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(16,22,25,.95),rgba(8,12,14,.86));
  box-shadow:0 35px 100px rgba(0,0,0,.46);
  border-radius:14px;
  overflow:hidden;
  transform:perspective(1400px) rotateY(-3deg) rotateX(1deg);
}
.stage-topline{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid rgba(255,255,255,.09);font-size:9px;letter-spacing:.16em;color:#768087}
.live-dot{color:var(--accent)}.live-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px;box-shadow:0 0 12px var(--accent)}
.stage-body{display:grid;grid-template-columns:54px 1fr 180px;min-height:478px}
.stage-rail{border-right:1px solid rgba(255,255,255,.08);padding:15px 0;display:flex;align-items:center;flex-direction:column;gap:24px}
.rail-logo{display:grid;place-items:center;width:27px;height:27px;background:var(--accent);color:#0a0d0f;font-size:12px;font-weight:900;transform:skew(-10deg)}
.stage-rail span:not(.rail-logo){width:14px;height:14px;border:1px solid #536067;border-radius:3px}
.flow-window{padding:28px 24px;display:flex;flex-direction:column}
.flow-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:20px}
.flow-head small{display:block;color:#667178;font-size:8px;letter-spacing:.15em;margin-bottom:5px}
.flow-head strong{font-size:14px}
.mini-chip{border:1px solid rgba(201,255,25,.35);background:rgba(201,255,25,.08);color:var(--accent);font-size:8px;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:7px 10px}
.nodes{margin:auto 0;display:flex;flex-direction:column;align-items:flex-start;padding-left:7%;width:100%}
.node{width:78%;min-height:62px;border:1px solid rgba(255,255,255,.12);background:#11181b;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.node small{display:block;color:#657178;font-size:7px;letter-spacing:.14em;margin-bottom:2px}.node strong{font-size:11px}
.node-icon{width:30px;height:30px;border-radius:5px;background:#1a2529;display:grid;place-items:center;color:#9ba7ac}
.node-ai{margin-left:12%;border-color:rgba(201,255,25,.34);background:linear-gradient(90deg,rgba(201,255,25,.06),#11181b)}.node-ai .node-icon{background:var(--accent);color:#0a0d0f}
.node-action{margin-left:22%}
.connector{height:24px;width:1px;background:linear-gradient(var(--accent),rgba(201,255,25,.1));margin-left:47%}
.stage-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stage-metrics div{padding:12px;border:1px solid rgba(255,255,255,.08);background:#0e1417}
.stage-metrics small{display:block;font-size:7px;color:#667178;margin-bottom:5px}.stage-metrics strong{font-size:10px}.metric-good{color:var(--accent)}
.stage-insight{border-left:1px solid rgba(255,255,255,.08);padding:28px 18px;background:rgba(255,255,255,.018)}
.stage-insight small{color:var(--accent);font-size:8px;letter-spacing:.16em}.stage-insight p{font-family:"Space Grotesk";font-size:14px;line-height:1.45;margin-top:20px}
.insight-tags{display:flex;flex-wrap:wrap;gap:5px}.insight-tags span{font-size:7px;padding:4px 6px;border:1px solid rgba(255,255,255,.12);color:#7c878c}
.hero-side-note{position:absolute;right:25px;top:215px;font-size:9px;line-height:1.7;letter-spacing:.15em;color:#aeb6b9;z-index:3}.hero-side-note span{display:block;width:24px;height:2px;background:var(--accent);margin-bottom:20px}

.service-strip{padding:88px clamp(24px,6vw,92px) 95px;background:var(--paper);border-bottom:1px solid var(--line)}
.section-intro{display:grid;grid-template-columns:.7fr 2.3fr;gap:40px;margin-bottom:52px}
.section-intro h2{font-size:clamp(44px,4vw,66px);max-width:800px}.section-intro h2 em{color:#6d767b}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.service{position:relative;padding:38px 30px 10px 0;min-height:250px;border-right:1px solid var(--line);margin-right:26px}
.service:last-child{border-right:0;margin-right:0}
.service-number{position:absolute;right:24px;top:38px;font-size:10px;color:#7a858a;letter-spacing:.15em}
.service-icon{font-size:24px;margin-bottom:28px}
.service h3{font-size:24px;line-height:1.05;margin-bottom:15px}
.service p{margin:0;color:#596369;font-size:14px;line-height:1.6;max-width:280px}

.system-section{
  background:var(--ink);
  color:#fff;
  padding:100px clamp(24px,6vw,92px);
  display:grid;
  grid-template-columns:.7fr 1.35fr .85fr;
  gap:48px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.system-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 60%,rgba(201,255,25,.06),transparent 26%)}
.system-copy,.system-map,.ai-card{position:relative;z-index:1}
.system-copy h2{font-size:clamp(48px,4.7vw,76px);margin-bottom:26px}.system-copy h2 em{color:#fff}.system-copy p{color:#aeb7bb;max-width:450px;line-height:1.65;margin-bottom:30px}
.system-map{min-height:420px;display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;gap:30px}
.map-column{position:relative;z-index:2;padding:22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);border-radius:8px;display:flex;flex-direction:column;gap:18px;min-height:350px;justify-content:center}
.map-column div{font-size:11px;color:#d6dadc;display:flex;gap:10px;align-items:center}.map-column div:first-letter{color:var(--accent)}
.map-label{position:absolute;top:13px;left:15px;font-size:8px;color:var(--accent);letter-spacing:.16em}
.map-core{position:relative;z-index:3;width:130px;height:130px;border:1px solid rgba(201,255,25,.25);background:#111719;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(201,255,25,.08)}
.brand-mark-large{transform:skew(-13deg) scale(1.4);margin-bottom:12px}.map-core strong{font-size:11px}.map-core small{font-size:7px;color:#788388;letter-spacing:.15em;margin-top:4px}
.map-lines{position:absolute;left:20%;right:20%;top:40px;width:60%;height:340px;z-index:1;overflow:visible}.map-lines path{fill:none;stroke:#495256;stroke-width:1.2}.map-lines path.out{stroke:var(--accent);opacity:.85}
.ai-card{background:#f5f4ef;color:#111;border-radius:12px;padding:18px;box-shadow:var(--shadow);min-height:430px;display:flex;flex-direction:column}
.ai-card-head{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:14px}
.ai-brand{width:38px;height:38px;background:#101416;border-radius:7px;padding:4px}.ai-brand .brand-mark-svg{width:100%;height:100%}
.ai-card-head strong{display:block;font-family:"Space Grotesk";font-size:16px}.ai-card-head small{display:block;color:#6c7478;font-size:10px}
.ai-status{font-size:8px;font-weight:800;letter-spacing:.12em}.ai-status i{width:6px;height:6px;background:#38c777;border-radius:50%;display:inline-block;margin-right:4px}
.ai-messages{flex:1;overflow:auto;max-height:210px;padding:16px 0 8px;display:flex;flex-direction:column;gap:9px}
.ai-message{font-size:11px;line-height:1.48;padding:10px 12px;border-radius:8px;max-width:91%}.ai-message.assistant{background:#e8e8e3;align-self:flex-start}.ai-message.user{background:#101416;color:#fff;align-self:flex-end}.ai-message.error{background:#ffe4e1;color:#6b1e16}
.prompt-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}.prompt-chips button{border:1px solid #d2d4cf;background:#fff;border-radius:30px;padding:6px 8px;font-size:8px;color:#4d575b}
.prompt-chips button:hover{border-color:#a7adab;background:#fafafa}
.ai-form{display:grid;grid-template-columns:1fr 38px;gap:7px;background:#fff;border:1px solid #d3d5d0;border-radius:7px;padding:5px}
.ai-form input{border:0;outline:0;padding:0 8px;background:transparent;min-width:0;font-size:11px}
.ai-form button{width:38px;height:38px;border:0;background:var(--accent);color:#111;border-radius:5px;font-weight:900}
.ai-disclaimer{font-size:8px;color:#777f82;margin:9px 0 0}

.examples-section{padding:105px clamp(24px,6vw,92px) 110px;background:#ecebe6}
.section-heading{display:grid;grid-template-columns:.45fr 1.1fr 1fr;gap:40px;align-items:end;margin-bottom:46px}.section-heading h2{font-size:clamp(46px,4.5vw,74px)}.section-heading h2 em{color:#747c80}.section-heading>p:last-child{color:#626c71;line-height:1.65}
.example-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:16px}
.example-card{position:relative;min-height:430px;background:#f6f5f1;border:1px solid rgba(0,0,0,.1);padding:32px;overflow:hidden}
.example-card.large{min-height:520px}
.example-type{font-size:9px;font-weight:800;letter-spacing:.15em;color:#6c7579}.example-card h3{font-size:clamp(27px,2.5vw,42px);line-height:1.05;margin:20px 0 18px;max-width:760px}.example-card p{font-size:14px;line-height:1.62;color:#60696d;max-width:640px}
.example-stack{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}.example-stack span{font-size:8px;letter-spacing:.06em;padding:7px 9px;background:#e8e8e2;border:1px solid rgba(0,0,0,.08)}
.example-visual{position:absolute;right:-30px;bottom:-68px;width:62%;height:270px;transform:rotate(-4deg)}
.visual-window{width:100%;height:100%;background:#101619;border-radius:10px;box-shadow:0 24px 50px rgba(0,0,0,.2);padding:14px}.visual-header{display:flex;gap:5px;height:22px}.visual-header span{width:6px;height:6px;border-radius:50%;background:#465055}
.visual-body{display:grid;grid-template-columns:22% 1fr;gap:10px;height:calc(100% - 22px)}.visual-sidebar{background:#161e22;border-radius:5px}.visual-chart{border-radius:5px;background:linear-gradient(180deg,#132329,#0f1619);display:flex;align-items:flex-end;gap:7px;padding:20px}.visual-chart i{flex:1;background:linear-gradient(var(--accent),#4e6a16);border-radius:2px 2px 0 0;opacity:.75}
.mini-flow{position:absolute;left:32px;bottom:34px;right:32px;display:flex;align-items:center;gap:9px}.mini-flow span{padding:12px 14px;background:#e5e5df;border:1px solid #d4d4ce;font-size:10px}.mini-flow b{color:#869094}
.document-stack{position:absolute;bottom:20px;right:35px;width:190px;height:160px}.document-stack i{position:absolute;width:110px;height:140px;background:#e1e2dd;border:1px solid #cbcfc9;right:0;bottom:0}.document-stack i:nth-child(2){right:25px;bottom:9px}.document-stack i:nth-child(3){right:50px;bottom:18px}.document-stack strong{position:absolute;z-index:2;right:22px;bottom:45px;font-size:40px;color:#0f1517}

.approach-section{background:#111619;color:#fff;padding:105px clamp(24px,6vw,92px)}
.approach-statement{display:grid;grid-template-columns:.6fr 2fr;gap:40px;margin-bottom:75px}.approach-statement h2{font-size:clamp(48px,5vw,80px);max-width:1050px}.approach-statement h2 em{color:var(--accent)}
.approach-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.15)}
.approach-steps article{padding:26px 32px 0 0;border-right:1px solid rgba(255,255,255,.12);margin-right:30px;min-height:220px}.approach-steps article:last-child{border:0;margin-right:0}.approach-steps span{font-size:10px;letter-spacing:.16em;color:var(--accent)}.approach-steps h3{font-size:23px;line-height:1.1;margin:32px 0 13px}.approach-steps p{font-size:13px;line-height:1.6;color:#9fa9ad}

.about-section{padding:105px clamp(24px,6vw,92px);display:grid;grid-template-columns:1fr 1.2fr .65fr;gap:65px;background:var(--paper)}
.about-kicker h2{font-size:clamp(42px,4vw,66px)}.about-copy{font-size:15px;color:#596267;line-height:1.72}.about-copy .about-lead{font-family:"Space Grotesk";font-size:25px;line-height:1.35;color:#14191b;margin-top:0}
.about-note{border-left:1px solid var(--line);padding-left:30px;display:flex;flex-direction:column;justify-content:center}.note-line{width:32px;height:3px;background:var(--accent);margin-bottom:25px}.about-note strong{font-family:"Space Grotesk";font-size:21px;line-height:1.25}.about-note small{margin-top:15px;color:#657075;line-height:1.55}

.contact-section{position:relative;background:#080b0d;color:#fff;padding:110px clamp(24px,6vw,92px);display:grid;grid-template-columns:1fr 1fr;gap:8vw;overflow:hidden}
.contact-bg{position:absolute;inset:0;background:radial-gradient(circle at 83% 60%,rgba(201,255,25,.11),transparent 27%),linear-gradient(125deg,transparent 50%,rgba(255,255,255,.02) 50%);pointer-events:none}
.contact-copy,.contact-form{position:relative;z-index:1}.contact-copy h2{font-size:clamp(60px,6vw,96px);margin-bottom:25px}.contact-copy h2 em{color:var(--accent)}.contact-copy>p:last-child{max-width:560px;color:#aeb7ba;font-size:17px;line-height:1.6}
.contact-form{display:flex;flex-direction:column;gap:18px;padding-top:10px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form label>span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#9ba4a7;margin-bottom:7px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);color:#fff;padding:15px 14px;outline:0;border-radius:2px}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)}.contact-form textarea{resize:vertical}
.honeypot{position:absolute!important;left:-9999px!important}.submit-button{align-self:flex-start;border:0}.form-note{font-size:11px;color:#768186}.form-note a{color:#fff;border-bottom:1px solid #5b6468}

.site-footer{background:#050708;color:#fff;padding:58px clamp(24px,6vw,92px) 28px}
.footer-brand{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.12)}.footer-brand p{color:#8e989c;max-width:420px;margin:0;font-size:13px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:670px;margin:40px 0 58px auto}.footer-links div{display:flex;flex-direction:column;gap:10px}.footer-links small{color:#596367;letter-spacing:.16em;font-size:8px;margin-bottom:4px}.footer-links a{font-size:13px;color:#b9c0c3}.footer-links a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding-top:21px;font-size:9px;letter-spacing:.08em;color:#626c70;text-transform:uppercase}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

@media (max-width:1180px){
  .site-header{grid-template-columns:1fr auto}.desktop-nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:145px}.hero-copy{max-width:840px}.hero-stage{max-width:900px}.hero-side-note{display:none}
  .system-section{grid-template-columns:1fr 1.6fr}.ai-card{grid-column:1/-1;max-width:700px;width:100%;justify-self:center}
  .example-grid{grid-template-columns:1fr 1fr}.example-card.large{grid-column:1/-1}
  .about-section{grid-template-columns:1fr 1.3fr}.about-note{grid-column:2}
}
@media (max-width:860px){
  .site-header{height:78px;padding:0 20px}.brand-word{font-size:20px;letter-spacing:.045em}.header-cta{display:none}.menu-toggle{display:block}
  .mobile-nav{position:fixed;z-index:19;top:78px;left:0;right:0;background:#0b0f11;color:#fff;padding:20px;display:flex;flex-direction:column;gap:0;transform:translateY(-140%);transition:.3s;border-bottom:1px solid rgba(255,255,255,.1)}.mobile-nav.open{transform:translateY(0)}.mobile-nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
  .hero{padding:125px 20px 60px;gap:42px;min-height:auto}.hero-grid{background-size:44px 44px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-stage{min-height:450px;transform:none}.stage-body{grid-template-columns:44px 1fr}.stage-insight{display:none}
  .section-intro,.section-heading,.approach-statement{grid-template-columns:1fr;gap:12px}.service-strip,.examples-section,.approach-section,.about-section,.system-section,.contact-section{padding-left:20px;padding-right:20px}
  .service-grid{grid-template-columns:1fr 1fr}.service{border-bottom:1px solid var(--line)}
  .system-section{grid-template-columns:1fr}.system-map{min-height:380px}
  .example-grid{grid-template-columns:1fr}.example-card.large{grid-column:auto}.example-card{min-height:390px}.example-visual{width:75%}
  .approach-steps{grid-template-columns:1fr 1fr}.approach-steps article{border-bottom:1px solid rgba(255,255,255,.12)}
  .about-section{grid-template-columns:1fr}.about-note{grid-column:auto}
  .contact-section{grid-template-columns:1fr}.footer-brand{flex-direction:column;gap:20px}.footer-links{margin-left:0}.footer-bottom{gap:16px;flex-direction:column}
}
@media (max-width:580px){
  h1{font-size:49px}.hero-lede{font-size:16px}.hero-stage{min-height:410px}.stage-body{grid-template-columns:38px 1fr}.flow-window{padding:20px 12px}.nodes{padding-left:0}.node{width:90%}.node-ai{margin-left:5%}.node-action{margin-left:10%}.stage-metrics{grid-template-columns:1fr}.stage-metrics div:nth-child(2){display:none}
  .service-grid{grid-template-columns:1fr}.service{margin-right:0;border-right:0;padding-right:0}
  .system-map{grid-template-columns:1fr;gap:14px}.map-before,.map-after{min-height:auto}.map-lines{display:none}.map-core{width:100%;height:90px}.map-column{min-height:auto;padding-top:44px}
  .approach-steps{grid-template-columns:1fr}.approach-steps article{margin-right:0;border-right:0}
  .form-row{grid-template-columns:1fr}.section-heading{margin-bottom:30px}.example-visual{width:100%;right:-70px}
  .footer-links{grid-template-columns:1fr}.button{width:100%}
}

.contact-notice{
  border:1px solid rgba(201,255,25,.4);
  background:rgba(201,255,25,.08);
  color:#eaffb3;
  padding:12px 14px;
  font-size:12px;
  line-height:1.5;
}
.contact-notice[data-state="error"]{
  border-color:rgba(255,118,100,.45);
  background:rgba(255,118,100,.08);
  color:#ffc7c0;
}


/* === ANNI-TECH BRAND ASSET OVERRIDE — V003 ===
   Uses the exact selected #1 logo artwork, not a redrawn approximation. */
.brand-header,
.brand-footer{
  display:inline-flex;
  align-items:center;
  gap:0;
}

.brand-logo-horizontal{
  display:block;
  width:auto;
  height:56px;
  object-fit:contain;
}

.brand-header .brand-logo-horizontal{
  height:58px;
}

.brand-footer .brand-logo-horizontal{
  height:52px;
}

.brand-mark-image{
  display:block;
  object-fit:contain;
}

.brand-mark-large-image{
  width:76px;
  height:76px;
  margin:0 auto 12px;
}

.ai-brand{
  width:40px;
  height:40px;
  border-radius:8px;
  background:#101416;
  display:grid;
  place-items:center;
  padding:5px;
  overflow:hidden;
}

.ai-brand img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Hide obsolete SVG/wordmark rules if any remain elsewhere */
.brand-header .brand-mark,
.brand-header .brand-word,
.brand-footer .brand-mark,
.brand-footer .brand-word{
  display:none !important;
}

@media (max-width:860px){
  .brand-header .brand-logo-horizontal{
    height:48px;
  }
  .brand-footer .brand-logo-horizontal{
    height:46px;
  }
}

@media (max-width:580px){
  .brand-header .brand-logo-horizontal{
    height:43px;
  }
}


/* === V004 — ORIGINAL ANNI IDENTITY ===
   Exact original mark + exact original 'anni' wordmark from the supplied logo. */
.brand-original{
  display:inline-flex;
  align-items:center;
  gap:14px;
}

.brand-original-mark{
  display:block;
  width:auto;
  height:62px;
  object-fit:contain;
}

.brand-original-name{
  display:inline-flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
}

.brand-original-wordmark{
  display:block;
  width:auto;
  height:33px;
  object-fit:contain;
}

.brand-tech-suffix{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:28px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
  color:#fff;
  transform:translateY(1px);
}

.brand-footer.brand-original .brand-original-mark{
  height:55px;
}

.brand-footer.brand-original .brand-original-wordmark{
  height:29px;
}

.brand-footer.brand-original .brand-tech-suffix{
  font-size:25px;
}

.original-mark-standalone{
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(74,145,190,.16));
}

.ai-brand img{
  object-fit:contain;
}

@media (max-width:860px){
  .brand-original-mark{
    height:52px;
  }
  .brand-original-wordmark{
    height:28px;
  }
  .brand-tech-suffix{
    font-size:23px;
  }
}

@media (max-width:580px){
  .brand-original{
    gap:9px;
  }
  .brand-original-mark{
    height:46px;
  }
  .brand-original-wordmark{
    height:24px;
  }
  .brand-tech-suffix{
    font-size:20px;
  }
}


/* === V005 — DESIGN 2 EXACT LOCKUP ===
   Original lowercase ANNI wordmark LEFT, original blue mark RIGHT,
   ANNI-TECH on a separate second line. */
.site-header{
  height:118px;
}

.hero{
  padding-top:204px;
}

.brand-design2{
  display:inline-flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  line-height:1;
}

.design2-topline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.design2-wordmark{
  display:block;
  width:auto;
  height:29px;
  object-fit:contain;
}

.design2-mark{
  display:block;
  width:auto;
  height:43px;
  object-fit:contain;
}

.design2-company{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.22em;
  color:#fff;
  padding-left:.22em;
  margin-top:-1px;
}

/* The earlier experimental header assets must not leak into Design 2. */
.brand-design2 .brand-logo-horizontal,
.brand-design2 .brand-original-mark,
.brand-design2 .brand-original-name,
.brand-design2 .brand-mark,
.brand-design2 .brand-word{
  display:none !important;
}

.brand-footer.brand-design2{
  align-items:flex-start;
}

.brand-footer.brand-design2 .design2-wordmark{
  height:26px;
}

.brand-footer.brand-design2 .design2-mark{
  height:38px;
}

.brand-footer.brand-design2 .design2-company{
  font-size:11px;
}

/* Original ANNI symbol remains mark-only elsewhere */
.original-mark-standalone{
  object-fit:contain;
}

.ai-brand img{
  object-fit:contain;
}

/* Mobile */
@media (max-width:860px){
  .site-header{
    height:96px;
  }

  .mobile-nav{
    top:96px;
  }

  .brand-header.brand-design2 .design2-wordmark{
    height:24px;
  }

  .brand-header.brand-design2 .design2-mark{
    height:36px;
  }

  .brand-header.brand-design2 .design2-company{
    font-size:10px;
  }
}

@media (max-width:580px){
  .site-header{
    height:88px;
  }

  .mobile-nav{
    top:88px;
  }

  .brand-header.brand-design2 .design2-wordmark{
    height:21px;
  }

  .brand-header.brand-design2 .design2-mark{
    height:32px;
  }

  .brand-header.brand-design2 .design2-company{
    font-size:9px;
    letter-spacing:.18em;
  }
}


/* === V006 — EXACT SELECTED DESIGN 2 ===
   Exact selected artwork: lime ANNI mark + white ANNI-TECH, one line. */
.site-header{
  height:108px;
}

.hero{
  padding-top:194px;
}

.brand-design2-exact{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  line-height:1;
}

.design2-exact-logo{
  display:block;
  width:auto;
  height:68px;
  object-fit:contain;
}

.brand-footer.brand-design2-exact .design2-exact-logo{
  height:58px;
}

.design2-mark-standalone{
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(201,255,25,.14));
}

.ai-brand img{
  object-fit:contain;
}

/* Kill all previous experimental logo children if stale markup is ever present. */
.brand-design2-exact .design2-topline,
.brand-design2-exact .design2-company,
.brand-design2-exact .brand-original-mark,
.brand-design2-exact .brand-original-name,
.brand-design2-exact .brand-logo-horizontal,
.brand-design2-exact .brand-mark,
.brand-design2-exact .brand-word{
  display:none !important;
}

@media (max-width:860px){
  .site-header{
    height:92px;
  }

  .mobile-nav{
    top:92px;
  }

  .brand-header.brand-design2-exact .design2-exact-logo{
    height:56px;
  }
}

@media (max-width:580px){
  .site-header{
    height:84px;
  }

  .mobile-nav{
    top:84px;
  }

  .brand-header.brand-design2-exact .design2-exact-logo{
    height:48px;
  }
}


/* === V007 — EXACT USER-SELECTED DESIGN 2 ARTWORK ===
   No reconstruction. Uses the selected rendered logo directly. */
.site-header{
  height:104px;
}

.hero{
  padding-top:190px;
}

.final-brand-lockup{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  line-height:1;
}

.final-brand-logo{
  display:block;
  width:auto;
  height:64px;
  object-fit:contain;
}

.brand-footer.final-brand-lockup .final-brand-logo{
  height:54px;
}

.final-mark-standalone{
  display:block;
  object-fit:contain;
}

/* Prevent any old experimental logo markup/styles from appearing. */
.final-brand-lockup .brand-mark,
.final-brand-lockup .brand-word,
.final-brand-lockup .brand-original-mark,
.final-brand-lockup .brand-original-name,
.final-brand-lockup .design2-topline,
.final-brand-lockup .design2-company,
.final-brand-lockup .brand-logo-horizontal{
  display:none !important;
}

.ai-brand img{
  object-fit:contain;
}

@media (max-width:860px){
  .site-header{
    height:90px;
  }

  .mobile-nav{
    top:90px;
  }

  .brand-header.final-brand-lockup .final-brand-logo{
    height:54px;
  }
}

@media (max-width:580px){
  .site-header{
    height:82px;
  }

  .mobile-nav{
    top:82px;
  }

  .brand-header.final-brand-lockup .final-brand-logo{
    height:46px;
  }
}


/* ==========================================================
   V008 — WHAT WE DO REDESIGN
   ========================================================== */

.what-we-do-v2{
  position:relative;
  padding:88px clamp(32px,4.7vw,88px) 96px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.78),transparent 28%),
    linear-gradient(120deg,#f4f3ef 0%,#efeee9 100%);
  border-bottom:1px solid rgba(9,12,14,.1);
  overflow:hidden;
}

.what-we-do-layout{
  max-width:1700px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(350px,.88fr) minmax(760px,1.95fr);
  gap:58px;
  align-items:stretch;
}

.what-we-do-copy{
  position:relative;
  padding:24px 8px 18px 0;
  min-height:610px;
}

.what-label{
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:39px;
}

.what-label-line{
  display:block;
  width:34px;
  height:2px;
  background:var(--accent);
}

.what-label .eyebrow{
  margin:0;
  font-size:10px;
  letter-spacing:.24em;
}

.what-we-do-copy h2{
  max-width:610px;
  font-size:clamp(54px,4.8vw,82px);
  line-height:.92;
  letter-spacing:-.055em;
}

.what-we-do-copy h2 em{
  color:#6f797e;
  font-style:normal;
}

.what-we-do-lede{
  max-width:540px;
  margin:38px 0 0;
  color:#626d72;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.72;
}

.what-we-do-decoration{
  position:absolute;
  left:-4px;
  right:0;
  bottom:0;
  height:150px;
  pointer-events:none;
  opacity:.82;
}

.decor-line{
  position:absolute;
  display:block;
  height:1px;
  background:#b9c0c1;
  transform-origin:left center;
}

.decor-line-a{
  left:-90px;
  bottom:70px;
  width:220px;
  transform:rotate(44deg);
}

.decor-line-b{
  left:112px;
  bottom:0;
  width:225px;
}

.decor-plus{
  position:absolute;
  left:127px;
  bottom:20px;
  color:#aab2b4;
  font-size:32px;
  font-weight:200;
}

.capability-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.capability-card{
  position:relative;
  min-height:295px;
  border:1px solid rgba(9,12,14,.13);
  border-radius:14px;
  background:rgba(248,247,243,.72);
  display:grid;
  grid-template-columns:minmax(250px,.88fr) minmax(220px,1fr);
  gap:20px;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.capability-card:hover{
  transform:translateY(-3px);
  border-color:rgba(9,12,14,.22);
  background:rgba(252,251,248,.9);
  box-shadow:0 18px 50px rgba(21,28,31,.06);
}

.capability-copy{
  padding:27px 0 27px 30px;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.capability-meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:31px;
}

.capability-number{
  color:#7c878c;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
}

.capability-rule{
  width:72px;
  height:1px;
  background:#c9cfcd;
}

.capability-card h3{
  font-size:clamp(24px,1.8vw,34px);
  line-height:1.04;
  letter-spacing:-.04em;
  margin-bottom:16px;
}

.capability-card p{
  max-width:375px;
  margin:0;
  color:#6b7478;
  font-size:14px;
  line-height:1.63;
}

.capability-arrow{
  display:block;
  margin-top:auto;
  color:#7fd900;
  font-size:31px;
  line-height:1;
  font-weight:300;
  transition:transform .22s ease;
}

.capability-card:hover .capability-arrow{
  transform:translateX(7px);
}

.capability-visual{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:23px 21px 23px 0;
}

.capability-visual svg{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  overflow:visible;
}

.capability-visual .ui-box,
.capability-visual .ui-mini,
.capability-visual .software-shell{
  fill:rgba(255,255,255,.46);
  stroke:#cfd4d2;
  stroke-width:1.25;
}

.capability-visual .ui-box.focus{
  stroke:#a9d92e;
  fill:rgba(201,255,25,.07);
}

.capability-visual .ui-box.soft{
  fill:rgba(255,255,255,.62);
}

.capability-visual .ui-mini{
  fill:#f7f7f3;
}

.capability-visual .ui-stroke,
.capability-visual .flow-line,
.capability-visual .chart-line{
  fill:none;
  stroke:#9ca7aa;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.capability-visual .flow-line{
  stroke:#b4bcbc;
}

.capability-visual .flow-line.dotted{
  stroke-dasharray:3 4;
}

.capability-visual .accent-node{
  fill:#95e800;
}

.capability-visual .soft-node{
  fill:#b6bebf;
}

.capability-visual .gear-ring{
  fill:none;
  stroke:#8edc00;
  stroke-width:1.8;
}

.capability-visual .gear-teeth{
  fill:none;
  stroke:#8edc00;
  stroke-width:1.3;
  stroke-linecap:round;
}

.capability-visual .spark{
  fill:#0f1417;
}

.capability-visual .software-sidebar{
  fill:#11171a;
}

.capability-visual .mini-accent-bar{
  fill:rgba(201,255,25,.52);
}

.capability-visual .dashed-box{
  stroke-dasharray:3 3;
  fill:transparent;
}

.data-visual .area-fill{
  fill:rgba(155,223,39,.22);
}

.data-visual .chart-line{
  stroke:#596267;
  stroke-width:1.6;
}

.data-visual .chart-point{
  fill:#f8f7f3;
  stroke:#596267;
  stroke-width:1.3;
}

.data-visual .softbar{
  fill:#bec5c4;
}

.data-visual .accentbar{
  fill:#93e600;
}

.capability-card:hover .accent-node{
  filter:drop-shadow(0 0 5px rgba(149,232,0,.45));
}

@media (max-width:1320px){
  .what-we-do-layout{
    grid-template-columns:minmax(315px,.75fr) minmax(680px,1.75fr);
    gap:36px;
  }

  .capability-card{
    grid-template-columns:1fr .8fr;
  }

  .capability-visual{
    padding-right:12px;
  }

  .capability-card h3{
    font-size:27px;
  }
}

@media (max-width:1080px){
  .what-we-do-layout{
    grid-template-columns:1fr;
  }

  .what-we-do-copy{
    min-height:auto;
    padding-bottom:15px;
  }

  .what-we-do-copy h2{
    max-width:760px;
  }

  .what-we-do-decoration{
    display:none;
  }

  .capability-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:780px){
  .what-we-do-v2{
    padding:68px 20px 72px;
  }

  .capability-grid{
    grid-template-columns:1fr;
  }

  .capability-card{
    min-height:280px;
  }

  .what-we-do-copy h2{
    font-size:clamp(49px,13vw,70px);
  }
}

@media (max-width:560px){
  .what-label{
    margin-bottom:25px;
  }

  .what-we-do-lede{
    margin-top:28px;
    font-size:15px;
  }

  .capability-card{
    grid-template-columns:1fr;
  }

  .capability-copy{
    padding:25px 24px 8px;
  }

  .capability-visual{
    min-height:170px;
    padding:0 22px 18px;
  }

  .capability-meta{
    margin-bottom:20px;
  }

  .capability-arrow{
    margin-top:22px;
  }

  .capability-visual svg{
    max-width:250px;
  }
}


/* ==========================================================
   V009 — CONNECTED SYSTEM + PROMINENT ASK ANNI CTA
   ========================================================== */

.system-section-v2{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:760px;
  padding:82px clamp(34px,4.6vw,88px);
  background:
    radial-gradient(circle at 52% 50%,rgba(168,231,0,.07),transparent 23%),
    radial-gradient(circle at 92% 12%,rgba(138,203,0,.08),transparent 24%),
    #070b0d;
  color:#fff;
  display:grid;
  grid-template-columns:minmax(285px,.72fr) minmax(620px,1.62fr) minmax(420px,1.08fr);
  gap:34px;
  align-items:center;
}

.system-grid-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.55) 65%,rgba(0,0,0,.2));
}

.system-grid-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(201,255,25,.45) 1px,transparent 1.3px);
  background-size:18px 18px;
  opacity:.08;
  mask-image:linear-gradient(90deg,transparent 34%,#000 48%,#000 100%);
}

.system-ambient{
  position:absolute;
  z-index:-2;
  pointer-events:none;
  filter:blur(70px);
  border-radius:50%;
}

.system-ambient-a{
  width:280px;
  height:280px;
  left:45%;
  top:31%;
  background:rgba(201,255,25,.08);
}

.system-ambient-b{
  width:360px;
  height:360px;
  right:-90px;
  top:-130px;
  background:rgba(122,184,0,.08);
}

.system-copy-v2{
  position:relative;
  z-index:2;
  align-self:center;
  max-width:390px;
}

.system-copy-v2 .eyebrow{
  margin-bottom:25px;
  color:#c7d0d4;
}

.system-copy-v2 h2{
  font-size:clamp(64px,4.8vw,88px);
  line-height:.87;
  letter-spacing:-.06em;
  margin:0 0 28px;
}

.system-copy-v2 h2 em{
  color:#f4f6f5;
  position:relative;
}

.system-copy-v2 h2 em::after{
  content:"";
  display:inline-block;
  width:.13em;
  height:.13em;
  border-radius:50%;
  background:var(--accent);
  margin-left:.08em;
  vertical-align:.08em;
  box-shadow:0 0 18px rgba(201,255,25,.45);
}

.system-copy-v2 > p:not(.eyebrow){
  max-width:350px;
  color:#aeb9bd;
  font-size:16px;
  line-height:1.65;
  margin:0 0 31px;
}

.system-cta{
  width:max-content;
  min-width:260px;
  justify-content:space-between;
}

/* ----- Connected system canvas ----- */

.system-map-v2{
  position:relative;
  z-index:2;
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(190px,1fr) 150px minmax(210px,1fr);
  align-items:center;
  gap:22px;
  padding:42px 20px 24px;
  border:0;
  background:transparent;
}

.flow-label{
  position:absolute;
  top:12px;
  z-index:4;
  color:#b8c2c6;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
}

.flow-label-before{left:28px;}
.flow-label-after{right:31%; color:var(--accent);}

.system-flow-lines{
  position:absolute;
  inset:20px 2px 5px;
  width:calc(100% - 4px);
  height:calc(100% - 25px);
  z-index:0;
  overflow:visible;
  pointer-events:none;
}

.system-flow-lines .flow-in{
  fill:none;
  stroke:url(#flowGrey);
  stroke-width:1.55;
}

.system-flow-lines .flow-out{
  fill:none;
  stroke:url(#flowLime);
  stroke-width:1.7;
  filter:url(#flowGlow);
}

.system-flow-lines .core-beam{
  stroke:#c9ff19;
  stroke-opacity:.25;
  stroke-width:1;
  stroke-dasharray:2 7;
  filter:url(#flowGlow);
}

.system-flow-lines .flow-pulse{
  fill:var(--accent);
  filter:url(#flowGlow);
  animation:flowPulse 2.2s ease-in-out infinite;
}

.system-flow-lines .p2{animation-delay:.55s;}
.system-flow-lines .p3{animation-delay:1.05s;}

@keyframes flowPulse{
  0%,100%{opacity:.35;transform:scale(.72);transform-origin:center;}
  50%{opacity:1;transform:scale(1.35);transform-origin:center;}
}

.flow-inputs,
.flow-outputs{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
}

.flow-inputs{gap:11px;}
.flow-outputs{gap:11px;}

.flow-item{
  min-height:59px;
  display:grid;
  align-items:center;
  border:1px solid rgba(178,190,194,.23);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  color:#eef2f2;
  font-size:13px;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.flow-item-in{
  grid-template-columns:38px 1fr 10px;
  padding:0 12px 0 14px;
}

.flow-item-out{
  grid-template-columns:10px 34px 1fr;
  padding:0 14px 0 8px;
  border-color:rgba(201,255,25,.17);
  background:linear-gradient(135deg,rgba(201,255,25,.038),rgba(255,255,255,.018));
}

.flow-icon{
  color:#f0f3f3;
  font-size:17px;
  line-height:1;
}

.flow-item-out .flow-icon{
  color:var(--accent);
}

.flow-item i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
}

.flow-item-in i{
  justify-self:end;
  margin-right:-17px;
  background:#e9eeee;
  box-shadow:0 0 12px rgba(255,255,255,.35);
}

.flow-item-out i{
  margin-left:-13px;
  background:var(--accent);
  box-shadow:0 0 14px rgba(201,255,25,.62);
}

.flow-core{
  position:relative;
  z-index:3;
  width:150px;
  height:184px;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,255,25,.78);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 30%,rgba(201,255,25,.08),transparent 50%),
    rgba(10,15,17,.94);
  box-shadow:
    0 0 0 1px rgba(201,255,25,.08),
    0 0 34px rgba(201,255,25,.12),
    0 22px 55px rgba(0,0,0,.34);
}

.flow-core-glow{
  position:absolute;
  inset:-18px;
  z-index:-1;
  border-radius:28px;
  background:radial-gradient(circle,rgba(201,255,25,.16),transparent 65%);
  filter:blur(10px);
}

.flow-core img{
  display:block;
  width:86px;
  height:86px;
  object-fit:contain;
  margin-bottom:12px;
  filter:drop-shadow(0 0 18px rgba(201,255,25,.18));
}

.flow-core strong{
  font-family:"Space Grotesk",sans-serif;
  font-size:15px;
  letter-spacing:-.02em;
}

.flow-core small{
  margin-top:5px;
  color:#68767c;
  font-size:7px;
  font-weight:800;
  letter-spacing:.22em;
}

/* ----- Ask ANNI: real CTA ----- */

.ai-card-v2{
  position:relative;
  z-index:3;
  min-height:545px;
  padding:23px;
  border:1px solid rgba(201,255,25,.38);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(20,28,31,.96),rgba(9,14,16,.98));
  color:#f5f7f6;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 0 45px rgba(201,255,25,.07),
    0 28px 80px rgba(0,0,0,.34);
  display:flex;
  flex-direction:column;
}

.ai-card-v2::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 25% 0%,rgba(201,255,25,.055),transparent 33%);
}

.ai-card-head-v2{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:13px;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.ai-brand-v2{
  width:50px;
  height:50px;
  border-radius:10px;
  background:#080c0e;
  border:1px solid rgba(255,255,255,.08);
  padding:7px;
}

.ai-brand-v2 img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.ai-title strong{
  display:block;
  font-family:"Space Grotesk",sans-serif;
  color:#fff;
  font-size:25px;
  letter-spacing:-.035em;
}

.ai-title small{
  display:block;
  margin-top:3px;
  color:#88959a;
  font-size:11px;
}

.ai-status-v2{
  align-self:start;
  margin-top:7px;
  color:#c8d0d3;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  white-space:nowrap;
}

.ai-status-v2 i{
  width:7px;
  height:7px;
  margin-right:6px;
  background:#2ee86e;
  box-shadow:0 0 12px rgba(46,232,110,.55);
}

.ai-messages-v2{
  position:relative;
  z-index:1;
  flex:1;
  min-height:180px;
  max-height:240px;
  padding:18px 0 13px;
  gap:11px;
  overflow:auto;
}

.ai-card-v2 .ai-message{
  max-width:94%;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:15px 16px;
  font-size:13px;
  line-height:1.55;
}

.ai-card-v2 .ai-message.assistant{
  background:rgba(255,255,255,.055);
  color:#e9eeee;
}

.ai-card-v2 .ai-message.user{
  background:rgba(201,255,25,.11);
  border-color:rgba(201,255,25,.18);
  color:#fff;
}

.prompt-chips-v2{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:15px;
}

.prompt-chips-v2 button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.025);
  color:#d8dfe1;
  font-size:10px;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
}

.prompt-chips-v2 button span{
  color:var(--accent);
  font-size:13px;
}

.prompt-chips-v2 button:hover{
  transform:translateY(-1px);
  border-color:rgba(201,255,25,.38);
  background:rgba(201,255,25,.06);
  color:#fff;
}

.ai-form-v2{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 58px;
  gap:8px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  padding:6px;
}

.ai-form-v2:focus-within{
  border-color:rgba(201,255,25,.58);
  box-shadow:0 0 0 3px rgba(201,255,25,.05);
}

.ai-form-v2 input{
  min-height:52px;
  padding:0 12px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:13px;
}

.ai-form-v2 input::placeholder{
  color:#7f8b90;
}

.ai-form-v2 button{
  width:58px;
  height:52px;
  border:0;
  border-radius:8px;
  background:var(--accent);
  color:#0a0e10;
  font-size:25px;
  font-weight:700;
  box-shadow:0 0 26px rgba(201,255,25,.16);
  transition:transform .2s ease,box-shadow .2s ease;
}

.ai-form-v2 button:hover{
  transform:translateX(2px);
  box-shadow:0 0 34px rgba(201,255,25,.27);
}

.ai-disclaimer-v2{
  position:relative;
  z-index:1;
  margin:12px 0 0;
  color:#6f7b80;
  font-size:9px;
  line-height:1.45;
}

/* ----- Responsive ----- */

@media (max-width:1500px){
  .system-section-v2{
    grid-template-columns:minmax(260px,.7fr) minmax(560px,1.5fr) minmax(390px,1fr);
    gap:24px;
    padding-left:40px;
    padding-right:40px;
  }

  .system-copy-v2 h2{
    font-size:68px;
  }

  .system-map-v2{
    grid-template-columns:minmax(170px,1fr) 132px minmax(185px,1fr);
    gap:17px;
  }

  .flow-core{
    width:132px;
    height:166px;
  }

  .flow-core img{
    width:72px;
    height:72px;
  }

  .flow-item{
    font-size:11px;
    min-height:54px;
  }
}

@media (max-width:1240px){
  .system-section-v2{
    grid-template-columns:.7fr 1.3fr;
  }

  .ai-card-v2{
    grid-column:1/-1;
    width:min(720px,100%);
    justify-self:center;
    min-height:500px;
  }
}

@media (max-width:900px){
  .system-section-v2{
    grid-template-columns:1fr;
    padding:72px 20px;
  }

  .system-copy-v2{
    max-width:620px;
  }

  .system-copy-v2 h2{
    font-size:clamp(58px,12vw,78px);
  }

  .system-map-v2{
    min-height:520px;
    width:100%;
  }

  .ai-card-v2{
    width:100%;
  }
}

@media (max-width:650px){
  .system-map-v2{
    min-height:auto;
    grid-template-columns:1fr;
    gap:14px;
    padding:48px 0 0;
  }

  .system-flow-lines{
    display:none;
  }

  .flow-label-before{
    left:4px;
  }

  .flow-label-after{
    top:auto;
    right:auto;
    left:4px;
    bottom:245px;
  }

  .flow-inputs,
  .flow-outputs{
    gap:8px;
  }

  .flow-core{
    width:100%;
    height:128px;
    margin:10px 0;
  }

  .flow-core img{
    width:60px;
    height:60px;
    margin-bottom:5px;
  }

  .flow-item-in i,
  .flow-item-out i{
    display:none;
  }

  .flow-item-in{
    grid-template-columns:34px 1fr;
  }

  .flow-item-out{
    grid-template-columns:34px 1fr;
  }

  .ai-card-v2{
    padding:18px;
    min-height:520px;
  }

  .ai-card-head-v2{
    grid-template-columns:46px 1fr;
  }

  .ai-status-v2{
    display:none;
  }

  .ai-title strong{
    font-size:22px;
  }

  .prompt-chips-v2 button{
    flex:1 1 calc(50% - 5px);
    justify-content:center;
  }
}


/* ==========================================================
   V010 — HERO ASK ANNI + EXPANDED CONNECTED SYSTEM
   ========================================================== */

/* ---------- header ---------- */

.site-header{
  height:88px;
}

.header-cta{
  min-width:150px;
}

.mobile-nav{
  top:88px;
}

/* ---------- hero ---------- */

.hero-v2{
  min-height:760px;
  padding:118px clamp(30px,4.2vw,74px) 38px;
  display:grid;
  grid-template-columns:minmax(440px,.78fr) minmax(760px,1.22fr);
  gap:46px;
  align-items:center;
  background:
    radial-gradient(circle at 73% 24%,rgba(201,255,25,.12),transparent 29%),
    radial-gradient(circle at 42% 90%,rgba(0,123,255,.08),transparent 29%),
    linear-gradient(108deg,#080c0e 0%,#0a1013 58%,#10191b 100%);
}

.hero-copy-v2{
  max-width:670px;
  align-self:center;
}

.hero-copy-v2 h1{
  font-size:clamp(60px,5.2vw,90px);
  line-height:.91;
  letter-spacing:-.06em;
  max-width:none;
}

.hero-copy-v2 h1 em{
  color:var(--accent);
}

.hero-lede-v2{
  max-width:630px;
  margin:25px 0 30px;
  font-size:clamp(16px,1.18vw,20px);
  line-height:1.58;
}

.hero-actions-v2{
  display:flex;
  align-items:center;
  gap:28px;
}

.hero-ask-button{
  min-width:250px;
  justify-content:space-between;
  font-size:12px;
}

.hero-see-how{
  white-space:nowrap;
}

/* ---------- hero Ask ANNI ---------- */

.hero-ai-panel{
  position:relative;
  z-index:3;
  width:100%;
  min-height:590px;
  padding:22px;
  border:1px solid rgba(201,255,25,.62);
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%,rgba(201,255,25,.05),transparent 26%),
    linear-gradient(145deg,rgba(16,25,28,.98),rgba(7,13,15,.985));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.018),
    0 0 55px rgba(201,255,25,.06),
    0 28px 80px rgba(0,0,0,.35);
  overflow:hidden;
}

.hero-ai-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(201,255,25,.018) 50%,transparent),
    radial-gradient(circle at 91% 4%,rgba(201,255,25,.065),transparent 26%);
}

.hero-ai-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:14px;
  align-items:center;
  padding:0 2px 18px;
}

.hero-ai-logo{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  padding:7px;
  border-radius:10px;
  background:#0a1012;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 0 18px rgba(201,255,25,.035);
}

.hero-ai-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.hero-ai-title strong{
  display:block;
  font-family:"Space Grotesk",sans-serif;
  font-size:28px;
  line-height:1;
  letter-spacing:-.035em;
}

.hero-ai-title small{
  display:block;
  margin-top:5px;
  color:#8c999e;
  font-size:12px;
}

.hero-ai-status{
  align-self:start;
  margin-top:10px;
  color:#dce4e5;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.hero-ai-status i{
  width:8px;
  height:8px;
  display:inline-block;
  margin-right:7px;
  border-radius:50%;
  background:#2ee86e;
  box-shadow:0 0 13px rgba(46,232,110,.65);
}

.hero-ai-stage,
.hero-ai-response{
  position:relative;
  z-index:2;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(6,12,14,.4);
}

.hero-ai-stage{
  padding:17px 16px 14px;
}

.hero-ai-step-label{
  min-height:18px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#738087;
}

.hero-ai-step-label > span{
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}

.hero-ai-step-label > i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#5f6b70;
}

.hero-ai-step-label small{
  font-size:8px;
  font-weight:800;
  letter-spacing:.2em;
}

.hero-ai-step-label em{
  margin-left:auto;
  color:#717e83;
  font-style:normal;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

.hero-ai-stage h2{
  max-width:660px;
  margin:13px 0 15px 47px;
  font-size:clamp(22px,1.8vw,31px);
  line-height:1.05;
  letter-spacing:-.035em;
}

.hero-ai-industries{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:0 0 14px;
}

.hero-ai-industries button{
  min-height:70px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  text-align:left;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(255,255,255,.02);
  color:#f0f4f4;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.hero-ai-industries button:hover{
  transform:translateY(-1px);
  border-color:rgba(201,255,25,.5);
  background:rgba(201,255,25,.045);
  box-shadow:0 0 22px rgba(201,255,25,.045);
}

.hero-ai-industries button:first-child{
  border-color:rgba(201,255,25,.72);
  background:rgba(201,255,25,.035);
}

.industry-icon{
  color:var(--accent);
  font-size:23px;
  text-align:center;
}

.hero-ai-industries strong{
  font-size:11px;
  line-height:1.25;
}

.hero-ai-form{
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.028);
}

.hero-ai-form:focus-within{
  border-color:rgba(201,255,25,.55);
  box-shadow:0 0 0 3px rgba(201,255,25,.04);
}

.hero-ai-input-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#132026;
  color:#c8d2d5;
  font-size:17px;
}

.hero-ai-form input{
  min-width:0;
  min-height:46px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:12px;
}

.hero-ai-form input::placeholder{
  color:#78868b;
}

.hero-ai-form button{
  min-height:46px;
  min-width:205px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 17px;
  border:0;
  border-radius:7px;
  background:var(--accent);
  color:#0a0e10;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:9px;
  font-weight:900;
  box-shadow:0 0 25px rgba(201,255,25,.13);
}

.hero-ai-response{
  margin-top:12px;
  padding:14px 14px 12px;
}

.hero-ai-response-body{
  margin-top:12px;
  display:grid;
  grid-template-columns:1.45fr .58fr;
  min-height:105px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  overflow:hidden;
  background:rgba(255,255,255,.018);
}

.hero-ai-response-main{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:13px;
  align-items:start;
  padding:16px;
}

.hero-ai-spark{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,255,25,.6);
  border-radius:8px;
  color:var(--accent);
  font-size:25px;
  box-shadow:inset 0 0 18px rgba(201,255,25,.04);
}

.hero-ai-response-copy strong{
  display:block;
  margin-bottom:7px;
  font-family:"Space Grotesk",sans-serif;
  font-size:16px;
}

.hero-ai-response-copy p{
  margin:0;
  max-width:520px;
  color:#9ea9ad;
  font-size:11px;
  line-height:1.55;
}

.hero-ai-benefits{
  border-left:1px solid rgba(255,255,255,.08);
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
}

.hero-ai-benefits span{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:8px;
  color:#9eaaae;
  font-size:9px;
}

.hero-ai-benefits span:first-letter{
  color:var(--accent);
}

.hero-ai-benefits b{
  font-weight:500;
}

.hero-live-messages{
  max-height:150px;
  margin-top:10px;
  padding:0;
}

.hero-hidden-initial{
  display:none;
}

.hero-live-messages .ai-message{
  max-width:100%;
  padding:10px 12px;
  border-radius:8px;
  font-size:11px;
  line-height:1.5;
}

.hero-live-messages .ai-message.user{
  align-self:flex-end;
  background:rgba(201,255,25,.1);
  border:1px solid rgba(201,255,25,.18);
  color:#fff;
}

.hero-live-messages .ai-message.assistant{
  align-self:stretch;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#edf1f2;
}

/* ---------- expanded connected system ---------- */

.system-section-v3{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:720px;
  padding:86px clamp(34px,4.8vw,92px);
  display:grid;
  grid-template-columns:minmax(310px,.62fr) minmax(850px,1.75fr);
  gap:58px;
  align-items:center;
  background:
    radial-gradient(circle at 68% 46%,rgba(201,255,25,.065),transparent 28%),
    #070b0d;
  color:#fff;
}

.system-copy-v3{
  max-width:410px;
}

.system-copy-v3 h2{
  font-size:clamp(67px,5vw,90px);
  line-height:.88;
  letter-spacing:-.06em;
  margin-bottom:29px;
}

.system-copy-v3 h2 em{
  color:#fff;
}

.system-copy-v3 > p:not(.eyebrow){
  max-width:370px;
  color:#aeb9bd;
  font-size:16px;
  line-height:1.65;
  margin-bottom:31px;
}

.system-map-v3{
  position:relative;
  min-height:570px;
  display:grid;
  grid-template-columns:minmax(230px,1fr) 175px minmax(260px,1fr);
  gap:32px;
  align-items:center;
  padding:45px 28px 24px;
}

.system-flow-lines-v3{
  inset:18px 0 0;
  width:100%;
  height:calc(100% - 18px);
}

.system-flow-lines-v3 .flow-in{
  stroke:url(#flowGreyV3);
}

.system-flow-lines-v3 .flow-out{
  stroke:url(#flowLimeV3);
  filter:url(#flowGlowV3);
}

.system-flow-lines-v3 .core-beam,
.system-flow-lines-v3 .flow-pulse{
  filter:url(#flowGlowV3);
}

.system-map-v3 .flow-item{
  min-height:62px;
  font-size:13px;
}

.system-map-v3 .flow-core{
  width:175px;
  height:205px;
}

.system-map-v3 .flow-core img{
  width:96px;
  height:96px;
}

.system-map-v3 .flow-core strong{
  font-size:17px;
}

.system-map-v3 .flow-label-before{
  left:36px;
}

.system-map-v3 .flow-label-after{
  right:31%;
}

/* ---------- responsive ---------- */

@media (max-width:1500px){
  .hero-v2{
    grid-template-columns:minmax(410px,.72fr) minmax(700px,1.28fr);
    gap:30px;
  }

  .hero-copy-v2 h1{
    font-size:70px;
  }

  .hero-ai-panel{
    min-height:570px;
  }

  .system-section-v3{
    grid-template-columns:minmax(280px,.58fr) minmax(740px,1.55fr);
    gap:35px;
    padding-left:40px;
    padding-right:40px;
  }

  .system-map-v3{
    grid-template-columns:minmax(205px,1fr) 150px minmax(225px,1fr);
    gap:24px;
  }

  .system-map-v3 .flow-core{
    width:150px;
    height:184px;
  }

  .system-map-v3 .flow-core img{
    width:82px;
    height:82px;
  }
}

@media (max-width:1180px){
  .hero-v2{
    grid-template-columns:1fr;
    padding-top:125px;
  }

  .hero-copy-v2{
    max-width:800px;
  }

  .hero-copy-v2 h1{
    font-size:clamp(64px,8vw,86px);
  }

  .hero-ai-panel{
    max-width:980px;
    width:100%;
  }

  .system-section-v3{
    grid-template-columns:1fr;
  }

  .system-copy-v3{
    max-width:700px;
  }

  .system-map-v3{
    width:100%;
  }
}

@media (max-width:780px){
  .hero-v2{
    padding:112px 20px 45px;
  }

  .hero-copy-v2 h1{
    font-size:clamp(52px,14vw,70px);
  }

  .hero-actions-v2{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-ai-panel{
    padding:16px;
  }

  .hero-ai-head{
    grid-template-columns:50px 1fr;
  }

  .hero-ai-status{
    display:none;
  }

  .hero-ai-industries{
    grid-template-columns:1fr 1fr;
  }

  .hero-ai-stage h2{
    margin-left:0;
  }

  .hero-ai-form{
    grid-template-columns:42px 1fr;
  }

  .hero-ai-form button{
    grid-column:1/-1;
    width:100%;
    min-width:0;
  }

  .hero-ai-response-body{
    grid-template-columns:1fr;
  }

  .hero-ai-benefits{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .system-section-v3{
    padding:70px 20px;
  }
}

@media (max-width:650px){
  .system-map-v3{
    min-height:auto;
    grid-template-columns:1fr;
    gap:14px;
    padding:45px 0 0;
  }

  .system-flow-lines-v3{
    display:none;
  }

  .system-map-v3 .flow-core{
    width:100%;
    height:135px;
  }

  .system-map-v3 .flow-core img{
    width:62px;
    height:62px;
    margin-bottom:4px;
  }

  .system-map-v3 .flow-item-in,
  .system-map-v3 .flow-item-out{
    grid-template-columns:34px 1fr;
  }

  .system-map-v3 .flow-item i{
    display:none;
  }

  .system-map-v3 .flow-label-after{
    top:auto;
    right:auto;
    left:4px;
    bottom:245px;
  }
}


/* ==========================================================
   V011 — FIVE-FRAME STRUCTURE
   1 Hero + Ask ANNI
   2 What We Do
   3 Examples (dark)
   4 How We Work + About (light)
   5 Contact + Footer
   ========================================================== */

/* ----- full-screen frame discipline on desktop ----- */

@media (min-width: 901px){
  .hero-v2,
  .what-we-do-v2,
  .examples-section,
  .approach-about-section,
  .contact-frame{
    min-height:100svh;
    scroll-margin-top:0;
  }

  .what-we-do-v2{
    display:flex;
    align-items:center;
  }

  .what-we-do-v2 > .what-we-do-layout{
    width:100%;
  }

  .examples-section{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .approach-about-section{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* ----- frame 3: Examples becomes black ----- */

.examples-section{
  background:
    radial-gradient(circle at 90% 10%,rgba(201,255,25,.055),transparent 24%),
    radial-gradient(circle at 10% 82%,rgba(0,126,255,.045),transparent 26%),
    #090d0f;
  color:#f5f7f6;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.examples-section .section-heading .eyebrow{
  color:var(--accent);
}

.examples-section .section-heading h2{
  color:#fff;
}

.examples-section .section-heading h2 em{
  color:var(--accent);
}

.examples-section .section-heading > p:last-child{
  color:#9eaaae;
}

.examples-section .example-card{
  background:
    linear-gradient(145deg,rgba(19,27,30,.96),rgba(10,15,17,.98));
  border-color:rgba(255,255,255,.12);
  color:#f4f7f6;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}

.examples-section .example-card:hover{
  border-color:rgba(201,255,25,.32);
}

.examples-section .example-type{
  color:#8d999e;
}

.examples-section .example-card h3{
  color:#fff;
}

.examples-section .example-card p{
  color:#9da8ac;
}

.examples-section .example-stack span{
  color:#c8d1d3;
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.1);
}

.examples-section .mini-flow span{
  color:#d9e0e2;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}

.examples-section .mini-flow b{
  color:var(--accent);
}

.examples-section .document-stack i{
  background:#171f22;
  border-color:#364146;
}

.examples-section .document-stack strong{
  color:var(--accent);
}

/* ----- frame 4: How We Work + About merged and LIGHT ----- */

.approach-about-section{
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.8),transparent 25%),
    linear-gradient(120deg,#f4f3ef 0%,#ecebe6 100%);
  color:var(--ink);
  padding:78px clamp(24px,6vw,92px) 68px;
}

.approach-top{
  width:100%;
}

.approach-about-section .approach-statement{
  margin-bottom:52px;
}

.approach-about-section .approach-statement h2{
  color:var(--ink);
}

.approach-about-section .approach-statement h2 em{
  color:#7c868a;
}

.approach-about-section .approach-steps{
  border-top:1px solid rgba(9,12,14,.16);
}

.approach-about-section .approach-steps article{
  min-height:170px;
  border-right-color:rgba(9,12,14,.13);
}

.approach-about-section .approach-steps span{
  color:#75bd00;
}

.approach-about-section .approach-steps h3{
  color:var(--ink);
  margin-top:24px;
}

.approach-about-section .approach-steps p{
  color:#5f696d;
}

.approach-about{
  display:grid;
  grid-template-columns:.9fr 1.25fr .7fr;
  gap:52px;
  align-items:center;
  margin-top:48px;
  padding-top:42px;
  border-top:1px solid rgba(9,12,14,.14);
}

.approach-about-title h3{
  margin:15px 0 0;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(34px,3vw,52px);
  line-height:.96;
  letter-spacing:-.045em;
}

.approach-about-copy{
  color:#5b6569;
  font-size:14px;
  line-height:1.66;
}

.approach-about-copy p{
  margin:0 0 13px;
}

.approach-about-lead{
  color:#14191b;
  font-family:"Space Grotesk",sans-serif;
  font-size:20px;
  line-height:1.35;
}

.approach-about-note{
  min-height:145px;
  padding-left:28px;
  border-left:1px solid rgba(9,12,14,.14);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.approach-about-note > span{
  width:32px;
  height:3px;
  margin-bottom:18px;
  background:var(--accent);
}

.approach-about-note strong{
  font-family:"Space Grotesk",sans-serif;
  font-size:18px;
  line-height:1.2;
}

.approach-about-note small{
  margin-top:12px;
  color:#697377;
  line-height:1.5;
}

/* ----- frame 5: Contact + footer together ----- */

.contact-frame{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:#050708;
  color:#fff;
}

.contact-frame .contact-section{
  flex:1 1 auto;
  min-height:0;
  align-items:center;
  padding-top:74px;
  padding-bottom:52px;
}

.contact-frame .site-footer{
  flex:0 0 auto;
  padding-top:28px;
  padding-bottom:18px;
}

.contact-frame .footer-brand{
  padding-bottom:24px;
}

.contact-frame .footer-links{
  margin-top:24px;
  margin-bottom:24px;
}

.contact-frame .footer-bottom{
  padding-top:16px;
}

/* ----- remove old standalone About CSS from impacting merged frame ----- */

.approach-about-section .about-kicker,
.approach-about-section .about-copy,
.approach-about-section .about-note{
  all:unset;
}

/* ----- mobile/tablet keeps natural document flow ----- */

@media (max-width:900px){
  .examples-section{
    min-height:auto;
  }

  .approach-about-section{
    min-height:auto;
    padding:72px 20px;
  }

  .approach-about{
    grid-template-columns:1fr;
    gap:26px;
    margin-top:38px;
    padding-top:34px;
  }

  .approach-about-note{
    min-height:auto;
    padding:24px 0 0;
    border-left:0;
    border-top:1px solid rgba(9,12,14,.14);
  }

  .contact-frame{
    min-height:auto;
  }
}

@media (max-width:580px){
  .approach-about-section .approach-steps{
    grid-template-columns:1fr;
  }

  .approach-about-section .approach-steps article{
    min-height:auto;
    padding-bottom:28px;
  }
}


/* ==========================================================
   V012 — REAL PROGRAM EXAMPLES + CASE STUDY DETAIL VIEWS
   ========================================================== */

.examples-v2{
  position:relative;
  overflow:hidden;
  padding:74px clamp(28px,4.5vw,84px) 66px;
  background:
    radial-gradient(circle at 5% 92%,rgba(201,255,25,.07),transparent 26%),
    radial-gradient(circle at 90% 8%,rgba(201,255,25,.035),transparent 21%),
    #071013;
}

.examples-v2-intro{
  max-width:1780px;
  margin:0 auto 32px;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:48px;
  align-items:end;
}

.examples-v2-intro .eyebrow{
  color:#dce4e4;
  margin-bottom:18px;
}

.examples-v2-intro h2{
  margin:0;
  max-width:520px;
  color:#fff;
  font-size:clamp(52px,4.6vw,78px);
  line-height:.91;
  letter-spacing:-.055em;
}

.examples-v2-intro h2 em{
  color:var(--accent);
  font-style:normal;
}

.examples-v2-copy{
  max-width:620px;
  justify-self:end;
  padding-bottom:4px;
}

.examples-v2-copy p{
  margin:0 0 20px;
  color:#a7b2b6;
  font-size:15px;
  line-height:1.62;
}

.examples-v2-copy .button{
  min-width:230px;
  justify-content:space-between;
}

.case-study-grid{
  max-width:1780px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.case-study-card{
  min-width:0;
  min-height:565px;
  padding:17px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(17,25,28,.96),rgba(7,13,15,.985));
  color:#f6f8f7;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.case-study-card:hover{
  transform:translateY(-3px);
  border-color:rgba(201,255,25,.36);
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.case-study-card-head{
  display:grid;
  grid-template-columns:auto 58px 1fr;
  gap:12px;
  align-items:center;
  min-height:29px;
  margin-bottom:13px;
}

.case-number{
  color:var(--accent);
  font-size:14px;
  font-weight:800;
}

.case-rule{
  height:1px;
  background:#536064;
}

.case-category{
  justify-self:end;
  color:#a6b1b5;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}

.case-preview{
  height:250px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  background:#081115;
}

.case-preview-topbar{
  height:36px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 11px;
  color:#dce4e5;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#0c1519;
  font-size:9px;
  font-weight:700;
}

.case-preview-topbar span{margin-right:auto}
.case-preview-topbar i{
  width:5px;height:5px;border-radius:50%;background:#536065;
}

.case-preview-topbar.light{
  background:#f2f5f5;
  color:#0c1113;
  border-bottom-color:#d4dada;
}

.case-study-card h3{
  margin:15px 0 8px;
  color:#fff;
  font-size:22px;
  line-height:1.06;
  letter-spacing:-.035em;
}

.case-study-card > p{
  margin:0 0 14px;
  color:#a5b0b4;
  font-size:12px;
  line-height:1.52;
}

.case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:auto;
}

.case-tags span{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  color:#bfc8cb;
  background:rgba(255,255,255,.025);
  font-size:8px;
  font-weight:700;
  letter-spacing:.03em;
}

.case-details-link{
  margin-top:13px;
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.09);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.case-details-link span{
  color:var(--accent);
  font-size:21px;
  line-height:1;
}

.case-study-disclaimer{
  max-width:1780px;
  margin:13px auto 0;
  color:#59666b;
  font-size:8px;
  line-height:1.4;
}

/* ----- logistics preview ----- */

.logistics-ui{
  height:calc(100% - 36px);
  display:grid;
  grid-template-columns:78px 1fr 112px;
}

.logistics-sidebar,
.research-sidebar{
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  gap:7px;
  background:#0b1519;
  border-right:1px solid rgba(255,255,255,.06);
}

.logistics-sidebar span,
.research-sidebar span{
  padding:6px 6px;
  border-radius:4px;
  color:#738187;
  font-size:7px;
}

.logistics-sidebar span.active,
.research-sidebar span.active{
  color:#fff;
  background:#102839;
}

.logistics-map,.detail-map{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(33deg,transparent 48%,rgba(45,83,99,.18) 49%,transparent 50%),
    linear-gradient(-22deg,transparent 48%,rgba(45,83,99,.16) 49%,transparent 50%),
    #071b28;
}

.logistics-map::before,.detail-map::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background-image:
    linear-gradient(rgba(46,91,110,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,91,110,.22) 1px,transparent 1px);
  background-size:20px 20px;
}

.road,.route{
  position:absolute;
  display:block;
  height:3px;
  transform-origin:left center;
  border-radius:999px;
}

.road{background:#28404c;opacity:.5}
.r1{left:4%;top:25%;width:85%;transform:rotate(24deg)}
.r2{left:7%;top:66%;width:87%;transform:rotate(-23deg)}
.r3{left:18%;top:15%;width:75%;transform:rotate(70deg)}

.route-a{left:15%;top:24%;width:78%;background:#86ef3e;transform:rotate(28deg);box-shadow:0 0 8px rgba(134,239,62,.45)}
.route-b{left:9%;top:72%;width:78%;background:#198eff;transform:rotate(-25deg);box-shadow:0 0 8px rgba(25,142,255,.35)}
.route-c{left:33%;top:12%;width:68%;background:#ff4545;transform:rotate(68deg);box-shadow:0 0 8px rgba(255,69,69,.28)}

.vehicle{
  position:absolute;
  width:23px;height:23px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#0f1d21;
  border:2px solid #c9ff19;
  color:#fff;
  font-style:normal;
  font-size:8px;
  box-shadow:0 0 12px rgba(201,255,25,.4);
}

.v1{left:31%;top:26%}.v2{left:61%;top:53%;border-color:#3ba0ff}.v3{left:73%;top:72%}
.exception{
  position:absolute;
  display:grid;place-items:center;
  width:22px;height:22px;
  border-radius:50%;
  background:#e93838;
  color:white;
  box-shadow:0 0 14px rgba(233,56,56,.5);
  font-style:normal;
}
.ex1{left:52%;top:68%}

.logistics-status{
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#0b1519;
}
.status{
  padding:9px 7px;
  border-radius:5px;
  background:#111d21;
  border:1px solid rgba(255,255,255,.05);
}
.status span,.status b{display:block;font-size:7px}
.status span{color:#8d999d;margin-bottom:4px}
.status b{color:#dfe5e6}
.status.bad{background:#311416}.status.bad b{color:#ff6666}
.status.good{background:#10261b}.status.good b{color:#7dff8a}

/* ----- education preview ----- */

.education-ui{
  height:calc(100% - 36px);
  display:grid;
  grid-template-columns:80px 1fr 120px;
  background:#eef3f5;
  color:#0b1113;
}

.education-sidebar{
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-right:1px solid #d6dddf;
  background:#f8fafb;
}
.education-sidebar span{
  padding:6px;border-radius:4px;color:#718087;font-size:7px;
}
.education-sidebar span.active{background:#e7f0ff;color:#1975d2}

.education-main{padding:12px 10px}
.edu-title{display:flex;justify-content:space-between;align-items:center}
.edu-title strong{font-size:10px}
.edu-title span{padding:5px 7px;border-radius:4px;background:#2482e8;color:#fff;font-size:6px}
.edu-search{height:19px;margin:8px 0;border:1px solid #d7dddf;border-radius:4px;background:#fff}
.edu-row{
  min-height:30px;display:grid;grid-template-columns:18px 1fr 54px 28px;gap:5px;align-items:center;
  border-top:1px solid #e0e6e7;font-size:6px;
}
.edu-row i{width:14px;height:14px;border-radius:50%;background:#708aa1}
.edu-row b{font-weight:600}.edu-row em{height:6px;border-radius:999px;background:linear-gradient(90deg,#58bd5f 65%,#dce3e4 65%)}.edu-row small{font-size:6px;color:#607078}

.education-panel{
  padding:12px 9px;border-left:1px solid #d7dfe0;background:#f8fafb;
}
.education-panel strong,.education-panel span{display:block}
.education-panel strong{font-size:9px;margin-bottom:12px}
.education-panel span{font-size:6px;color:#69787e;margin:7px 0 3px}
.education-panel i{display:block;height:18px;border:1px solid #d7dfe0;border-radius:4px;background:#fff}
.education-panel button{width:100%;margin-top:10px;padding:7px;border:0;border-radius:4px;background:#2584e8;color:#fff;font-size:6px}

/* ----- research preview ----- */

.research-ui{
  height:calc(100% - 36px);
  display:grid;
  grid-template-columns:78px 1fr 100px;
}

.research-main{padding:10px}
.research-search{
  height:25px;padding:7px 8px;border-radius:5px;background:#0e1a20;color:#728087;font-size:7px;
}
.research-tabs{display:flex;gap:14px;margin:10px 0 7px;border-bottom:1px solid rgba(255,255,255,.08)}
.research-tabs span{padding-bottom:6px;color:#64747a;font-size:6px}
.research-tabs span.active{color:#fff;border-bottom:2px solid #2f9dff}
.finding{
  min-height:43px;padding:8px 6px;border-top:1px solid rgba(255,255,255,.07);
}
.finding b{display:block;margin-bottom:6px;color:#e9eeee;font-size:7px}
.finding i{display:inline-flex;padding:3px 5px;border-radius:3px;font-size:5px;font-style:normal}
.confidence.high{background:#0d582e;color:#76ffa7}
.confidence.medium{background:#5f4917;color:#ffe68a}
.research-sources{padding:11px 8px;border-left:1px solid rgba(255,255,255,.07);background:#0a1418}
.research-sources strong{display:block;margin-bottom:9px;font-size:8px}
.research-sources span{display:flex;justify-content:space-between;padding:6px 0;color:#849297;font-size:5px;border-bottom:1px solid rgba(255,255,255,.05)}
.research-sources b{color:#dce5e7}

/* ==========================================================
   Detail views — pure CSS :target overlays
   ========================================================== */

.case-detail{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(circle at 86% 10%,rgba(201,255,25,.055),transparent 22%),
    #061014;
  color:#fff;
}

.case-detail:target{
  display:block;
}

.case-detail-shell{
  width:min(1840px,100%);
  margin:0 auto;
  padding:30px clamp(22px,3.5vw,62px) 48px;
}

.case-back{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  color:#c5ced0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.case-back:hover{color:var(--accent)}

.case-detail-hero{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(420px,.68fr) minmax(780px,1.55fr);
  gap:46px;
  align-items:center;
}

.case-detail-copy h2{
  margin:11px 0 21px;
  max-width:610px;
  color:#fff;
  font-size:clamp(62px,5.3vw,94px);
  line-height:.88;
  letter-spacing:-.06em;
}

.case-detail-copy h2 em{
  color:var(--accent);
  font-style:normal;
}

.case-detail-copy > p:not(.eyebrow){
  max-width:610px;
  color:#b7c0c3;
  font-size:16px;
  line-height:1.55;
}

.case-detail-copy .case-tags{margin-top:20px}

.detail-dashboard{
  min-height:405px;
  padding:13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:#091419;
  box-shadow:0 28px 70px rgba(0,0,0,.2);
}

.detail-dash-head{
  display:flex;justify-content:space-between;align-items:center;
  min-height:53px;padding:0 6px 11px;
}
.detail-dash-head strong,.detail-dash-head small{display:block}
.detail-dash-head strong{font-size:18px}.detail-dash-head small{margin-top:3px;color:#77868b;font-size:8px}
.live-pill{padding:7px 9px;border:1px solid rgba(201,255,25,.22);border-radius:6px;color:#93e86a;font-size:7px}

.detail-dash-grid{
  height:322px;
  display:grid;
  grid-template-columns:1.45fr .58fr .7fr;
  gap:10px;
}

.detail-map{border-radius:8px}
.dv1{left:25%;top:30%}.dv2{left:48%;top:55%;border-color:#359cff}.dv3{left:75%;top:64%}.dv4{left:63%;top:18%;border-color:#ffd83f}
.dex1{left:60%;top:70%}
.map-alert{
  position:absolute;right:14px;top:17px;z-index:3;padding:9px 12px;border-radius:7px;background:#4a171a;border:1px solid #96292e
}
.map-alert strong,.map-alert small{display:block}.map-alert strong{font-size:8px}.map-alert small{margin-top:4px;color:#ff9a9f;font-size:6px}

.detail-stats,.detail-activity{display:flex;flex-direction:column;gap:8px}
.detail-stats article{
  flex:1;padding:12px;border-radius:7px;background:#0d1d23;border:1px solid rgba(255,255,255,.05)
}
.detail-stats span,.detail-stats strong{display:block}.detail-stats span{color:#819095;font-size:7px}.detail-stats strong{margin-top:8px;font-size:24px}
.detail-activity{padding:13px 11px;border-radius:7px;background:#0d1a20;border:1px solid rgba(255,255,255,.05)}
.detail-activity strong{font-size:10px;margin-bottom:5px}
.detail-activity span{padding:8px 0;border-top:1px solid rgba(255,255,255,.06);color:#9eaaae;font-size:7px}

.case-story-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr 1.27fr;
  gap:12px;
}

.case-story-grid > article{
  min-height:300px;
  padding:18px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(9,18,22,.76);
}

.story-number{
  color:var(--accent);
  font-size:15px;
  font-weight:800;
}
.story-label{
  display:inline-block!important;
  margin:0 0 0 12px!important;
  color:#a0adb1!important;
  font-size:8px!important;
  font-weight:800;
  letter-spacing:.2em;
}
.case-story-grid h3{
  margin:18px 0 10px;
  color:#fff;
  font-size:22px;
  line-height:1.06;
}
.case-story-grid p{
  color:#aab5b8;
  font-size:11px;
  line-height:1.55;
}
.case-story-grid ul{
  margin:13px 0 0;
  padding:0;
  list-style:none;
}
.case-story-grid li{
  position:relative;
  padding:4px 0 4px 22px;
  color:#b6c0c2;
  font-size:9px;
}
.case-story-grid li::before{
  content:"";
  position:absolute;left:0;top:10px;width:12px;height:2px;background:var(--accent);
}

.module-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.module-grid > div{
  min-height:98px;
  padding:13px;
  border:1px solid rgba(201,255,25,.13);
  border-radius:8px;
  background:#0b171b;
}
.module-grid strong,.module-grid small{display:block}
.module-grid strong{font-size:11px;color:#f0f4f4}
.module-grid small{margin-top:7px;color:#8f9da1;font-size:8px;line-height:1.45}

.impact-strip{
  margin-top:12px;
  display:grid;
  grid-template-columns:1.2fr repeat(5,1fr);
  gap:8px;
}
.impact-intro,.impact-metric{
  min-height:116px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:#09161a;
}
.impact-intro small{
  display:block;margin-top:13px;color:#68767b;font-size:7px;line-height:1.4;
}
.impact-metric strong,.impact-metric span{display:block}
.impact-metric strong{color:var(--accent);font-size:24px}
.impact-metric span{margin-top:9px;color:#d8dfe1;font-size:8px;line-height:1.3}

/* ----- Education detail dashboard ----- */

.edu-metric-row,.research-metric-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.edu-metric-row article,.research-metric-row article{
  min-height:70px;padding:10px;border-radius:7px;background:#0d1d23;border:1px solid rgba(255,255,255,.05)
}
.edu-metric-row span,.edu-metric-row strong,
.research-metric-row span,.research-metric-row strong{display:block}
.edu-metric-row span,.research-metric-row span{color:#819095;font-size:7px}
.edu-metric-row strong,.research-metric-row strong{margin-top:7px;font-size:20px}

.edu-detail-grid{
  margin-top:9px;height:238px;display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:8px;
}
.edu-schedule,.edu-attendance,.edu-progress{
  padding:13px;border-radius:7px;background:#0d1a20;border:1px solid rgba(255,255,255,.05);
}
.edu-schedule strong,.edu-attendance strong,.edu-progress strong{display:block;margin-bottom:12px;font-size:10px}
.edu-schedule span{display:block;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);color:#9ba8ac;font-size:8px}
.edu-attendance{display:flex;flex-direction:column;align-items:center}
.attendance-ring{
  width:128px;height:128px;margin-top:18px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,#0d1a20 57%,transparent 58%),conic-gradient(#55de67 0 96%,#26343a 96% 100%);
}
.attendance-ring span{font-size:22px;font-weight:700}
.edu-progress{display:flex;align-items:flex-end;gap:12px;padding-top:48px}
.edu-progress strong{position:absolute}
.edu-progress i{flex:1;max-width:24px;background:linear-gradient(#a9f235,#54b65c);border-radius:4px 4px 0 0}

/* ----- Research detail dashboard ----- */

.research-detail-grid{
  margin-top:9px;height:238px;display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;
}
.research-pipeline,.evidence-map{
  padding:13px;border-radius:7px;background:#0d1a20;border:1px solid rgba(255,255,255,.05)
}
.research-pipeline > strong,.evidence-map > strong{display:block;margin-bottom:12px;font-size:10px}
.research-pipeline div{
  display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)
}
.research-pipeline div span{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-size:7px}
.research-pipeline div b{font-size:8px}
.evidence-map span{
  min-height:53px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.06)
}
.evidence-map b{font-size:8px}.evidence-map i{padding:4px 6px;border-radius:4px;background:#124829;color:#86efa4;font-size:6px;font-style:normal}

/* ----- Responsive ----- */

@media (max-width:1350px){
  .case-study-card{min-height:530px}
  .case-preview{height:215px}
  .case-detail-hero{grid-template-columns:.7fr 1.3fr;gap:28px}
  .case-detail-copy h2{font-size:68px}
}

@media (max-width:1100px){
  .examples-v2-intro{grid-template-columns:1fr}
  .examples-v2-copy{justify-self:start}
  .case-study-grid{grid-template-columns:1fr}
  .case-study-card{min-height:auto}
  .case-preview{height:320px}
  .case-detail{position:fixed}
  .case-detail-hero{grid-template-columns:1fr}
  .case-story-grid{grid-template-columns:1fr}
  .impact-strip{grid-template-columns:1fr 1fr 1fr}
}

@media (max-width:720px){
  .examples-v2{padding:64px 18px}
  .case-preview{height:235px}
  .case-category{font-size:7px}
  .case-detail-shell{padding:22px 16px 38px}
  .case-detail-copy h2{font-size:clamp(52px,14vw,70px)}
  .detail-dashboard{display:none}
  .module-grid{grid-template-columns:1fr}
  .impact-strip{grid-template-columns:1fr 1fr}
  .impact-intro{grid-column:1/-1}
}


/* ==========================================================
   V013 — APPROVED EXAMPLES VISUAL
   Replaces the V012 interpretation with the agreed composition.
   ========================================================== */

.examples-v3{
  position:relative;
  min-height:100svh;
  padding:76px clamp(28px,3.8vw,72px) 66px;
  display:flex !important;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(21,72,27,.16) 0 9%,transparent 9% 100%),
    radial-gradient(circle at 86% 7%,rgba(31,110,39,.13),transparent 25%),
    linear-gradient(105deg,#071013 0%,#081114 58%,#071014 100%);
  color:#fff;
}

.examples-v3::before{
  content:"";
  position:absolute;
  left:-135px;
  bottom:-230px;
  width:390px;
  height:520px;
  transform:rotate(-36deg);
  background:linear-gradient(180deg,rgba(71,156,54,.14),rgba(6,33,27,.02));
  pointer-events:none;
}

.examples-v3-layout{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1830px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(1050px,2.55fr);
  gap:56px;
  align-items:center;
}

.examples-v3-intro{
  align-self:center;
  max-width:430px;
}

.examples-v3-intro .eyebrow{
  position:relative;
  margin:0 0 42px 78px;
  color:#dce4e5;
  font-size:10px;
  letter-spacing:.25em;
}

.examples-v3-intro .eyebrow::before{
  content:"";
  position:absolute;
  width:52px;
  height:3px;
  left:-78px;
  top:50%;
  transform:translateY(-50%);
  background:var(--accent);
}

.examples-v3-intro h2{
  margin:0;
  color:#fff;
  font-size:clamp(55px,4.6vw,82px);
  line-height:.88;
  letter-spacing:-.055em;
}

.examples-v3-intro h2 em{
  color:var(--accent);
  font-style:normal;
}

.examples-v3-intro > p{
  max-width:410px;
  margin:34px 0 30px;
  color:#aab5b8;
  font-size:17px;
  line-height:1.58;
}

.examples-v3-cta{
  min-width:285px;
  justify-content:space-between;
}

.examples-v3-cards{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.program-card{
  min-width:0;
  min-height:640px;
  padding:17px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(160,184,190,.22);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(14,24,28,.97),rgba(6,14,17,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 22px 60px rgba(0,0,0,.12);
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.program-card:hover{
  transform:translateY(-3px);
  border-color:rgba(201,255,25,.32);
  box-shadow:0 28px 75px rgba(0,0,0,.2);
}

.program-card-head{
  min-height:43px;
  display:grid;
  grid-template-columns:105px 1fr;
  align-items:center;
  gap:14px;
}

.program-card-number{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
}

.program-card-number strong{
  color:var(--accent);
  font-size:17px;
  line-height:1;
}

.program-card-number span{
  height:1px;
  background:#5a676b;
}

.program-card-head small{
  justify-self:end;
  color:#aeb8bb;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}

.program-shot{
  position:relative;
  height:285px;
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background-color:#071014;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 40px rgba(0,0,0,.24);
}

.program-shot::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 30px rgba(0,0,0,.18);
}

/* Use the approved case-study visuals themselves as the real UI imagery.
   Zoom/pan to the dashboard portion rather than drawing another fake UI. */
.program-shot-logistics{
  background-image:url("assets/case-logistics-approved.png");
  background-size:205% auto;
  background-position:92% 2%;
}

.program-shot-education{
  background-image:url("assets/case-education-approved.png");
  background-size:205% auto;
  background-position:92% 2%;
}

.program-shot-research{
  background-image:url("assets/case-research-approved.png");
  background-size:205% auto;
  background-position:92% 2%;
}

.program-card-copy{
  display:flex;
  flex-direction:column;
  flex:1;
}

.program-card h3{
  margin:19px 0 9px;
  color:#fff;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(21px,1.45vw,28px);
  line-height:1.02;
  letter-spacing:-.035em;
}

.program-card-copy > p{
  margin:0;
  color:#aab4b7;
  font-size:12px;
  line-height:1.52;
}

.program-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:auto;
  padding-top:17px;
}

.program-tags span{
  min-height:26px;
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border:1px solid rgba(136,158,165,.28);
  border-radius:6px;
  background:rgba(255,255,255,.025);
  color:#c1cbce;
  font-size:7px;
  font-weight:700;
  letter-spacing:.04em;
}

.program-details{
  min-height:47px;
  margin-top:12px;
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
}

.program-details b{
  color:var(--accent);
  font-size:24px;
  font-weight:400;
  line-height:1;
  transition:transform .2s ease;
}

.program-details:hover b{
  transform:translateX(5px);
}

/* ==========================================================
   Approved View Details case-study visuals
   ========================================================== */

.approved-case-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:3000;
  overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(circle at 92% 7%,rgba(49,145,39,.09),transparent 25%),
    #03090b;
}

.approved-case-overlay:target{
  display:block;
}

.approved-case-toolbar{
  position:sticky;
  top:0;
  z-index:3;
  min-height:55px;
  padding:0 clamp(18px,3vw,50px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(3,9,11,.94);
  backdrop-filter:blur(14px);
}

.approved-case-toolbar a,
.approved-case-toolbar span{
  color:#c4ced0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.approved-case-toolbar a:hover{
  color:var(--accent);
}

.approved-case-canvas{
  width:100%;
  padding:18px clamp(14px,2.5vw,44px) 8px;
  display:flex;
  justify-content:center;
}

.approved-case-canvas img{
  display:block;
  width:min(1672px,100%);
  height:auto;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 85px rgba(0,0,0,.38);
}

.approved-case-note{
  width:min(1672px,calc(100% - 28px));
  margin:8px auto 28px;
  color:#617075;
  font-size:8px;
  line-height:1.45;
  text-align:right;
}

/* Completely suppress V012's old drawn case-study structures if any stale
   markup survives in browser cache. */
.case-study-grid,
.case-study-disclaimer,
.case-detail{
  display:none !important;
}

@media (max-width:1500px){
  .examples-v3-layout{
    grid-template-columns:minmax(270px,.62fr) minmax(950px,2.35fr);
    gap:35px;
  }

  .program-card{
    min-height:585px;
  }

  .program-shot{
    height:245px;
  }

  .examples-v3-intro h2{
    font-size:60px;
  }
}

@media (max-width:1180px){
  .examples-v3{
    min-height:auto;
  }

  .examples-v3-layout{
    grid-template-columns:1fr;
  }

  .examples-v3-intro{
    max-width:720px;
  }

  .examples-v3-cards{
    grid-template-columns:1fr;
  }

  .program-card{
    min-height:auto;
  }

  .program-shot{
    height:420px;
    background-size:175% auto;
  }
}

@media (max-width:720px){
  .examples-v3{
    padding:64px 18px;
  }

  .examples-v3-intro .eyebrow{
    margin-left:54px;
  }

  .examples-v3-intro .eyebrow::before{
    width:34px;
    left:-54px;
  }

  .examples-v3-intro h2{
    font-size:clamp(52px,14vw,68px);
  }

  .program-shot{
    height:240px;
    background-size:215% auto;
  }

  .program-card-head{
    grid-template-columns:80px 1fr;
  }

  .program-card-head small{
    font-size:6px;
  }

  .approved-case-toolbar span{
    display:none;
  }

  .approved-case-canvas{
    padding-left:8px;
    padding-right:8px;
  }

  .approved-case-note{
    text-align:left;
  }
}


/* ==========================================================
   V014 — APPROVED HOW WE WORK + ABOUT VISUAL
   ========================================================== */

.approach-v2{
  position:relative;
  min-height:100svh;
  padding:58px clamp(36px,4.4vw,84px) 52px;
  display:flex !important;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 4%,rgba(255,255,255,.82),transparent 24%),
    linear-gradient(116deg,#f4f3ef 0%,#eeede8 60%,#f5f4ef 100%);
  color:#0b0f11;
}

.approach-v2-inner{
  width:100%;
  max-width:1790px;
  margin:0 auto;
}

.approach-v2-header{
  display:grid;
  grid-template-columns:minmax(780px,1.8fr) minmax(310px,.52fr);
  gap:70px;
  align-items:center;
  margin-bottom:34px;
}

.approach-v2-kicker{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
}

.approach-v2-kicker > span{
  display:block;
  width:34px;
  height:3px;
  background:var(--accent);
}

.approach-v2-kicker .eyebrow{
  margin:0;
  font-size:10px;
  letter-spacing:.22em;
}

.approach-v2-heading h2{
  margin:0;
  max-width:1120px;
  color:#080c0e;
  font-size:clamp(58px,4.95vw,88px);
  line-height:.92;
  letter-spacing:-.057em;
}

.approach-v2-heading h2 em{
  color:#7c8589;
  font-style:normal;
}

.approach-v2-summary{
  max-width:350px;
  justify-self:end;
  margin:35px 0 0;
  color:#687277;
  font-size:15px;
  line-height:1.48;
}

.approach-v2-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:46px;
  margin:0 0 32px;
}

.approach-v2-steps::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:112px;
  height:1px;
  background:#c8cecd;
  z-index:0;
}

.approach-v2-card{
  position:relative;
  z-index:1;
  min-height:260px;
  padding:22px 24px 24px;
  border:1px solid #d4d8d6;
  border-radius:11px;
  background:rgba(248,247,243,.82);
  box-shadow:0 10px 28px rgba(20,25,26,.025);
}

.approach-v2-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:22px;
}

.approach-v2-icon{
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  border:1px solid rgba(158,213,40,.6);
  border-radius:10px;
  background:rgba(201,255,25,.11);
}

.approach-v2-icon svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:#0d1113;
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.approach-v2-number{
  color:#697478;
  font-size:13px;
  font-weight:700;
}

.approach-v2-card h3{
  margin:0 0 13px;
  color:#080c0e;
  font-size:clamp(22px,1.65vw,29px);
  line-height:1.02;
  letter-spacing:-.04em;
}

.approach-v2-card p{
  max-width:310px;
  margin:0;
  color:#667176;
  font-size:14px;
  line-height:1.48;
}

.approach-v2-divider{
  width:100%;
  height:1px;
  margin:34px 0 34px;
  background:#cbd0cf;
}

.approach-v2-about{
  display:grid;
  grid-template-columns:.95fr 1.2fr .63fr;
  gap:62px;
  align-items:center;
}

.approach-v2-about-title .approach-v2-kicker{
  margin-bottom:25px;
}

.approach-v2-about-title h3{
  margin:0;
  color:#080c0e;
  font-size:clamp(42px,3.25vw,59px);
  line-height:.93;
  letter-spacing:-.05em;
}

.approach-v2-about-title h3 em{
  color:#7b8589;
  font-style:normal;
}

.approach-v2-about-copy{
  padding-top:30px;
}

.approach-v2-about-copy p{
  margin:0;
}

.approach-v2-about-lead{
  max-width:610px;
  color:#14191b;
  font-size:20px;
  line-height:1.42;
}

.approach-v2-about-copy p + p{
  max-width:620px;
  margin-top:19px;
  color:#6c767a;
  font-size:14px;
  line-height:1.5;
}

.approach-v2-about-note{
  min-height:190px;
  padding:28px 0 20px 45px;
  border-left:1px solid #cbd0cf;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.approach-v2-note-rule{
  display:block;
  width:34px;
  height:3px;
  margin-bottom:24px;
  background:var(--accent);
}

.approach-v2-about-note strong{
  color:#101416;
  font-size:18px;
  line-height:1.18;
}

.approach-v2-about-note p{
  max-width:260px;
  margin:18px 0 0;
  color:#687276;
  font-size:13px;
  line-height:1.47;
}

@media (max-width:1450px){
  .approach-v2-header{
    grid-template-columns:minmax(670px,1.55fr) minmax(290px,.52fr);
    gap:45px;
  }

  .approach-v2-heading h2{
    font-size:66px;
  }

  .approach-v2-steps{
    gap:24px;
  }

  .approach-v2-card{
    min-height:245px;
    padding:20px;
  }

  .approach-v2-card h3{
    font-size:23px;
  }

  .approach-v2-about{
    gap:40px;
  }

  .approach-v2-about-title h3{
    font-size:46px;
  }
}

@media (max-width:1100px){
  .approach-v2{
    min-height:auto;
    padding-top:72px;
    padding-bottom:72px;
  }

  .approach-v2-header{
    grid-template-columns:1fr;
    gap:18px;
  }

  .approach-v2-summary{
    justify-self:start;
    max-width:620px;
    margin-top:0;
  }

  .approach-v2-steps{
    grid-template-columns:1fr 1fr;
  }

  .approach-v2-steps::before{
    display:none;
  }

  .approach-v2-about{
    grid-template-columns:1fr 1fr;
  }

  .approach-v2-about-note{
    grid-column:1/-1;
    min-height:auto;
    padding:25px 0 0;
    border-left:0;
    border-top:1px solid #cbd0cf;
  }
}

@media (max-width:700px){
  .approach-v2{
    padding:62px 18px;
  }

  .approach-v2-heading h2{
    font-size:clamp(50px,13vw,68px);
  }

  .approach-v2-steps{
    grid-template-columns:1fr;
    gap:12px;
  }

  .approach-v2-card{
    min-height:auto;
  }

  .approach-v2-about{
    grid-template-columns:1fr;
    gap:28px;
  }

  .approach-v2-about-copy{
    padding-top:0;
  }

  .approach-v2-about-title h3{
    font-size:44px;
  }
}


/* ==========================================================
   V015 — AUSTRALIAN-FOUNDED GLOBAL POSITIONING
   ========================================================== */

.approach-v2-about{
  grid-template-columns:.9fr 1.15fr .82fr;
  gap:54px;
}

.approach-v2-australia{
  min-height:190px;
  padding:22px 0 18px 38px;
  display:grid !important;
  grid-template-columns:minmax(165px,1fr) minmax(135px,165px);
  gap:22px;
  align-items:center;
}

.approach-v2-australia-copy{
  min-width:0;
}

.approach-v2-australia-copy .approach-v2-note-rule{
  margin-bottom:20px;
}

.approach-v2-australia-copy strong{
  display:block;
  font-size:18px;
  line-height:1.18;
}

.approach-v2-australia-copy p{
  max-width:240px;
  margin:16px 0 0;
  color:#687276;
  font-size:13px;
  line-height:1.48;
}

.approach-v2-australia-map{
  display:block;
  width:100%;
  max-width:165px;
  height:auto;
  justify-self:end;
  filter:drop-shadow(0 10px 18px rgba(15,31,65,.10));
}

@media (max-width:1450px){
  .approach-v2-about{
    grid-template-columns:.88fr 1.08fr .9fr;
    gap:34px;
  }

  .approach-v2-australia{
    grid-template-columns:minmax(145px,1fr) 125px;
    gap:16px;
    padding-left:28px;
  }

  .approach-v2-australia-map{
    max-width:125px;
  }
}

@media (max-width:1100px){
  .approach-v2-about{
    grid-template-columns:1fr 1fr;
  }

  .approach-v2-australia{
    grid-column:1/-1;
    min-height:auto;
    padding:26px 0 0;
    grid-template-columns:1fr 150px;
    border-left:0;
    border-top:1px solid #cbd0cf;
  }

  .approach-v2-australia-map{
    max-width:150px;
  }
}

@media (max-width:700px){
  .approach-v2-australia{
    grid-template-columns:1fr 120px;
    gap:18px;
  }

  .approach-v2-australia-map{
    max-width:120px;
  }
}


/* ==========================================================
   V016 — ASK ANNI HEADER ANCHOR FIX
   ========================================================== */

/*
  The header CTA intentionally still points to #ai-demo.
  The offset below prevents the fixed header from sitting on top of
  the Ask ANNI panel when the browser scrolls to that anchor.
*/
#ai-demo{
  scroll-margin-top:108px;
}

/* Keep the page-top anchor unique and predictable. */
#top{
  scroll-margin-top:0;
}

@media (max-width:780px){
  #ai-demo{
    scroll-margin-top:92px;
  }
}


/* ==========================================================
   V017 — FLOATING ASK ANNI CTA
   ========================================================== */

/* The big header CTA is intentionally gone. Keep the nav perfectly centred. */
.header-balance{
  display:block;
  width:1px;
  height:1px;
  justify-self:end;
}

/* Floating ANNI mark — appears only after the hero has scrolled away. */
.floating-anni{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:250;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,255,25,.48);
  border-radius:18px;
  background:
    radial-gradient(circle at 35% 25%,rgba(201,255,25,.09),transparent 46%),
    rgba(7,14,16,.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 10px 35px rgba(0,0,0,.34),
    0 0 28px rgba(201,255,25,.10);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.92);
  pointer-events:none;
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.floating-anni.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.floating-anni img{
  display:block;
  width:43px;
  height:43px;
  object-fit:contain;
  filter:drop-shadow(0 0 11px rgba(201,255,25,.18));
}

.floating-anni:hover,
.floating-anni:focus-visible{
  transform:translateY(-3px) scale(1.03);
  border-color:rgba(201,255,25,.85);
  box-shadow:
    0 0 0 1px rgba(201,255,25,.08),
    0 15px 42px rgba(0,0,0,.38),
    0 0 34px rgba(201,255,25,.19);
}

.floating-anni:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.floating-anni-tooltip{
  position:absolute;
  right:76px;
  top:50%;
  min-width:max-content;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:rgba(8,14,16,.96);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;
  transform:translate(7px,-50%);
  visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}

.floating-anni:hover .floating-anni-tooltip,
.floating-anni:focus-visible .floating-anni-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%);
}

/* Keep the original three-column desktop header balance without a right CTA. */
@media (min-width:1181px){
  .site-header{
    grid-template-columns:1fr auto 1fr;
  }
}

/* Once the desktop navigation collapses, the balancing ghost is unnecessary. */
@media (max-width:1180px){
  .header-balance{
    display:none;
  }
}

@media (max-width:700px){
  .floating-anni{
    right:18px;
    bottom:18px;
    width:58px;
    height:58px;
    border-radius:16px;
  }

  .floating-anni img{
    width:39px;
    height:39px;
  }

  .floating-anni-tooltip{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .floating-anni,
  .floating-anni-tooltip{
    transition:none;
  }
}


/* ==========================================================
   V018 — SEO + TRUST / LEGAL
   ========================================================== */

.ai-trust-note{
  margin:9px 4px 0;
  color:#6f7c81;
  font-size:8px;
  line-height:1.45;
}

.ai-trust-note a{
  color:#99a6aa;
  text-decoration:underline;
  text-decoration-color:rgba(201,255,25,.42);
  text-underline-offset:2px;
}

.ai-trust-note a:hover{
  color:var(--accent);
}

.form-privacy-note{
  max-width:620px;
  margin:12px 0 0;
  color:#657176;
  font-size:9px;
  line-height:1.5;
}

.form-privacy-note a{
  color:#aeb9bd;
  text-decoration:underline;
  text-underline-offset:2px;
}

.form-privacy-note a:hover{
  color:var(--accent);
}

.footer-links{
  grid-template-columns:repeat(3,1fr);
  max-width:900px;
}

/* ----- legal pages ----- */

.legal-page{
  margin:0;
  background:#f2f1ed;
  color:#0a0e10;
}

.legal-page .noise{
  position:fixed;
  pointer-events:none;
}

.legal-header{
  min-height:88px;
  padding:0 clamp(22px,4.4vw,84px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#080d0f;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.legal-header img{
  display:block;
  width:min(280px,56vw);
  height:auto;
}

.legal-header a:last-child{
  color:#cad2d4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.legal-header a:last-child:hover{
  color:var(--accent);
}

.legal-main{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:86px 0 100px;
}

.legal-kicker{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:28px;
}

.legal-kicker::before{
  content:"";
  width:34px;
  height:3px;
  background:var(--accent);
}

.legal-kicker span{
  color:#5f696d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.legal-main h1{
  max-width:900px;
  margin:0;
  color:#090d0f;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(54px,6vw,86px);
  line-height:.92;
  letter-spacing:-.055em;
}

.legal-intro{
  max-width:800px;
  margin:30px 0 46px;
  color:#5e696d;
  font-size:17px;
  line-height:1.65;
}

.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-bottom:48px;
  padding:16px 0;
  border-top:1px solid #ccd1d0;
  border-bottom:1px solid #ccd1d0;
  color:#768084;
  font-size:10px;
  letter-spacing:.05em;
}

.legal-content{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:64px;
}

.legal-toc{
  position:sticky;
  top:28px;
  align-self:start;
  padding:22px;
  border:1px solid #d1d5d3;
  border-radius:10px;
  background:rgba(255,255,255,.42);
}

.legal-toc strong{
  display:block;
  margin-bottom:15px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.legal-toc a{
  display:block;
  padding:6px 0;
  color:#687377;
  font-size:11px;
  line-height:1.35;
}

.legal-toc a:hover{
  color:#4d7d00;
}

.legal-sections section{
  padding:0 0 34px;
  margin-bottom:34px;
  border-bottom:1px solid #d4d8d6;
  scroll-margin-top:30px;
}

.legal-sections section:last-child{
  border-bottom:0;
}

.legal-sections h2{
  margin:0 0 15px;
  color:#101416;
  font-size:27px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.legal-sections h3{
  margin:23px 0 10px;
  font-size:17px;
}

.legal-sections p,
.legal-sections li{
  color:#5d676b;
  font-size:14px;
  line-height:1.7;
}

.legal-sections p{
  margin:0 0 13px;
}

.legal-sections ul{
  margin:12px 0 0;
  padding-left:20px;
}

.legal-sections a{
  color:#315a00;
  text-decoration:underline;
  text-underline-offset:2px;
}

.legal-callout{
  margin:20px 0;
  padding:17px 18px;
  border-left:3px solid var(--accent);
  background:rgba(201,255,25,.08);
  color:#465055;
  font-size:13px;
  line-height:1.6;
}

.legal-footer{
  padding:32px clamp(22px,4.4vw,84px);
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid rgba(255,255,255,.1);
  background:#080d0f;
  color:#758186;
  font-size:10px;
}

.legal-footer a{
  color:#b9c3c6;
}

.legal-footer a:hover{
  color:var(--accent);
}

@media (max-width:900px){
  .footer-links{
    grid-template-columns:1fr 1fr;
  }

  .legal-content{
    grid-template-columns:1fr;
    gap:25px;
  }

  .legal-toc{
    position:static;
  }
}

@media (max-width:580px){
  .footer-links{
    grid-template-columns:1fr;
  }

  .legal-header{
    min-height:74px;
  }

  .legal-header img{
    width:215px;
  }

  .legal-main{
    width:min(100% - 30px,1120px);
    padding:60px 0 74px;
  }

  .legal-footer{
    flex-direction:column;
  }
}