/*
  theWaveMatrix landing pages (template "landing")
  Source: wavegenome/site/second-birth-generator.html (prototype v2), clinical / instrument-grade look.
  Re-theme via the variables in :root. Fonts are self-hosted (no Google Fonts requests).
*/

@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}

:root{
  /* ---- THEME (clinical / scientific) ---- */
  --bg:       #FFFFFF;
  --bg-alt:   #F3F5F6;   /* cool light gray panel */
  --panel:    #FAFBFB;
  --ink:      #14181B;   /* near-black */
  --ink-soft: #5C656B;   /* cool gray text */
  --line:     #E2E7E9;   /* cool hairline */
  --accent:   #B08D57;   /* primary, gold / brass */
  --accent-dk:#8A6A39;
  --deep:     #0E1416;   /* near-black section */
  --on-deep:  #D8E0DF;
  --display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw:1200px;
  --pad:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h2 + p{margin-top:1rem} /* sections without an own rule (.text, .order-intro) sat at 0px under the heading */
h3{font-size:clamp(1.05rem,1.6vw,1.25rem);letter-spacing:0}
p{max-width:60ch;color:var(--ink-soft)}
p + p{margin-top:1rem}
a{color:inherit;text-decoration:none}
strong{color:var(--ink);font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.text p a:not(.btn){color:var(--accent-dk);text-decoration:underline}

/* technical eyebrow: 01, LABEL */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-dk);margin-bottom:1.1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:attr(data-n);color:var(--ink);opacity:.4}
.section-deep .eyebrow{color:var(--accent)}
.section-deep .eyebrow::before{color:var(--on-deep)}
.center .eyebrow{justify-content:center}

.btn{display:inline-block;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.95rem 1.9rem;border:1px solid var(--ink);color:var(--ink);
  background:transparent;cursor:pointer;transition:.2s;font-weight:500;border-radius:0}
.btn:hover{background:var(--ink);color:#fff}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-light{border-color:rgba(216,224,223,.5);color:var(--on-deep)}
.btn-light:hover{background:var(--on-deep);color:var(--deep)}

/* figures */
figure{margin:0}
.photo{display:block;width:100%;height:auto;object-fit:cover;border:1px solid var(--line)}
figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.7rem;display:flex;gap:.6rem}
figcaption b{color:var(--accent-dk);font-weight:500}
.ar-portrait{aspect-ratio:4/5}.ar-square{aspect-ratio:1/1}.ar-wide{aspect-ratio:16/10}.ar-tall{aspect-ratio:3/4}

/* ---- utility bar ---- */
.util{background:var(--deep);color:var(--on-deep);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
.util a{color:var(--on-deep);opacity:.8}.util a:hover{opacity:1;color:#fff}
.util .right{display:flex;gap:1.4rem}
.util .lang a.active{font-weight:700;opacity:1}
@media(max-width:640px){.util .partner{display:none}.util .wrap{justify-content:flex-end}}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:86px}
.logo-img{height:46px;width:auto;display:block}
.nav-links{display:flex;gap:2.1rem;align-items:center;font-size:.8rem;letter-spacing:.04em}
.nav-links a{color:var(--ink-soft);transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent-dk)}
.nav-links .nav-cta{font-size:.72rem;padding:.7rem 1.3rem;color:var(--ink)}
.nav-links .nav-cta:hover{color:#fff}
/* burger: two bars that morph into an X while the menu is open (as on AFC) */
.burger{display:none;position:relative;width:32px;height:32px;padding:0;background:none;border:none;cursor:pointer;color:var(--ink)}
.burger-bar{position:absolute;left:1px;width:30px;height:2px;border-radius:1px;background:currentColor;transition:top .3s ease,transform .3s ease}
.burger-bar:nth-child(1){top:11px}
.burger-bar:nth-child(2){top:19px}
.burger[aria-expanded="true"] .burger-bar:nth-child(1){top:15px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-bar:nth-child(2){top:15px;transform:rotate(-45deg)}
@media(max-width:880px){
  .burger{display:block}.logo-img{height:40px}
  /* menu panel: always in the layout, hidden by opacity / slide; visibility delayed so it fades out before vanishing */
  .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:1.1rem;padding:1.4rem var(--pad) 1.8rem;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -18px rgba(14,20,22,.25);
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s}
  .site-header.open .nav-links{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .3s ease,visibility 0s}
  /* links follow one after another */
  .nav-links > a{opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .25s ease,color .2s}
  .site-header.open .nav-links > a{opacity:1;transform:none}
  .site-header.open .nav-links > a:nth-child(1){transition-delay:.05s}
  .site-header.open .nav-links > a:nth-child(2){transition-delay:.09s}
  .site-header.open .nav-links > a:nth-child(3){transition-delay:.13s}
  .site-header.open .nav-links > a:nth-child(4){transition-delay:.17s}
  .site-header.open .nav-links > a:nth-child(5){transition-delay:.21s}
  .site-header.open .nav-links > a:nth-child(6){transition-delay:.25s}
}
@media(max-width:880px) and (prefers-reduced-motion:reduce){
  .nav-links,.nav-links > a,.burger-bar{transition-duration:.01ms !important;transition-delay:0s !important;transform:none !important}
}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(44px,7vw,86px) 0}
.hero.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.hero h1{margin:.5rem 0 1.3rem}
.hero p{font-size:1.08rem;margin-bottom:2rem;max-width:46ch}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.center .btn-row{justify-content:center} /* flex ignores text-align: centred sections centre their buttons here */
.specline{display:flex;gap:2rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);flex-wrap:wrap}
.specline b{display:block;color:var(--ink);font-family:var(--display);font-size:1.05rem;letter-spacing:0;margin-top:.2rem}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero figure{order:-1}}

