/* ---------- TOKENS ---------- */
  :root{
    --ground:#2A1A14;
    --shadow:#1C110C;
    --mid:#3E2A22;
    --cream:#F1E8DC;
    --oat:#E8DCC8;
    --hairline:#D4C4A8;
    --white-pill:#FAF7F0;

    --on-dark:#F1E8DC;
    --on-dark-muted:#B09884;
    --on-cream:#2A1A14;
    --on-cream-2:#7A5A48;
    --on-cream-3:#B09884;

    /* The six — locked v2.1 category accents */
    --repair:#742406;      /* Rust */
    --regenerate:#797559;  /* Olive */
    --revive:#d8cbb0;      /* Sand */
    --resolve:#f1e8dc;     /* Cream · polar */
    --regain:#d48057;      /* Terracotta */
    --restore:#291a14;     /* Chocolate · polar */

    /* Legacy tones used by photo gradients only */
    --mocha:#A47864;
    --sirocco:#C9AE92;
    --safari:#8A7A60;
    --baltic:#5A3F2E;
    --warm-amber:#B89870;
    --chocolate:#3A2820;

    --display:"Neue Haas Grotesk Display","Söhne","Inter",system-ui,sans-serif;
    --serif:"Instrument Serif","GT Super Text","Tiempos",serif;
    --body:"DM Sans","Söhne Buch",system-ui,sans-serif;

    --max:1160px;
    --pad-s:64px;
    --pad-l:96px;
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--ground);color:var(--on-dark);font-family:var(--body);font-weight:400;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{overflow-x:hidden}
  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  input{font:inherit;color:inherit;background:none;border:0;outline:0}

  /* ---------- PRIMITIVES ---------- */
  .display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;line-height:1.06}
  .serif{font-family:var(--serif);font-weight:400}
  .eyebrow{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:400}
  .meta{font-size:11px;letter-spacing:0.04em;color:var(--on-dark-muted)}

  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  section{position:relative}
  .sec-dark{background:var(--ground);color:var(--on-dark)}
  .sec-cream{background:var(--cream);color:var(--on-cream)}
  .sec-pad{padding:96px 24px}
  @media (max-width:1023px){ .sec-pad{padding:64px 20px} }

  /* Pills */
  .pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid transparent;white-space:nowrap;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;transition:background-color .25s ease, color .25s ease, border-color .25s ease}
  .pill-ghost-dark{border-color:var(--mid);color:var(--on-dark)}
  .pill-ghost-dark:hover{background:rgba(241,232,220,0.08)}
  .pill-ghost-cream{border-color:var(--hairline);color:var(--on-cream)}
  .pill-ghost-cream:hover{background:rgba(42,26,20,0.06)}
  .pill-filled-cream{background:var(--white-pill);color:var(--on-cream);border-color:var(--white-pill)}
  .pill-filled-cream:hover{background:#fff}
  .pill-filled-dark{background:var(--ground);color:var(--cream);border-color:var(--ground)}
  .pill-filled-dark:hover{background:var(--shadow)}
  .pill-tag{padding:6px 12px;font-size:10px;letter-spacing:0.1em;border:1px solid var(--hairline);color:var(--on-cream-2);background:transparent}
  .pill-tag-dark{padding:6px 12px;font-size:10px;letter-spacing:0.1em;border:1px solid var(--mid);color:var(--on-dark-muted)}

  /* Card */
  .card{border-radius:20px;overflow:hidden}
  .hairline-cream{border:1px solid var(--hairline)}
  .hairline-dark{border:1px solid var(--mid)}

  /* Placeholder photo */
  .photo{position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(120% 100% at 50% 40%, #6A4A38 0%, #3E2A22 55%, #2A1A14 100%)}
  .photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.7;mix-blend-mode:overlay;pointer-events:none}
  .photo.warm{background:radial-gradient(130% 110% at 30% 30%, #B89870 0%, #A47864 40%, #3E2A22 90%)}
  .photo.cool{background:radial-gradient(130% 110% at 70% 30%, #C9AE92 0%, #8A7A60 45%, #2A1A14 95%)}
  .photo.flat{background:#3E2A22}
  .photo .cap{position:absolute;left:14px;bottom:12px;right:14px;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(241,232,220,0.78)}

  /* Glyph mark (paired circles) */
  .glyph{display:inline-block;width:28px;height:14px}

  /* Divider */
  .hair{height:1px;background:var(--hairline)}
  .hair-dark{height:1px;background:var(--mid)}

  /* ---------- NAV ---------- */
  .nav-wrap{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:center;z-index:20}
  .nav{display:flex;align-items:center;gap:28px;padding:10px 18px;border-radius:999px;border:1px solid var(--mid);background:rgba(28,17,12,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .nav .brand{display:flex;align-items:center;gap:10px;padding-right:16px;border-right:1px solid var(--mid)}
  .nav .brand-word{font-family:var(--display);font-size:13px;letter-spacing:0.18em;text-transform:uppercase}
  .nav .links{display:flex;gap:22px;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted)}
  .nav .links a:hover{color:var(--on-dark)}
  .nav .tail{padding-left:16px;border-left:1px solid var(--mid);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted)}
  @media (max-width:768px){
    .nav .links,.nav .tail{display:none}
    .nav{gap:12px}
    .nav .brand{border-right:0;padding-right:0}
  }

  /* ---------- HERO ---------- */
  .hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:140px 24px 80px}
  .hero-photo{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 55%, #6A4A38 0%, #3E2A22 55%, #2A1A14 100%);z-index:0}
  .hero-photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0 0.06  0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.8;mix-blend-mode:overlay}
  .hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,26,20,0.35) 0%,rgba(42,26,20,0) 25%,rgba(42,26,20,0) 65%,rgba(42,26,20,0.85) 100%)}
  .hero-inner{position:relative;z-index:2;max-width:760px;width:100%;text-align:center}
  .hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.035em;line-height:.92;font-size:clamp(64px,13vw,168px);color:var(--on-dark)}
  .hero-row{display:inline-flex;align-items:stretch;gap:0;margin-top:40px;border:1px solid var(--mid);border-radius:999px;background:rgba(28,17,12,0.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
  .hero-row .pill-seg{padding:14px 22px;display:flex;align-items:center;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted)}
  .hero-row .divider{width:1px;background:var(--mid)}
  .hero-row .apply{padding:14px 22px;background:var(--white-pill);color:var(--on-cream);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;display:flex;align-items:center}
  .hero-row .apply:hover{background:#fff}
  .hero-micro{margin-top:18px;font-size:11px;letter-spacing:0.04em;color:var(--on-dark-muted)}
  .hero-caption{position:absolute;left:24px;bottom:18px;z-index:3;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(176,152,132,0.6)}
  @media (max-width:768px){
    .hero{min-height:92vh;padding:120px 20px 64px}
    .hero-row{flex-direction:column;border-radius:24px;width:100%}
    .hero-row .divider{width:100%;height:1px}
    .hero-row .pill-seg,.hero-row .apply{justify-content:center;padding:16px 18px;letter-spacing:0.14em;font-size:11px}
  }

  /* ---------- 6.2 THESIS ---------- */
  .thesis{padding:48px 24px 96px}
  .thesis .pill-row{max-width:980px;margin:0 auto;border:1px solid var(--mid);border-radius:999px;padding:22px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
  .thesis .l{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:22px;line-height:1.05}
  .thesis .r{color:var(--on-dark-muted);font-size:13px;line-height:1.55}
  @media (max-width:768px){
    .thesis .pill-row{grid-template-columns:1fr;border-radius:28px;padding:24px 24px;gap:14px}
  }

  /* ---------- 6.3 VALUE CARDS ---------- */
  .values{padding:48px 24px 96px}
  .values .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
  .value{border-radius:20px;overflow:hidden;aspect-ratio:4/5;position:relative;padding:24px;display:flex;flex-direction:column;justify-content:flex-end}
  .value .vphoto{position:absolute;inset:14px 14px 90px 14px;border-radius:14px;overflow:hidden}
  .value .vt{position:relative;z-index:2;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:18px;letter-spacing:-0.01em;color:var(--cream)}
  .value.v1{background:var(--mocha)}
  .value.v2{background:var(--safari)}
  .value.v3{background:var(--chocolate)}
  .value.v1 .vphoto{background:radial-gradient(110% 100% at 40% 40%,#C9AE92 0%,#A47864 55%,#5A3F2E 100%)}
  .value.v2 .vphoto{background:radial-gradient(110% 100% at 60% 30%,#B89870 0%,#8A7A60 55%,#2A1A14 100%)}
  .value.v3 .vphoto{background:radial-gradient(110% 100% at 40% 40%,#6A4A38 0%,#3E2A22 55%,#1C110C 100%)}
  .value .vphoto::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.09  0 0 0 0 0.05  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.75;mix-blend-mode:overlay}
  .value .vcap{position:absolute;left:24px;right:24px;bottom:56px;z-index:2;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(241,232,220,0.7)}
  @media (max-width:900px){ .values .grid{grid-template-columns:1fr} .value{aspect-ratio:5/4} }

  /* ---------- 6.4 FAQ TRIO ---------- */
  .faqtrio{padding:64px 24px 96px}
  .faqtrio .inner{max-width:var(--max);margin:0 auto}
  .faqtrio .row{border-top:1px solid var(--mid);padding:28px 8px;display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;transition:background-color .25s ease}
  .faqtrio .row:last-child{border-bottom:1px solid var(--mid)}
  .faqtrio .row:hover{background:rgba(241,232,220,0.03)}
  .faqtrio .row h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.01em;font-size:clamp(22px,3vw,34px);line-height:1.05}
  .faqtrio .plus{width:42px;height:42px;border-radius:999px;border:1px solid var(--mid);display:flex;align-items:center;justify-content:center;color:var(--on-dark);flex:none;transition:background-color .25s ease,transform .4s ease}
  .faqtrio .row.open .plus{transform:rotate(45deg);background:rgba(241,232,220,0.08)}
  .faqtrio .body{max-height:0;overflow:hidden;transition:max-height .4s ease}
  .faqtrio .body-inner{padding:6px 8px 28px;max-width:680px;color:var(--on-dark-muted);font-size:14px;line-height:1.6}
  .faqtrio .row.open + .body{max-height:260px}

  /* ---------- 6.5 TESTIMONIALS ---------- */
  .testi{padding:96px 24px}
  .testi h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,5vw,56px);line-height:1.02;max-width:900px;margin-bottom:64px}
  .testi .row{display:grid;grid-template-columns:1.2fr 0.9fr 0.9fr 1fr;gap:28px;padding:40px 0;border-top:1px solid var(--hairline);align-items:center}
  .testi .row:last-child{border-bottom:1px solid var(--hairline)}
  .testi .quote{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.015em;font-size:22px;line-height:1.08;color:var(--on-cream)}
  .testi .ba{aspect-ratio:3/4;border-radius:14px;overflow:hidden;position:relative}
  .testi .ba::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0 0.06  0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.55;mix-blend-mode:overlay}
  .testi .ba.before{background:radial-gradient(120% 100% at 45% 40%,#8A7A60 0%,#5A3F2E 65%,#2A1A14 100%)}
  .testi .ba.after{background:radial-gradient(120% 100% at 45% 40%,#C9AE92 0%,#A47864 55%,#3E2A22 100%)}
  .testi .ba .lbl{position:absolute;left:12px;bottom:10px;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(241,232,220,0.85)}
  .testi .right p{font-size:13px;color:var(--on-cream-2);line-height:1.55;margin-bottom:14px}
  .testi .right .attr{font-family:var(--display);text-transform:uppercase;font-size:11px;letter-spacing:0.14em;color:var(--on-cream);margin-bottom:12px}
  @media (max-width:900px){
    .testi .row{grid-template-columns:1fr 1fr;gap:16px}
    .testi .quote{grid-column:1/-1;font-size:22px}
    .testi .right{grid-column:1/-1}
  }

  /* ---------- 6.6 PRICING ---------- */
  .pricing{padding:96px 24px}
  .pricing h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,5vw,56px);max-width:980px;margin:0 auto 40px;text-align:center;line-height:1.02}
  .toggle{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--mid);margin:0 auto 56px;background:rgba(28,17,12,0.4)}
  .toggle-row{display:flex;justify-content:center;margin-bottom:56px}
  .toggle button{padding:10px 18px;border-radius:999px;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-dark-muted);transition:background-color .25s ease,color .25s ease}
  .toggle button.active{background:var(--ground);color:var(--cream);box-shadow:inset 0 0 0 1px var(--mid)}
  .pricing .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;max-width:var(--max);margin:0 auto}
  .price-card{background:var(--cream);color:var(--on-cream);border-radius:20px;padding:32px;display:flex;flex-direction:column;min-height:540px}
  .price-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
  .price-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:28px;letter-spacing:-0.01em}
  .price-card .num{font-family:var(--display);font-weight:400;font-size:64px;letter-spacing:-0.03em;line-height:.95}
  .price-card .num span{font-size:16px;color:var(--on-cream-2);margin-left:8px;letter-spacing:0}
  .price-card ul{list-style:none;margin:32px 0;display:flex;flex-direction:column;gap:12px}
  .price-card li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--on-cream-2);padding-bottom:10px;border-bottom:1px solid var(--hairline)}
  .price-card li svg{flex:none;margin-top:3px}
  .price-card .actions{margin-top:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .pricing .side{display:flex;flex-direction:column;gap:16px}
  .side-card{background:var(--cream);color:var(--on-cream);border-radius:20px;padding:28px;flex:1;display:flex;flex-direction:column}
  .side-card h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;letter-spacing:-0.01em;margin-bottom:14px}
  .side-card p{font-size:13px;color:var(--on-cream-2);line-height:1.55;margin-bottom:24px}
  .side-card .row-tags{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
  .side-card .footer{margin-top:auto;display:flex;justify-content:flex-end}
  @media (max-width:900px){ .pricing .grid{grid-template-columns:1fr} }

  /* ---------- 6.7 PROTOCOLS ---------- */
  .protocols{padding:48px 24px 96px}
  .proto-card{max-width:var(--max);margin:0 auto;background:var(--oat);color:var(--chocolate);border-radius:24px;padding:48px;display:grid;grid-template-columns:0.9fr 1.5fr;gap:40px}
  .proto-card .left h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(32px,3.6vw,44px);line-height:1.02;margin:18px 0 24px}
  .proto-card .left p{color:var(--on-cream-2);font-size:13.5px;line-height:1.6;margin-bottom:14px}
  .proto-card .left .cta-row{margin-top:28px}
  .proto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .proto-cell{background:var(--cream);border:1px solid var(--hairline);border-radius:20px;padding:16px 16px 20px;display:flex;flex-direction:column;transition:transform .35s ease}
  .proto-cell:hover{transform:translateY(-3px)}
  .proto-cell .vial-wrap{aspect-ratio:4/5;border-radius:14px;background:linear-gradient(180deg,#EADFCB 0%,#E0D3BA 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:16px}
  .proto-cell .vial-wrap::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.5  0 0 0 0 0.38  0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.6;mix-blend-mode:multiply;pointer-events:none}
  .proto-cell .vial-wrap svg{position:relative;z-index:1;height:84%;width:auto}
  .proto-cell .meta-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .proto-cell h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:18px;letter-spacing:-0.005em;line-height:1}
  .proto-cell .sub{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--on-cream-2);margin:6px 0 12px;line-height:1.25}
  .proto-cell .tags{display:flex;gap:6px;flex-wrap:wrap}
  .proto-cell .tags span{border:1px solid var(--hairline);padding:5px 10px;border-radius:999px;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-cream-2)}
  @media (max-width:1023px){
    .proto-card{grid-template-columns:1fr;padding:32px}
    .proto-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:560px){ .proto-grid{grid-template-columns:1fr} }

  /* ---------- 6.8 CAROUSEL ---------- */
  .reactions{padding:96px 24px}
  .reactions .head{max-width:var(--max);margin:0 auto 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .reactions h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,5vw,56px);line-height:1.02;max-width:780px}
  .reactions .scroller{display:flex;gap:14px;overflow-x:auto;padding:0 24px 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reactions .scroller::-webkit-scrollbar{display:none}
  .react-card{flex:none;width:240px;aspect-ratio:9/16;border-radius:20px;border:1px solid rgba(241,232,220,0.2);position:relative;overflow:hidden;scroll-snap-align:start}
  .react-card.v1{background:radial-gradient(120% 90% at 50% 40%,#A47864 0%,#5A3F2E 60%,#2A1A14 100%)}
  .react-card.v2{background:radial-gradient(120% 90% at 50% 40%,#8A7A60 0%,#3E2A22 60%,#1C110C 100%)}
  .react-card.v3{background:radial-gradient(120% 90% at 50% 40%,#C9AE92 0%,#A47864 60%,#3E2A22 100%)}
  .react-card.v4{background:radial-gradient(120% 90% at 50% 40%,#B89870 0%,#8A7A60 60%,#2A1A14 100%)}
  .react-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(28,17,12,0.7) 100%)}
  .react-card .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:999px;border:1px solid rgba(241,232,220,0.8);display:flex;align-items:center;justify-content:center;z-index:2}
  .react-card .play svg{fill:var(--cream);width:14px;height:14px}
  .react-card .bottom{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cream);display:flex;justify-content:space-between}
  .reactions .ctrl{max-width:var(--max);margin:22px auto 0;display:flex;justify-content:flex-end;gap:10px}
  .reactions .ctrl button{width:44px;height:44px;border-radius:999px;border:1px solid var(--mid);display:inline-flex;align-items:center;justify-content:center;color:var(--on-dark);transition:background-color .25s ease}
  .reactions .ctrl button:hover{background:rgba(241,232,220,0.06)}

  /* ---------- 6.9 CLOSING CTA ---------- */
  .closing{padding:140px 24px 120px;text-align:center;border-top:1px solid var(--mid)}
  .closing h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.035em;font-size:clamp(56px,10vw,128px);line-height:.92;max-width:1000px;margin:0 auto 48px}
  .closing .pill{font-size:12px;letter-spacing:0.18em;padding:18px 38px}

  /* ---------- 6.10 FAQ ---------- */
  .faq{padding:96px 24px}
  .faq .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:56px}
  .faq aside .eyebrow{color:var(--on-cream-3);margin-bottom:18px;display:block}
  .faq .filters{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
  .faq .filters button{padding:10px 16px;border-radius:999px;border:1px solid var(--hairline);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-cream-2);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
  .faq .filters button.active{background:var(--ground);color:var(--cream);border-color:var(--ground)}
  .faq .filters button:not(.active):hover{background:rgba(42,26,20,0.06)}
  .faq .search-lbl{display:block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-cream-3);margin:24px 0 10px}
  .faq .search{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid var(--hairline);background:var(--oat);width:100%}
  .faq .search input{flex:1;color:var(--on-cream);font-size:12px;letter-spacing:0.1em;text-transform:uppercase}
  .faq .search input::placeholder{color:var(--on-cream-3)}
  .faq .rows .row{border-top:1px solid var(--hairline);padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;transition:background-color .25s ease}
  .faq .rows .row:last-child{border-bottom:1px solid var(--hairline)}
  .faq .rows .row:hover{background:rgba(42,26,20,0.03)}
  .faq .rows h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,2vw,22px);letter-spacing:-0.005em;color:var(--on-cream);line-height:1.1}
  .faq .plus{width:36px;height:36px;border-radius:999px;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .4s ease,background-color .25s ease}
  .faq .row.open .plus{transform:rotate(45deg);background:rgba(42,26,20,0.06)}
  .faq .ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
  .faq .ans-i{padding:6px 4px 22px;font-size:13px;color:var(--on-cream-2);max-width:640px;line-height:1.6}
  .faq .row.open + .ans{max-height:260px}
  @media (max-width:900px){ .faq .inner{grid-template-columns:1fr;gap:28px} .faq .filters{flex-direction:row;flex-wrap:wrap} }

  /* ---------- 6.11 MEDIA HUB ---------- */
  .media{padding:96px 24px}
  .media .head{max-width:var(--max);margin:0 auto 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .media h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,5vw,56px);line-height:1.02;max-width:780px}
  .media .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--max);margin:0 auto}
  .art{background:var(--oat);color:var(--chocolate);border-radius:20px;padding:22px;display:flex;flex-direction:column;min-height:340px;transition:transform .35s ease}
  .art:hover{transform:translateY(-3px)}
  .art .photo{aspect-ratio:3/2;border-radius:14px;margin-bottom:20px}
  .art .art-meta{display:flex;gap:12px;align-items:center;margin-bottom:14px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-cream-3)}
  .art .art-meta .dot{width:3px;height:3px;background:var(--on-cream-3);border-radius:999px}
  .art h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;letter-spacing:-0.005em;line-height:1.1;color:var(--chocolate);margin-top:auto}
  @media (max-width:900px){ .media .grid{grid-template-columns:1fr} }

  /* ---------- 6.12 EMAIL ---------- */
  .email{padding:96px 24px;text-align:center}
  .email h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,5.5vw,64px);line-height:1;max-width:1000px;margin:0 auto 40px}
  .email-form{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 22px;border-radius:999px;border:1px solid var(--hairline);background:var(--oat)}
  .email-form input{flex:1;color:var(--on-cream);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding:10px 0}
  .email-form input::placeholder{color:var(--on-cream-3)}
  .email-form button{padding:14px 24px;border-radius:999px;background:var(--ground);color:var(--cream);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;transition:background-color .25s ease}
  .email-form button:hover{background:var(--shadow)}
  @media (max-width:560px){
    .email-form{flex-direction:column;padding:16px;gap:14px;border-radius:18px}
    .email-form input{width:100%;text-align:center}
    .email-form button{width:100%}
  }

  /* ---------- 6.13 SOFT CONTACT ---------- */
  .soft{padding:96px 24px;text-align:center}
  .soft h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(36px,5.5vw,64px);line-height:1;max-width:1100px;margin:0 auto 18px}
  .soft .sub{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--on-dark-muted);margin-bottom:36px}

  /* ---------- 6.14 FOOTER ---------- */
  footer{border-top:1px solid var(--mid);padding:72px 24px 0}
  .foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:40px;padding-bottom:56px;align-items:flex-start}
  .foot-brand{display:flex;flex-direction:column;gap:18px}
  .foot-brand .wm{font-family:var(--display);font-size:20px;letter-spacing:0.2em;text-transform:uppercase}
  .foot-col h5{font-family:var(--display);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:18px;font-weight:400}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .foot-col li{font-size:12px;color:var(--cream);letter-spacing:0.04em}
  .foot-col li:hover{color:#fff}
  .foot-legal{border-top:1px solid var(--mid);max-width:var(--max);margin:0 auto;padding:22px 0 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-muted)}
  .foot-watermark{position:relative;overflow:hidden;padding:40px 0 48px;text-align:center}
  .foot-watermark .wm{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,6vw,72px);color:rgba(241,232,220,0.28);line-height:1}
  @media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;gap:32px} }
  @media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

  /* Entry motion */
  [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
  [data-reveal].is-in{opacity:1;transform:none}
  [data-stagger] > *{opacity:0;transform:translateY(10px);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
  [data-stagger].is-in > *{opacity:1;transform:none}
  [data-stagger].is-in > *:nth-child(2){transition-delay:.08s}
  [data-stagger].is-in > *:nth-child(3){transition-delay:.16s}
  [data-stagger].is-in > *:nth-child(4){transition-delay:.24s}
  [data-stagger].is-in > *:nth-child(5){transition-delay:.32s}
  [data-stagger].is-in > *:nth-child(6){transition-delay:.40s}

  /* --- Protocols dropdown ------------------------------------------------
     The primary menu now carries one level of children (header.php passes
     depth 2). Only "Protocols" uses it: its six children are the six
     product_cat archives. Each child is tagged with a seq-cat-* class when
     the menu item is created, which is what colours the dot.
     Colours are hardcoded rather than tokenised because chrome.css — which
     dresses the calculator page — carries neither --mid nor the category
     tokens, and this block has to be byte-identical across all six
     stylesheets that render the nav.
     Below 768px .nav .links is display:none, so there is no hover surface
     on phones and nothing to do there.                                    */
  .nav .links li{position:relative}

  .nav .links .menu-item-has-children > a::after{
    content:"";display:inline-block;width:4px;height:4px;margin-left:8px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.7;
    transition:transform .22s ease,opacity .22s ease}
  .nav .links .menu-item-has-children:hover > a::after,
  .nav .links .menu-item-has-children:focus-within > a::after{
    transform:rotate(225deg) translateY(-2px);opacity:1}

  .nav .links .sub-menu{
    position:absolute;top:calc(100% + 16px);left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:212px;margin:0;padding:10px;list-style:none;
    display:flex;flex-direction:column;gap:2px;
    border-radius:18px;border:1px solid var(--mid,#3E2A22);
    background:rgba(28,17,12,0.92);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;z-index:30;
    transition:opacity .22s ease,transform .22s ease,visibility .22s}

  /* Invisible bridge over the 16px gap, so the panel does not close while
     the pointer travels from the parent item down into it. */
  .nav .links .sub-menu::before{
    content:"";position:absolute;left:0;right:0;top:-18px;height:18px}

  .nav .links .menu-item-has-children:hover > .sub-menu,
  .nav .links .menu-item-has-children:focus-within > .sub-menu{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0)}

  .nav .links .sub-menu li{display:block}
  .nav .links .sub-menu a{
    display:flex;align-items:center;gap:11px;
    padding:9px 12px;border-radius:11px;
    font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--on-dark-muted);white-space:nowrap;
    transition:background-color .2s ease,color .2s ease}
  .nav .links .sub-menu a::before{
    content:"";flex:none;width:9px;height:9px;border-radius:50%;
    background:currentColor;box-shadow:0 0 0 1px rgba(241,232,220,.22)}
  .nav .links .sub-menu a:hover,
  .nav .links .sub-menu a:focus-visible{
    background:rgba(241,232,220,.08);color:var(--on-dark)}

  .nav .links .seq-cat-repair     > a::before{background:#742406}
  .nav .links .seq-cat-regenerate > a::before{background:#797559}
  .nav .links .seq-cat-revive     > a::before{background:#d8cbb0}
  .nav .links .seq-cat-resolve    > a::before{background:#f1e8dc}
  .nav .links .seq-cat-regain     > a::before{background:#d48057}
  .nav .links .seq-cat-restore    > a::before{background:#291a14}

  /* --- Protocol cards: link + hover ------------------------------------
     The six cards in #protocols are anchors to their product_cat archive
     (built in home.js). Each carries its own --stripe, set inline from the
     PRODUCTS table, so the hover accent is the protocol's own colour rather
     than one shared highlight. Replaces the old bare 3px lift.           */
  .proto-cell{text-decoration:none;color:inherit;position:relative;overflow:hidden;
    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
  .proto-cell::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;
    background:var(--stripe,var(--hairline));transition:width .45s ease;z-index:2}
  .proto-cell:hover,.proto-cell:focus-visible{
    transform:translateY(-6px);
    border-color:var(--stripe,var(--hairline));
    box-shadow:0 20px 44px rgba(42,26,20,.16)}
  .proto-cell:hover::before,.proto-cell:focus-visible::before{width:100%}
  .proto-cell:focus-visible{outline:2px solid var(--stripe,var(--on-cream));outline-offset:3px}
  .proto-cell .vial-wrap svg{transition:transform .45s ease}
  .proto-cell:hover .vial-wrap svg{transform:scale(1.045)}
  .proto-cell .go{display:flex;align-items:center;gap:7px;margin-top:12px;
    font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-cream-2);
    opacity:0;transform:translateY(4px);
    transition:opacity .3s ease,transform .3s ease}
  .proto-cell:hover .go,.proto-cell:focus-visible .go{opacity:1;transform:translateY(0)}
  .proto-cell .go span{transition:transform .3s ease}
  .proto-cell:hover .go span{transform:translateX(3px)}

  /* Touch devices have no hover, so the affordance is always visible. */
  @media (hover:none){
    .proto-cell .go{opacity:1;transform:none}
  }

  /* Two of the six stripe colours — revive (#d8cbb0) and resolve (#f1e8dc) —
     are near-white, which is correct on the vial label but invisible as a
     hover accent on the cream card. Those two fall back to a darker tone of
     the same family so the hover reads on every card. */
  .proto-cell{--accent:var(--stripe,var(--hairline))}
  .proto-cell[data-cat="revive"]{--accent:#9C8A6B}
  .proto-cell[data-cat="resolve"]{--accent:#B09884}
  .proto-cell::before{background:var(--accent)}
  .proto-cell:hover,.proto-cell:focus-visible{border-color:var(--accent)}
  .proto-cell:focus-visible{outline-color:var(--accent)}

/* --- Real photography: value cards and protocol vials ---------------- */
  .value .vphoto.has-img{background:#3E2A22}
  .value .vphoto.has-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .value:hover .vphoto.has-img img{transform:scale(1.04)}
  .value .vphoto.has-img::after{opacity:.45}
  .proto-cell .vial-wrap img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
  .proto-cell:hover .vial-wrap img{transform:scale(1.045)}

/* --- Before / after photographs -------------------------------------- */
  .testi .ba.has-img{background:#3E2A22}
  .testi .ba.has-img img{width:100%;height:100%;object-fit:cover;display:block}
  .testi .ba.has-img::after{opacity:.35}
  .testi .ba.has-img .lbl{z-index:2;padding:4px 8px;border-radius:999px;background:rgba(28,17,12,.6);backdrop-filter:blur(6px)}