/*
Theme Name: MAD1SON FOUNDRY
Theme URI: https://mad1sonfoundry.com
Author: MAD1SON FOUNDRY
Author URI: https://mad1sonfoundry.com
Description: Custom AI-powered 360° marketing agency theme for MAD1SON FOUNDRY. Built for performance, SEO, AEO, and voice search.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://mad1sonfoundry.com
Text Domain: madison-foundry
Tags: marketing, agency, custom-theme, ai-powered
*/


/* ── TOKENS ─────────────────────────────────── */
:root {
  --or: #ff6300;
  --or2: #ff9940;
  --or-glow: rgba(255,99,0,.35);
  --or-dim: rgba(255,99,0,.1);
  --or-border: rgba(255,99,0,.25);
  --bk: #000;
  --s1: #0c0c0c;
  --s2: #141414;
  --s3: #1c1c1c;
  --bd: rgba(255,255,255,.07);
  --wh: #fff;
  --gr: #888;
  --gr2: #aaa;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.76,0,.24,1);
  --nav-h: 58px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bk);color:var(--wh);font-family:var(--font);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* ── SCROLL PROGRESS BAR ───────────────────── */
#progress-bar {
  position:fixed; top:0; left:0; height:2px; z-index:200;
  background:linear-gradient(90deg,var(--or),var(--or2));
  transform-origin:left; transform:scaleX(0);
  transition:transform .05s linear;
  will-change:transform;
}

/* ── SCROLL-DRIVEN ANIMATIONS ──────────────── */
/* Modern: animate exactly as element enters viewport — pause when scroll stops */
@supports (animation-timeline: view()) {
  .sd {
    animation: sd-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
  .sd-left {
    animation: sd-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  .sd-right {
    animation: sd-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  .sd-scale {
    animation: sd-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  .sd-blur {
    animation: sd-blur linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  .sd-d1 { animation-delay:0s }
  .sd-d2 { animation-range: entry 5%  entry 43% }
  .sd-d3 { animation-range: entry 10% entry 46% }
  .sd-d4 { animation-range: entry 15% entry 50% }
  .sd-d5 { animation-range: entry 20% entry 55% }
}

@keyframes sd-rise {
  from { opacity:0; transform:translateY(70px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes sd-left {
  from { opacity:0; transform:translateX(-80px) }
  to   { opacity:1; transform:translateX(0) }
}
@keyframes sd-right {
  from { opacity:0; transform:translateX(80px) }
  to   { opacity:1; transform:translateX(0) }
}
@keyframes sd-scale {
  from { opacity:0; transform:scale(.88) }
  to   { opacity:1; transform:scale(1) }
}
@keyframes sd-blur {
  from { opacity:0; filter:blur(12px); transform:translateY(30px) }
  to   { opacity:1; filter:blur(0);    transform:translateY(0) }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
  .sd,.sd-left,.sd-right,.sd-scale,.sd-blur {
    opacity:0; transform:translateY(40px);
    transition: opacity .9s var(--ease), transform .9s var(--ease),
                filter .9s var(--ease);
  }
  .sd.visible,.sd-left.visible,.sd-right.visible,
  .sd-scale.visible,.sd-blur.visible {
    opacity:1; transform:none; filter:none;
  }
  .sd-left  { transform:translateX(-60px) }
  .sd-right { transform:translateX(60px) }
  .sd-scale { transform:scale(.9) }
  .sd-blur  { filter:blur(10px) }
}

/* ── KINETIC TEXT STRIPS (auto-scroll marquee) ────── */
@keyframes kinetic-fwd { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
@keyframes kinetic-rev { from{transform:translateX(-33.333%)} to{transform:translateX(0)} }
.kinetic-fwd { animation: kinetic-fwd 37.5s linear infinite; }
.kinetic-rev { animation: kinetic-rev 37.5s linear infinite; }

/* ── NAV ──────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 36px;
  transition:background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled {
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-color:var(--bd);
}
.nav-logo img { height:32px; width:auto }
.nav-logo-fallback {
  font-size:17px; font-weight:800; letter-spacing:-.03em; display:none;
}
.nav-logo-fallback span{color:var(--or)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;color:var(--gr2);transition:color .2s;letter-spacing:.01em}
.nav-links a:hover{color:var(--wh)}
.nav-cta{
  background:var(--or);color:var(--wh);font-size:13px;font-weight:600;
  padding:8px 18px;border-radius:100px;
  transition:opacity .2s,transform .15s,box-shadow .3s;
  opacity:0; pointer-events:none;
  box-shadow:0 0 0 0 var(--or-glow);
}
.nav-cta.show{opacity:1;pointer-events:all}
.nav-cta:hover{opacity:.88;transform:scale(.97);box-shadow:0 0 30px var(--or-glow)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px}
.hamburger span{width:22px;height:2px;background:var(--wh);border-radius:2px;display:block;transition:.3s}

/* ── HERO ─────────────────────────────────── */
/* Scroll driver makes hero sticky while Amplified grows */
/* ── STICKY HERO SCROLL DRIVER ─────────────────────────
   Hero stays locked while Amplified fills the screen.
   After 200vh of scroll the word is full-screen, then
   the page continues normally.
─────────────────────────────────────────────────────── */
.hero-driver {
  height: 220vh;         /* 100vh hero + 120vh scroll zone */
  position: relative;
}
#hero {
  position: sticky;
  top: 0;
  height: 100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:100px 24px 80px;
  overflow:hidden;       /* clip the word as it fills screen */
}
canvas#particles {
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
}
.hero-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 10%, transparent 75%);
}
.hero-glow {
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:900px; z-index:0;
  background:radial-gradient(circle, rgba(255,99,0,.18) 0%, transparent 68%);
  animation:hero-breathe 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes hero-breathe {
  from{opacity:.7;transform:translateX(-50%) scale(1)}
  to  {opacity:1; transform:translateX(-50%) scale(1.18)}
}
.hero-content{position:relative;z-index:1;max-width:1060px}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--or-dim); border:1px solid var(--or-border);
  border-radius:100px; padding:6px 18px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--or);
  margin-bottom:36px;
  animation:hero-in .8s var(--ease) .1s both;
}
.hero-badge::before {
  content:''; width:6px; height:6px; background:var(--or);
  border-radius:50%; animation:pulse-dot 2.5s infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)}}

.hero-h1 {
  font-size:clamp(56px,9.5vw,128px);
  font-weight:900; line-height:.96; letter-spacing:-.045em;
  animation:hero-in .9s var(--ease) .25s both;
}

/* ── HERO LINE HELPERS ─────────────────────────────────
   Each line is a block so they stack with no <br> gaps.
   hero-line-top fades on scroll; hero-line-bot stays on top.
──────────────────────────────────────────────────────── */
.hero-line-top { display: block; }
.hero-line-bot  { display: block; position: relative; z-index: 2; }

/*
  AMPLIFIED LAYOUT + CRISP SCALING:

  .hero-em-wrap  — holds exactly 1 normal line of space (font-size × 0.96).
                   overflow:visible lets the em spill out as it grows.

  em             — absolutely pinned to the BOTTOM of that 1-line slot,
                   rendered at its true final size (2.65×) from the start
                   so the browser always has a crisp vector glyph.
                   translate:-50% 0 centers it without touching transform,
                   leaving transform free for the scale animation.
                   transform-origin:center bottom means scale(1) fills the
                   screen UPWARD from the "by Intelligence." anchor — the
                   correct cinematic direction.
*/
.hero-em-wrap {
  display: block;
  position: relative;
  height: calc(clamp(56px, 9.5vw, 128px) * 0.96);
  overflow: visible;
}
.hero-h1 em {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;          /* CSS translate — doesn't conflict with transform */
  font-style: normal;
  color: var(--or);
  font-size: calc(clamp(56px, 9.5vw, 128px) * 2.65);
  transform-origin: center bottom;
  will-change: transform;
  z-index: 1;
  white-space: nowrap;
}

/* ── SCROLL-DRIVEN AMPLIFY ─────────────────────────────
   Scrubs forward AND back. Range 0 → 120vh matches
   the sticky zone exactly.
   scale(0.37736) = 1/2.65 — appears as normal text size.
   scale(1.0)             — full 2.65× rendered size.
─────────────────────────────────────────────────────── */
@supports (animation-timeline: scroll()) {
  .hero-h1 em {
    animation: amplify-grow linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 120vh;
  }
  /* Only "Marketing" dissolves */
  .hero-line-top {
    animation: amplify-siblings linear both;
    animation-timeline: scroll(root);
    animation-range: 20px 120vh;
  }
  /* Badge, subtitle, CTAs lift and fade */
  .hero-badge, .hero-sub, .hero-actions, .hero-scroll {
    animation: amplify-ui linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 80vh;
  }
}

@keyframes amplify-grow {
  0% {
    transform: scale(0.37736);
    /* = 1/2.65 — appears normal-sized, anchored at center bottom */
    text-shadow: none;
  }
  60% {
    text-shadow: 0 0 30px rgba(255,99,0,.45);
  }
  100% {
    transform: scale(1);
    /* full 2.65× rendered size — always crisp, grows upward */
    text-shadow:
      0 0 53px  rgba(255,99,0,.75),
      0 0 15px  rgba(255,99,0,.5);
  }
}
@keyframes amplify-siblings {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes amplify-ui {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}
@keyframes word-in{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}

.hero-sub {
  font-size:clamp(17px,2.2vw,22px); color:var(--gr2);
  max-width:600px; margin:28px auto 0; line-height:1.6;
  animation:hero-in .9s var(--ease) .62s both;
}
.hero-actions {
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin-top:44px; flex-wrap:wrap;
  animation:hero-in .9s var(--ease) .78s both;
}
@keyframes hero-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* magnetic btn wrapper */
.mag-wrap{display:inline-block;position:relative}
.btn-prime {
  display:inline-block;
  background:var(--or); color:var(--wh);
  font-size:16px; font-weight:700;
  padding:15px 38px; border-radius:100px;
  transition:box-shadow .35s, opacity .2s;
  box-shadow:0 0 0 0 var(--or-glow);
  position:relative; overflow:hidden;
}
.btn-prime::after {
  content:''; position:absolute; inset:0; border-radius:100px;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.btn-prime:hover::after{opacity:1}
.btn-prime:hover{box-shadow:0 0 50px var(--or-glow)}
.btn-ghost {
  display:inline-block;
  font-size:16px; font-weight:500; color:var(--wh);
  padding:15px 38px; border-radius:100px;
  border:1px solid rgba(255,255,255,.15);
  transition:background .2s, border-color .2s, transform .15s;
}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3);transform:scale(.98)}

.hero-scroll {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:hero-in 1s var(--ease) 1.3s both; z-index:1;
}
.hero-scroll span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gr)}
.scroll-mouse{width:22px;height:36px;border:1.5px solid rgba(255,255,255,.2);border-radius:11px;display:flex;justify-content:center;padding-top:6px}
.scroll-mouse::after{content:'';width:3px;height:7px;background:var(--or);border-radius:2px;animation:scroll-dot 2s ease-in-out infinite}
@keyframes scroll-dot{0%{transform:translateY(0);opacity:1}75%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ── KINETIC STRIP ──────────────────────────── */
.kinetic-strip {
  padding:28px 0; overflow:hidden; position:relative;
  border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
  background:var(--s1);
  user-select:none;
}
.kinetic-track {
  display:flex; gap:0; white-space:nowrap;
  will-change:transform;
}
.kinetic-item {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 48px;
  font-size:clamp(13px,1.4vw,16px); font-weight:600;
  letter-spacing:.04em; color:var(--gr);
  flex-shrink:0;
}
.kinetic-item .dot{width:5px;height:5px;background:var(--or);border-radius:50%;flex-shrink:0}

/* ── AI LOGOS STRIP ──────────────────────────── */
#ai-strip {
  padding:60px 24px; background:var(--s1);
  border-bottom:1px solid var(--bd);
}
.ai-strip-label {
  text-align:center; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gr); margin-bottom:44px;
}
.ai-logos-row {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:48px 0; max-width:1200px; margin:0 auto;
  justify-items:center;
}
.ai-logos-marquee {
  overflow:hidden; position:relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ai-logos-track {
  display:flex; align-items:center; gap:56px;
  width:max-content;
  animation: ai-logos-scroll 42s linear infinite;
  padding:8px 0;
}
@keyframes ai-logos-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ai-logo-item {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:.45; transition:opacity .3s, transform .3s;
  cursor:default;
}
.ai-logo-item:hover{opacity:1;transform:translateY(-4px)}
.ai-logo-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  filter:brightness(0) invert(1);
}
.ai-logo-icon svg{width:100%;height:100%}
.ai-logo-name{font-size:11px;letter-spacing:.08em;color:var(--gr2);text-align:center;font-weight:600;text-transform:uppercase}