/* ---- sections ---- */
section{padding:clamp(56px,8vw,108px) 0}
.section-alt{background:var(--bg-alt)}
.section-deep{background:var(--deep);color:var(--on-deep)}
.section-deep h2,.section-deep h3{color:#fff}
.section-deep p{color:var(--on-deep);opacity:.82}
.section-deep strong{color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:30px}.two.img-right figure{order:-1}}
.center{max-width:720px;margin:0 auto;text-align:center}
.center p{margin:1.2rem auto 0}

/* ---- spec sheet ---- */
.spec{margin-top:2.4rem;border-top:1px solid var(--line)}
.spec .row{display:grid;grid-template-columns:230px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.spec dd{color:var(--ink);font-size:.98rem}
@media(max-width:560px){.spec .row{grid-template-columns:1fr;gap:.2rem}}

/* ---- pricing / configurations ---- */
.cfg{margin-top:2.6rem;border:1px solid var(--line)}
.cfg .r{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:1rem;padding:1.15rem 1.5rem;
  border-bottom:1px solid var(--line);align-items:center}
.cfg .r:last-child{border-bottom:0}
.cfg .head{background:var(--panel);font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.cfg .nm{font-weight:500;color:var(--ink)}
.cfg .nm small{display:block;color:var(--ink-soft);font-weight:400;font-size:.84rem;margin-top:.15rem}
.cfg .amt{font-family:var(--display);font-size:1.2rem;color:var(--ink)}
.cfg .mat{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:640px){.cfg .r{grid-template-columns:1fr;gap:.3rem}.cfg .head{display:none}}
.price-note{margin-top:1.5rem;font-size:.9rem}

/* ---- enquiry form (YForm, bootstrap template markup) ---- */
.landing-form{max-width:840px;margin:0 auto}
.landing-form form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.4rem}
.landing-form .form-group:has(textarea),
.landing-form .form-group:has(button),
.landing-form .checkbox,
.landing-form .alert{grid-column:1/-1}
.landing-form label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-deep);margin-bottom:.45rem;opacity:.8}
.landing-form input:not([type=checkbox]),.landing-form select,.landing-form textarea{width:100%;padding:.85rem .95rem;
  border:1px solid rgba(216,224,223,.28);background:rgba(255,255,255,.05);color:var(--on-deep);
  font-family:var(--sans);font-size:.95rem;border-radius:0}
