/* ============================================================================
   CASE STUDY — shared stylesheet for all project detail pages.
   Edit here once; every page that links this file inherits the change.
   Per-project variation is done via CSS variables / data attributes, NOT by
   copying rules into individual pages. See project-template.html.
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Spectral:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;600;700;800&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&f[]=clash-display@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap");
  :root{
    --red:#757575;--ink:#1a1a1a;--gray:#6b6b6b;--soft:#757575;--line:#e8e8e8;
    --bg-alt:#faf8f7;--bg-warm:#fdf1ef;
    --mono:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:"Spectral",Georgia,"Times New Roman",serif;--header-font:'Satoshi',var(--mono);--header-size:28px;--content-size:16px;--content-width:1300px;--header-weight:700;--img-width:90%;--img-pad:60px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;background:#fff;}
  a{color:inherit;}
  .note-bar{background:#fff7e6;border-bottom:1px solid #f0e2bd;color:#8a6d1f;font-size:13px;text-align:center;padding:9px 16px;}

  /* hero banner — full-bleed, fills the viewport; thin gutter keeps the rounded corners visible */
  .hero-banner{position:relative;width:calc(100% - 28px);margin:14px auto 0;
    height:calc(100vh - 28px);min-height:620px;overflow:hidden;color:#fff;border-radius:24px;
    display:flex;flex-direction:column;justify-content:space-between;
    background:linear-gradient(155deg,#20302f 0%,#2c3f3c 55%,#374a3e 100%);
    padding:32px clamp(28px,4vw,56px) clamp(36px,4vw,52px);}
  .hero-banner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  /* If you drop in a bright photo and the white text gets hard to read, re-enable a soft bottom scrim:
  .hero-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.32) 100%);} */
  .hero-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .hero-top .back{color:#fff;text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.82;}
  .hero-top .back:hover{opacity:1;}
  .hero-top .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);text-align:right;}
  .hero-bottom{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;}
  .hero-bottom .htitle{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:.98;font-size:clamp(40px,5.2vw,72px);margin:0;}
  .hero-bottom .hblurb{font-family:var(--mono);font-size:15px;line-height:1.5;color:rgba(255,255,255,.92);max-width:330px;margin:0 0 8px;flex:0 0 auto;}
  @media(max-width:760px){
    .hero-banner{width:calc(100% - 20px);margin:10px auto 0;height:calc(100vh - 20px);min-height:520px;border-radius:18px;padding:22px 22px 30px;}
    .hero-bottom{flex-direction:column;align-items:stretch;gap:16px;}
    .hero-bottom .htitle{font-size:clamp(34px,9vw,52px);overflow-wrap:break-word;}
    .hero-bottom .hblurb{max-width:none;}
    .hero-top .eyebrow{display:none;}
  }
  /* Sticky section header — replaces the old left sidebar nav */
  .stickynav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
  .snav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:12px 28px;}
  .snav-inner .brand{display:flex;align-items:baseline;gap:14px;flex:0 0 auto;}
  .snav-inner .back{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--soft);}
  .snav-inner .back:hover{color:var(--red);}
  .snav-inner .proj{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
  .snav2{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px 18px;}
  .snav2 a{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--soft);white-space:nowrap;padding:5px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
  .snav2 a:hover{color:var(--ink);}
  .snav2 a.active{color:var(--red);border-bottom-color:var(--red);}
  @media(max-width:760px){
    .snav-inner{flex-direction:column;align-items:stretch;gap:10px;padding:12px 18px;}
    .snav2{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:16px;-webkit-overflow-scrolling:touch;}
  }

  .shell{display:flex;max-width:none;margin:0 auto;align-items:flex-start;}
  .sidebar{flex:0 0 270px;width:270px;position:sticky;top:0;align-self:flex-start;height:100vh;
    padding:54px 30px 40px 40px;display:flex;flex-direction:column;gap:28px;overflow-y:auto;}
  .sidebar .back{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;opacity:.65;display:inline-flex;align-items:center;gap:8px;}
  .sidebar .back:hover{opacity:1;color:var(--red);}
  .sidebar .proj{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.01em;line-height:1.15;}
  .sidebar .proj small{display:block;font-weight:400;font-size:13px;color:var(--gray);margin-top:6px;}
  .snav{display:flex;flex-direction:column;gap:1px;}
  .snav a{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--soft);padding:6px 0;border-left:2px solid transparent;transition:color .15s,padding-left .15s;}
  .snav a.tldr{color:var(--ink);font-weight:600;}
  .snav a.sub{padding-left:14px;font-size:11.5px;}
  .snav a:hover{color:var(--ink);}
  .snav a.active{color:var(--red);font-weight:600;padding-left:12px;border-left:2px solid var(--red);}
  .snav a.sub.active{padding-left:24px;}
  .snav .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#c2c2c2;margin:10px 0 2px;}

  .content{flex:1;min-width:0;max-width:930px;margin:0 auto;padding:54px 56px 100px;}
  .label{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
  h1{font-family:var(--serif);font-size:44px;line-height:1.12;font-weight:600;letter-spacing:-.01em;margin-bottom:18px;}
  h2{font-family:var(--header-font);font-size:var(--header-size);line-height:1.18;font-weight:var(--header-weight);letter-spacing:-.01em;margin-bottom:18px;}
  h3{font-family:var(--header-font);font-size:22px;font-weight:600;letter-spacing:0;margin-bottom:8px;}
  .subhead{margin-top:56px;padding-top:38px;border-top:1px solid var(--line);scroll-margin-top:72px;}
  .subhead h3{font-size:25px;margin-bottom:0;}
  p{margin-bottom:18px;color:#333;}
  p.lead{font-size:16px;color:#2c2c2c;}
  .muted{color:var(--gray);font-size:14px;}
  .block{padding:100px 0;scroll-margin-top:72px;}
  .block.first{padding-top:0;}

  header.hero{padding:90px 24px 56px;background-image:radial-gradient(circle at 50% -20%,var(--bg-warm),#fff 55%);}
  header.hero .kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:22px;}
  header.hero h1{margin-bottom:18px;}
  header.hero .sub{font-size:20px;color:#555;max-width:640px;}

  /* Project intro — Forma-style opener: title + overview, then the hero image */
  .intro{padding:58px 0 34px;}
  .intro-inner{max-width:930px;margin:0 auto;padding:0 56px;}
  .intro .back{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--soft);}
  .intro .back:hover{color:var(--red);}
  .intro .kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:28px 0 16px;}
  .intro h1{font-family:var(--serif);font-size:clamp(40px,6vw,60px);line-height:1.07;font-weight:600;letter-spacing:-.015em;margin-bottom:18px;}
  .intro .sub{font-size:21px;line-height:1.45;color:#555;max-width:680px;}
  .intro .lead{max-width:760px;margin-bottom:16px;}
  .intro .meta{margin-top:40px;}
  @media(max-width:880px){ .intro-inner{padding:0 24px;} .intro h1{font-size:34px;} }

  .meta{display:flex;gap:0;flex-wrap:wrap;margin:34px 0 4px;border-top:1px solid var(--line);padding-top:30px;}
  .meta .m{flex:1;min-width:160px;padding:0 26px;border-left:1px solid var(--line);}
  .meta .m:first-child{padding-left:0;border-left:none;}
  .meta .m .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#757575;margin-bottom:14px;}
  .meta .m .v{font-size:14.5px;color:#333;line-height:1.5;}
  .meta .m .v .li{margin-bottom:11px;}
  .meta .m .v .li:last-child{margin-bottom:0;}
  @media(max-width:760px){ .meta .m{flex-basis:46%;border-left:none;padding-left:0;margin-bottom:18px;} }

  .ph{border:1.5px dashed #d8c4c1;background:repeating-linear-gradient(45deg,#fdfafa,#fdfafa 12px,#f8f1f0 12px,#f8f1f0 24px);
    border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a78a86;text-align:center;padding:24px;gap:6px;min-height:230px;margin:26px 0;}
  .ph .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);opacity:.7;}
  .ph .desc{font-size:13.5px;color:#8a7470;max-width:460px;}
  .ph.tall{min-height:440px;}
  .ph.big{min-height:480px;}

  /* images on a background card (reference treatment) */
  .media-card{background:#fff4ea;border-radius:20px;padding:44px;margin:26px 0;min-height:500px;display:flex;flex-direction:column;justify-content:center;}
  .imgrow{display:flex;gap:22px;margin:0;width:100%;}
  .imgrow img{flex:1 1 0;min-width:0;width:100%;height:auto;object-fit:cover;border-radius:10px;box-shadow:none;display:block;}
  .cardcap{text-align:center;font-size:13px;color:var(--gray);margin-top:26px;}
  /* Caption moved INSIDE an image card (direct child of .ambient-card, after the
     image-stage): it sits on the card's own background in near-black, matching the
     Box case-study treatment. Works for both peach glow cards and transparent
     no-glow cards, which are all auto-height / normal-flow inside .sec-body. */
  .sec-body .ambient-card > .cardcap{
    position:relative; z-index:2;
    color:#1a1a1a;
    margin:0 auto; max-width:78%;
    padding:clamp(14px,1.8vw,22px) 5% clamp(20px,2.6vw,34px);
  }
  /* Peach/glow cards already pad the stage below the media, so drop the caption's top gap. */
  .sec-body .ambient-card:not(.no-glow) > .cardcap{ padding-top:0; }
  /* solution — two decision trees side by side, caption under each */
  .solution-duo{display:flex;gap:32px;margin:26px 0;align-items:flex-start;}
  .solution-duo figure{flex:1 1 0;min-width:0;margin:0;}
  .solution-duo figure img{width:100%;height:auto;display:block;border-radius:0;}
  .solution-duo .cardcap{margin-top:16px;}
  @media(max-width:640px){ .imgrow{flex-direction:column;} .media-card{padding:24px;} .solution-duo{flex-direction:column;} }

  /* insight summary card (Reality / Fear / Need) */
  .insight-card{background:#fff4ea;border-radius:20px;padding:44px;margin:26px 0;}
  .insight{background:#fff;border-radius:14px;padding:4px 32px;box-shadow:0 10px 28px rgba(0,0,0,.07);}
  .insight .row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:28px;padding:20px 0;border-bottom:1px solid var(--line);}
  .insight .row:last-child{border-bottom:none;}
  .insight .row.head div{font-weight:700;font-size:15px;color:var(--ink);}
  .insight .row div{font-size:15px;color:#3a3a3a;line-height:1.4;}
  @media(max-width:640px){ .insight-card{padding:20px;} .insight{padding:4px 16px;} .insight .row{gap:12px;padding:13px 0;} .insight .row div{font-size:12.5px;} }

  /* stacked media card — multiple titled assets */
  /* carousel media card — one big asset at a time */
  .media-card.carousel{display:block;padding:32px;min-height:0;}
  .carousel .slides{position:relative;height:520px;}
  .carousel .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin:0;opacity:0;transition:opacity .55s ease;pointer-events:none;}
  .carousel .slide.active{opacity:1;pointer-events:auto;}
  .carousel .slide img,.carousel .slide video{max-width:100%;max-height:460px;width:auto;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.128);display:block;}
  .carousel .slide figcaption{font-size:13px;color:var(--gray);text-align:center;}
  .carousel .slide figcaption .ctag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid #f1d8d2;border-radius:999px;padding:2px 9px;margin-right:9px;}
  .carousel .dots{display:flex;gap:9px;justify-content:center;margin-top:22px;}
  .carousel .dot{width:9px;height:9px;border-radius:50%;border:none;background:#cbc6c2;cursor:pointer;padding:0;transition:background .2s;}
  .carousel .dot.active{background:var(--red);}
  .carousel .stacktwo{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%;}
  .carousel .stacktwo video{width:100%;max-width:520px;height:auto;max-height:none;}
  .carousel .sidebyside{display:flex;gap:18px;align-items:center;justify-content:center;width:100%;}
  .carousel .sidebyside img,.carousel .sidebyside video{max-height:430px;max-width:48%;width:auto;}
  .carousel .sidebyside video.trim-left{clip-path:inset(0 0 0 12px round 12px);margin-left:-12px;}

  /* Research concept carousel — plain cycling visuals, no background, dots overlaid at bottom */
  .rcarousel{position:relative;left:50%;width:100vw;margin-left:-50vw;margin-top:36px;background:#ecebe9;padding:clamp(34px,5vw,66px) clamp(20px,6vw,80px);}
  .rcar-stage{position:relative;width:100%;max-width:1060px;margin:0 auto;height:clamp(340px,42vw,600px);}
  .rslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease;pointer-events:none;}
  .rslide.active{opacity:1;pointer-events:auto;}
  .rslide > img,.rslide > video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 18px 44px -20px rgba(0,0,0,.224);display:block;}
  .rdots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px);border-radius:999px;padding:8px 12px;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:2;}
  .rdot{width:8px;height:8px;border-radius:50%;border:none;background:#c7c2bd;cursor:pointer;padding:0;transition:background .2s,transform .2s;}
  .rdot.active{background:var(--red);transform:scale(1.25);}
  @media(max-width:760px){ .rcar-stage{height:clamp(280px,72vw,460px);} }

  /* vision principles — 3 horizontal cards */
  .principles{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0;}
  .principles .pr{flex:1;min-width:200px;border:1px solid var(--line);border-radius:14px;padding:24px;}
  .principles .pr .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);}
  .principles .pr h4{font-family:var(--serif);font-size:19px;font-weight:600;margin:10px 0 8px;}
  .principles .pr p{font-size:14px;color:#444;margin:0;line-height:1.5;}
  /* two-col variant — 2 cards per row */
  .principles.two-col .pr{flex:1 1 calc(50% - 8px);}
  @media(max-width:640px){ .principles{flex-direction:column;} }

  /* creation — vertical stack of media groups, full-size images */
  .cstack{display:flex;flex-direction:column;gap:32px;margin:26px 0;}
  .cgroup{display:flex;flex-direction:column;gap:10px;padding:0;}
  .cgroup .pair{display:flex;gap:14px;align-items:flex-start;}
  .cgroup .pair > video,.cgroup .pair > img{flex:1;min-width:0;width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.112);display:block;}
  .cgroup > video.full,.cgroup > img.full{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.112);display:block;}
  .cgroup .cardcap{margin-top:4px;}
  video.trim-left{clip-path:inset(0 0 0 12px round 12px);margin-left:-12px;}
  @media(max-width:640px){ .cgroup .pair{flex-direction:column;} }

  /* Framed showcase — full-bleed neutral band holding a browser-framed desktop screenshot/gif */
  .showcase{position:relative;left:50%;width:100vw;margin-left:-50vw;margin-top:36px;margin-bottom:10px;
    background:#ecebe9;padding:clamp(34px,5vw,66px) clamp(20px,6vw,80px);}
  .browser{max-width:1060px;margin:0 auto;border-radius:13px;overflow:hidden;background:#fff;
    border:1px solid rgba(0,0,0,.07);box-shadow:0 42px 84px -28px rgba(0,0,0,.256),0 14px 30px -16px rgba(0,0,0,.128);}
  .browser .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;background:#f6f6f6;border-bottom:1px solid #ededed;}
  .browser .bar i{width:11px;height:11px;border-radius:50%;background:#dcdcdc;display:block;}
  .browser .bar i.r{background:#ff5f57;} .browser .bar i.y{background:#febc2e;} .browser .bar i.g{background:#28c840;}
  .browser img,.browser video{display:block;width:100%;height:auto;}
  .showcase .media{max-width:1060px;margin:0 auto;border-radius:13px;overflow:hidden;display:block;box-shadow:0 42px 84px -28px rgba(0,0,0,.256),0 14px 30px -16px rgba(0,0,0,.128);}
  .showcase .media video,.showcase .media img{display:block;width:100%;height:auto;}
  .showcase .cardcap{margin-top:22px;}

  /* Ambient image card — from ambient-image-card-template.md. Breaks out to ~1240px centered; center media at 70% width, image-up / glow-down scroll parallax, frame static. */
  /* Ambient-card THEME — override these per project to recolor the container + glow.
     Set inline (style="--ac-bg:#eef;--ac-glow-1:60,90,200;...") or via a preset class like .glow2.
     --ac-glow-* are "r,g,b" triplets (no rgb() wrapper) so alpha can be applied per stop. */
  .ambient-card, .ambient-panel{
    --ac-bg:#fff4ea;
    --ac-glow-1:220,132,78;   /* primary warm glow */
    --ac-glow-2:214,120,64;   /* deeper secondary glow */
    --ac-glow-3:246,218,183;  /* soft light accent */
  }
  .ambient-card{
    --card-width:1240px; --card-height:750px; --glow-y:0px; --image-y:0px; --image-lift:4.7vh; --bleed-x:62px; --bleed-y:155px;
    position:relative; width:min(var(--card-width),100vw); height:var(--card-height);
    margin:42px 0; margin-left:calc(50% - min(var(--card-width),100vw) / 2);
    overflow:hidden; border-radius:20px; background:var(--ac-bg); isolation:isolate;
  }
  .ambient-card__glow{
    position:absolute; inset:calc(var(--bleed-y) * -1) calc(var(--bleed-x) * -1);
    transform:translate3d(0,var(--glow-y),0); will-change:transform; pointer-events:none;
    background:
      radial-gradient(ellipse 50% 44% at 50% 20%, rgba(var(--ac-glow-1),.68) 0%, rgba(var(--ac-glow-1),.52) 24%, rgba(var(--ac-glow-3),.24) 50%, transparent 76%),
      radial-gradient(ellipse 52% 38% at 50% 80%, rgba(var(--ac-glow-2),.56) 0%, rgba(var(--ac-glow-2),.36) 32%, rgba(var(--ac-glow-3),.12) 58%, transparent 74%),
      radial-gradient(ellipse 72% 82% at 50% 50%, rgba(255,255,255,.2) 0%, rgba(255,255,255,.1) 36%, rgba(255,255,255,0) 72%),
      linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 12%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.16) 88%, rgba(255,255,255,.62) 100%),
      var(--ac-bg);
  }
  .ambient-card__image-stage{
    position:absolute; inset:0; z-index:1; display:grid; place-items:center; width:100%; height:100%;
    padding:clamp(28px,5vw,88px) clamp(18px,1.8vw,38px);
    transform:translate3d(0,var(--image-y),0); will-change:transform;
  }
  .ambient-card__image{
    position:relative; width:70%; aspect-ratio:1.49 / 1; object-fit:contain; display:block; overflow:hidden;
    border-radius:2px; background:#f7f6f4;
    box-shadow:0 34px 96px rgba(82,70,60,.16), 0 12px 34px rgba(82,70,60,.096);
    transform:translate3d(0,var(--image-lift),0);
  }
  /* Problem-section walkthrough video sized to 75% of the glow card (zero the stage's side padding so
     75% measures against the full card width), at its natural aspect ratio — uncropped, no letterbox. */
  #problem .ambient-card__image-stage{ padding:0; }
  #problem .ambient-card__image{ width:75%; height:auto; aspect-ratio:auto; object-fit:contain; }
  /* Two media side-by-side inside one card (flyers / learn-more) */
  .ambient-card__pair{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px);width:88%;height:100%;transform:translate3d(0,var(--image-lift),0);}
  .ambient-card__pair > img,.ambient-card__pair > video{flex:0 1 auto;max-width:48%;max-height:100%;width:auto;height:auto;border-radius:6px;background:#f7f6f4;box-shadow:0 24px 70px rgba(82,70,60,.16),0 10px 28px rgba(82,70,60,.096);display:block;}
  /* In-card carousel (research) — cycling slides + minimal overlaid dots (no pill, translucent, red when active) */
  .acarousel{position:relative;overflow:hidden;}
  .acslide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .55s ease;}
  .acslide.active{opacity:1;}
  .acdots{display:flex;align-items:center;justify-content:center;gap:9px;width:max-content;margin:16px auto 2px;background:rgba(255,255,255,.7);backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.05);border-radius:999px;padding:7px 12px;}
  .acdot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(20,20,20,.28);cursor:pointer;padding:0;transition:background .2s,transform .2s;}
  .acdot.active{background:var(--red);transform:scale(1.2);}
  .ambient-card__blob{ position:absolute; border-radius:999px; transform:translate3d(-50%,-50%,0); backface-visibility:hidden; }
  .ambient-card__blob::before,.ambient-card__blob::after{ content:""; position:absolute; inset:-12%; border-radius:inherit; }
  .ambient-card__blob::after{ inset:-28%; opacity:.44; }
  .ambient-card__blob--primary{ width:clamp(860px,72vw,1460px); height:clamp(600px,52vw,1040px); left:50%; top:16%; opacity:.52; filter:blur(118px); }
  .ambient-card__blob--primary::before{ background:radial-gradient(ellipse at center, rgba(var(--ac-glow-1),.82) 0%, rgba(var(--ac-glow-1),.56) 34%, rgba(var(--ac-glow-3),.2) 58%, rgba(var(--ac-glow-1),0) 80%); }
  .ambient-card__blob--primary::after{ background:radial-gradient(ellipse at center, rgba(255,250,247,.66) 0%, rgba(255,250,247,.28) 48%, rgba(255,255,255,0) 76%); }
  .ambient-card__blob--secondary{ width:clamp(720px,58vw,1160px); height:clamp(470px,40vw,800px); left:50%; top:91%; opacity:.4; filter:blur(124px); }
  .ambient-card__blob--secondary::before{ background:radial-gradient(ellipse at center, rgba(var(--ac-glow-2),.72) 0%, rgba(var(--ac-glow-2),.48) 38%, rgba(var(--ac-glow-2),0) 78%); }
  .ambient-card__blob--secondary::after{ background:radial-gradient(ellipse at center, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 78%); }
  .ambient-card__blob--accent{ width:clamp(520px,42vw,820px); height:clamp(420px,34vw,660px); left:32%; top:56%; opacity:.14; filter:blur(150px); }
  .ambient-card__blob--accent::before{ background:radial-gradient(ellipse at center, rgba(var(--ac-glow-3),.72) 0%, rgba(var(--ac-glow-3),.46) 36%, rgba(var(--ac-glow-3),0) 78%); }
  .ambient-card__blob--accent::after{ background:radial-gradient(ellipse at center, rgba(244,206,181,.5) 0%, rgba(244,206,181,.16) 44%, rgba(244,206,181,0) 78%); }
  .ambient-card__veil{ position:absolute; inset:-18%; background:radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.2) 0%, rgba(255,255,255,.12) 32%, rgba(255,255,255,.05) 52%, transparent 72%), radial-gradient(ellipse at 50% 62%, rgba(var(--ac-glow-1),.2) 0%, rgba(var(--ac-glow-1),.08) 40%, transparent 70%); }
  .ambient-card__grain{ position:absolute; inset:0; opacity:.035; mix-blend-mode:soft-light; background-image:linear-gradient(rgba(0,0,0,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.24) 1px, transparent 1px); background-size:3px 3px; }
  @media (max-width:900px){ .ambient-card{ --card-width:100vw; --card-height:62vw; } .ambient-card__image{ width:76%; } }
  @media (prefers-reduced-motion: reduce){ .ambient-card__glow,.ambient-card__image-stage{ transform:translate3d(0,0,0); } }

  .qcard{border-left:3px solid var(--red);padding:6px 0 6px 22px;margin:24px 0;}
  .qcard p{font-size:19px;font-style:italic;color:#222;margin:0 0 8px;line-height:1.5;}
  .qcard .who{font-family:var(--mono);font-size:11.5px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;}

  /* findings / principles list */
  .findings{margin:22px 0;}
  .findings .f{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
  .findings .f:first-child{border-top:1px solid var(--line);}
  .findings .f .ic{font-family:var(--mono);font-size:12px;color:var(--red);flex:0 0 84px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px;}
  .findings .f .bd{flex:1;}
  .findings .f .bd b{font-weight:700;}
  .findings .f .bd p{margin:4px 0 0;font-size:14.5px;color:#444;}

  /* pillar map */
  .pillars{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0;}
  .pillars .p{flex:1;min-width:200px;border:1px solid var(--line);border-radius:14px;padding:22px;}
  .pillars .p .n{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.1em;}
  .pillars .p h4{font-size:17px;margin:8px 0 6px;}
  .pillars .p span{font-size:13.5px;color:var(--gray);}

  .modes{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0;}
  .modes .m{flex:1;min-width:150px;text-align:center;}
  .modes .m .ph{aspect-ratio:9/19;max-width:200px;margin:0 auto;min-height:0;}
  .modes .m .label2{font-weight:700;font-size:15px;margin-top:10px;}
  .modes .m .sub{font-size:13px;color:var(--gray);}

  .stats{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 24px;}
  .stat{flex:1;min-width:140px;border:1px solid var(--line);border-radius:14px;padding:24px 16px;text-align:center;}
  .stat .big{font-size:31px;font-weight:700;color:var(--red);letter-spacing:-.02em;line-height:1;}
  .stat .lbl{font-size:13px;color:var(--gray);margin-top:10px;}

  /* Impact stat tiles — gray-filled rounded cards, big black number over a soft label. */
  .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 8px;}
  .statgrid--3{grid-template-columns:repeat(3,1fr);}
  .stat-tile{background:#f4f4f5;border-radius:20px;padding:clamp(24px,2.4vw,34px) clamp(20px,1.8vw,28px);}
  .stat-tile .num{font-family:var(--header-font);font-size:clamp(32px,3.2vw,40px);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1;margin-bottom:14px;}
  .stat-tile .cap{font-size:14px;color:var(--gray);line-height:1.45;}
  @media(max-width:820px){ .statgrid{grid-template-columns:1fr 1fr;} }
  @media(max-width:460px){ .statgrid{grid-template-columns:1fr;} }

  /* Impact — stat cards left, media (Smart Campaigns video) right; breaks out to ~1240px */
  .impact-grid{width:min(1240px,100vw);margin:26px 0;margin-left:calc(50% - min(1240px,100vw) / 2);display:grid;grid-template-columns:0.82fr 1.3fr;gap:16px;align-items:stretch;}
  .impact-stats{display:flex;flex-direction:column;gap:14px;}
  .istat{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,.045);}
  .istat .big{font-family:var(--serif);font-size:clamp(36px,3.6vw,50px);font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--red);}
  .istat .big .u{color:var(--soft);font-weight:600;}
  .istat .lbl{font-size:15px;color:var(--gray);margin-top:11px;}
  .impact-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:18px 26px;text-decoration:none;font-size:15px;font-weight:500;transition:border-color .15s,color .15s;}
  .impact-cta .arr{color:var(--soft);transition:color .15s;}
  .impact-cta:hover{border-color:var(--ink);}
  .impact-cta:hover .arr{color:var(--red);}
  /* inline body text link */
  .txtlink{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:#bdbdbd;transition:text-decoration-color .15s;}
  .txtlink:hover{text-decoration-color:var(--ink);}
  .impact-grid--video{grid-template-columns:1fr;gap:16px;}
  .impact-grid--video .impact-media{aspect-ratio:16/9;min-height:0;}
  .impact-grid--video .impact-cta{justify-self:start;}
  .impact-media{position:relative;border-radius:16px;overflow:hidden;background:#fff4ea;min-height:300px;}
  .impact-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:rgba(255,255,255,.82);background:radial-gradient(circle at 50% 38%, #3a3633, #1b1a19);}
  .video-ph .play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;padding-left:4px;}
  .video-ph small{display:block;color:rgba(255,255,255,.5);font-size:12.5px;margin-top:4px;}
  @media(max-width:760px){ .impact-grid{grid-template-columns:1fr;width:100%;margin-left:0;} .impact-media{min-height:0;aspect-ratio:16/9;} }

  /* Ambient glow panel — wraps the Impact stats+video on the warm background template */
  .ambient-panel{--glow-y:0px;--bleed-x:62px;--bleed-y:155px;position:relative;width:min(1240px,100vw);margin:26px 0;margin-left:calc(50% - min(1240px,100vw) / 2);border-radius:20px;overflow:hidden;background:var(--ac-bg);isolation:isolate;padding:clamp(30px,4vw,60px);}
  .ambient-panel .impact-grid{position:relative;z-index:1;width:100%;margin:0;}
  @media(max-width:760px){ .ambient-panel{width:100%;margin-left:0;padding:18px;} }

  /* Glow 2 — DoorDash-red preset. Add class `glow2` alongside .ambient-card / .ambient-panel.
     (Glow 1 = orange, default.) A preset is just a set of --ac-* overrides — copy this to make your own. */
  .glow2{ --ac-glow-1:235,40,19; --ac-glow-2:232,34,14; --ac-glow-3:247,180,164; }

  /* ---- Ambient-card OPT-OUT (per-project setting) ----------------------------------------
     The ambient glow is ON by default. To turn it OFF for an image, add `no-glow` alongside
     `ambient-card` (e.g. class="ambient-card no-glow"): this drops the colored container + glow
     blobs and renders a clean, plainly-framed image on a transparent background. On a no-glow
     card you can omit the `.ambient-card__glow` blob markup entirely, and drop `data-ambient-card`
     so the JS parallax skips it (there's no glow to drift). One image component, glow per page. */
  .ambient-card.no-glow{ background:transparent; box-shadow:none; }
  .ambient-card.no-glow .ambient-card__glow{ display:none; }
  .sec-body .ambient-card.no-glow{ background:transparent; border-radius:0; }
  .sec-body .ambient-card.no-glow .ambient-card__image-stage{ padding:0; }
  .sec-body .ambient-card.no-glow .ambient-card__image{
    width:100%; background:transparent; border-radius:12px;
    box-shadow:none;
  }
  .sec-body .ambient-card.no-glow .ambient-card__pair{ width:100%; align-items:flex-start; }
  .sec-body .ambient-card.no-glow .ambient-card__pair > img,
  .sec-body .ambient-card.no-glow .ambient-card__pair > video{
    background:transparent; border-radius:12px;
    box-shadow:none;
  }
  /* Placeholder text inside the 70% image box */
  .ambient-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#9a8e8e;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
  .ambient-panel .modes{position:relative;z-index:1;margin:0;}

  /* Role marquee — auto-scrolling band of merchant terms + image cards (Users section) */
  .marquee{position:relative;left:50%;width:100vw;margin-left:-50vw;margin:22px 0 6px;overflow:hidden;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
  .marquee__track{display:flex;align-items:center;width:max-content;animation:marqueeScroll 42s linear infinite;}
  .marquee:hover .marquee__track{animation-play-state:paused;}
  .marquee__set{display:flex;align-items:center;gap:clamp(16px,2vw,32px);padding-right:clamp(16px,2vw,32px);}
  .mq-word{font-family:var(--serif);font-size:clamp(28px,4.2vw,54px);font-weight:600;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;}
  .mq-word.muted{color:var(--soft);}
  .mq-dot{color:var(--red);font-size:clamp(15px,1.7vw,24px);line-height:1;}
  .mq-card{flex:0 0 auto;width:clamp(82px,8.5vw,126px);height:clamp(54px,5.6vw,82px);border-radius:14px;background:linear-gradient(135deg,#f1d9d3,#e7c2ba);box-shadow:0 12px 28px rgba(0,0,0,.16);transform:rotate(-4deg);}
  .mq-card.alt{transform:rotate(4deg);background:linear-gradient(135deg,#efe6df,#e2d3c9);}
  @keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media(prefers-reduced-motion:reduce){.marquee__track{animation:none;}}

  .learn .item{padding:36px 0;border-bottom:1px solid var(--line);}
  .learn .item:first-child{padding-top:6px;}
  .learn .item:last-child{border-bottom:none;}
  .learn .item h3{font-size:22px;margin-bottom:14px;}
  .learn .item h3 .num{color:var(--red);margin-right:16px;font-variant-numeric:tabular-nums;}
  .learn .item p{margin:0 0 16px;color:#333;font-size:16.5px;line-height:1.6;}
  .learn .item p:last-child{margin-bottom:0;}

  .morework{display:flex;gap:18px;flex-wrap:wrap;}
  .card{flex:1;min-width:220px;display:flex;gap:16px;border:1px solid var(--line);border-radius:14px;padding:16px;align-items:center;}
  .card .thumb{width:80px;height:60px;border-radius:8px;flex-shrink:0;}
  .card h4{font-size:15px;margin-bottom:3px;}
  .card p{font-size:13px;margin:0;color:var(--gray);}

  @media(max-width:880px){
    .shell{flex-direction:column;}
    .sidebar{position:static;height:auto;width:100%;flex-basis:auto;padding:28px 24px 6px;border-bottom:1px solid var(--line);}
    .snav{flex-direction:row;flex-wrap:wrap;gap:6px 14px;}
    .snav a.active,.snav a.sub.active{padding-left:0;border-left:none;}
    .snav .grp{display:none;}
    .content{padding:36px 24px 70px;max-width:100%;}
    h1{font-size:32px;}h2{font-size:24px;}
  }

  /* ===== Section layout — near full-bleed, 15 / 65 columns =====
     .content is full-bleed (no side padding of its own); horizontal spacing is
     handled by the grid's padding tracks, so the pad/left/right %s resolve against
     the PAGE width. Grid = [pad][left col][gap][right col][pad]; the gap track
     absorbs the slack. .sec-body IS the right column. */
  .content{max-width:none;padding-left:0;padding-right:0;padding-bottom:0;}
  .block{display:grid;grid-template-columns:7.5% 15% minmax(0,1fr) 65% 7.5%;gap:0;align-items:start;border-top:1px solid var(--line);}
  .block.first{border-top:none;}
  .sec-head{position:sticky;top:60px;align-self:start;grid-column:2;}
  .sec-head .label{margin-bottom:8px;}
  .sec-head h2{margin-bottom:6px;}
  .sec-body{min-width:0;grid-column:4;}
  .sec-body > :first-child{margin-top:0;}
  /* keep full-bleed media contained within the 70% column */
  .sec-body .ambient-card,.sec-body .ambient-panel{--card-width:100%;width:100%;margin-left:0;left:auto;position:relative;}
  .sec-body .showcase,.sec-body .rcarousel,.sec-body .marquee{position:static;left:auto;width:100%;margin-left:0;}
  .sec-body .impact-grid{width:100%;margin-left:0;}
  @media(max-width:880px){
    .block{grid-template-columns:1fr;gap:8px;}
    .sec-head{position:static;top:auto;}
    .sec-head,.sec-body{grid-column:auto;}
    .content{padding-left:24px;padding-right:24px;}
  }


  .sec-body{font-size:var(--content-size);}
  .sec-body > p,
  .sec-body > h2,
  .sec-body > h3,
  .sec-body > h4,
  .sec-body > ul,
  .sec-body > .meta,
  .sec-body > .qcard,
  .sec-body > .principles,
  .sec-body > .statgrid,
  .sec-body > .learn{ width:80%; margin-left:auto; margin-right:auto; }
  .sec-body .ambient-card.no-glow.narrow{ width:80%; margin-left:auto; margin-right:auto; }
  .sec-body .ambient-card.no-glow.sixty{ width:60%; margin-left:auto; margin-right:auto; }
  @media(max-width:880px){
    .sec-body > p,
    .sec-body > h2,
    .sec-body > h3,
    .sec-body > h4,
    .sec-body > ul,
    .sec-body > .meta,
    .sec-body > .qcard,
    .sec-body > .principles,
    .sec-body > .learn{ width:100%; }
  }
  .sec-body .lead{font-size:var(--content-size);}
  /* V3: image containers sized by their image (controllable width % + vertical padding) */
  .sec-body .ambient-card{height:auto;background:var(--ac-bg);border-radius:16px;}
  .sec-body .ambient-card__glow{display:none;}
  .sec-body .ambient-card__image-stage{position:relative;transform:none;padding:var(--img-pad) 0;}
  .sec-body .ambient-card__image{width:var(--img-width);transform:none;aspect-ratio:auto;height:auto;border-radius:8px;}
  .sec-body .ambient-card__pair{width:var(--img-width);height:auto;transform:none;}
  .sec-body .ambient-card__pair > img,.sec-body .ambient-card__pair > video{border-radius:8px;aspect-ratio:auto;}
  #problem .ambient-card__image-stage{padding:var(--img-pad) 0;}
  #problem .ambient-card__image{width:var(--img-width);}
  /* V3: More work CTA box (hero-style green) */
  .morework-cta{display:block;border-top:none;padding:44px 20px 20px;}
  .morework-box{background:#fff4ea;border-radius:24px;padding:clamp(30px,4vw,52px);color:var(--ink);}
  .morework-box .mw-title{font-family:var(--header-font);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--ink);margin-bottom:26px;}
  .morework-box .morework{display:flex;gap:18px;flex-wrap:wrap;}
  .morework-box .card{flex:1;min-width:240px;display:flex;gap:16px;align-items:center;text-decoration:none;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.03);border-radius:14px;padding:18px;transition:background .2s,border-color .2s;}
  .morework-box .card:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.25);}
  .morework-box .card .thumb{width:84px;height:60px;border-radius:8px;flex-shrink:0;background:rgba(0,0,0,.08);}
  .morework-box .card h4{font-size:15px;margin-bottom:3px;color:var(--ink);}
  .morework-box .card p{font-size:13px;margin:0;color:rgba(0,0,0,.6);}
  /* HERO — data-hero on #hero swaps the whole look. Versions 1-3 render an animated WebGL swirl
     (fragment shader with domain-warped fbm) tinted with each design's exact Figma colors; version 4 keeps
     the static CSS gray gradient. A grain texture overlays; product image spans ~85% of hero height. */
  .hero-emboss{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;aspect-ratio:16/9;background:linear-gradient(135deg,var(--h-base-a,#e8eaec),var(--h-base-b,#d8dbdf));border-radius:20px;width:calc(100% - 40px);margin:20px;}
  .hero-emboss .he-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:8px;top:20px;padding:0 30px;}
  /* Back button — plain text at rest; morphs into a frosted-glass pill on hover.
     Padding/border stay constant (border transparent at rest) so nothing shifts. */
  .hero-emboss .back{
    display:inline-flex;align-items:center;gap:6px;
    font-family:"Satoshi",var(--mono);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
    text-decoration:none;color:#1a1a1a;
    padding:8px 15px 8px 11px;border-radius:999px;
    background:rgba(255,255,255,0);border:1px solid transparent;box-shadow:none;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  }
  .hero-emboss .back:hover{
    color:#1a1a1a;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
    border-color:rgba(255,255,255,.6);
    box-shadow:0 8px 22px rgba(20,22,40,.16),inset 0 1px 0 rgba(255,255,255,.7);
    transform:translateY(-1px);
  }
  .hero-emboss .back:active{transform:translateY(0);box-shadow:0 2px 8px rgba(20,22,40,.12);}
  .hero-emboss .back-ic{width:16px;height:16px;flex:0 0 auto;transition:transform .18s ease;}
  .hero-emboss .back:hover .back-ic{transform:translateX(-2px);}
  /* Resume link — mirrors the back button on the right; opens the PDF in a new tab. */
  .hero-emboss .he-resume{
    display:inline-flex;align-items:center;gap:6px;
    font-family:"Satoshi",var(--mono);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
    text-decoration:none;color:#1a1a1a;
    padding:8px 11px 8px 15px;border-radius:999px;
    background:rgba(255,255,255,0);border:1px solid transparent;box-shadow:none;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  }
  .hero-emboss .he-resume:hover{
    color:#1a1a1a;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
    border-color:rgba(255,255,255,.6);
    box-shadow:0 8px 22px rgba(20,22,40,.16),inset 0 1px 0 rgba(255,255,255,.7);
    transform:translateY(-1px);
  }
  .hero-emboss .he-resume:active{transform:translateY(0);box-shadow:0 2px 8px rgba(20,22,40,.12);}
  .hero-emboss .he-resume-ic{width:15px;height:15px;flex:0 0 auto;transition:transform .18s ease;}
  .hero-emboss .he-resume:hover .he-resume-ic{transform:translate(1px,-1px);}
  .hero-emboss .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8f93;text-align:right;}
  /* --- hero base gradient (canvas fallback under the shader) --- */
  #hero{--h-base-a:#fff4ea;--h-base-b:#ffe6d8;}
  /* --- animated shader canvas (warm magenta swirl) --- */
  .hero-shader{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;}
  /* --- grain texture overlay (assets/hero-texture.png) --- */
  .hero-texture{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("../hero-texture.png") center/cover no-repeat;opacity:.07;mix-blend-mode:multiply;}
  /* Stage is a vertical stack: centered title on top, image filling the rest of the header
     height below it. Flex column means the two can never overlap in any responsive state. */
  .he-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 20px 0;}
  .emboss{position:relative;margin:0;z-index:1;flex:0 0 auto;width:100%;display:grid;justify-items:center;text-align:center;}
  .emboss .lay{grid-area:1/1;margin:0;white-space:pre;text-transform:uppercase;font-family:"Satoshi",var(--serif);font-weight:600;font-size:clamp(34px,9.5vw,135px);line-height:.84;letter-spacing:-.03em;text-align:center;}
  .emboss .lay.em,.emboss .lay.de{text-align:center;color:#f7f8fa;}
  .emboss .lay.em{text-shadow:-2px -2px 2px rgba(255,255,255,1),-5px -5px 12px rgba(255,255,255,.65),2px 2px 3px rgba(0,0,0,.26),8px 8px 16px rgba(0,0,0,.22),20px 20px 40px rgba(0,0,0,.14);-webkit-mask-image:linear-gradient(90deg,#000 32%,transparent 92%);mask-image:linear-gradient(90deg,#000 32%,transparent 92%);}
  .emboss .lay.de{text-shadow:2px 2px 2px rgba(255,255,255,1),5px 5px 12px rgba(255,255,255,.65),-2px -2px 3px rgba(0,0,0,.26),-8px -8px 16px rgba(0,0,0,.22),-20px -20px 40px rgba(0,0,0,.14);-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 68%);mask-image:linear-gradient(90deg,transparent 8%,#000 68%);}
  .emboss .lay.flat{display:none;text-align:center;color:#181410;text-shadow:none;-webkit-mask-image:none;mask-image:none;}
  .emboss .lay.flat .w-sm{color:#181410;}
  .emboss .lay.flat .w-cm{color:#181410;}
  /* Version 1 uses solid flat black text (not the tonal emboss) */
  #hero[data-hero="1"] .lay.em,#hero[data-hero="1"] .lay.de{display:none;}
  #hero[data-hero="1"] .lay.flat{display:block;}
  /* Image fills the remaining stage height, anchored to the header's bottom edge. Sized by
     height so it grows to fill the vertical band; max-width + object-fit keep it from
     overflowing (and undistorted) for very wide art or short/mobile headers. */
  .he-media{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;}
  .he-media img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom;display:block;border-radius:14px 14px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 96%,transparent 100%);}
  .he-media.empty{height:100%;aspect-ratio:1.29/1;width:auto;border:1.5px dashed #c6cacd;border-radius:14px;color:#9aa0a4;font-family:var(--mono);font-size:12px;padding:20px;display:flex;align-items:center;justify-content:center;text-align:center;}
  .he-media.empty::after{content:"Set the hero image via data-hero-image on #hero";}
  @media(max-width:820px){.hero-emboss{width:calc(100% - 40px);aspect-ratio:1/1;}.he-stage{gap:20px;padding:16px 16px 0;}.he-media.empty{height:auto;width:90%;}}
  /* Bento — live video overview. Cells use explicit calc() heights derived from a definite --bh (not flex-grow
     ratios) so descendant video heights resolve in every browser; cover/fill videos are absolutely positioned
     so they always clip to the cell (a flex-height quirk otherwise lets them balloon to intrinsic size). */
  .bento{--bh:clamp(300px,32vw,440px);width:100%;margin:42px 0;display:flex;gap:16px;}
  .bento__col{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;}
  .bento__cell{position:relative;overflow:hidden;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2vw,30px);}
  .bento--tl{height:calc((var(--bh) - 16px) * 0.42);background:#c1bcf5;}
  .bento--bl{height:calc((var(--bh) - 16px) * 0.58);background:#f0cdc4;}
  .bento--tr{height:calc((var(--bh) - 16px) * 0.58);background:#f69b6d;}
  .bento--br{height:calc((var(--bh) - 16px) * 0.42);background:#fff6f1;}
  .bento__cell video,.bento__cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;display:block;box-shadow:0 14px 40px rgba(0,0,0,.14);}
  .bento--fill{padding:0;}
  .bento--fill video,.bento--fill img,.bento--cover video,.bento--cover img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;box-shadow:none;}
  .bento--cover video,.bento--cover img{object-position:right center;}
  @media(max-width:820px){.bento{width:calc(100% - 16px);margin-left:auto;margin-right:auto;flex-direction:column;}.bento__cell{height:auto;aspect-ratio:16/10;}}