/* ============================================================
   STYLE — Perk-inspired components for Techspian
   ============================================================ */

/* ----------------- Layout helpers ----------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.section{padding-block:clamp(var(--space-20),9vw,var(--space-32));position:relative}
.section--tight{padding-block:clamp(var(--space-12),5vw,var(--space-20))}
.section--sage{background:var(--color-sage)}
.section--soft{background:var(--color-surface-2)}
.section--ink{background:var(--color-surface-dark);color:#fff}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink p,.section--ink li{color:#cfcfd3}

/* ----------------- Typography utilities ----------------- */
.eyebrow{
  display:inline-block;font-size:var(--text-2xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink);
  background:rgba(58,165,210,.28);
  box-shadow:inset 0 0 0 1px rgba(37,137,181,.35);
  padding:6px 14px;border-radius:var(--radius-pill);
  margin-bottom:var(--space-6);
}
.section--sage .eyebrow{background:rgba(58,165,210,.45);box-shadow:inset 0 0 0 1px rgba(14,14,16,.18)}
.section--ink .eyebrow{background:rgba(58,165,210,.18);color:var(--color-lime);box-shadow:inset 0 0 0 1px rgba(58,165,210,.35)}

.h-hero{font-size:var(--text-hero);font-weight:900;letter-spacing:-.035em;line-height:.98;color:var(--color-ink)}
.h-display{font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:900;letter-spacing:-.03em;line-height:1}
.h-section{font-size:clamp(1.8rem,4.5vw,3.4rem);font-weight:900;letter-spacing:-.028em;line-height:1.02}
.h-sub{font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:800;letter-spacing:-.022em;line-height:1.08}
.lead{font-size:var(--text-md);color:var(--color-charcoal);line-height:1.55;max-width:60ch}
.muted{color:var(--color-text-muted)}
.faint{color:var(--color-text-faint)}

.sec-head{margin-bottom:var(--space-12);max-width:50ch}
.sec-head-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:end;margin-bottom:var(--space-12)}
@media (max-width:860px){.sec-head-split{grid-template-columns:1fr;gap:var(--space-6)}}

/* Section-closing CTA band — used where a list/rail ends and we want a satisfying close */
.sec-footer{
  margin-top:var(--space-12);
  padding-top:var(--space-8);
  border-top:1px solid rgba(14,14,16,.10);
  display:grid;grid-template-columns:1.2fr .8fr;align-items:end;
  gap:var(--space-10);
}
.sec-footer__copy{display:flex;flex-direction:column;gap:.7rem;max-width:54ch}
.sec-footer__eyebrow{
  font-size:var(--text-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-ink);display:inline-flex;align-items:center;gap:10px;
}
.sec-footer__eyebrow::before{
  content:"";width:22px;height:2px;background:var(--color-lime);border-radius:2px;
}
.sec-footer__line{
  margin:0;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.4;
  font-weight:600;letter-spacing:-.012em;color:var(--color-ink);
  text-wrap:balance;
}
.sec-footer__cta{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){
  .sec-footer{grid-template-columns:1fr;gap:var(--space-6);padding-top:var(--space-6);margin-top:var(--space-8)}
  .sec-footer__cta{justify-content:flex-start}
}

/* ----------------- Buttons ----------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:600;letter-spacing:-.005em;
  border:1.5px solid transparent;
  transition:background .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out);
  white-space:nowrap;
}
.btn::after{content:"›";font-weight:600;transition:transform .35s var(--ease-out);font-size:1.1em;line-height:1}
.btn:hover::after{transform:translateX(4px)}
.btn--primary{background:var(--color-ink);color:#fff}
.btn--primary:hover{background:#2a2a2e}
.btn--lime{background:var(--color-lime);color:var(--color-ink);font-weight:700}
.btn--lime:hover{background:var(--color-lime-deep)}
.btn--ghost{background:transparent;color:var(--color-ink);border-color:var(--color-ink)}
.btn--ghost:hover{background:var(--color-ink);color:#fff}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost-light:hover{background:#fff;color:var(--color-ink)}
.btn-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-8)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:var(--text-sm);
  color:var(--color-ink);border-bottom:1.5px solid var(--color-ink);padding-bottom:2px;
  transition:gap .35s var(--ease-out);
}
.link-arrow::after{content:"→";transition:transform .35s var(--ease-out)}
.link-arrow:hover{gap:12px}
.link-arrow:hover::after{transform:translateX(3px)}
.section--ink .link-arrow{color:var(--color-lime);border-bottom-color:var(--color-lime)}

/* ----------------- Header / nav ----------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:#0E0E10;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .55s var(--ease-out);
}
.site-header.is-scrolled{background:#0E0E10;box-shadow:0 2px 18px rgba(0,0,0,.35)}
.nav{
  display:flex;align-items:center;gap:var(--space-6);
  height:var(--nav-h);
}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand img{height:44px;width:auto;display:block}
.nav-links{
  display:flex;align-items:center;gap:var(--space-7);flex:1;justify-content:center;
  list-style:none;
}
.nav-links a{
  font-size:var(--text-base);font-weight:600;color:#fff;
  padding:8px 4px;position:relative;transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--color-lime)}
.nav-links a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:4px;height:1.5px;
  background:var(--color-lime);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--color-lime);color:var(--color-ink);
  padding:11px 22px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:700;
  transition:background .25s var(--ease),transform .25s var(--ease);
  flex-shrink:0;
}
.nav-cta::after{content:"›";font-size:1.1em}
.nav-cta:hover{background:#fff;transform:translateY(-1px)}
.nav-toggle{display:none;width:32px;height:32px;flex-direction:column;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease)}

/* ----------------- Mega menu (Perk-style dropdown) ----------------- */
.has-mega{position:static}
.mega-trigger{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--text-sm);font-weight:500;color:var(--color-ink);
  padding:8px 4px;cursor:pointer;background:none;border:none;
  position:relative;
}
.mega-trigger::after{
  content:"";position:absolute;left:4px;right:14px;bottom:4px;height:1.5px;
  background:var(--color-ink);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.has-mega:hover .mega-trigger::after,
.has-mega.is-open .mega-trigger::after{transform:scaleX(1)}
.mega-trigger .chev{
  display:inline-block;width:10px;height:10px;margin-left:4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);
}
.has-mega:hover .mega-trigger .chev,
.has-mega.is-open .mega-trigger .chev{transform:rotate(-135deg) translate(-2px,-2px)}

.mega-panel{
  position:absolute;left:50%;top:calc(var(--nav-h) - 8px);
  transform:translateX(-50%) translateY(8px);
  width:min(1180px, calc(100vw - 32px));
  background:#141416;color:#fff;
  border-radius:24px;
  padding:clamp(24px,3vw,40px) clamp(28px,3.5vw,48px);
  box-shadow:0 30px 80px -20px rgba(14,14,16,.55), 0 0 0 1px rgba(255,255,255,.04);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
  z-index:60;
}
.has-mega:hover .mega-panel,
.has-mega.is-open .mega-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s;
}
.mega-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(20px,2.5vw,40px);
}
.mega-col h5{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;
  color:#86868c;letter-spacing:.02em;
  text-transform:none;margin-bottom:14px;
}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.mega-col a{
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  color:#fff;letter-spacing:-.01em;line-height:1.25;
  transition:color .2s var(--ease);display:block;
}
.mega-col a:hover{color:var(--color-lime)}
.mega-flair{
  position:absolute;top:18px;right:-18px;width:44px;height:44px;
  background:var(--color-lime);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--color-ink);
  font-size:1.4rem;line-height:1;
  box-shadow:0 8px 20px rgba(58,165,210,.4);
}
.mega-bridge{position:absolute;left:0;right:0;top:100%;height:16px}

@media (max-width:1100px){
  .mega-panel{display:none}
  .has-mega .mega-trigger .chev{display:none}
}