.landing-form input::placeholder,.landing-form textarea::placeholder{color:rgba(216,224,223,.45)}
.landing-form select option{color:#222}
.landing-form textarea{min-height:120px;resize:vertical}
.landing-form .checkbox label{display:flex;gap:.7rem;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-family:var(--sans);font-size:.85rem;opacity:.85}
.landing-form .checkbox input{margin-top:.25rem;accent-color:var(--accent)}
.landing-form .checkbox a:not(.btn){text-decoration:underline}
.landing-form .help-block{font-size:.8rem;color:#e6a07a;margin-top:.35rem}
.landing-form .has-error input,.landing-form .has-error select,.landing-form .has-error textarea{border-color:#e6a07a}
.landing-form button[type=submit]{display:inline-block;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.95rem 1.9rem;border:1px solid rgba(216,224,223,.5);color:var(--on-deep);
  background:transparent;cursor:pointer;transition:.2s;font-weight:500;border-radius:0}
.landing-form button[type=submit]:hover{background:var(--on-deep);color:var(--deep)}
.landing-form .alert{padding:1rem 1.2rem;border:1px solid rgba(216,224,223,.28);font-size:.9rem}
.landing-form .alert-danger{border-color:#e6a07a;color:#f2c2a8}
.landing-form .alert ul{margin-left:1.2rem}
.landing-form [id$="-website"]{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.landing-form .help-block .text-warning{color:#e6a07a}
.form-thanks{margin-top:2.4rem;padding:1.6rem;border:1px solid var(--accent);color:var(--on-deep)}
@media(max-width:680px){.landing-form form{grid-template-columns:1fr}}

/* ---- order request (add-on wavematrix_orders): intro + steps left, form right ---- */
.order-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.order-grid .landing-form{max-width:none;margin:0}
.order-grid .landing-form form{margin-top:0}
.order-steps{list-style:none;margin:2rem 0 0;counter-reset:ostep;border-top:1px solid rgba(216,224,223,.2)}
.order-steps li{counter-increment:ostep;display:grid;grid-template-columns:2.6rem 1fr;padding:1rem 0;border-bottom:1px solid rgba(216,224,223,.2)}
.order-steps li::before{content:counter(ostep,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;color:var(--accent);padding-top:.2rem;grid-row:span 2}
.order-steps b{font-family:var(--display);font-weight:500;color:#fff}
.order-steps span{font-size:.9rem;opacity:.8}
.order-partner{margin-top:1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.order-form .wide,.order-form .order-price{grid-column:1/-1}
.order-form .wm-options{display:contents;border:0;margin:0;padding:0}
.order-form .wm-options[hidden],.order-form .order-price[hidden]{display:none}
.order-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;padding:.9rem 1rem;border:1px solid rgba(176,141,87,.5);background:rgba(176,141,87,.08)}
.order-price span{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;opacity:.8}
.order-price b{font-family:var(--display);font-size:1.5rem;font-weight:500;color:#fff}
.order-price small{font-size:.8rem;opacity:.65}
.order-form button[type=submit]{width:100%;background:var(--accent);border-color:var(--accent);color:#fff;padding:1.1rem 1.9rem}
.order-form button[type=submit]:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
.order-assure{margin-top:.9rem;font-size:.88rem;opacity:.85}
.order-privacy{margin-top:.5rem;font-size:.78rem;opacity:.6}
.order-privacy a:not(.btn){text-decoration:underline}
.wm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:900px){.order-grid{grid-template-columns:1fr}}

/* ---- thank-you page ---- */
.thanks h1{margin:.4rem 0 1rem}
.thanks .lead{max-width:640px;font-size:1.15rem}
.thanks-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin-top:2.4rem;background:var(--line);border:1px solid var(--line)}
.thanks-summary div{background:var(--bg);padding:1rem 1.2rem}
.thanks-summary dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
.thanks-summary dd{font-family:var(--display);font-size:1.05rem}
.steps.four{grid-template-columns:repeat(4,1fr);margin-top:1.6rem}
.steps li.done{border-color:var(--accent)}
.steps li.done::before{content:"✓ " counter(step,decimal-leading-zero)}
.thanks-note{margin-top:2rem;color:var(--ink-soft);font-size:.92rem}
.thanks-note a:not(.btn){text-decoration:underline}
.thanks-links{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem}
@media(max-width:1000px){.steps.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps.four{grid-template-columns:1fr}}

/* ---- footer ---- */
.site-footer{background:#0A0F10;color:#9FA8A7;font-size:.9rem;padding:clamp(46px,7vw,80px) 0 2.2rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:2.6rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:26px}}
.site-footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem;font-weight:500}
.site-footer a{color:#9FA8A7;display:block;margin-bottom:.5rem;transition:.2s}
.site-footer a:hover{color:var(--accent)}
.site-footer .foot-about{color:#9FA8A7;font-size:.85rem;max-width:42ch}
.site-footer .foot-logo{height:40px;width:auto;filter:brightness(0) invert(1);margin-bottom:1.2rem}
.disclaimer{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;font-size:.76rem;
  color:#727a79;line-height:1.6;max-width:none;font-family:var(--mono);letter-spacing:.02em}
.disclaimer a{display:inline;margin:0;color:#9FA8A7}

/* ================= site-wide patterns (relaunch 2026) ================= */

/* ---- page hero, text only (from the-science.html) ---- */
.phero{padding-top:clamp(44px,7vw,90px);padding-bottom:clamp(30px,4vw,50px)}
.phero h1{margin:.4rem 0 1.2rem;max-width:18ch}
.phero p{font-size:1.12rem;max-width:54ch;margin-bottom:2rem}
.phero .hero-cta{margin-top:0}

/* ---- legal / long text pages ---- */
.legal{padding-top:0}
.prose{max-width:760px}
.prose h2{font-size:1.35rem;margin:2.4rem 0 .8rem}
.prose h3{font-size:1.1rem;margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--ink-soft);line-height:1.7}
.prose p+p{margin-top:.9rem}
.prose ul,.prose ol{margin:.8rem 0 .8rem 1.3rem}
.prose a:not(.btn){text-decoration:underline}
.prose .lead{font-size:1.1rem;color:var(--ink)}

/* ---- intro band ---- */
.intro{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intro p{max-width:78ch;font-size:1.1rem;color:var(--ink)}

/* ---- explainer step: text + analogy + diagram (from the-science.html) ---- */
.step h2{margin:.3rem 0 1rem}
.analogy{margin-top:1.5rem;padding:1rem 1.2rem;border-left:2px solid var(--accent);background:var(--panel)}
.analogy span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:.4rem}
.analogy em{color:var(--ink);font-style:italic}
.diagram{display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);aspect-ratio:4/3;padding:clamp(18px,3vw,34px);color:var(--ink)}
.diagram svg{width:100%;height:auto;max-height:260px}
.diagram .ln{stroke:currentColor;fill:none;stroke-width:1.4}
.diagram .acc{stroke:var(--accent);fill:none;stroke-width:1.6}
.diagram .accf{fill:var(--accent)}
.diagram .dash{stroke-dasharray:3 4}
.diagram text{font-family:var(--mono);font-size:11px;fill:var(--ink-soft);letter-spacing:.08em}
.diagram .big{font-family:var(--display);font-size:24px;fill:var(--ink)}

/* ---- section head (eyebrow + h2 + lead, above a grid) ---- */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.sec-head p{margin:0}
@media(max-width:820px){.sec-head{grid-template-columns:1fr}}

/* ---- pillars: 3 numbered columns ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.pillar{border-top:1px solid var(--ink);padding-top:1.3rem}
.pillar .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent-dk)}
.pillar h3{margin:.8rem 0 .7rem}
.section-deep .pillar{border-top-color:rgba(216,224,223,.35)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* ---- product cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2vw,28px)}
.card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);transition:.25s}
.section-alt .card{background:#fff}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .photo{border:0;border-bottom:1px solid var(--line);aspect-ratio:1/1;background:var(--panel)}
.card .body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.5rem}
.card p{font-size:.92rem;flex:1}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.card .meta b{color:var(--ink);font-family:var(--display);font-size:1rem;letter-spacing:0;text-transform:none;font-weight:500}
.card .more{color:var(--accent-dk)}
.cards.duo{grid-template-columns:1fr 1fr}
.cards.duo .card .photo{aspect-ratio:1/1;object-position:center top}
.cards.duo .card h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.cards.duo .card .spec{margin-top:1.2rem}
.cards.duo .card .spec .row{grid-template-columns:120px 1fr;padding:.6rem 0}
@media(max-width:720px){.cards.duo{grid-template-columns:1fr}}
.eyebrow a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.cards.wide .card:first-child{grid-column:span 2}
@media(max-width:560px){.cards.wide .card:first-child{grid-column:auto}}

/* ---- quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.quote{padding:1.6rem;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:1.2rem}
.quote blockquote{font-family:var(--display);font-size:1.2rem;line-height:1.35;color:var(--ink)}
.quote cite{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.placeholder{outline:1px dashed #c96;outline-offset:4px}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

/* ---- featured quote ---- */
.quote-feature{max-width:860px}
.quote-feature blockquote{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.section-deep .quote-feature blockquote{color:#fff}
.quote-feature cite{display:block;margin-top:1.4rem;font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk)}
.section-deep .quote-feature cite{color:var(--accent)}
.quote .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk)}
.quotes.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.quotes.six{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.quotes.six{grid-template-columns:1fr}}

/* ---- timeline (year + text) ---- */
.timeline{list-style:none;border-top:1px solid var(--line);margin-top:2rem}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.timeline .yr{font-family:var(--display);font-size:1.15rem;color:var(--accent-dk)}
.timeline li p{max-width:none}
.timeline strong{display:block;margin-bottom:.2rem}

/* ---- publication list ---- */
.pubs{list-style:none;columns:2;column-gap:clamp(24px,4vw,56px);margin-top:2.2rem}
.pubs li{break-inside:avoid;padding:1rem 0;border-top:1px solid var(--line)}
.pubs .yr{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent-dk)}
.pubs .t{display:block;margin:.3rem 0 .25rem;color:var(--ink);font-weight:500;line-height:1.35}
.pubs .v{display:block;font-size:.86rem;color:var(--ink-soft)}
@media(max-width:820px){.pubs{columns:1}}

/* ---- numbered steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);counter-reset:step;list-style:none}
.steps li{counter-increment:step;padding:1.6rem;border:1px solid var(--line);background:var(--bg)}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent-dk);margin-bottom:1rem}
.steps h3{margin-bottom:.6rem}
.section-deep .steps li{background:transparent;border-color:rgba(216,224,223,.2)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ---- CTA band ---- */
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band h2{max-width:22ch}
.cta-band p{margin-top:.8rem}

/* ---- contact details ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,72px);align-items:start}
.contact-grid .spec{margin-top:1.6rem}
.contact-grid .spec .row{grid-template-columns:140px 1fr}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---- supplement facts panel (Tesla Selenium; FDA label style) ---- */
.facts{border:2px solid var(--ink);padding:.9rem 1.1rem 1rem;background:#fff;color:var(--ink);max-width:440px;margin-top:2rem}
.facts h3{font-family:var(--sans);font-weight:700;font-size:1.9rem;letter-spacing:-.01em;line-height:1;margin-bottom:.4rem}
.facts .serving{font-size:.86rem;padding-bottom:.5rem;border-bottom:10px solid var(--ink)}
.facts table{width:100%;border-collapse:collapse;font-size:.88rem}
.facts th,.facts td{text-align:left;padding:.4rem 0;border-bottom:1px solid var(--ink)}
.facts th:last-child,.facts td:last-child{text-align:right}
.facts thead th{font-size:.74rem;font-weight:700;border-bottom:4px solid var(--ink)}
.facts .note{font-size:.74rem;margin-top:.6rem;color:var(--ink);max-width:none}

/* ---- range table (product line with several versions and pack prices) ---- */
.table-scroll{overflow-x:auto;margin-top:2.4rem;border:1px solid var(--line);background:#fff}
.range{width:100%;min-width:720px;border-collapse:collapse;font-size:.92rem}
.range th,.range td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.range thead th{background:var(--panel);font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.range td.num,.range th.num{text-align:right;white-space:nowrap}
.range td.num{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.range .nm{font-weight:500;color:var(--ink);white-space:nowrap}
.range .nm small{display:block;font-weight:400;color:var(--ink-soft);font-size:.8rem;margin-top:.15rem;white-space:normal}
.range td{color:var(--ink-soft)}
.range tr.featured td{background:rgba(176,141,87,.08)}
.range tr.featured .nm::after{content:"Featured";margin-left:.6rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent);padding:.15rem .4rem;vertical-align:middle}
.range tbody tr:last-child td{border-bottom:0}

/* ---- element tile: typographic hero where no product photo exists (Tesla Selenium) ---- */
.element{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:4/5;
  background:var(--deep);color:var(--on-deep);border:1px solid var(--line);overflow:hidden}
.element::before{content:"";position:absolute;inset:8%;border:1px solid rgba(176,141,87,.45)}
.element .z{position:absolute;top:12%;left:13%;font-family:var(--mono);font-size:.9rem;letter-spacing:.1em;color:var(--accent)}
.element .m{position:absolute;top:12%;right:13%;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;opacity:.7}
.element .sym{font-family:var(--display);font-weight:500;font-size:clamp(5rem,13vw,9.5rem);line-height:1;color:#fff;letter-spacing:-.03em}
.element .sym sup{font-size:.32em;color:var(--accent);vertical-align:top;position:relative;top:.35em;margin-left:.05em}
.element .nm{margin-top:1rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}
.element .tag{position:absolute;bottom:12%;left:13%;right:13%;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.fig-small{max-width:360px}

/* ---- prototype only: missing image ---- */
.photo-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1.5rem;text-align:center;
  background:repeating-linear-gradient(135deg,var(--panel) 0 12px,var(--bg-alt) 12px 24px);border:1px dashed #c96;
  color:var(--ink-soft);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.photo-ph b{color:var(--accent-dk);font-weight:500}

/* ---- page bar: floating main navigation (desktop), the footer keeps room for it ---- */
.page-bar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:99;display:flex;gap:.2rem;padding:.35rem;
  background:var(--deep);border-radius:2px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.page-bar{white-space:nowrap;max-width:calc(100vw - 24px)}
.page-bar a{color:var(--on-deep);padding:.45rem .7rem;white-space:nowrap}
.page-bar a.active,.page-bar a:hover{background:var(--accent);color:#fff}
@media(max-width:820px){.page-bar{display:none}}
@media(min-width:821px){.site-footer{padding-bottom:5rem}}

/* hidden only when JS is there to reveal it (html.js, set inline in the head) */
.js .reveal{opacity:0;transform:translateY(20px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---- preloader (as on AFC, components/_preloader.scss): white veil until the eager images are in, driven by
   landing.js. Critical part (veil, .js gate) is inline in the template head. ---- */
.preloader{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:#fff;
  transition:opacity .45s cubic-bezier(.45,0,.55,1),visibility 0s linear .45s}
.js .preloader{display:flex}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;opacity:0;transition:opacity .25s ease}
.preloader.is-loading .preloader__inner{opacity:.8}
.preloader__logo{display:block;width:auto;height:40px}
@media(min-width:768px){.preloader__logo{height:48px}}
.preloader__bar{position:relative;width:160px;max-width:60vw;height:2px;overflow:hidden;background:var(--line);border-radius:999px}
.preloader__bar-fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;background:var(--accent);border-radius:inherit;transition:transform .3s ease}
@media(prefers-reduced-motion:reduce){.preloader,.preloader__inner,.preloader__bar-fill{transition:none}}
/* cookie banner only after the preloader: hidden until landing.js sets html.is-ready on reveal, then it fades in
   ("div." to outrank the theme's div.consent_manager-background) */
div.consent_manager-background{transition:opacity .4s ease}
.js:not(.is-ready) div.consent_manager-background{opacity:0;visibility:hidden}

/* ---- cookie settings button, bottom left (as on AFC, _consent-toggle.scss): gold, dark icon, label on hover.
   Opens the consent box via the add-on's own .consent_manager-show-box, no script here. ---- */
.consent-toggle{position:fixed;left:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:0;border:0;border-radius:9999px;background-color:var(--accent);color:var(--deep);
  cursor:pointer;opacity:.7;transition:opacity .3s ease,background-color .2s ease}
/* desktop: clear of the floating page bar (bottom 12px, ~42px high) */
@media(min-width:821px){.consent-toggle{left:40px;bottom:72px}}
.consent-toggle svg{display:block;width:24px;height:24px}
.consent-toggle:hover,.consent-toggle:focus-visible{opacity:1}
/* dark ring: a gold one would vanish on the gold button */
.consent-toggle:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.consent-toggle__label{position:absolute;left:100%;margin-left:10px;padding:6px 12px;border-radius:9999px;
  background-color:var(--deep);color:#fff;font-family:var(--sans);font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.consent-toggle:hover .consent-toggle__label,.consent-toggle:focus-visible .consent-toggle__label{opacity:1;transform:translateX(0)}
/* while the box is open the button has nothing to do (and would sit underneath it) */
body:has(.consent_manager-background:not(.consent_manager-hidden)) .consent-toggle{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.consent-toggle,.consent-toggle__label{transition:opacity .3s ease;transform:none}}