/* ── PHOTOGRAPHIC BRAND CANVAS (the big wow) ── */
#brand-canvas {
  position:relative; overflow:hidden;
  background:var(--bk); min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}
.brand-canvas-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,99,0,.12) 0%, transparent 70%);
  animation:bc-pulse 8s ease-in-out infinite alternate;
}
@keyframes bc-pulse{from{opacity:.6}to{opacity:1}}
.brand-canvas-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  padding:120px 24px; text-align:center;
}
/* Cinematic logo treatment */
.logo-cinema {
  position:relative; width:min(600px,90vw); margin:0 auto 60px;
}
.logo-cinema img {
  width:100%; height:auto;
  filter:drop-shadow(0 0 60px rgba(255,99,0,.6)) drop-shadow(0 0 120px rgba(255,99,0,.3));
  animation:logo-float 6s ease-in-out infinite alternate;
}
@keyframes logo-float{
  from{transform:translateY(0) scale(1);filter:drop-shadow(0 0 60px rgba(255,99,0,.6)) drop-shadow(0 0 120px rgba(255,99,0,.3))}
  to  {transform:translateY(-18px) scale(1.015);filter:drop-shadow(0 0 90px rgba(255,99,0,.85)) drop-shadow(0 0 160px rgba(255,99,0,.45))}
}
/* Light rays behind logo */
.logo-rays {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-55%) rotate(0deg);
  width:800px; height:800px;
  background:conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,99,0,.06) 10deg, transparent 20deg,
    transparent 40deg, rgba(255,99,0,.06) 50deg, transparent 60deg,
    transparent 80deg, rgba(255,99,0,.06) 90deg, transparent 100deg,
    transparent 120deg,rgba(255,99,0,.06) 130deg,transparent 140deg,
    transparent 160deg,rgba(255,99,0,.06) 170deg,transparent 180deg,
    transparent 200deg,rgba(255,99,0,.06) 210deg,transparent 220deg,
    transparent 240deg,rgba(255,99,0,.06) 250deg,transparent 260deg,
    transparent 280deg,rgba(255,99,0,.06) 290deg,transparent 300deg,
    transparent 320deg,rgba(255,99,0,.06) 330deg,transparent 340deg,
    transparent 360deg
  );
  border-radius:50%;
  animation:rays-spin 40s linear infinite;
  z-index:0; pointer-events:none;
}
@keyframes rays-spin{to{transform:translate(-50%,-55%) rotate(360deg)}}
.brand-canvas-headline {
  font-size:clamp(36px,5vw,68px);
  font-weight:900; letter-spacing:-.04em; line-height:1.05;
  margin-bottom:20px;
}
.brand-canvas-sub {
  font-size:clamp(16px,1.8vw,20px); color:var(--gr2);
  max-width:540px; line-height:1.6;
}