/* Hide drawer-only elements on desktop */
.nav-drawer-cta{display:none}

/* ----------------- Mobile nav: Perk-style fullscreen drawer ----------------- */
@media (max-width:1100px){
  .nav-drawer-cta{display:flex}

  /* Show hamburger, hide desktop links + desktop CTA */
  .nav-toggle{display:flex;z-index:1001;position:relative;margin-left:auto;width:40px;height:40px;align-items:center}
  .nav-cta{display:none}

  /* Fullscreen drawer */
  .nav-links{
    display:flex !important;
    position:fixed;inset:0;top:0;left:0;right:0;bottom:0;
    width:100vw;height:100dvh;height:100vh;
    background:#0E0E10;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:calc(var(--nav-h) + var(--space-7)) var(--space-6) var(--space-7);
    gap:0;
    z-index:1000;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),visibility 0s linear .5s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    border:none;box-shadow:none;
  }
  .nav-links.is-open{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),visibility 0s linear 0s;
  }
  .nav-links li{
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links li:first-child{border-top:1px solid rgba(255,255,255,.08)}
  .nav-links a{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    font-family:var(--font-display);font-weight:700;
    font-size:1.75rem;letter-spacing:-.02em;line-height:1.1;
    color:#fff;padding:22px 4px;
    transition:color .2s var(--ease),padding .2s var(--ease);
  }
  .nav-links a::after{display:none}
  .nav-links a::before{
    content:"→";opacity:0;color:var(--color-lime);font-size:1.5rem;
    margin-left:auto;transition:opacity .2s var(--ease),transform .2s var(--ease);
    transform:translateX(-8px);
  }
  .nav-links a:hover,
  .nav-links a.is-active{color:var(--color-lime)}
  .nav-links a:hover::before,
  .nav-links a.is-active::before{opacity:1;transform:translateX(0)}

  /* Drawer footer CTA */
  .nav-links::after{
    content:"";display:block;flex:1;
  }
  /* Drawer CTA — symmetric full-width pill at bottom of drawer */
  .nav-links .nav-drawer-cta,
  .nav-drawer-cta{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--color-lime) !important;color:var(--color-ink) !important;
    padding:18px 28px;border-radius:var(--radius-pill);
    font-family:var(--font-display);font-weight:700;font-size:1.05rem;
    margin-top:var(--space-7);
    text-decoration:none;
    width:100%;align-self:stretch;
    text-align:center;
  }
  /* Cancel inherited nav link → pseudo that would push the text right */
  .nav-links .nav-drawer-cta::before,
  .nav-drawer-cta::before{display:none !important;content:none !important}
  .nav-links .nav-drawer-cta:hover,
  .nav-drawer-cta:hover{background:#fff !important;color:var(--color-ink) !important}
  .nav-drawer-cta::after{content:"›";font-size:1.3em;line-height:1;color:var(--color-ink)}

  /* Hamburger to X transform */
  body.nav-open{overflow:hidden}
  .nav-toggle[aria-expanded="true"] span{background:#fff}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Keep brand above drawer */
  .site-header{z-index:1002;position:relative}
  .site-header.nav-is-open{background:#0E0E10}
  .site-header.nav-is-open .brand img{filter:none}
}

/* ----------------- Hero ----------------- */
.hero{
  background:#3AA5D2;
  padding:calc(var(--nav-h) + 80px) 0 var(--space-20);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;left:-10%;top:-20%;width:55%;height:80%;
  background:radial-gradient(circle, rgba(58,165,210,.30) 0%, rgba(58,165,210,0) 65%);
  pointer-events:none;z-index:1;
}
.hero::after{
  content:"";position:absolute;right:-12%;bottom:-30%;width:55%;height:70%;
  background:radial-gradient(circle, rgba(14,14,16,.06) 0%, rgba(14,14,16,0) 60%);
  pointer-events:none;z-index:1;
}
.hero-inner{text-align:center;max-width:1100px;position:relative;z-index:3}

/* Hero with full-bleed background video — video reads as video, lime as edge accent */
.hero--with-video{background:var(--color-ink)}
.hero--with-video::before,.hero--with-video::after{display:none}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  filter:none;
  opacity:1;
  background:var(--color-ink);
}
.hero-video-tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(14,14,16,.55) 0%, rgba(14,14,16,0) 70%),
    linear-gradient(180deg, rgba(14,14,16,.35) 0%, rgba(14,14,16,.15) 40%, rgba(14,14,16,.55) 100%);
}
.hero--with-video .hero-inner{position:relative;z-index:3}
.hero--with-video .h-hero{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero--with-video .hero-lead{color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero--with-video .hero-trust{color:rgba(255,255,255,.78)}
.hero--with-video .hero-trust strong{color:var(--color-lime)}
.hero--with-video .btn--primary{background:var(--color-lime);color:var(--color-ink)}
.hero--with-video .btn--primary:hover{background:var(--color-lime-deep)}
.hero--with-video .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hero--with-video .btn--ghost:hover{background:#fff;color:var(--color-ink);border-color:#fff}
.hero .h-hero{margin-bottom:var(--space-6)}
.hero-lead{font-size:var(--text-md);color:var(--color-ink-soft);max-width:62ch;margin:0 auto var(--space-8);line-height:1.45}
.hero .btn-group{justify-content:center;margin-top:var(--space-8)}
.hero-trust{margin-top:var(--space-10);font-size:var(--text-xs);color:var(--color-charcoal);font-weight:500;letter-spacing:.02em}
.hero-trust strong{color:var(--color-ink);font-weight:700}
.hero-art{margin-top:var(--space-12);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 30px 60px -20px rgba(14,14,16,.25);max-width:1000px;margin-inline:auto;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--color-ink)}

/* hero on inner pages - shorter */
.hero--page{padding:calc(var(--nav-h) + 60px) 0 var(--space-16);background:var(--color-stone);position:relative;overflow:hidden}
.hero--page::before{
  content:"";position:absolute;right:-8%;top:-30%;width:50%;height:80%;
  background:radial-gradient(circle, rgba(58,165,210,.30) 0%, rgba(58,165,210,0) 65%);
  pointer-events:none;
}
.hero--page .hero-inner{position:relative;z-index:2}
.hero--page .hero-inner{max-width:var(--wrap);text-align:left;margin-inline:auto}
.hero--page .eyebrow,
.hero--page .h-hero,
.hero--page .hero-lead,
.hero--page .btn-group{max-width:900px}
.hero--page .h-hero{font-size:clamp(2.2rem,5.5vw,4.2rem)}
.hero--page .hero-lead{margin-left:0;margin-right:0}
.hero--page .btn-group{justify-content:flex-start}

/* ----------------- Logo strip (legacy) ----------------- */
.logos-strip{background:var(--color-stone);padding:var(--space-6) 0 var(--space-12);overflow:hidden}
.logos-strip-inner{display:flex;align-items:center;gap:var(--space-12);font-size:var(--text-sm)}
.logos-strip-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;color:var(--color-charcoal);flex-shrink:0}
.logos-row{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.logo-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);letter-spacing:-.02em;color:var(--color-ink);opacity:.8;transition:opacity .25s var(--ease)}
.logo-name:hover{opacity:1}