/* ── SECTION BASE ──────────────────────────── */
.section-label {
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--or); font-weight:700; margin-bottom:16px; display:block;
}
.section-title {
  font-size:clamp(36px,5.5vw,76px);
  font-weight:900; line-height:1.02; letter-spacing:-.04em;
}
.section-sub {
  font-size:clamp(16px,1.8vw,19px); color:var(--gr2);
  line-height:1.65; max-width:560px;
}

/* ── STATS ─────────────────────────────────── */
#stats{
  padding:0; background:var(--s1);
  border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
}
.stats-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  max-width:1200px; margin:0 auto;
}
.stat-card {
  padding:60px 36px; text-align:center;
  border-right:1px solid var(--bd);
  position:relative; overflow:hidden;
}
.stat-card:last-child{border-right:none}
.stat-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,99,0,.08) 0%, transparent 70%);
  opacity:0; transition:opacity .4s;
}
.stat-card:hover::before{opacity:1}
.stat-num {
  font-size:clamp(52px,6vw,88px);
  font-weight:900; letter-spacing:-.04em; line-height:1;
}
.stat-num span{color:var(--or)}
.stat-lbl{font-size:14px;color:var(--gr);margin-top:10px;letter-spacing:.02em}

/* ── MANIFESTO ─────────────────────────────── */
#manifesto{padding:160px 24px;text-align:center;background:var(--bk)}
.manifesto-big {
  font-size:clamp(38px,6.5vw,90px);
  font-weight:900; letter-spacing:-.045em; line-height:1.05;
  max-width:16ch; margin:0 auto; text-align:center;
}
.manifesto-big em {
  font-style:normal;
  background:linear-gradient(135deg,var(--or),var(--or2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.manifesto-sub{font-size:clamp(16px,1.8vw,20px);color:var(--gr2);max-width:580px;margin:28px auto 0;line-height:1.6;text-align:center}

/* ── SERVICES ──────────────────────────────── */
#services{padding:140px 24px;background:var(--bk)}
.services-head{max-width:1400px;margin:0 auto 70px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.services-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px; max-width:1400px; margin:0 auto;
}
.svc {
  background:var(--s2); padding:38px 28px;
  border:1px solid var(--bd); border-radius:var(--r);
  display:flex; flex-direction:column; gap:18px;
  transition:background .3s, border-color .35s, transform .35s var(--ease);
  position:relative; overflow:hidden;
}
.svc::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,99,0,.07) 0%, transparent 55%);
  opacity:0; transition:opacity .3s;
}
.svc:hover::before{opacity:1}
.svc:hover{border-color:var(--or-border);transform:translateY(-5px)}
.svc-icon{
  width:46px;height:46px;background:var(--or-dim);
  border:1px solid var(--or-border);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:background .3s;
}
.svc:hover .svc-icon{background:rgba(255,99,0,.2)}
.svc-name{font-size:21px;font-weight:800;letter-spacing:-.02em}
.svc-desc{font-size:14px;color:var(--gr2);line-height:1.65}
.svc-link{
  margin-top:auto;font-size:13px;font-weight:700;color:var(--or);
  letter-spacing:.04em;display:flex;align-items:center;gap:5px;
  transition:gap .25s;
}
.svc:hover .svc-link{gap:10px}

/* ── SHOWCASE (Apple-style) ─────────────────── */
#showcase{background:var(--s1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.showcase-row {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:640px; max-width:1400px; margin:0 auto;
  padding:100px 80px; gap:100px; align-items:center;
  border-bottom:1px solid var(--bd);
}
.showcase-row:last-child{border-bottom:none}
.showcase-row.flip .sc-vis{order:-1}
.sc-num{
  font-size:130px;font-weight:900;line-height:1;
  letter-spacing:-.06em;color:rgba(255,255,255,.04);
  margin-bottom:-50px; user-select:none;
}
.sc-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:14px}
.sc-title{font-size:clamp(32px,4vw,58px);font-weight:900;line-height:1.04;letter-spacing:-.04em;margin-bottom:20px}
.sc-title em{font-style:normal;color:var(--or)}
.sc-body{font-size:17px;color:var(--gr2);line-height:1.7}
.sc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tag{background:var(--s3);border:1px solid var(--bd);border-radius:100px;padding:5px 14px;font-size:12px;color:var(--gr2)}

/* VISUAL BOXES — cinematic CSS art */
.sc-vis {
  border-radius:24px; overflow:hidden; position:relative;
  aspect-ratio:4/3; background:var(--s2);
  border:1px solid var(--bd);
}
/* Tilt effect via JS */
.tilt-card{transform-style:preserve-3d;transition:transform .15s var(--ease)}

/* Visual 1 — Analytics mockup */
.vis-analytics {
  background:linear-gradient(145deg,#0d0d0d,#111);
  padding:28px; display:flex; flex-direction:column; gap:16px;
  height:100%;
}
.vis-top-row{display:flex;gap:8px}
.vis-kpi {
  flex:1; background:var(--s3); border:1px solid var(--bd);
  border-radius:12px; padding:16px;
}
.vis-kpi-val{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--wh)}
.vis-kpi-val span{color:var(--or)}
.vis-kpi-lbl{font-size:10px;color:var(--gr);margin-top:3px;letter-spacing:.05em}
.vis-chart{flex:1;background:var(--s3);border:1px solid var(--bd);border-radius:12px;padding:16px;position:relative;overflow:hidden}
.vis-bars{
  position:absolute; bottom:16px; left:16px; right:16px;
  display:flex; align-items:flex-end; gap:5px; height:70%;
}
.vis-bar{
  flex:1; border-radius:4px 4px 0 0;
  background:rgba(255,99,0,.25);
  transition:background .3s;
  animation:bar-grow 1.5s var(--ease) both;
}
@keyframes bar-grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.vis-bar.hi{background:var(--or)}
.vis-line-chart{
  position:absolute; bottom:16px;left:16px;right:16px;height:55%;
}

/* Visual 2 — Brand identity mockup */
.vis-brand{
  background:var(--bk); display:flex;
  align-items:center; justify-content:center;
  position:relative; height:100%; overflow:hidden;
}
.vis-brand-glow{
  position:absolute; width:300px; height:300px;
  background:radial-gradient(circle, rgba(255,99,0,.3) 0%, transparent 70%);
  border-radius:50%;
  animation:vis-brand-pulse 5s ease-in-out infinite alternate;
}
@keyframes vis-brand-pulse{from{transform:scale(1)}to{transform:scale(1.3)}}
.vis-brand-logo{position:relative;z-index:1;width:55%;filter:drop-shadow(0 0 30px rgba(255,99,0,.8))}

/* Visual 3 — Campaign mockup (phone) */
.vis-phone{
  background:linear-gradient(145deg,#0a0a0a,#111);
  display:flex; align-items:center; justify-content:center; height:100%;
}
.phone-frame{
  width:46%; aspect-ratio:9/19;
  background:var(--s3); border-radius:28px;
  border:2px solid rgba(255,255,255,.1);
  overflow:hidden; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
}
.phone-screen{
  height:100%; background:linear-gradient(180deg,#0d0d0d 0%,#111 100%);
  display:flex; flex-direction:column;
  padding:20px 14px; gap:10px;
}
.phone-logo-bar{display:flex;justify-content:center;padding-top:8px}
.phone-logo-bar img{height:18px;filter:brightness(0) invert(1)}
.phone-hero-img{
  flex:1; background:linear-gradient(135deg,rgba(255,99,0,.15),rgba(255,99,0,.05));
  border-radius:12px; border:1px solid rgba(255,99,0,.2);
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
.phone-text-block{display:flex;flex-direction:column;gap:4px}
.phone-tl{height:8px;background:rgba(255,255,255,.15);border-radius:4px;width:70%}
.phone-tb{height:6px;background:rgba(255,255,255,.08);border-radius:4px;width:90%}
.phone-cta-bar{
  background:var(--or);border-radius:8px;padding:8px;
  text-align:center;font-size:10px;font-weight:700;color:var(--wh);letter-spacing:.06em;
}

/* ── AI ECOSYSTEM ───────────────────────────── */
#ai-eco{padding:140px 24px;background:var(--bk);text-align:center}
.ai-eco-head{max-width:720px;margin:0 auto 80px}

/* Glassmorphism AI cards — auto-scroll marquee */
.ai-cards-marquee {
  overflow:hidden; position:relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.ai-cards-track {
  display:flex; gap:16px; width:max-content;
  animation: ai-cards-scroll 65s linear infinite;
  padding:16px 0;
}
.ai-cards-track .ai-card { width:240px; flex-shrink:0; }
@keyframes ai-cards-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ai-card {
  background:rgba(255,255,255,.03);
  border:1px solid var(--bd);
  border-radius:20px; padding:32px 24px;
  text-align:center;
  backdrop-filter:blur(12px);
  transition:background .3s, border-color .35s, transform .35s var(--ease), box-shadow .35s;
  position:relative; overflow:hidden;
}
.ai-card::before{
  content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
  opacity:0; transition:opacity .3s;
}
.ai-card:hover{
  background:rgba(255,99,0,.05);
  border-color:var(--or-border);
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(255,99,0,.12);
}
.ai-card:hover::before{opacity:1}
.ai-card-icon{
  width:56px;height:56px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.ai-card-icon img,.ai-card-icon svg{width:40px;height:40px;filter:brightness(0) invert(1)}
.ai-card-name{font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.ai-card-role{font-size:12px;color:var(--gr);line-height:1.5}

/* ── CASE STUDIES ───────────────────────────── */
#work{padding:140px 24px;background:var(--s1);border-top:1px solid var(--bd)}
.work-head{max-width:1160px;margin:0 auto 56px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1160px;margin:0 auto}
.work-card {
  background:var(--s2); border:1px solid var(--bd); border-radius:var(--r);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.work-card:hover{transform:translateY(-7px);border-color:var(--or-border);box-shadow:0 24px 70px rgba(255,99,0,.1)}
.work-vis{
  aspect-ratio:16/9; display:flex;
  align-items:center; justify-content:center;
  font-size:48px; position:relative; overflow:hidden;
}
.work-vis::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 40%,var(--s2));
}
.work-body{padding:28px}
.work-ind{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--or);font-weight:700;margin-bottom:8px}
.work-title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.work-metric{font-size:40px;font-weight:900;letter-spacing:-.04em;color:var(--or)}
.work-metric-lbl{font-size:12px;color:var(--gr);margin-top:4px}

/* ── PROCESS ────────────────────────────────── */
#process{padding:140px 24px;background:var(--bk)}
.proc-head{max-width:1160px;margin:0 auto 90px;text-align:center}
.proc-steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; max-width:1160px; margin:0 auto;
  position:relative;
}
.proc-steps::after {
  content:''; position:absolute;
  top:40px; left:calc(12.5% - 40px); right:calc(12.5% - 40px);
  height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--or) 8%,var(--or) 92%,transparent 100%);
}
.proc-step{text-align:center;padding:0 20px;position:relative;z-index:1}
.proc-num{
  width:80px;height:80px;background:var(--s2);
  border:1px solid var(--bd);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:var(--or);
  margin:0 auto 24px;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.proc-step:hover .proc-num{background:var(--or-dim);border-color:var(--or);box-shadow:0 0 30px var(--or-glow)}
.proc-title{font-size:18px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
.proc-desc{font-size:14px;color:var(--gr2);line-height:1.65}

/* ── CTA ────────────────────────────────────── */
#cta{
  padding:180px 24px;text-align:center;
  background:var(--bk);position:relative;overflow:hidden;
}
#cta::before {
  content:''; position:absolute;
  width:900px;height:900px;
  background:radial-gradient(circle,rgba(255,99,0,.14) 0%,transparent 68%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
  animation:cta-breathe 7s ease-in-out infinite alternate;
}
@keyframes cta-breathe{from{opacity:.6;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.cta-inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
.cta-title{font-size:clamp(48px,8vw,106px);font-weight:900;line-height:.97;letter-spacing:-.05em;margin-bottom:28px}
.cta-title em{font-style:normal;color:var(--or)}
.cta-sub{font-size:clamp(17px,2vw,21px);color:var(--gr2);margin-bottom:52px;line-height:1.5}
.cta-form{display:flex;gap:12px;max-width:480px;margin:0 auto}
.cta-input{
  flex:1;background:var(--s2);border:1px solid var(--bd);
  border-radius:100px;padding:15px 24px;font-size:15px;color:var(--wh);
  font-family:var(--font);outline:none;transition:border-color .2s;
}
.cta-input::placeholder{color:var(--gr)}
.cta-input:focus{border-color:var(--or)}

/* ── FOOTER ─────────────────────────────────── */
footer{background:var(--s1);border-top:1px solid var(--bd);padding:72px 24px 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:60px;max-width:1160px;margin:0 auto 60px}
.foot-desc{font-size:14px;color:var(--gr);line-height:1.7;margin-top:18px}
.foot-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gr);margin-bottom:20px}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-links a{font-size:14px;color:var(--gr2);transition:color .2s}
.foot-links a:hover{color:var(--wh)}
.foot-bottom{max-width:1160px;margin:0 auto;padding-top:28px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-copy{font-size:13px;color:var(--gr)}
.foot-copy span{color:var(--or)}
.foot-socials{display:flex;gap:10px}
.foot-soc{
  width:36px;height:36px;background:var(--s2);border:1px solid var(--bd);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:border-color .2s,background .2s;
}
.foot-soc:hover{border-color:var(--or);background:var(--or-dim)}

/* ── MOBILE DRAWER ───────────────────────────── */
.drawer{
  position:fixed;inset:0;background:rgba(0,0,0,.97);
  backdrop-filter:blur(24px);z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;opacity:0;pointer-events:none;transition:opacity .3s;
}
.drawer.open{opacity:1;pointer-events:all}
.drawer a{font-size:28px;font-weight:800;letter-spacing:-.03em;transition:color .2s}
.drawer a:hover{color:var(--or)}
.drawer-close{position:absolute;top:20px;right:20px;font-size:28px;color:var(--gr);padding:8px;transition:color .2s}
.drawer-close:hover{color:var(--wh)}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:1024px){
  .showcase-row{grid-template-columns:1fr;padding:60px 32px;gap:48px;min-height:auto}
  .showcase-row.flip .sc-vis{order:unset}
  .ai-cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav-links,.nav-cta{display:none!important}
  .hamburger{display:flex}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-card{border-right:none;border-bottom:1px solid var(--bd)}
  .stat-card:last-child{border-bottom:none}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .services-head{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .work-head{flex-direction:column;align-items:flex-start}
  .proc-steps{grid-template-columns:1fr 1fr;gap:48px}
  .proc-steps::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .cta-form{flex-direction:column}
  /* Hero: tighten vertical padding on tablet */
  #hero{padding:80px 20px 60px}
  .hero-badge{margin-bottom:24px}
  .hero-sub{margin-top:20px}
  .hero-actions{margin-top:32px}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .ai-logos-row{grid-template-columns:repeat(4,1fr);gap:32px 0;max-width:100%}
  .ai-cards-grid{grid-template-columns:1fr 1fr}
  .proc-steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  /* Tighten section padding */
  section{padding-left:20px;padding-right:20px}
  .services-section,.work-section,.process-section,.manifesto-section{padding:80px 20px}
}
@media(max-width:480px){
  /* Single-column services on small phones */
  .services-grid{grid-template-columns:1fr}
  .ai-cards-grid{grid-template-columns:1fr}
  /* Hero: compact on small phones */
  #hero{padding:72px 16px 48px}
  .hero-badge{font-size:10px;padding:5px 14px;margin-bottom:18px}
  .hero-sub{font-size:16px;margin-top:16px}
  .hero-actions{gap:10px;margin-top:24px}
  .btn-prime,.btn-ghost{font-size:15px;padding:13px 28px}
  /* Nav logo smaller */
  .nav-logo img{height:35px}
  /* Stat cards */
  .stat-num{font-size:clamp(36px,10vw,56px)}
  /* Process steps full width */
  .proc-steps{grid-template-columns:1fr;gap:36px}
  /* Footer */
  .foot-grid{grid-template-columns:1fr;gap:32px}
  /* Section titles */
  .section-title{font-size:clamp(28px,8vw,42px)}
}


/* ─────────────────────────────────── */


/* ── iPHONE 17 PRO — BLACK TITANIUM ─────────────────────── */
.iphone-frame {
  position:relative;
  width:240px; height:510px;
  background:linear-gradient(160deg,#1c1b19 0%,#131210 30%,#0d0c0b 55%,#181715 80%,#1c1b19 100%);
  border-radius:44px;
  box-shadow:
    inset 0 1px 0 rgba(255,245,230,.12),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(255,245,230,.06),
    inset -1px 0 0 rgba(255,245,230,.04),
    0 0 0 1px rgba(255,245,230,.08),
    0 0 0 5.5px rgba(255,245,230,.04);
  overflow:visible;
}
.iphone-screen {
  position:absolute;
  top:4px; left:4px; right:4px; bottom:4px;
  background:#000;
  border-radius:40px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.9);
}
/* Dynamic Island — slimmer on 17 Pro */
.iphone-island {
  position:absolute;
  top:10px; left:50%; transform:translateX(-50%);
  width:96px; height:26px;
  background:#000;
  border-radius:14px;
  z-index:20;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.8);
}
/* All side hardware — titanium brushed finish */
.iphone-btn-action,
.iphone-btn-vol-up,
.iphone-btn-vol-dn,
.iphone-btn-power,
.iphone-btn-cc {
  position:absolute;
  background:linear-gradient(90deg,#1e1d1b,#161513,#1e1d1b);
  border-radius:1.5px;
}
/* Action button (replaces mute switch) */
.iphone-btn-action { left:-3px; top:72px;  width:3px; height:22px; box-shadow:-1px 0 0 rgba(255,245,230,.09); }
.iphone-btn-vol-up { left:-3px; top:108px; width:3px; height:34px; box-shadow:-1px 0 0 rgba(255,245,230,.07); }
.iphone-btn-vol-dn { left:-3px; top:154px; width:3px; height:34px; box-shadow:-1px 0 0 rgba(255,245,230,.07); }
.iphone-btn-power  { right:-3px;top:112px; width:3px; height:58px; box-shadow: 1px 0 0 rgba(255,245,230,.07); }
/* Camera Control (new in iPhone 16/17) */
.iphone-btn-cc     { right:-3px;top:184px; width:3px; height:40px; box-shadow: 1px 0 0 rgba(255,245,230,.05); }
/* Titanium-glass front shine */
.iphone-shine {
  position:absolute; inset:4px;
  border-radius:40px;
  background:linear-gradient(128deg,rgba(255,250,240,.05) 0%,rgba(255,250,240,.02) 25%,transparent 45%);
  pointer-events:none; z-index:30;
}

/* Tap to unmute */
.iphone-screen video { cursor:pointer }

/* Carousel dot indicators */
.carousel-dot {
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,.2); cursor:pointer;
  transition:background .3s, transform .3s;
}
.carousel-dot.active { background:var(--or); transform:scale(1.4); }


/* Mobile carousel */
@media(max-width:700px) {
  #iphone-carousel { height:520px; }
  .iphone-frame{ width:200px !important; height:425px !important; border-radius:38px !important; }
  .iphone-screen { border-radius:34px !important; }
  .iphone-island { width:80px !important; height:22px !important; }
}


/* ─────────────────────────────────── */


/* ── HUMAN TOUCH SECTION ── */
.ht-pillar {
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:40px 32px;
  transition:border-color .3s, background .3s;
}
.ht-pillar:hover {
  background:rgba(255,99,0,.05);
  border-color:rgba(255,99,0,.2);
}
.ht-pillar-icon {
  font-size:28px;
  margin-bottom:16px;
}
.ht-pillar-title {
  font-size:18px;
  font-weight:800;
  color:var(--wh);
  letter-spacing:-.02em;
  margin:0 0 12px;
}
.ht-pillar-desc {
  font-size:14px;
  color:var(--gr2);
  line-height:1.75;
  margin:0;
}
@media(max-width:900px){
  .ht-pillars{ grid-template-columns:1fr!important }
  #human-touch{ padding:100px 24px }
}
@media(max-width:700px){
  #human-touch [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important
  }
  .ht-quote{ padding:24px 24px!important }
  .ht-pillar{ padding:32px 24px }
  #human-touch{ padding:80px 20px }
}


/* ─────────────────────────────────── */


/* ── BLOG TEASER ─────────────────────────────── */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.blog-card {
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:36px 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:border-color .3s, transform .3s, box-shadow .3s;
  position:relative;
  overflow:hidden;
}
.blog-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,99,0,.06) 0%, transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.blog-card:hover {
  border-color:rgba(255,99,0,.3);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.blog-card:hover::before { opacity:1; }
.blog-card-img{margin:-36px -32px 16px;overflow:hidden;border-radius:var(--r) var(--r) 0 0;height:160px;flex-shrink:0}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.blog-tag {
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--or);
  background:var(--or-dim);
  border:1px solid var(--or-border);
  border-radius:100px;
  padding:4px 12px;
}
.blog-date {
  font-size:12px;
  color:var(--gr);
  letter-spacing:.03em;
  flex-shrink:0;
}
.blog-card-title {
  font-size:clamp(17px,1.6vw,20px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--wh);
  flex:1;
}
.blog-card-excerpt {
  font-size:14px;
  color:var(--gr2);
  line-height:1.75;
}
.blog-read-more {
  font-size:13px;
  font-weight:700;
  color:var(--or);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-top:auto;
  transition:letter-spacing .3s;
}
.blog-card:hover .blog-read-more { letter-spacing:.08em; }
/* Stretched link — makes the whole card clickable */
.blog-card-link::after {
  content:'';position:absolute;inset:0;z-index:1;
}
@media(max-width:900px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .blog-card:last-child{ grid-column:1/-1; }
}
@media(max-width:600px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-card:last-child{ grid-column:auto; }
  .blog-card{ padding:28px 24px; }
}