/* ----------------- Logo row: Ramp-style trusted-by strip ----------------- */
.logo-row-section{
  background:#F7F7F5;
  padding:var(--space-7) 0 var(--space-6);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.logo-row{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,3vw,32px);text-align:center;
}
.logo-row__label{
  font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--color-ink-soft);
  line-height:1.3;
  text-transform:uppercase;
  white-space:nowrap;
}
.logo-row__label .label-mobile{display:none}
.logo-row__label .label-full{display:inline}
.logo-row__marks{
  display:flex;align-items:center;
  gap:clamp(20px,3vw,44px);flex:1;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.logo-row__marks img{
  height:40px;width:auto;max-width:180px;
  opacity:.9;
  filter:grayscale(1);
  transition:opacity .2s var(--ease),filter .2s var(--ease);
  flex-shrink:1;min-width:0;
}
.logo-row__marks img:hover{opacity:1;filter:grayscale(0)}
@media(max-width:1100px){
  .logo-row{justify-content:center;text-align:center;gap:var(--space-4)}
  .logo-row__label{letter-spacing:.14em;font-size:11px}
  .logo-row__marks{justify-content:center;gap:clamp(20px,4vw,40px);flex-wrap:wrap}
  .logo-row__marks img{height:36px}
}
@media(max-width:760px){
  .logo-row-section{padding:22px 0 14px}
  .logo-row{gap:10px;justify-content:center}
  .logo-row__label{font-size:10.5px;letter-spacing:.16em;opacity:.85}
  .logo-row__label .label-full{display:none}
  .logo-row__label .label-mobile{display:inline}
}

/* ----- Logo Marquee (symmetric, infinite scroll) ----- */
.logo-marquee{
  position:relative;width:100%;overflow:hidden;
  margin-top:var(--space-6);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.logo-marquee__track{
  display:flex;align-items:center;gap:clamp(36px,5vw,72px);
  width:max-content;
  animation:logo-marquee 32s linear infinite;
  will-change:transform;
}
.logo-marquee__track img{
  height:38px;width:auto;flex-shrink:0;
  opacity:.85;filter:grayscale(1);
  transition:opacity .2s var(--ease),filter .2s var(--ease);
}
.logo-marquee__track img:hover{opacity:1;filter:grayscale(0)}
.logo-marquee:hover .logo-marquee__track{animation-play-state:paused}
@keyframes logo-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:760px){
  .logo-marquee__track{gap:48px;animation-duration:24s}
  .logo-marquee__track img{height:30px}
}

/* ----------------- Compare section ----------------- */
.section--sage-soft{background:var(--color-stone);position:relative;overflow:hidden}
.section--sage-soft::before{
  content:"";position:absolute;right:-8%;top:-30%;width:45%;height:80%;
  background:radial-gradient(circle, rgba(58,165,210,.25) 0%, rgba(58,165,210,0) 65%);
  pointer-events:none;
}
.section--sage-soft .wrap{position:relative;z-index:2}
.section--sage-soft .compare-col{background:#fff;border-color:transparent}
.section--sage-soft .compare-col:hover{box-shadow:0 18px 40px rgba(14,14,16,.10)}
/* Keep --us card dark on lime section so it stands out, force ink text on others */
.section--sage-soft .compare-col:not(.compare-col--us) h3{color:var(--color-ink)}
.section--sage-soft .compare-col:not(.compare-col--us) li{color:#2a2a2e}
.section--sage-soft .compare-col--us{background:var(--color-ink) !important;border-color:var(--color-ink)}
.section--sage-soft .compare-col--us h3{color:var(--color-lime)}
.section--sage-soft .compare-col--us li{color:#f0f0f2}
.section--sage-soft .compare-col--us li::before{color:var(--color-lime)}

.compare{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
}
@media (max-width:900px){.compare{grid-template-columns:1fr}}
.compare-col{
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:var(--space-8);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.compare-col:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(14,14,16,.06)}
.compare-col h3{font-size:var(--text-md);margin-bottom:var(--space-5);color:var(--color-charcoal);font-weight:700}
.compare-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.compare-col li{font-size:var(--text-sm);color:var(--color-charcoal);padding-left:22px;position:relative;line-height:1.5}
.compare-col li::before{content:"–";position:absolute;left:0;color:var(--color-grey-faint);font-weight:600}
.compare-col--us{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
.compare-col--us h3{color:var(--color-lime);font-weight:800}
.compare-col--us li{color:#e6e6e8}
.compare-col--us li::before{content:"✓";color:var(--color-lime);font-weight:800}

/* ----------------- Tile grid ----------------- */
.grid{display:grid;gap:var(--space-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.tile{
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-3);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out);
  position:relative;overflow:hidden;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(14,14,16,.08);border-color:var(--color-line-strong)}
.tile-num{font-size:var(--text-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-grey)}
.tile h3{font-size:var(--text-md);font-weight:800;letter-spacing:-.02em;color:var(--color-ink);line-height:1.15}
.tile p{font-size:var(--text-sm);color:var(--color-charcoal);line-height:1.5}
.tile-img{
  width:100%;aspect-ratio:16/10;border-radius:var(--radius-md);background:var(--color-sage);
  background-size:cover;background-position:center;margin-bottom:var(--space-3);
}
.accent-rule{width:36px;height:3px;background:var(--color-lime);border-radius:2px;margin:2px 0 4px}

/* Tile in dark section variant */
.section--ink .tile{background:#17171b;border-color:#26262b;color:#fff}
.section--ink .tile:hover{border-color:#3a3a40;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.section--ink .tile h3{color:#fff}
.section--ink .tile p{color:#b8b8bc}
.section--ink .tile-num{color:#7c7c82}

/* ----------------- Stats ----------------- */
.statbar{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);
}
@media (max-width:900px){.statbar{grid-template-columns:repeat(2,1fr)}}
.stat{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-card);padding:var(--space-6) var(--space-5);
}
.section:not(.section--ink) .stat{background:#fff;border-color:var(--color-border)}
.stat-num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.04em;line-height:1;
  color:#fff;display:flex;align-items:baseline;
}
.section:not(.section--ink) .stat-num{color:var(--color-ink)}
.stat-num .accent{color:var(--color-lime)}
.section:not(.section--ink) .stat-num .accent{color:var(--color-ink)}
.stat-label{
  font-size:var(--text-xs);font-weight:500;color:#b8b8bc;
  margin-top:var(--space-3);line-height:1.4;
}
.section:not(.section--ink) .stat-label{color:var(--color-charcoal)}

/* Inline stat (Perk pill style) */
.stat-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);padding:8px 16px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:600;color:#fff;
}

/* ----------------- Case study ----------------- */
.case{
  display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-card);overflow:hidden;
}
@media (max-width:900px){.case{grid-template-columns:minmax(0,1fr)}.case-media,.case-body{min-width:0;max-width:100%}}
.case-media{background-size:cover;background-position:center;min-height:360px;background-color:var(--color-sage)}
.case-body{padding:clamp(var(--space-8),3.5vw,var(--space-14))}
.case-tag{font-size:var(--text-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-charcoal);margin-bottom:var(--space-5)}
.case-body h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;margin-bottom:var(--space-5);letter-spacing:-.025em;line-height:1.1}
.case-body p{font-size:var(--text-sm);color:var(--color-charcoal);margin-bottom:var(--space-8);line-height:1.55}
.case-metrics{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-8);
  border-top:1px solid var(--color-border);padding-top:var(--space-7);
}
.case-metric .num{font-family:var(--font-display);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--color-ink)}
.case-metric .num .accent{color:var(--color-ink)}
.case-metric .lbl{font-size:var(--text-xs);color:var(--color-charcoal);margin-top:var(--space-2);line-height:1.4}

/* ----------------- Team ----------------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.team-grid{grid-template-columns:repeat(2,1fr)}}
.member{
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:var(--space-5);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out);
}
.member:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(14,14,16,.08);border-color:var(--color-line-strong)}
.member-photo{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:var(--radius-md);overflow:hidden;
  margin-bottom:var(--space-5);
  background:linear-gradient(135deg,var(--color-sage),var(--color-sage-deep));
}
.member-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 12%;
  filter:grayscale(1) contrast(1.05);
  transition:transform .7s var(--ease-out),filter .55s var(--ease-out);
}
.member:hover .member-photo img{transform:scale(1.04);filter:grayscale(0) contrast(1)}
.member-name{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;letter-spacing:-.02em;color:var(--color-ink);margin-bottom:2px}
.member-role{font-size:var(--text-xs);color:var(--color-charcoal);font-weight:500;line-height:1.4}
.member-role .spec{display:block;color:var(--color-grey);font-weight:500;margin-top:2px;font-size:var(--text-3xs);letter-spacing:.04em;text-transform:uppercase}

/* ----------------- CTA band (sage) ----------------- */
.cta-band{background:var(--color-stone);text-align:center;position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;left:50%;top:-30%;width:60%;height:120%;
  background:radial-gradient(ellipse, rgba(58,165,210,.22) 0%, rgba(58,165,210,0) 60%);
  transform:translateX(-50%);pointer-events:none;
}
.cta-inner{max-width:780px;margin-inline:auto;position:relative;z-index:1}
.cta-inner .btn-group{justify-content:center;gap:14px}
.cta-inner p{color:var(--color-ink-soft);font-size:var(--text-md);margin-top:var(--space-5);max-width:60ch;margin-inline:auto}
.cta-rule{
  display:block;width:48px;height:3px;
  background:var(--color-lime);border-radius:2px;
  margin:0 auto var(--space-6);
  box-shadow:0 0 12px rgba(58,165,210,.45);
}

/* ----------------- Forms (contact) ----------------- */
.form-card{
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:clamp(var(--space-8),3vw,var(--space-12));
  max-width:680px;margin-inline:auto;
}
.form-row{display:grid;gap:var(--space-5);margin-bottom:var(--space-5)}
.form-row.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:600px){.form-row.cols-2{grid-template-columns:1fr}}
.form-label{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-charcoal);margin-bottom:8px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:14px 18px;
  background:var(--color-surface-2);border:1.5px solid transparent;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--color-ink);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-ink);background:#fff}