/* ── FAQ SECTION ─────────────────────────────────────────────── */
.faq-list {
  display:flex;flex-direction:column;gap:2px;
}
.faq-item {
  border:1px solid var(--bd);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
  transition:background .25s;
}
.faq-item[open] {
  background:rgba(255,99,0,.04);
  border-color:rgba(255,99,0,.22);
}
.faq-q {
  font-size:clamp(15px,1.6vw,18px);
  font-weight:700;
  color:var(--wh);
  padding:28px 32px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  letter-spacing:-.01em;
  line-height:1.4;
  user-select:none;
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after {
  content:'+';
  font-size:22px;
  font-weight:300;
  color:var(--or);
  flex-shrink:0;
  transition:transform .3s;
}
details[open] .faq-q::after {
  transform:rotate(45deg);
}
.faq-a {
  padding:0 32px 28px;
  border-top:1px solid rgba(255,255,255,.06);
}
.faq-a p {
  font-size:clamp(14px,1.5vw,16px);
  color:var(--gr2);
  line-height:1.8;
  margin:20px 0 0;
}
@media(max-width:600px){
  .faq-q { padding:20px 20px; font-size:15px; }
  .faq-a { padding:0 20px 20px; }
}

/* ── FOUNDRY OS ─────────────────────────────────────────────── */
.fos-diagram-wrap {
  max-width:740px;margin:0 auto 80px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,99,0,.15);
  border-radius:24px;padding:24px;
  position:relative;overflow:hidden;
}
.fos-diagram-wrap::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,99,0,.06),transparent 70%);
  pointer-events:none;
}
.fos-svg { width:100%;height:auto;display:block; }
.fos-modules {
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.fos-mod {
  background:rgba(255,255,255,.025);
  border:1px solid var(--bd);
  border-radius:16px;padding:32px 28px;
  transition:border-color .3s,background .3s,transform .3s;
}
.fos-mod:hover {
  border-color:rgba(255,99,0,.28);
  background:rgba(255,99,0,.04);
  transform:translateY(-3px);
}
.fos-mod-num {
  font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--or);text-transform:uppercase;margin-bottom:14px;
}
.fos-mod-name {
  font-size:17px;font-weight:800;letter-spacing:-.02em;
  color:var(--wh);margin-bottom:12px;line-height:1.25;
}
.fos-mod-desc {
  font-size:14px;color:var(--gr2);line-height:1.75;
}
@media(max-width:900px){ .fos-modules { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .fos-modules { grid-template-columns:1fr; } .fos-mod { padding:24px 20px; } }

/* ── OPERATIONAL CLARITY ────────────────────────────────────── */
.bft-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--bd);
}
.bft-quad {
  background:rgba(255,255,255,.025);
  padding:48px 44px;
  transition:background .3s;
}
.bft-quad:hover { background:rgba(255,99,0,.035); }
.bft-quad-label {
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gr);margin-bottom:28px;
}
.bft-dot {
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.3);flex-shrink:0;
}
.bft-list {
  list-style:none;display:flex;flex-direction:column;gap:12px;
}
.bft-list li {
  font-size:15px;color:var(--gr2);line-height:1.5;
  padding-left:18px;position:relative;
}
.bft-list li::before {
  content:'';position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,99,0,.45);
}
@media(max-width:768px){
  .bft-grid { grid-template-columns:1fr; }
  .bft-quad { padding:32px 28px; }
}
@media(max-width:600px){ .bft-quad { padding:28px 20px; } }