.form-textarea{min-height:140px;resize:vertical;font-family:inherit}

/* ----------------- Footer ----------------- */
.site-footer{
  background:var(--color-graphite);color:#E9E9EC;
  padding-top:var(--space-20);overflow:hidden;
  position:relative;
}
.site-footer .footer-brand p,
.site-footer .footer-col a{color:#B8B8BE}
.site-footer .footer-col h4{color:#fff}
.site-footer .footer-meta{color:#9A9AA0}
.site-footer .footer-bottom{border-top-color:rgba(255,255,255,.10);color:#9A9AA0}
.site-footer .footer-col a:hover{color:var(--color-lime)}
.site-footer .footer-marquee{border-top-color:rgba(255,255,255,.12)}
.site-footer .marquee-track{color:#fff}
.site-footer .marquee-track .dot{color:var(--color-lime);opacity:.85}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-12);
  padding-bottom:var(--space-16);
}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-brand img{height:54px;margin-bottom:var(--space-5);image-rendering:-webkit-optimize-contrast}
.footer-brand p{font-size:var(--text-sm);color:var(--color-ink-soft);max-width:42ch;line-height:1.5}
.footer-meta{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-charcoal);font-weight:500}
.footer-col h4{font-size:var(--text-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--space-4);color:var(--color-ink)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col a{font-size:var(--text-sm);color:var(--color-ink-soft);font-weight:500;transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--color-ink)}

.footer-marquee{
  position:relative;width:100%;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
  padding:var(--space-8) 0;
}
.marquee-track{
  display:flex;gap:2.4vw;align-items:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,3.2vw,2.6rem);
  letter-spacing:-.02em;line-height:1;
  color:var(--color-ink);white-space:nowrap;
  /* Animation handled by JS via step-and-hold cadence */
  will-change:transform;transform:translate3d(0,0,0);
  transition:transform 1.7s cubic-bezier(.32,.72,.24,1);
}
.marquee-track.is-jumping{transition:none}
.marquee-track span{display:inline-block;padding-right:2.4vw}
/* Legacy keyframe — kept as no-JS fallback only */
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.no-js .marquee-track{animation:marquee 28s linear infinite}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:var(--space-3);padding:var(--space-6) 0;
  border-top:1.5px solid rgba(14,14,16,.15);
  font-size:var(--text-xs);font-weight:500;color:var(--color-ink-soft);
}

/* ----------------- Reveal animation ----------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms);will-change:opacity,transform}
.reveal-stagger.is-in > *{opacity:1;transform:none}

/* ----------------- Process / approach steps ----------------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
@media (max-width:1000px){.process{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.process{grid-template-columns:1fr}}
.process-step{
  position:relative;
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--space-10) var(--space-7) var(--space-7);
  display:flex;flex-direction:column;gap:var(--space-3);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out);
  overflow:hidden;
}
.process-step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--color-lime) 0,var(--color-lime) 38%,transparent 38%);
  transform-origin:left center;transform:scaleX(.4);
  transition:transform .5s cubic-bezier(.165,.84,.44,1);
}
.process-step:hover{transform:translateY(-3px);border-color:rgba(14,14,16,.18);box-shadow:0 22px 48px rgba(14,14,16,.09)}
.process-step:hover::before{transform:scaleX(1)}
.process-step-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.6rem,4.2vw,3.4rem);
  letter-spacing:-.04em;line-height:.9;
  color:var(--color-ink);
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:var(--space-2);
}
.process-step-num::after{
  content:"";display:inline-block;
  width:34px;height:1px;background:var(--color-ink);
  transform:translateY(-10px);opacity:.4;
}
.process-step h3{font-size:var(--text-md);font-weight:800;color:var(--color-ink);letter-spacing:-.02em}
.process-step p{font-size:var(--text-sm);color:var(--color-charcoal);line-height:1.5}

/* ----------------- Work / case list ----------------- */
.case-list{display:grid;gap:var(--space-6)}
.case-row{
  display:grid;grid-template-columns:1fr 1.6fr;gap:var(--space-12);
  padding:var(--space-10) 0;border-top:1px solid var(--color-border);
  align-items:start;
}
@media (max-width:900px){.case-row{grid-template-columns:1fr;gap:var(--space-5)}}
.case-row .case-tag{margin-bottom:var(--space-4)}
.case-row h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--space-3)}
.case-row p{font-size:var(--text-sm);color:var(--color-charcoal);line-height:1.55;margin-bottom:var(--space-5)}
.case-row-stats{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.case-row-stat{
  background:var(--color-sage);color:var(--color-ink);
  padding:8px 14px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;
}

/* ----------------- Accordion / FAQ-ish list ----------------- */
.acc{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--color-border)}
.acc-item{border-bottom:1px solid var(--color-border);padding:var(--space-6) 0}
.acc-item h3{font-size:var(--text-md);font-weight:800;color:var(--color-ink);margin-bottom:var(--space-3);letter-spacing:-.02em}
.acc-item p{font-size:var(--text-sm);color:var(--color-charcoal);line-height:1.55;max-width:75ch}

/* ----------------- Misc ----------------- */
.divider{height:1px;background:var(--color-border);margin-block:var(--space-16);width:100%}
.spacer-lg{height:var(--space-16)}
.spacer-md{height:var(--space-8)}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(14,14,16,.06);padding:6px 12px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;color:var(--color-charcoal)}
.pill--lime{background:var(--color-lime);color:var(--color-ink);font-weight:700}