/* ── AEO / GEO ─────────────────────────────────────────────── */
.aeo-split {
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
}
.aeo-badge {
  display:inline-flex;align-items:center;
  background:rgba(255,99,0,.1);border:1px solid rgba(255,99,0,.22);
  border-radius:100px;padding:5px 16px;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--or);margin-bottom:24px;
}
.aeo-copy-title {
  font-size:clamp(22px,2.5vw,30px);font-weight:900;
  letter-spacing:-.03em;line-height:1.2;
  color:var(--wh);margin-bottom:20px;
}
.aeo-copy-title em {
  font-style:normal;
  background:linear-gradient(135deg,var(--or),var(--or2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.aeo-copy-body { font-size:15px;color:var(--gr2);line-height:1.8; }
.aeo-pillars { display:flex;flex-direction:column;gap:12px;margin-top:32px; }
.aeo-pillar {
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 20px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--bd);border-radius:12px;
  transition:border-color .25s,background .25s;
}
.aeo-pillar:hover { border-color:rgba(255,99,0,.2);background:rgba(255,99,0,.04); }
.aeo-pillar-label {
  font-size:10px;font-weight:900;letter-spacing:.1em;
  color:var(--or);background:rgba(255,99,0,.1);
  border:1px solid rgba(255,99,0,.22);
  border-radius:6px;padding:4px 8px;flex-shrink:0;
  min-width:38px;text-align:center;margin-top:1px;
}
.aeo-pillar-name { font-size:13px;font-weight:700;color:var(--wh);margin-bottom:3px; }
.aeo-pillar-desc { font-size:12px;color:var(--gr);line-height:1.5; }
.aeo-diagram {
  background:rgba(255,255,255,.025);border:1px solid var(--bd);
  border-radius:20px;padding:36px;
}
.aeo-flow-label {
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gr);margin-bottom:24px;text-align:center;
}
.aeo-flow { display:flex;flex-direction:column; }
.aeo-node {
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
}
.aeo-node-cite {
  border-color:rgba(255,99,0,.4);
  background:rgba(255,99,0,.06);
}
.aeo-node-icon { font-size:20px;flex-shrink:0; }
.aeo-node-text { font-size:13px;font-weight:700;color:var(--wh);line-height:1.3; }
.aeo-node-sub  { font-size:11px;color:var(--gr);margin-top:3px; }
.aeo-arrow {
  display:flex;flex-direction:column;align-items:center;
  gap:0;padding:4px 0;
}
.aeo-arrow-line {
  width:1px;height:18px;
  background:linear-gradient(to bottom,rgba(255,99,0,.2),rgba(255,99,0,.5));
}
.aeo-we-build {
  font-size:13px;color:var(--gr2);line-height:1.65;
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--bd);text-align:center;
}
.aeo-stats {
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.aeo-stat {
  background:rgba(255,255,255,.025);
  border:1px solid var(--bd);border-radius:16px;
  padding:36px 28px;text-align:center;
  transition:border-color .3s,background .3s;
}
.aeo-stat:hover { border-color:rgba(255,99,0,.25);background:rgba(255,99,0,.04); }
.aeo-stat-num {
  font-size:clamp(26px,2.8vw,40px);font-weight:900;
  letter-spacing:-.04em;color:var(--or);
  margin-bottom:12px;line-height:1;
}
.aeo-stat-label { font-size:14px;color:var(--gr2);line-height:1.55; }
@media(max-width:900px){
  .aeo-split  { grid-template-columns:1fr;gap:40px; }
  .aeo-stats  { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .aeo-stats  { grid-template-columns:1fr; }
  .aeo-stat   { padding:28px 20px; }
  .aeo-diagram{ padding:24px 20px; }
}

/* ── QUICK ANSWERS (Voice Search / AEO Speakable) ──────────── */
.qa-eyebrow {
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--or);margin-bottom:16px;
}
.qa-heading {
  font-size:clamp(24px,3vw,38px);font-weight:900;
  letter-spacing:-.03em;color:var(--wh);
  margin-bottom:56px;line-height:1.2;
}
.qa-list {
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--bd);border-radius:20px;overflow:hidden;
}
.qa-item {
  border-bottom:1px solid var(--bd);
  padding:32px 36px;
  transition:background .25s;
}
.qa-item:last-child { border-bottom:none; }
.qa-item:hover { background:rgba(255,99,0,.03); }
.qa-q {
  font-size:16px;font-weight:800;color:var(--wh);
  letter-spacing:-.01em;margin-bottom:12px;
  display:flex;align-items:flex-start;gap:14px;
}
.qa-q::before {
  content:'Q';
  flex-shrink:0;
  font-size:10px;font-weight:900;
  color:var(--or);background:rgba(255,99,0,.12);
  border:1px solid rgba(255,99,0,.25);
  border-radius:5px;padding:2px 7px;
  margin-top:2px;letter-spacing:.06em;
}
.qa-a {
  font-size:15px;color:var(--gr2);line-height:1.75;
  padding-left:42px;
}
@media(max-width:768px){
  .qa-item { padding:24px 20px; }
  .qa-a    { padding-left:0; }
}