/* Section dividers between sage/white */
.sage-to-white{background:linear-gradient(180deg,var(--color-sage) 0%,#fff 100%);height:80px;width:100%}
.white-to-sage{background:linear-gradient(180deg,#fff 0%,var(--color-sage) 100%);height:80px;width:100%}

/* ============================================================
   EDITORIAL CAROUSEL — light Perk theme
   Auto-playing, cinematic, one-at-a-time. NO scroll pin —
   page scrolls freely past the section.
   ============================================================ */
.ed-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip}
.ed-stage--auto{height:auto !important}
.ed-host{
  position:relative;width:100%;
  min-height:min(820px, 86vh);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--color-stone);
  transition:background-color .6s cubic-bezier(.2,.7,.2,1);
}
@media (max-width:768px){
  .ed-host{ min-height:auto; padding:clamp(3rem,8vh,5rem) 0; }
}
.ed-host[data-tone="lime"]{background:var(--color-lime)}
.ed-host[data-tone="stone"]{background:var(--color-stone)}
.ed-host[data-tone="stone-2"]{background:var(--color-stone-2)}
.ed-host[data-tone="ink"]{background:var(--color-ink)}
.ed-host[data-tone="graphite"]{background:var(--color-graphite-2)}
/* Ink-mode: invert text/borders for dark backgrounds */
.ed-host--ink .ed-title,
.ed-host--ink .ed-title .ed-num,
.ed-host--ink .ed-stat-num{color:#fff}
.ed-host--ink .ed-title .ed-num{opacity:.55}
.ed-host--ink .ed-copy{color:#cfcfd3;border-left-color:var(--color-lime)}
.ed-host--ink .ed-stat{border-left-color:var(--color-lime)}
.ed-host--ink .ed-stat-label{color:#cfcfd3}
.ed-host--ink .ed-progress{border-top-color:rgba(255,255,255,.16)}
.ed-host--ink .ed-progress::before{background:var(--color-lime)}
.ed-host--ink .ed-progress__label{color:#fff}
.ed-host--ink .ed-progress__hint{color:rgba(255,255,255,.55)}
.ed-host--ink .ed-topbar{color:#fff}
.ed-host--ink .ed-topbar .ed-tag{background:var(--color-lime);color:var(--color-ink)}
.ed-host--ink::before{background:radial-gradient(circle, rgba(58,165,210,.28) 0%, rgba(58,165,210,0) 65%)}
.ed-host--ink::after{background:radial-gradient(circle, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%)}
.ed-host--ink .ed-media{box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.ed-host::before{
  content:"";position:absolute;left:-10%;top:-15%;width:55%;height:75%;
  background:radial-gradient(circle, rgba(58,165,210,.32) 0%, rgba(58,165,210,0) 65%);
  pointer-events:none;z-index:0;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.ed-host[data-tone="lime"]::before{opacity:.5;transform:translate(8%,-4%)}
.ed-host::after{
  content:"";position:absolute;right:-12%;bottom:-20%;width:55%;height:70%;
  background:radial-gradient(circle, rgba(14,14,16,.10) 0%, rgba(14,14,16,0) 60%);
  pointer-events:none;z-index:0;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1);
}
.ed-host[data-tone="lime"]::after{opacity:.55}
.ed-inner{
  position:relative;z-index:2;width:100%;
  padding:0 clamp(20px,4vw,80px) clamp(3rem,8vh,6rem);
  display:grid;grid-template-columns:1fr;align-items:center;
  gap:clamp(2rem,5vh,3rem);
  max-width:1440px;margin:0 auto;
}
.ed-host.has-media .ed-inner{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);
}
.ed-text{display:flex;flex-direction:column;gap:clamp(1.4rem,3vh,2rem);min-width:0}
.ed-topbar{
  display:flex;align-items:center;
  font-size:var(--text-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-ink);
}
.ed-topbar .ed-tag{
  background:var(--color-lime);color:var(--color-ink);
  padding:6px 14px;border-radius:var(--radius-pill);
}
.ed-title{
  width:100%;margin:0;
  font-family:var(--font-display);font-weight:700;
  letter-spacing:-.035em;line-height:.96;
  font-size:clamp(2.4rem,5.5vw,5rem);
  color:var(--color-ink);
  text-wrap:balance;
}
.ed-title .ed-num{
  display:block;font-family:var(--font-mono);font-weight:500;
  font-size:clamp(.85rem,1.2vw,1rem);letter-spacing:.24em;
  color:var(--color-ink);opacity:.7;text-transform:none;margin-bottom:1rem;
}
.ed-copy{
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;font-weight:500;
  color:var(--color-ink-soft);margin:0;max-width:42rem;
  border-left:3px solid var(--color-lime);padding-left:clamp(.9rem,1.4vw,1.2rem);
}
.ed-stat{display:flex;flex-direction:column;gap:.4rem;padding-left:clamp(.9rem,1.4vw,1.2rem);border-left:3px solid var(--color-ink)}
.ed-stat-num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3rem,7vw,6rem);letter-spacing:-.04em;line-height:.95;
  color:var(--color-ink);
}
.ed-stat-label{
  font-size:var(--text-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--color-charcoal);
}
.ed-media{
  position:relative;width:100%;aspect-ratio:4/3;
  border-radius:var(--radius-card);overflow:hidden;
  background:var(--color-ink);
  box-shadow:0 30px 70px -20px rgba(14,14,16,.4),0 0 0 1px rgba(14,14,16,.1);
}
.ed-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04) translateY(10px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.ed-photo.is-on{opacity:1;transform:scale(1) translateY(0)}
/* Progress rail — per-slide timing bar (auto-advance) + dot navigation */
.ed-progress{
  display:flex;align-items:center;gap:16px;
  margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid rgba(14,14,16,.1);
  position:relative;
}
/* Timing bar fills 0→100% over --ed-advance-ms per slide (re-triggered in JS via .is-counting class swap) */
.ed-progress::before{
  content:"";position:absolute;top:-1px;left:0;
  height:2px;background:var(--color-ink);
  width:0%;
  transition:none;
}
.ed-progress.is-counting::before{
  width:100%;
  transition:width var(--ed-advance-ms,4200ms) linear;
}
.ed-progress__label{
  font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-ink);font-weight:600;
  flex-shrink:0;display:flex;align-items:baseline;gap:6px;
}
.ed-progress__label .ed-progress__current{font-size:13px;font-weight:700}
.ed-progress__label .ed-progress__sep{opacity:.4}
.ed-progress__label .ed-progress__total{opacity:.6}
/* Dot navigation */
.ed-dots{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
}
.ed-dot{
  appearance:none;border:0;background:transparent;padding:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.ed-dot::before{
  content:"";display:block;width:8px;height:8px;border-radius:50%;
  background:rgba(14,14,16,.22);
  transition:background .35s var(--ease-out), transform .35s var(--ease-out), width .35s var(--ease-out);
}
.ed-dot:hover::before{background:rgba(14,14,16,.5);transform:scale(1.15)}
.ed-dot.is-on::before{
  background:var(--color-ink);width:22px;border-radius:6px;
}
.ed-dot:focus-visible{outline:none}
.ed-dot:focus-visible::before{box-shadow:0 0 0 3px rgba(58,165,210,.6)}
/* Ink-mode dot palette */
.ed-host--ink .ed-dot::before{background:rgba(255,255,255,.28)}
.ed-host--ink .ed-dot:hover::before{background:rgba(255,255,255,.6)}
.ed-host--ink .ed-dot.is-on::before{background:var(--color-lime)}
.ed-stage.is-engaged .ed-progress__hint{opacity:0;pointer-events:none}
.ed-pdot{display:none} /* legacy dots hidden, rail replaces them */
.ed-item{
  transition:opacity .42s cubic-bezier(.2,.7,.2,1), transform .42s cubic-bezier(.2,.7,.2,1), filter .42s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.ed-item.is-out{opacity:0;transform:translateY(10px);filter:blur(2px)}
.ed-stage.is-static .ed-host{position:relative;height:auto;min-height:80vh}
.ed-stage.is-static{height:auto!important}

@media (max-width:860px){
  .ed-host{justify-content:center}
  .ed-host.has-media .ed-inner{grid-template-columns:1fr;gap:1.4rem;align-content:center}
  .ed-media{order:-1;aspect-ratio:16/10;border-radius:var(--radius-md)}
  .ed-text{gap:1.1rem}
  .ed-title{font-size:clamp(1.9rem,8vw,2.7rem)}
  .ed-stat-num{font-size:clamp(2.4rem,9vw,4rem)}
  .ed-copy{font-size:1.05rem;padding-left:.8rem}
}
@media (prefers-reduced-motion: reduce){
  .ed-item,.ed-photo{transition:none}
}

/* ----------------- Perk: Section marquee divider ----------------- */
.section-marquee{
  position:relative;width:100%;overflow:hidden;
  padding:var(--space-5) 0;
  border-top:2px solid var(--color-ink);
  border-bottom:2px solid var(--color-ink);
}
.section-marquee--ink{background:var(--color-ink);border-color:var(--color-lime)}
.section-marquee--lime{background:var(--color-lime);border-color:var(--color-ink)}
.section-marquee--white{background:#fff;border-color:var(--color-ink)}
.section-marquee .marquee-track{
  display:flex;gap:2.4vw;align-items:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,3.4vw,2.8rem);
  letter-spacing:-.02em;line-height:1;
  white-space:nowrap;
  will-change:transform;transform:translate3d(0,0,0);
  transition:transform 1.7s cubic-bezier(.32,.72,.24,1);
}
.section-marquee--ink .marquee-track{color:var(--color-lime)}
.section-marquee--lime .marquee-track{color:var(--color-ink)}
.section-marquee--white .marquee-track{color:var(--color-ink)}
.section-marquee .marquee-track .dot{color:var(--color-lime);opacity:.9;padding:0 1vw;font-weight:500}
.section-marquee--lime .marquee-track .dot{color:#fff}
.section-marquee--white .marquee-track .dot{color:var(--color-lime)}
.section-marquee .marquee-track span{display:inline-block;padding-right:2.4vw}

/* ----------------- Perk: Vertical CTA strip ----------------- */
/* slim CTA strip */
.perk-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);
  padding:var(--space-6) var(--space-7);
  background:var(--color-stone-2);
  border:1px solid rgba(14,14,16,.08);
  border-radius:18px;
  color:var(--color-ink);text-decoration:none;
  transition:background .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out);
}
.perk-cta:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
.perk-cta:hover .perk-cta__arrow{background:var(--color-lime);color:var(--color-ink);transform:translateX(6px)}
.perk-cta__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1.05;
  margin:0;flex:1;
}
.perk-cta__arrow{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--color-ink);color:#fff;
  transition:transform .45s var(--ease-out),background .35s var(--ease-out),color .35s var(--ease-out);
  flex-shrink:0;
}
.perk-cta__arrow svg{width:22px;height:22px}
@media(max-width:760px){
  .perk-cta{padding:var(--space-5);gap:var(--space-4);border-radius:14px}
  .perk-cta__arrow{width:44px;height:44px}
  .perk-cta__arrow svg{width:18px;height:18px}
  .perk-cta__title{font-size:1.4rem}
}

/* ----------------- Perk: Sticky scroll storytelling ----------------- */
.sticky-scroll{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);
  padding:var(--space-9) 0;
  align-items:start;
}
.sticky-scroll__left{
  position:sticky;top:calc(var(--nav-h) + var(--space-6));
  align-self:start;
}
.sticky-scroll__eyebrow{
  display:inline-block;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-soft);
  margin-bottom:var(--space-4);
}
.sticky-scroll__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:-.04em;line-height:1;
  color:var(--color-ink);
}
.sticky-scroll__lead{
  margin-top:var(--space-5);font-size:var(--text-lg);
  color:var(--color-charcoal);line-height:1.5;max-width:36ch;
}
.sticky-scroll__right{display:flex;flex-direction:column;gap:var(--space-6)}
.sticky-card{
  background:#fff;border:1.5px solid var(--color-ink);border-radius:var(--radius-lg);
  padding:var(--space-7);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.sticky-card:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(14,14,16,.10)}