/* ── PROOF STRIP (Client Results) ──────────────────────────── */

/* — Scrolling ticker — */
.proof-ticker-wrap {
  overflow:hidden;
  border-bottom:1px solid var(--bd);
  padding:14px 0;
  background:rgba(255,99,0,.04);
}
.proof-ticker {
  display:flex;align-items:center;gap:0;
  white-space:nowrap;
  animation:ticker-scroll 28s linear infinite;
  width:max-content;
}
.proof-ticker:hover { animation-play-state:paused; }
@keyframes ticker-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.pt-item {
  font-size:12px;font-weight:500;
  color:var(--gr);letter-spacing:.03em;
  padding:0 24px;
}
.pt-item strong { color:var(--or);font-weight:800; }
.pt-sep { color:rgba(255,99,0,.3);font-size:14px;flex-shrink:0; }

/* — Cards — */
.proof-cards-wrap {
  max-width:1200px;margin:0 auto;
  padding:80px 24px 72px;
}
.proof-eyebrow {
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--or);
  margin-bottom:40px;text-align:center;
}
.proof-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--bd);
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--bd);
}
.proof-card {
  background:#0a0a0a;
  padding:44px 36px;
  transition:background .3s;
  position:relative;
}
.proof-card::before {
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,99,0,.6),transparent);
  opacity:0;transition:opacity .3s;
}
.proof-card:hover { background:rgba(255,99,0,.04); }
.proof-card:hover::before { opacity:1; }
.proof-card-num {
  font-size:clamp(40px,4vw,64px);
  font-weight:900;letter-spacing:-.05em;
  color:var(--or);line-height:1;
  margin-bottom:16px;
}
.proof-card-num span {
  font-size:.55em;font-weight:700;
  vertical-align:super;
  color:rgba(255,99,0,.7);
}
.proof-card-label {
  font-size:15px;font-weight:800;
  color:var(--wh);letter-spacing:-.01em;
  margin-bottom:12px;line-height:1.3;
}
.proof-card-ctx {
  font-size:12px;color:var(--gr);
  line-height:1.65;
}
.proof-disclaimer {
  font-size:11px;color:rgba(255,255,255,.2);
  text-align:center;margin-top:32px;
  letter-spacing:.02em;
}

/* Responsive */
@media(max-width:1024px){
  .proof-cards { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:580px){
  .proof-cards { grid-template-columns:1fr; }
  .proof-card  { padding:32px 24px; }
}

/* ── RESULTS PAGE (page-results.php) ───────────────────────── */

/* Hero */
.results-hero {
  position:relative;overflow:hidden;
  padding:160px 24px 100px;text-align:center;
  border-bottom:1px solid var(--bd);
}
.results-hero-glow {
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,99,0,.08) 0%,transparent 70%);
  pointer-events:none;
}
.results-hero-inner { position:relative;z-index:1;max-width:860px;margin:0 auto; }
.results-eyebrow {
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--or);margin-bottom:24px;
}
.results-hero-title {
  font-size:clamp(48px,7vw,96px);font-weight:900;
  letter-spacing:-.05em;color:var(--wh);line-height:.95;
  margin-bottom:28px;
}
.results-hero-title em {
  font-style:normal;
  background:linear-gradient(135deg,#ff6300,#ff9a00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.results-hero-sub {
  font-size:clamp(16px,1.8vw,20px);color:var(--gr2);
  line-height:1.6;max-width:580px;margin:0 auto;
}

/* Proof cards */
.results-cards-section { background:#050505;padding:80px 0; }
.results-cards-wrap { max-width:1200px;margin:0 auto;padding:0 24px; }
.results-cards {
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--bd);
  border-radius:20px;overflow:hidden;border:1px solid var(--bd);
  margin-bottom:24px;
}
.results-card {
  background:#0a0a0a;padding:44px 32px;
  transition:background .3s;
  position:relative;
}
.results-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,99,0,.7),transparent);
  opacity:0;transition:opacity .3s;
}
.results-card:hover { background:rgba(255,99,0,.03); }
.results-card:hover::before { opacity:1; }
.results-card-num {
  font-size:clamp(38px,3.5vw,58px);font-weight:900;
  letter-spacing:-.05em;color:var(--or);line-height:1;margin-bottom:14px;
}
.results-card-num span { font-size:.55em;font-weight:700;vertical-align:super;color:rgba(255,99,0,.7); }
.results-card-label { font-size:14px;font-weight:800;color:var(--wh);margin-bottom:8px;line-height:1.35; }
.results-card-platform { font-size:11px;font-weight:600;color:var(--or);letter-spacing:.05em;margin-bottom:14px;opacity:.7; }
.results-card-ctx { font-size:12px;color:var(--gr);line-height:1.65; }
.results-disclaimer {
  font-size:11px;color:rgba(255,255,255,.2);text-align:center;
  letter-spacing:.02em;margin-top:4px;
}