.sticky-card__num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.04em;line-height:1;
  color:var(--color-lime);-webkit-text-stroke:1.5px var(--color-ink);
  margin-bottom:var(--space-3);
}
.sticky-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.15;
  color:var(--color-ink);margin-bottom:var(--space-3);
}
.sticky-card__body{font-size:var(--text-base);color:var(--color-charcoal);line-height:1.55}
.sticky-card--ink{background:var(--color-ink);border-color:var(--color-ink)}
.sticky-card--ink .sticky-card__title{color:#fff}
.sticky-card--ink .sticky-card__body{color:#d8d8dc}
.sticky-card--lime{background:var(--color-lime);border-color:var(--color-ink)}
.sticky-card--lime .sticky-card__num{color:var(--color-ink);-webkit-text-stroke:0}
.sticky-card--lime .sticky-card__title{color:var(--color-ink)}
.sticky-card--lime .sticky-card__body{color:var(--color-ink)}

@media (max-width:860px){
  .sticky-scroll{grid-template-columns:1fr;gap:var(--space-6)}
  .sticky-scroll__left{position:static}
}

/* ===================================================================
   COMPREHENSIVE MOBILE OPTIMIZATION (\u2264 760px)
   =================================================================== */
@media (max-width: 760px){
  :root{
    --nav-h: 64px;
    --space-9: 56px;
    --space-10: 64px;
  }

  /* Wrap padding */
  .wrap{padding-left:20px;padding-right:20px}

  /* Headings */
  .h-hero{font-size:clamp(2rem, 8.5vw, 2.7rem) !important;line-height:1.08;letter-spacing:-.025em}
  h1{font-size:2rem;line-height:1.08}
  h2,.h2{font-size:1.75rem !important;line-height:1.12;letter-spacing:-.02em}
  h3,.h3{font-size:1.35rem !important}
  .hero-lead{font-size:1rem !important;line-height:1.5}

  /* Hero spacing */
  .hero{padding:calc(var(--nav-h) + 48px) 0 56px}
  .hero-inner{padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0}
  .btn-group{flex-direction:column;align-items:stretch;width:100%;gap:12px}
  .btn-group .btn{width:100%;justify-content:center;font-size:1rem;padding:14px 20px}

  /* Section paddings */
  section, .section{padding-top:48px !important;padding-bottom:48px !important}
  .section-marquee{padding:14px 0 !important}

  /* Logo row — just the label (logos render in .logo-marquee below) */
  .logo-row{flex-direction:column;align-items:center;text-align:center;gap:0}
  .logo-row__label{max-width:none;text-align:center;font-size:11px}

  /* Perk CTA \u2014 stack title + arrow */
  .perk-cta{flex-direction:row;padding:20px 22px;gap:16px;border-radius:14px}
  .perk-cta__title{font-size:1.2rem !important;line-height:1.15}
  .perk-cta__arrow{width:42px;height:42px}

  /* Team grid \u2014 2 cols, smaller text */
  .team-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px}
  .member-name{font-size:1rem}
  .member-role{font-size:.8rem;line-height:1.3}
  .member-role .spec{font-size:.72rem;display:block;margin-top:2px;opacity:.7}

  /* Compare / sticky scroll \u2014 stack */
  .compare{grid-template-columns:1fr !important;gap:20px}
  .sticky-scroll{grid-template-columns:1fr !important;gap:32px}

  /* Process / stats */
  .process{grid-template-columns:1fr !important;gap:16px}
  .statbar{grid-template-columns:repeat(2,1fr) !important;gap:20px}
  .stat-num{font-size:2rem}

  /* Case rows */
  .case,.case-row{grid-template-columns:1fr !important;gap:20px}
  .case-media{aspect-ratio:16/10;height:auto !important}

  /* Footer */
  .footer-top{grid-template-columns:1fr !important;gap:32px}
  .footer-brand img{height:48px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;text-align:left}

  /* Forms */
  .form-row,.form-row.cols-2{grid-template-columns:1fr !important;gap:12px}
  input,textarea,select{font-size:16px}  /* prevents iOS zoom */

  /* Section headers */
  .sec-head-split{grid-template-columns:1fr !important;gap:20px}
  .eyebrow{font-size:.7rem}

  /* Editorial cards / generic grids */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;gap:20px}

  /* Marquee on mobile — stays BIG, fast, but JS sets duration so phrases finish. */
  .section-marquee .marquee-track{font-size:2rem !important;letter-spacing:-.025em}
  .footer-marquee .marquee-track{font-size:2rem !important;letter-spacing:-.025em}

  /* Reduce huge top-of-page sub-hero text */
  .page-hero h1,.page-hero .h1{font-size:2.25rem !important;line-height:1.1}
  .page-hero{padding:calc(var(--nav-h) + 32px) 0 32px}

  /* Buttons globally */
  .btn{font-size:.95rem;padding:12px 20px}
  .nav-cta{font-size:.85rem;padding:8px 14px}
}