/* Case study section */
.case-study-section {
  padding:100px 24px;
  background:#050505;
  border-top:1px solid var(--bd);
}
.case-study-wrap { max-width:1100px;margin:0 auto; }
.cs-label {
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--or);
  background:rgba(255,99,0,.1);border:1px solid rgba(255,99,0,.22);
  border-radius:100px;padding:5px 16px;margin-bottom:24px;
}
.cs-title {
  font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-.04em;
  color:var(--wh);line-height:1.1;margin-bottom:28px;
}
.cs-intro {
  font-size:clamp(16px,1.7vw,19px);color:var(--gr2);line-height:1.7;
  max-width:760px;margin-bottom:48px;
}

/* Snapshot bar */
.cs-snapshot {
  display:flex;gap:0;
  border:1px solid var(--bd);border-radius:16px;overflow:hidden;
  margin-bottom:56px;
}
.cs-snap-item {
  flex:1;padding:24px 28px;border-right:1px solid var(--bd);
  background:rgba(255,255,255,.02);transition:background .25s;
}
.cs-snap-item:last-child { border-right:none; }
.cs-snap-item:hover { background:rgba(255,99,0,.04); }
.cs-snap-label { font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gr);margin-bottom:8px; }
.cs-snap-val { font-size:14px;font-weight:700;color:var(--wh);line-height:1.35; }

/* Before / After */
.cs-ba {
  display:grid;grid-template-columns:1fr 48px 1fr;
  gap:32px;align-items:start;margin-bottom:64px;
}
.cs-ba-tag {
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gr);margin-bottom:20px;
}
.cs-ba-tag-after { color:var(--wh); }
.cs-ba-total {
  font-size:28px;font-weight:900;letter-spacing:-.03em;color:var(--wh);margin-bottom:24px;
}
.cs-ba-total span { font-size:14px;font-weight:500;color:var(--gr);margin-left:6px; }
.cs-ba-list { list-style:none;display:flex;flex-direction:column;gap:14px; }
.cs-ba-list li { font-size:13px; }
.cs-ba-ch { color:var(--gr2);display:block;margin-bottom:4px; }
.cs-ba-amt { font-size:16px;font-weight:800;color:var(--wh);display:block;margin-bottom:6px; }
.cs-ba-bar-wrap { background:rgba(255,255,255,.06);border-radius:4px;height:4px;width:100%;margin-bottom:4px; }
.cs-ba-bar { height:4px;border-radius:4px;background:rgba(255,255,255,.2); }
.cs-ba-bar-weak { background:rgba(255,99,0,.3); }
.cs-ba-bar-win  { background:var(--or); }
.cs-ba-pct { font-size:11px;color:var(--gr);font-weight:600; }
.cs-ba-pct-win { color:var(--or);font-weight:800; }
.cs-ba-highlight-weak .cs-ba-amt { color:rgba(255,99,0,.6); }
.cs-ba-highlight-win .cs-ba-amt  { color:var(--or);font-size:22px; }
.cs-ba-note { font-size:12px;color:var(--gr);line-height:1.5;margin-top:20px; }
.cs-ba-arrow {
  display:flex;align-items:center;justify-content:center;
  padding-top:48px;
}

/* What we built */
.cs-built { margin-bottom:56px; }
.cs-built-title {
  font-size:22px;font-weight:900;letter-spacing:-.03em;
  color:var(--wh);margin-bottom:28px;
}
.cs-built-grid {
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.cs-built-card {
  background:rgba(255,255,255,.025);border:1px solid var(--bd);
  border-radius:16px;padding:28px 24px;
  transition:border-color .3s,background .3s;
}
.cs-built-card:hover { border-color:rgba(255,99,0,.25);background:rgba(255,99,0,.04); }
.cs-built-icon { margin-bottom:16px; }
.cs-built-name { font-size:14px;font-weight:800;color:var(--wh);margin-bottom:10px;line-height:1.3; }
.cs-built-desc { font-size:12px;color:var(--gr);line-height:1.65; }

/* Read more CTA */
.cs-read-more { text-align:center;padding:48px 0 0; }
.cs-read-btn {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--or);color:#000;font-weight:800;font-size:15px;
  padding:16px 36px;border-radius:100px;text-decoration:none;
  transition:background .25s,transform .25s;letter-spacing:-.01em;
}
.cs-read-btn:hover { background:#ff7a20;transform:translateY(-2px); }
.cs-read-sub { font-size:13px;color:var(--gr);margin-top:16px; }

/* Secondary metrics strip */
.results-secondary {
  background:#050505;border-top:1px solid var(--bd);
  padding:80px 24px;
}
.results-secondary-wrap { max-width:1200px;margin:0 auto; }
.results-secondary-eyebrow {
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--or);margin-bottom:40px;text-align:center;
}
.results-secondary-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--bd);border-radius:20px;overflow:hidden;
  border:1px solid var(--bd);
}
.rs-item {
  background:#0a0a0a;padding:36px 32px;
  transition:background .3s;
}
.rs-item:hover { background:rgba(255,99,0,.03); }
.rs-num {
  font-size:clamp(28px,3vw,44px);font-weight:900;letter-spacing:-.04em;
  color:var(--wh);margin-bottom:10px;line-height:1;
}
.rs-num span { font-size:.6em;color:var(--or); }
.rs-label { font-size:14px;font-weight:800;color:var(--wh);margin-bottom:8px; }
.rs-ctx { font-size:12px;color:var(--gr);line-height:1.55; }

/* Responsive */
@media(max-width:1100px){
  .results-cards   { grid-template-columns:repeat(2,1fr); }
  .cs-built-grid   { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .cs-ba           { grid-template-columns:1fr;gap:24px; }
  .cs-ba-arrow     { display:none; }
  .cs-snapshot     { flex-direction:column; }
  .cs-snap-item    { border-right:none;border-bottom:1px solid var(--bd); }
  .cs-snap-item:last-child { border-bottom:none; }
  .results-secondary-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .results-cards   { grid-template-columns:1fr; }
  .results-card    { padding:32px 24px; }
  .cs-built-grid   { grid-template-columns:1fr; }
  .results-secondary-grid { grid-template-columns:1fr; }
  .rs-item         { padding:28px 20px; }
}