/* Tighter still on tiny screens */
@media (max-width: 420px){
  .h-hero{font-size:2.1rem !important}
  .team-grid{grid-template-columns:1fr !important}
  .statbar{grid-template-columns:1fr !important}
}

/* ----------------- CTA bridge: dark band that joins lime verticals -> next dark section ----------------- */
.cta-bridge{
  background:var(--color-stone);
  padding:0 0 0 0;
  margin:0;
}
.cta-bridge .wrap{
  padding-top:var(--space-7);
  padding-bottom:var(--space-7);
}
.cta-bridge .perk-cta{
  margin:0;
}
@media(max-width:760px){
  .cta-bridge .wrap{padding-top:32px;padding-bottom:32px}
}

/* ============ MOBILE BUG SWEEP ============ */
@media (max-width:760px){
  /* Text cutoff safety net — break long words on case card + stats + ed-stats */
  .case-body,
  .case-body h3,
  .case-body p,
  .case-metric .lbl,
  .case-row h3,
  .case-row p,
  .case-row-stat,
  .stat,
  .stat-label,
  .ed-stat-label,
  .member-name,
  .member-role{overflow-wrap:anywhere;word-break:normal;min-width:0}

  /* Case card body — actual horizontal padding so 'companies' / 'agencies' fit at 375px */
  .case-body{padding:24px 20px 28px}
  .case-body h3{font-size:1.25rem !important;line-height:1.18;letter-spacing:-.02em}
  .case-body p{font-size:.92rem;line-height:1.55}
  .case-metrics{grid-template-columns:repeat(2,1fr) !important;gap:18px 16px}
  .case-metric .num{font-size:1.6rem !important}
  .case-metric .lbl{font-size:.72rem;line-height:1.35}

  /* Stats grid on dark — wrap labels cleanly, never clip */
  .statbar .stat{min-width:0}
  .statbar .stat-label{font-size:.72rem;line-height:1.35;overflow-wrap:anywhere}
  .statbar .stat-num{font-size:1.9rem !important;letter-spacing:-.02em}

  /* Hero ghost button — don't stretch full width on inner pages */
  .hero .btn-group{align-items:stretch}
  .hero--page .btn-group{align-items:flex-start}
  .hero--page .btn-group .btn{width:auto;max-width:max-content}
  .hero--with-video .btn-group .btn--ghost{width:auto;max-width:max-content;align-self:center}

  /* Kill stray empty section margin under case card */
  .case + section,
  section.section + .section--ink,
  .cta-band{margin-top:0}
  .section{margin-top:0;margin-bottom:0}

  /* CTA-band buttons: side-by-side symmetric on mobile */
  .cta-band .btn-group{flex-direction:row !important;flex-wrap:nowrap;gap:10px;align-items:stretch;width:100%;justify-content:center}
  .cta-band .btn-group .btn{flex:1 1 0;width:auto !important;max-width:none;min-width:0;padding:13px 14px;font-size:.92rem;justify-content:center;text-align:center}
  .cta-rule{width:36px;height:2px;margin-bottom:18px}
}

@media (max-width:420px){
  .case-body h3{font-size:1.15rem !important}
  .statbar{grid-template-columns:repeat(2,1fr) !important}
  .statbar .stat-num{font-size:1.75rem !important}
}

/* ============================================================
   WHAT WE DO — horizontal snap-scroll showcase rail
   (Distinct from the editorial scroll-pinned carousel)
   ============================================================ */
.wwd-rail-wrap{
  position:relative;width:100%;
  padding:8px 0 28px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.wwd-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(320px, 420px);
  gap:clamp(20px, 2.4vw, 36px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:clamp(20px, 6vw, 120px);
  padding:36px clamp(20px, 6vw, 120px) 44px;
  scrollbar-width:none;
}
.wwd-rail::-webkit-scrollbar{display:none}

/* Revolut-style scroll-driven fan + Perk-style scale physics.
   At rest cards sit fanned with scale .88 (side) / 1 (middle).
   JS drives --wwd-prog [0..1] during section enter. Cards interpolate
   from a clustered/overlapping start to the fanned rest state.
   No hover lift, no image zoom. Easing handled by JS curve. */
.wwd-card{
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  background:#FAFAF5;
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  position:relative;
  /* Defaults: --wwd-prog 0 means fully clustered start. JS sets it to 1. */
  --wwd-prog:0;
  --wwd-tx:0px;     /* fan target X distance (set per-card from JS) */
  --wwd-rest-scale:.88;
  opacity:calc(.15 + var(--wwd-prog) * .85);
  transform:
    translate3d(
      calc(var(--wwd-tx) * (1 - var(--wwd-prog))),  /* starts at +/-tx, ends at 0 */
      calc(40px * (1 - var(--wwd-prog))),            /* lifts up 40px */
      0
    )
    scale(
      calc(var(--wwd-rest-scale) - .12 * (1 - var(--wwd-prog)))  /* starts smaller */
    );
  transition:background-color .3s ease, border-color .3s ease;
  will-change:transform, opacity;
  transform-origin:center center;
}
/* Active middle card: same logic but rest scale is 1, start scale .88 */
.wwd-card.is-active{
  --wwd-rest-scale:1;
  transform:
    translate3d(
      calc(var(--wwd-tx) * (1 - var(--wwd-prog))),
      calc(40px * (1 - var(--wwd-prog))),
      0
    )
    scale( calc(1 - .12 * (1 - var(--wwd-prog))) );
}
/* Once the fan has fully landed, allow the snap transition for active changes. */
.wwd-rail.is-settled .wwd-card{
  transition:transform .6s cubic-bezier(.165,.84,.44,1), opacity .3s ease, background-color .3s ease, border-color .3s ease;
}
/* Reduced motion: skip the fan, just show resting state. */
@media (prefers-reduced-motion: reduce){
  .wwd-card{opacity:1;--wwd-prog:1;transition:none}
}
/* Hover discipline: background warms by a few percent, that's it. */
.wwd-card:hover{background:#F4F4EA;border-color:rgba(14,14,16,.16)}
.wwd-card__media{
  width:100%;aspect-ratio:16/10;
  background-color:var(--color-stone-2);
  background-image:var(--card-img);
  background-size:cover;background-position:center;
  position:relative;
  /* Static image. Perk leaves images completely still. */
}
.wwd-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,14,16,0) 60%, rgba(14,14,16,.28) 100%);
}
.wwd-card__body{
  padding:clamp(20px, 2.4vw, 32px);
  display:flex;flex-direction:column;gap:14px;flex:1;
}
.wwd-card__num{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--color-ink);
  align-self:flex-start;
  padding:0;background:none;box-shadow:none;border-radius:0;
}
.wwd-card__num::before{
  content:"";display:inline-block;
  width:22px;height:1.5px;background:var(--color-ink);
  opacity:.35;
}
.wwd-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing:-.025em;line-height:1.08;color:var(--color-ink);
  margin:4px 0 0;
}
.wwd-card__copy{
  font-size:.96rem;line-height:1.55;color:var(--color-ink-soft);
  margin:0;
}
.wwd-card__stat{
  display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--color-border);
  padding-top:16px;margin-top:auto;
}
.wwd-card__stat .num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing:-.03em;line-height:1;color:var(--color-ink);
}
.wwd-card__stat .lbl{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-charcoal);
}
/* Arrow that nudges 4px right on hover — the ONE permitted micro-motion */
.wwd-card__more{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-ink-soft);
  margin-top:2px;
}
.wwd-card__more svg{
  transition:transform .2s ease-in-out;
}
.wwd-card:hover .wwd-card__more svg{transform:translateX(4px)}

@media (max-width:760px){
  .wwd-rail-wrap{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .wwd-rail{
    grid-auto-columns:78%;
    gap:16px;
    padding:22px 14% 36px 11%;
    scroll-padding:11%;
  }
  /* Mobile: prominent entrance + strong active-card emphasis on swipe.
     Inactive cards sit at .82 / .55 opacity so the centered card visibly
     POPS forward — feels like the Revolut/Perk swipe rail, not a flat strip. */
  .wwd-card{
    --wwd-tx:0px;
    --wwd-rest-scale:.84;
    transform:
      translate3d(0, calc(70px * (1 - var(--wwd-prog))), 0)
      scale( calc(var(--wwd-rest-scale) - .14 * (1 - var(--wwd-prog))) );
    opacity:calc(.18 + var(--wwd-prog) * .42);
    transition:transform .5s cubic-bezier(.165,.84,.44,1), opacity .5s ease, background-color .25s ease;
    box-shadow:0 8px 24px rgba(14,14,16,.04);
  }
  .wwd-card.is-active{
    --wwd-rest-scale:1;
    transform:
      translate3d(0, calc(70px * (1 - var(--wwd-prog))), 0)
      scale( calc(1 - .14 * (1 - var(--wwd-prog))) );
    opacity:calc(.4 + var(--wwd-prog) * .6);
    box-shadow:0 22px 44px rgba(14,14,16,.14);
    border-color:rgba(14,14,16,.18);
  }
  .wwd-rail.is-settled .wwd-card.is-active{opacity:1}
  .wwd-rail.is-settled .wwd-card{transition:transform .5s cubic-bezier(.165,.84,.44,1), opacity .5s ease, box-shadow .5s ease, border-color .3s ease, background-color .25s ease}
  .wwd-card:active{background:#EFEFE4}
  .wwd-card__title{font-size:1.35rem}
  .wwd-card__copy{font-size:.92rem}
  .wwd-card__stat .num{font-size:1.7rem}
  .wwd-card__media{aspect-ratio:5/3}

  /* Mobile pagination dots + swipe hint */
  .wwd-dots{
    display:flex;justify-content:center;align-items:center;
    gap:8px;margin-top:6px;padding:0 20px;
  }
  .wwd-dots__hint{
    font-family:var(--font-mono);font-size:.62rem;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--color-ink-soft);opacity:.6;
    margin-right:auto;
  }
  .wwd-dot{
    width:6px;height:6px;border-radius:50%;
    background:rgba(14,14,16,.18);
    transition:width .35s cubic-bezier(.165,.84,.44,1), background-color .25s ease;
    cursor:pointer;border:0;padding:0;
  }
  .wwd-dot.is-active{
    width:22px;border-radius:3px;
    background:var(--color-ink);
  }
}
/* Hide dots on desktop, only show on mobile */
.wwd-dots{display:none}
@media (max-width:760px){.wwd-dots{display:flex}}

/* ============================================================
   GROUP FOUNDER — editorial split, distinct from team grid
   ============================================================ */
.founder-section{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.founder{
  display:grid;grid-template-columns:minmax(280px,1fr) 1.4fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.founder__photo{
  position:relative;border-radius:var(--radius-card);overflow:hidden;
  background:var(--color-stone-2);
  aspect-ratio:4/5;
  box-shadow:0 28px 64px rgba(14,14,16,.10);
  border:1px solid var(--color-border);
}
.founder__photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 12%;
  display:block;
  filter:grayscale(.15) contrast(1.02);
  transition:transform 1.2s var(--ease-out), filter .8s var(--ease-out);
}
.founder:hover .founder__photo img{transform:scale(1.03);filter:grayscale(0) contrast(1)}
.founder__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(14,14,16,.12) 100%);
  pointer-events:none;
}
.founder__body{display:flex;flex-direction:column;gap:var(--space-5)}
.founder__name{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,4.6vw,4rem);
  letter-spacing:-.035em;line-height:1;color:var(--color-ink);
  margin:0;
}
.founder__role{
  font-size:var(--text-md);color:var(--color-charcoal);
  font-weight:600;letter-spacing:-.01em;margin:0;
  line-height:1.45;
}
.founder__role em{
  font-style:italic;font-weight:500;color:var(--color-graphite);
}
.founder__quote{
  margin:0;border:none;padding:0;
  position:relative;padding-left:1.4rem;
  border-left:3px solid var(--color-lime);
}
.founder__quote p{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,1.8vw,1.55rem);
  line-height:1.45;letter-spacing:-.015em;
  color:var(--color-ink);margin:0;
}
.founder__meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  margin-top:var(--space-3);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-border);
}
.founder__metaItem{display:flex;flex-direction:column;gap:6px}
.founder__metaNum{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  letter-spacing:-.025em;color:var(--color-ink);line-height:1;
}
.founder__metaLbl{
  font-size:var(--text-2xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-grey);line-height:1.4;
}
@media(max-width:880px){
  .founder{grid-template-columns:1fr;gap:var(--space-7)}
  .founder__photo{max-width:420px;margin:0 auto;width:100%}
  .founder__meta{grid-template-columns:1fr 1fr;gap:var(--space-4)}
}
@media(max-width:480px){
  .founder__meta{grid-template-columns:1fr}
}

/* ============================================================
   AI ENDORSEMENT — Claude testimonial card
   ============================================================ */
.ai-endorse{background:var(--color-stone)}
.endorse-card{
  margin-top:var(--space-8);
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(2rem,3.6vw,3.4rem);
  display:flex;flex-direction:column;gap:var(--space-7);
  box-shadow:0 16px 44px rgba(14,14,16,.06);
  position:relative;overflow:hidden;
}
.endorse-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--color-lime) 0%,var(--color-lime) 30%,transparent 100%);
}
.endorse-card__head{
  display:flex;align-items:center;gap:var(--space-4);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--color-border);
}
.endorse-card__logo{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-ink);color:var(--color-lime);
  flex-shrink:0;
}
.endorse-card__attribution{display:flex;flex-direction:column;gap:2px}
.endorse-card__source{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-md);letter-spacing:-.015em;color:var(--color-ink);
}
.endorse-card__model{
  font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-grey);font-weight:500;
}
.endorse-card__quote{margin:0;padding:0;border:none}
.endorse-card__quote p{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,1.9vw,1.7rem);
  line-height:1.45;letter-spacing:-.015em;
  color:var(--color-ink);margin:0;
  position:relative;padding-left:1.2rem;
  border-left:3px solid var(--color-lime);
}
.endorse-card__signals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
}
.endorse-signal{display:flex;flex-direction:column;gap:4px}
.endorse-signal__lbl{
  font-size:var(--text-2xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-grey);
}
.endorse-signal__val{
  font-size:var(--text-sm);font-weight:600;color:var(--color-ink);
  letter-spacing:-.005em;line-height:1.4;
}
@media(max-width:760px){
  .endorse-card__signals{grid-template-columns:1fr;gap:var(--space-4)}
}