:root {
  
  --ms-forest: #278c44; 

  
  --ms-ink: #231f20; 
  --ms-ink-muted: #6a6264; 
  --ms-ink-muted-rev: #b0aaac; 
  --ms-line: #dfdddd; 
  --ms-surface: #f6f6f6; 
  --ms-white: #ffffff;

  
  
  --ms-forest-text: #1e6e36; 

  
  --ms-index: #6a6264;      
  --ms-index-name: #231f20; 
  --ms-forest-rev: #2b9a4b; 
  --ms-forest-dark: #12401f; 

  
  --ms-red-text: #dd362d; 
  --ms-gold-text: #9e6d01; 

  
  --ms-screw-red: #de3930; 
  --ms-screw-green: #007b4e; 
  --ms-screw-gold: #fdb517; 
  --ms-screw-navy: #2a3688; 

  
  --ms-tint-forest: #e9f3ec; 
  --ms-tint-red: #fcebea;
  --ms-tint-gold: #fff8e8;
  --ms-tint-navy: #eaebf3;

  
  --ms-font-sans: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  
  --ms-font-spec: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  
  --ms-fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --ms-fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --ms-fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --ms-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --ms-fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --ms-fs-body: 1.0625rem; 
  --ms-fs-small: 0.9375rem; 
  --ms-fs-eyebrow: 0.75rem; 

  
  --ms-fw-light: 300;
  --ms-fw-regular: 400;
  --ms-fw-semibold: 600;
  --ms-fw-extrabold: 800;

  
  --ms-track-display: -0.03em;
  --ms-track-heading: -0.02em;
  --ms-track-eyebrow: 0.14em;

  
  --ms-lh-display: 1.15;
  --ms-lh-heading: 1.25;
  --ms-lh-body: 1.65;

  
  --ms-measure: 34em;

  
  --ms-sp-1: 0.5rem;
  --ms-sp-2: 0.75rem;
  --ms-sp-3: 1rem;
  --ms-sp-4: 1.5rem;
  --ms-sp-5: 2rem;
  --ms-sp-6: 3rem;
  --ms-sp-7: 4.5rem;
  --ms-sp-8: 6rem;
  --ms-sp-9: 9rem;

  
  --ms-section-y: var(--ms-sp-6);

  
  --ms-content-max: 1240px;
  --ms-gutter: 1rem;

  
  --ms-radius-control: 4px;
  --ms-radius-card: 8px;
  --ms-radius-panel: 0;

  
  --ms-shadow: 0 1px 3px rgba(22, 29, 24, 0.08), 0 8px 24px rgba(22, 29, 24, 0.06);

  
  --ms-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms-dur-micro: 180ms;
  --ms-dur-reveal: 500ms;
  --ms-dur-spine: 900ms;

  
  --ms-focus-ring: 2px;
  --ms-focus-offset: 2px;
  --ms-focus-color: var(--ms-forest-text);

  
  --ms-target-min: 44px;
}

@media (min-width: 768px) {
  :root {
    --ms-gutter: 1.5rem;
    --ms-section-y: var(--ms-sp-8);
  }
}
:root{--void:#090809;--deep:#121010;--raise:#1C191A;--edge:#2F2A2B;--bone:#F5F2F3;--bone-soft:#D0C8CA;--bone-dim:#A4989B;--forest-rev:#2B9A4B;--gold:#B09000;--lamp-rgb:214,228,238;--display:'Chivo',-apple-system,'Segoe UI',sans-serif;--sans:'Raleway',-apple-system,'Segoe UI',sans-serif;--spec:'DM Mono',ui-monospace,Consolas,monospace;}
/* ==========================================================================
   MZANZI SPINE -- the website. A Wix-managed Headless static site (L39): Wix hosts this
   file exactly as built, so what renders in a browser here is what renders live.

   Written first for a Figma import (M67), which is why it is plain flex/grid with no
   pseudo-elements or filters. That constraint is gone; the discipline is worth keeping.

   Colours are tokens only. The dark tokens are generated into :root by build.py
   from Brand Refresh 2026/build/brand.py; the light ones are
   design-system/src/styles/tokens.css. No hex is typed here.
   ========================================================================== */
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 64px}
@media (max-width:900px){ .container{padding:0 24px} }

/* ---- Type ---- */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow-rule{width:26px;height:1px;background:var(--forest-rev)}
.eyebrow-text{font-family:var(--spec);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim)}
.page-title{font-family:var(--display);font-weight:900;font-size:64px;line-height:1.02;
  letter-spacing:-.028em;color:var(--bone)}
.lead{font-size:20px;line-height:1.55;color:var(--bone-soft);max-width:640px}
.section-title{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.08;
  letter-spacing:-.022em;color:var(--bone)}
.body-text{font-size:17px;line-height:1.7;color:var(--bone-soft)}
.tk{color:var(--gold)}
@media (max-width:900px){ .page-title{font-size:42px} .section-title{font-size:30px} .lead{font-size:18px} }

/* ---- Buttons ---- */
.button-row{display:flex;flex-wrap:wrap;gap:12px}
.button-primary{font-size:15px;font-weight:600;background:var(--forest-rev);color:var(--void);
  padding:13px 22px;border-radius:5px}
.button-secondary{font-size:15px;font-weight:600;color:var(--bone);padding:12px 21px;
  border:1px solid var(--edge);border-radius:5px}
.text-link{font-family:var(--spec);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest-rev)}
/* A navigational link is a button and says so (Louis, 14 Sep): See the range, Ask about, More about us.
   .text-link stays for cross-references inside a sentence. */
.button-secondary{transition:border-color .3s ease,color .3s ease}
.button-secondary:hover{border-color:rgba(var(--lamp-rgb),.34);color:var(--forest-rev)}
.card-link{align-self:flex-start;display:inline-flex;align-items:center;gap:10px}
.card-link__arrow{font-family:var(--spec);line-height:1}

/* ---- Sections ---- */
.section{padding-top:104px;padding-bottom:104px;border-top:1px solid var(--edge)}
.section-void{background:var(--void)}
.section-deep{background:var(--deep)}
.section-head{display:flex;flex-direction:column;gap:16px;max-width:720px;margin-bottom:48px}
@media (max-width:900px){ .section{padding-top:64px;padding-bottom:64px} .section-head{margin-bottom:32px} }

/* ---- Header ---- */
:root{--header-h:69px}
/* Slim glass header, always in reach (shared kit, 13 Sep): the page slides under it. */
.header{position:sticky;top:0;z-index:50;background:rgba(9,8,9,.66);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(var(--lamp-rgb),.08);transition:background .3s ease}
.header.is-scrolled{background:rgba(9,8,9,.84)}
.header-inner{display:flex;align-items:center;gap:32px;padding-top:14px;padding-bottom:14px}
.header-logo{height:40px;width:auto}
.header-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.header-link{font-size:15px;color:var(--bone-soft)}
.header-link-current{color:var(--bone);font-weight:600}
@media (max-width:900px){ .header-link{display:none} }

/* ---- The phone menu (14 Sep): under 900 px the links open in a glass sheet under the header.
   Before this a phone had no navigation but the footer. The header's own quote button shrinks to fit. ---- */
.header-menu{display:none;flex:none;font-family:var(--spec);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);background:none;border:1px solid var(--edge);border-radius:999px;padding:9px 14px;cursor:pointer;
  transition:color .3s ease,border-color .3s ease}
.header-menu[aria-expanded="true"]{color:var(--forest-rev);border-color:rgba(var(--lamp-rgb),.26)}
.menu{display:flex;flex-direction:column;gap:2px;padding:14px 22px 22px}
.menu-link{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.3;letter-spacing:-.02em;color:var(--bone-soft);
  padding:10px 0;border-bottom:1px solid rgba(var(--lamp-rgb),.09)}
.menu-link-current{color:var(--bone)}
.menu-quote{align-self:flex-start;margin-top:20px}
html.menu-open{overflow:hidden}
@media (max-width:900px){
  .header-inner{gap:12px}
  .header-nav{gap:10px}
  .header-nav .button-primary{padding:10px 14px;font-size:14px}
  .header-menu{display:inline-block}
}
@media (min-width:901px){ .menu{display:none} }

/* ---- Hero: the lamp (L31) is the one lighting device, as a gradient ---- */
.hero{background-color:var(--void);
  background-image:radial-gradient(52% 70% at 72% 40%, rgba(var(--lamp-rgb),.09), rgba(var(--lamp-rgb),0) 72%);
  padding-top:120px;padding-bottom:120px}
.hero-inner{display:flex;flex-direction:column;gap:28px;max-width:760px}
.hero-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center}
.hero-figure{display:flex;justify-content:center}
.hero-spine{height:560px;width:auto;max-width:none}
@media (max-width:900px){
  .hero{padding-top:64px;padding-bottom:64px}
  .hero-split{grid-template-columns:1fr;gap:40px}
  .hero-spine{height:360px}
}

/* ---- Range rows (home): the numbered index is L13's, and L18 allows it here ---- */
.range-list{display:flex;flex-direction:column;border-top:1px solid var(--edge)}
.range-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:40px;
  padding-top:40px;padding-bottom:40px;border-bottom:1px solid var(--edge);align-items:start}
.range-index{display:flex;flex-direction:column;gap:6px}
.range-number{font-family:var(--spec);font-size:13px;font-weight:500;color:var(--forest-rev)}
.range-level{font-family:var(--spec);font-size:12px;letter-spacing:.08em;color:var(--bone-dim)}
.range-copy{display:flex;flex-direction:column;gap:14px}
.range-name{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;
  letter-spacing:-.02em;color:var(--bone)}
/* Lit product images carry their own light margin (lighting.py), so they are set larger
   than the object and overlap slightly: the glows meet instead of sitting in two boxes. */
.range-media{display:flex;align-items:center;gap:0;height:180px}
.range-image{height:180px;width:auto}
.spec-list{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--edge)}
.spec-item{font-family:var(--spec);font-size:12px;line-height:1.8;color:var(--bone-dim)}
.spec-strong{font-weight:500;color:var(--bone-soft)}
/* a product name or a code never breaks mid-word ("Cedix-P" lost its P on a phone, 14 Sep) */
.spec-strong,[data-product]{white-space:nowrap}
@media (max-width:900px){
  .range-row{grid-template-columns:1fr;gap:20px}
  .range-media{height:auto}
  .range-image{height:140px}
}

/* ---- Credentials ---- */
.credentials{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge)}
.credential{display:flex;flex-direction:column;gap:4px;padding:26px 20px 26px 0}
/* each credential carries its mark in the lamp's green, so the strip reads as four badges (Louis, 14 Sep) */
.credential-icon{width:28px;height:28px;color:var(--forest-rev);margin-bottom:8px}
.credential-icon svg{display:block;width:100%;height:100%}
.credential-name{font-family:var(--spec);font-size:14px;font-weight:500;color:var(--bone)}
.credential-detail{font-family:var(--spec);font-size:12px;color:var(--bone-dim)}
@media (max-width:900px){ .credentials{grid-template-columns:1fr 1fr} }

/* ---- Two-column intro (home, who) ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:72px;align-items:start}
.split-copy{display:flex;flex-direction:column;gap:20px;max-width:640px}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:40px} }

/* ---- Hairline rows: partners, ways to get in touch ---- */
.row-list{display:flex;flex-direction:column;border-top:1px solid var(--edge)}
.row-item{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 24px;
  padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--edge);align-items:baseline}
.row-name{font-size:16px;font-weight:600;color:var(--bone)}
.row-detail{font-family:var(--spec);font-size:12px;letter-spacing:.04em;color:var(--bone-dim)}
@media (max-width:640px){ .row-item{grid-template-columns:1fr} }

/* ---- Founder (about) ---- */
.founder-grid{display:grid;grid-template-columns:320px 1fr;gap:72px;align-items:start}
.founder-figure{display:flex;flex-direction:column;gap:14px}
.founder-photo{width:320px;height:418px;object-fit:cover;border-radius:2px}
.founder-caption{display:flex;flex-direction:column;gap:2px}
.founder-name{font-family:var(--spec);font-size:13px;font-weight:500;color:var(--bone)}
.founder-role{font-family:var(--spec);font-size:12px;letter-spacing:.05em;color:var(--bone-dim)}
.founder-copy{display:flex;flex-direction:column;gap:20px;max-width:640px}
@media (max-width:900px){
  .founder-grid{grid-template-columns:1fr;gap:40px}
  .founder-photo{width:100%;height:auto}
}

/* ---- Story and vision (about) ---- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.story-block{display:flex;flex-direction:column;gap:20px;padding-top:28px;border-top:1px solid var(--edge)}
@media (max-width:900px){ .story-grid{grid-template-columns:1fr;gap:48px} }

/* ---- Values (about) ---- */
.values-row{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge)}
.value-item{display:flex;flex-direction:column;gap:8px;padding:28px 20px 28px 0}
.value-index{font-family:var(--spec);font-size:12px;color:var(--forest-rev)}
.value-name{font-family:var(--spec);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--bone)}
@media (max-width:900px){ .values-row{grid-template-columns:1fr 1fr} }

/* ---- SAMED band: the one light ground in the dark register ---- */
.samed{background:var(--void);padding-top:56px;padding-bottom:8px}
/* The logo needs its light ground: a card inside the dark page, not a full-width white band. */
.samed-card{display:flex;align-items:center;gap:28px;background:var(--ms-white);border-radius:14px;
  padding:18px 26px}
.samed-logo{height:44px;width:auto}
.samed-text{font-size:14px;line-height:1.6;color:var(--ms-ink-muted);max-width:640px}
@media (max-width:900px){ .samed-card{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px} }

/* ---- Footer ---- */
.footer{background:var(--void);padding-top:64px;padding-bottom:40px;border-top:1px solid var(--edge)}
.footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-logo{height:40px;width:auto;margin-bottom:8px}
.footer-heading{font-family:var(--spec);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-soft);margin-bottom:4px}
.footer-text{font-family:var(--spec);font-size:12px;line-height:1.8;letter-spacing:.03em;color:var(--bone-dim)}
.footer-link{font-size:15px;color:var(--bone-dim)}
.footer-legal{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:22px;
  border-top:1px solid var(--edge)}
.footer-legal-text{font-family:var(--spec);font-size:11px;letter-spacing:.04em;color:var(--bone-dim)}
@media (max-width:900px){ .footer-cols{grid-template-columns:1fr} }

/* ==========================================================================
   Product and utility pages (13 Sep 2026)
   ========================================================================== */

/* ---- A product: image beside its copy and specification ---- */
.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;
  padding-top:56px;padding-bottom:56px;border-top:1px solid var(--edge)}
.product:first-of-type{border-top:0;padding-top:0}
.product-media{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;min-height:220px}
.product-image{max-height:380px;width:auto;max-width:100%}
.product-image-small{max-height:260px;width:auto;max-width:50%}
.product-copy{display:flex;flex-direction:column;gap:18px}
.product-name{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;
  letter-spacing:-.02em;color:var(--bone)}
.product-maker{font-family:var(--spec);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone-dim)}
@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:28px;padding-top:40px;padding-bottom:40px}
  .product-image{max-height:220px}
}

/* ---- Specification tables: values in the spec face (L19), unconfirmed in gold (L4) ---- */
.spec-table{width:100%;border-collapse:collapse;border-top:1px solid var(--edge)}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:11px 16px 11px 0;
  border-bottom:1px solid var(--edge)}
.spec-table th{font-family:var(--spec);font-size:12px;font-weight:400;letter-spacing:.04em;
  color:var(--bone-dim);width:42%}
.spec-table td{font-family:var(--spec);font-size:13px;color:var(--bone-soft)}
.spec-table thead th{color:var(--bone-soft);font-weight:500;width:auto}
/* codes and sizes never break mid-value; a wide table scrolls in .table-scroll instead */
.spec-table thead ~ tbody td{white-space:nowrap}
.table-scroll{width:100%;overflow-x:auto}
/* Two five-column tables that scrolled sideways on phones (15 Sep). Under 640 px:
   .table-pairs (PRO-LESS V2 and Hybrid V2 by height): each height becomes a block of two lines, the
   column heads restated as small labels before each code. .table-needles: the first column repeats
   "Nerve block needle, radio-opaque and ultrasound" on every row and the heading already says it. */
@media (max-width:640px){
  .table-pairs thead{display:none}
  .table-pairs tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;row-gap:6px;
    padding:11px 0;border-bottom:1px solid var(--edge)}
  .glass .table-pairs tbody tr{border-color:rgba(var(--lamp-rgb),.09)}
  .table-pairs tbody th,.table-pairs tbody td{padding:0;border:0;white-space:nowrap}
  .table-pairs tbody th{grid-row:span 2;align-self:start;width:auto;min-width:max-content}
  .table-pairs tbody td::before{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
  .table-pairs tbody td:nth-child(2)::before{content:"PRO-LESS V2"}
  .table-pairs tbody td:nth-child(4)::before{content:"Hybrid V2"}
  .table-pairs tbody td:nth-child(3)::before,.table-pairs tbody td:nth-child(5)::before{content:"NAPPI"}
  .table-needles tr>:first-child{display:none}
}
.table-title{font-family:var(--spec);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-soft);margin-top:8px}

/* ---- Evidence: a cited claim carries its source line, always (L5, M11) ---- */
.evidence{display:flex;flex-direction:column;gap:10px;padding:20px 22px;background:var(--raise);
  border-left:2px solid var(--forest-rev)}
.evidence-label{font-family:var(--spec);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim)}
.evidence-text{font-size:16px;line-height:1.6;color:var(--bone)}
.evidence-source{font-family:var(--spec);font-size:11.5px;line-height:1.7;color:var(--bone-dim)}
.evidence-source a{text-decoration:underline}

/* ---- Questions ---- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--edge)}
.faq-item{border-bottom:1px solid var(--edge);padding:18px 0}
.faq-question{font-size:17px;font-weight:600;color:var(--bone);cursor:pointer}
.faq-answer{font-size:16px;line-height:1.7;color:var(--bone-soft);margin-top:10px;max-width:760px}

/* ---- Range index (products page) ---- */
.product-list{display:flex;flex-direction:column;gap:6px}
.product-link{font-size:16px;font-weight:600;color:var(--bone)}
.product-link-detail{font-family:var(--spec);font-size:12px;color:var(--bone-dim)}

/* ---- Call to action band ---- */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:40px;background:var(--raise)}
.cta-copy{display:flex;flex-direction:column;gap:8px;max-width:620px}
.cta-title{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.15;color:var(--bone)}

/* ---- Contact form (Wix Forms, M74) ---- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.contact-grid .row-item{grid-template-columns:100px minmax(0,1fr)}
.form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:14px;font-weight:600;color:var(--bone-soft)}
.form-input{font-family:var(--sans);font-size:16px;color:var(--bone);background:var(--raise);
  border:1px solid var(--edge);border-radius:4px;padding:12px 14px;width:100%}
.form-input:focus{outline:2px solid var(--forest-rev);outline-offset:1px}
textarea.form-input{min-height:160px;resize:vertical}
.form-note{font-size:13.5px;line-height:1.6;color:var(--bone-dim)}
.form-note a{text-decoration:underline}
.form-status{font-size:15px;color:var(--bone)}
.form-error{font-size:13px;color:var(--gold)}
.form button{align-self:flex-start;border:0;cursor:pointer;font-family:var(--sans)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:48px} .form-row{grid-template-columns:1fr} }

/* ---- Legal text ---- */
.legal{display:flex;flex-direction:column;gap:16px;max-width:760px}
.legal-heading{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;color:var(--bone);
  margin-top:20px}
.legal-list{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc;color:var(--bone-soft)}
.legal-list li{font-size:16px;line-height:1.7}


/* ==========================================================================
   THE SHARED KIT (13 Sep 2026): Home's feel for every page. Glass, the lit stage, the level
   still, the section bar and reveal. One set of parts, so pages cannot drift apart.
   Motion is off under prefers-reduced-motion.
   ========================================================================== */

/* ---- Glass: a card lit from the upper right, blurring whatever passes behind it ---- */
.glass{position:relative;border-radius:20px;
  background:linear-gradient(160deg,rgba(var(--lamp-rgb),.09) 0%,rgba(var(--lamp-rgb),.03) 40%,rgba(9,8,9,.30) 100%);
  border:1px solid rgba(var(--lamp-rgb),.13);
  box-shadow:inset 0 1px 0 rgba(var(--lamp-rgb),.20),0 50px 90px -50px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  transition:border-color .5s ease,box-shadow .5s ease}
.glass-pad{padding:32px 34px}
.glass .spec-table,.glass .spec-table th,.glass .spec-table td{border-color:rgba(var(--lamp-rgb),.09)}
.spec-table tbody tr{transition:background .25s ease}
.spec-table tbody tr:hover{background:rgba(var(--lamp-rgb),.035)}
.spec-table a{color:var(--bone-soft);border-bottom:1px solid rgba(var(--lamp-rgb),.18)}
.spec-table a:hover{color:var(--forest-rev)}
@media (max-width:900px){ .glass-pad{padding:22px 20px} }

/* ---- Edge fade: a lit image carries its glow to the edge of its file; fade it out ---- */
.fade-edges{-webkit-mask-image:linear-gradient(to right,transparent,black 14%,black 86%,transparent),
    linear-gradient(to bottom,transparent,black 14%,black 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,black 14%,black 86%,transparent),
    linear-gradient(to bottom,transparent,black 14%,black 86%,transparent);
  mask-composite:intersect}

/* ---- The level still: the frame of the descent Home shows while this range is read ---- */
.level{position:relative;margin:0;pointer-events:none}
/* only the image screen-blends: the label stays ordinary text, so its shadow can hold it off the bone */
.level-img{width:100%;height:auto;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,black 14%,black 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,black 14%,black 82%,transparent 100%)}
.level-label{position:absolute;display:flex;align-items:center;gap:12px;transform:translateY(-50%);
  font-family:var(--spec);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  white-space:nowrap;text-shadow:0 0 12px rgba(9,8,9,.95),0 0 3px rgba(9,8,9,.9)}
.level-label::before{content:"";width:40px;height:1px;background:var(--forest-rev)}

/* ---- Range hero: the promise on the left, its level in light on the right ---- */
.range-hero{position:relative;overflow:hidden;padding-top:72px;padding-bottom:24px;background-color:var(--void);
  background-image:radial-gradient(46% 62% at 76% 50%,rgba(var(--lamp-rgb),.08),rgba(var(--lamp-rgb),0) 70%)}
.range-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center}
.range-hero .level{width:100%;max-width:440px;justify-self:center;margin:-24px 0 -40px}
@media (max-width:900px){
  .range-hero{padding-top:48px}
  .range-hero-grid{grid-template-columns:1fr;gap:0}
  .range-hero .level{max-width:300px;margin:8px auto -24px}
  /* the per-level column (inline left:/top:) runs off a phone or onto the bone; use the still's lower-left corner */
  .range-hero .level-label{left:0 !important;top:auto !important;bottom:16%;transform:none;gap:8px}
  .range-hero .level-label::before{width:22px}
}

/* ---- Section bar: where you are on a long page, sticky under the header ---- */
.subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(9,8,9,.62);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid rgba(var(--lamp-rgb),.06);border-bottom:1px solid rgba(var(--lamp-rgb),.08)}
.subnav-inner{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding-top:9px;padding-bottom:9px}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-link{flex:none;font-family:var(--spec);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);padding:8px 14px;border-radius:999px;border:1px solid transparent;
  transition:color .3s ease,border-color .3s ease,background .3s ease}
.subnav-link:hover{color:var(--bone)}
.subnav-link.is-current{color:var(--forest-rev);border-color:rgba(var(--lamp-rgb),.14);background:rgba(var(--lamp-rgb),.05)}

/* ---- The stage: products rest one at a time in light while their details scroll beside them ---- */
.stage-section{padding-top:72px;padding-bottom:40px}
.stage-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.chapters{display:flex;flex-direction:column;gap:28px;padding-bottom:24vh}
.group-head{display:flex;flex-direction:column;gap:14px;padding-top:56px;
  scroll-margin-top:calc(var(--header-h) + 72px)}
.group-head:first-child{padding-top:0}
.chapter{display:flex;flex-direction:column;gap:18px;scroll-margin-top:calc(var(--header-h) + 72px)}
.chapter.is-active{border-color:rgba(var(--lamp-rgb),.26);
  box-shadow:inset 0 1px 0 rgba(var(--lamp-rgb),.28),0 50px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(var(--lamp-rgb),.05)}
.chapter-foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding-top:4px}
.chapter-media{display:none}
.stage-sticky{position:sticky;top:calc(var(--header-h) + 58px);height:calc(100svh - var(--header-h) - 58px)}
.stage{position:relative;height:100%}
.stage::before{content:"";position:absolute;left:8%;right:8%;top:58%;height:30%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--lamp-rgb),.13),rgba(var(--lamp-rgb),0))}
.stage-item{position:absolute;inset:0 0 14%;display:flex;align-items:center;justify-content:center;opacity:0;
  transform:translateY(14px) scale(.97);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.stage-item.is-active{opacity:1;transform:none}
.stage-item img{flex:0 1 auto;min-width:0;max-width:92%;max-height:72%;width:auto;height:auto}
.stage-item img+img{margin-left:-6%}
.stage-caption{position:absolute;left:0;right:0;bottom:10%;text-align:center;font-family:var(--spec);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track has an auto minimum, so a wide cut-out (the Acelock plates at
     200 px tall are about 400 px wide) grew the column to 442 px and the whole page scrolled sideways (15 Sep) */
  .stage-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .chapters{min-width:0}
  .stage-sticky{display:none}
  .chapters{padding-bottom:0}
  .chapter-media{display:flex;justify-content:center;align-items:center;margin:-4px 0 4px}
  .chapter-media img{max-height:200px;width:auto;max-width:100%}
  .chapter-media img+img{max-width:50%}
}

.kit-tray{margin:6px 0 2px}
.kit-tray img{border-radius:12px;width:100%;height:auto}
.kit-tray figcaption{margin-top:8px}

/* ---- Credentials, as a glass strip under a range hero ---- */
.credentials-section{padding-top:48px;padding-bottom:0;border-top:0}
.credentials-glass{padding:4px 30px}
.credentials-glass .credentials{border:0}
@media (max-width:900px){ .credentials-section{padding-top:32px} .credentials-glass{padding:4px 18px} }

/* ---- Questions, as glass ---- */
.faq-glass{padding:8px 34px}
.faq-glass .faq{border-top:0}
.faq-glass .faq-item:last-child{border-bottom:0}
.faq-item{border-color:rgba(var(--lamp-rgb),.09)}
.faq-question{list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{content:"+";font-family:var(--spec);font-weight:400;color:var(--forest-rev);
  transition:transform .3s ease}
details[open]>.faq-question::after{transform:rotate(45deg)}
@media (max-width:900px){ .faq-glass{padding:4px 20px} }

/* ---- Call to action, as glass ---- */
.cta-band.glass{padding:40px 44px}
@media (max-width:900px){ .cta-band.glass{padding:28px 22px} }

/* ---- Plain hero with a lit still beside it (products, contact) ---- */
.hero-still{position:relative;overflow:hidden}
/* a transformed .level isolates its image, so the screen blend moves up to the figure itself */
.hero-still .level{position:absolute;right:max(0px,calc(50vw - 640px));top:50%;transform:translateY(-50%);
  width:min(34vw,420px);mix-blend-mode:screen}
.hero-still .hero-inner{position:relative;z-index:1}
@media (max-width:900px){ .hero-still .level{position:relative;right:auto;top:auto;transform:none;width:260px;margin:24px auto -40px} }

/* ---- Range panels (products): each range in light, the light lifting under the pointer ---- */
.range-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}   /* four ranges, L44 */
.range-panel{display:flex;flex-direction:column;overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .5s ease,box-shadow .5s ease}
.range-panel:hover{transform:translateY(-4px);border-color:rgba(var(--lamp-rgb),.26)}
.range-panel-media{position:relative;height:380px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,black 72%,transparent);mask-image:linear-gradient(to bottom,black 72%,transparent)}
.range-panel-level{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.7;
  transition:opacity .6s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.range-panel:hover .range-panel-level{opacity:1;transform:scale(1.04)}
.range-panel-product{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);max-height:74%;max-width:92%;
  width:auto;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.range-panel:hover .range-panel-product{transform:translateX(-50%) translateY(-8px)}
.range-panel-tag{position:absolute;top:20px;left:24px;transform:none}
.range-panel-body{display:flex;flex-direction:column;gap:14px;padding:6px 28px 28px;flex:1}
.range-panel-link{margin-top:auto}
.range-panel-link::after{content:"";position:absolute;inset:0;border-radius:20px}
.range-panel .product-list a{position:relative;z-index:1}
.range-panel .product-link{font-size:15px}
@media (max-width:760px){ .range-panels{grid-template-columns:1fr} .range-panel-media{height:340px} }

/* ---- Contact: the enquiry on glass over a faint lit head ---- */
.contact-section{position:relative;overflow:hidden}
/* .contact-backdrop is unused since 14 Sep (the head moved into the hero); kept for a page that wants a faint still */
.contact-backdrop{position:absolute;right:-16%;top:50%;transform:translateY(-50%);width:min(52vw,720px);
  opacity:.24;pointer-events:none;mix-blend-mode:screen}
.contact-backdrop .level-img{mix-blend-mode:screen}
.contact-section .contact-grid{position:relative;z-index:1}
.contact-actions{display:flex;flex-direction:column;gap:12px}
.contact-action{display:grid;grid-template-columns:28px 88px minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:16px 22px;
  border-radius:16px}
/* each way in carries its mark (14 Sep), as the credentials do */
.contact-action-icon{width:24px;height:24px;color:var(--forest-rev);align-self:start;margin-top:1px}
.contact-action-icon svg{display:block;width:100%;height:100%}
.contact-action-more{display:block;margin-top:6px;font-family:var(--spec);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest-rev)}
.contact-whatsapp .contact-action-icon{flex:none}
.contact-whatsapp .cta-copy{margin-right:auto}   /* the mark and the copy sit together, the button on the right */
a.contact-action:hover{border-color:rgba(var(--lamp-rgb),.26)}
.contact-action-name{font-size:16px;font-weight:600;color:var(--bone)}
.contact-action-detail{font-family:var(--spec);font-size:12px;letter-spacing:.04em;color:var(--bone-dim)}
.contact-whatsapp{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:22px}
.form-glass{padding:34px 36px}
.form-glass .form-input{background:rgba(9,8,9,.5);border-color:rgba(var(--lamp-rgb),.14);
  transition:border-color .3s ease,box-shadow .3s ease}
.form-glass .form-input:focus{outline:none;border-color:var(--forest-rev);box-shadow:0 0 0 3px rgba(var(--lamp-rgb),.10)}
.form-success{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:6px 0}
.form-success-mark{position:relative;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--forest-rev)}
.form-success-mark::after{content:"";position:absolute;left:16px;top:10px;width:10px;height:19px;
  border-right:2px solid var(--forest-rev);border-bottom:2px solid var(--forest-rev);transform:rotate(45deg)}
.form-success-title{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;color:var(--bone)}
@media (max-width:900px){
  .contact-backdrop{display:none}
  .form-glass{padding:24px 20px}
  .contact-action{grid-template-columns:28px 72px minmax(0,1fr);padding:14px 18px}
}
/* Phones (15 Sep, launch night): the detail column is about 130 px wide at 390 px and an email address
   does not wrap, so it ran past the button's edge. The name takes the row and the detail drops under
   it; anything still too long may break anywhere rather than overflow. Home's descent shares this. */
@media (max-width:640px){
  .contact-action,.descent .contact-action{grid-template-columns:28px minmax(0,1fr);row-gap:2px}
  .contact-action-detail{grid-column:2;overflow-wrap:anywhere}
}

/* ---- About: the portrait framed in glass, the story as cards, the values as tags ---- */
.founder-glass{padding:12px;border-radius:22px}
.founder-glass .founder-photo{width:100%;height:auto;border-radius:12px}
.founder-glass .founder-caption{padding:12px 8px 4px}
.story-glass.story-block{border-top:0;padding:34px 36px}
.value-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.value-tag{display:inline-flex;align-items:baseline;gap:12px;padding:13px 22px;border-radius:999px}
.value-tag .value-name{font-size:12px}
@media (max-width:900px){ .story-glass.story-block{padding:24px 22px} }

/* ---- About, pass 2 (14 Sep): the 2026 profile's points, the founder's line, five values, the team ---- */
.apart-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.apart-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.apart{display:flex;flex-direction:column;gap:10px}
.apart-index{font-family:var(--spec);font-size:12px;color:var(--forest-rev)}
.apart-name{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--bone)}
.apart .body-text{font-size:16px}
.glance{display:flex;flex-direction:column;gap:14px}
.glance .table-title{margin-top:0}
.glance .spec-table th{width:38%}
.founder-quote{margin:14px 0 0;padding:24px 26px;display:flex;flex-direction:column;gap:12px;border-left:2px solid var(--forest-rev)}
.founder-quote-text{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.01em;color:var(--bone)}
.founder-quote-cite{font-family:var(--spec);font-size:12px;letter-spacing:.08em;font-style:normal;color:var(--bone-dim)}
/* Story as a band, Mission and Vision beneath it, level (Louis, 14 Sep) */
.story-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:40px;align-items:start;margin-bottom:24px;padding:34px 36px}
.story-wide .story-text{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.story-wide .section-title,.story-grid-2 .section-title{font-size:30px}
.story-grid-2{grid-template-columns:1fr 1fr;gap:24px}
.apart-head{display:flex;align-items:center;justify-content:space-between}
.apart-icon,.value-icon{width:28px;height:28px;color:var(--forest-rev)}
.apart-icon svg,.value-icon svg{display:block;width:100%;height:100%}
.value-icon{margin-bottom:6px}
.values-head{margin-top:64px;margin-bottom:28px}
.values-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}
.value-card{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px}
.value-card .value-name{font-size:12px}
.value-text{font-size:14.5px;line-height:1.55;color:var(--bone-soft)}
.team{display:flex;flex-direction:column;gap:24px}
.member{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start;padding:22px}
.member-figure{margin:0}
.member-photo{width:100%;height:auto;border-radius:12px;aspect-ratio:4/5;object-fit:cover;object-position:top}
.member-copy{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.member-name{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.015em;color:var(--bone)}
.member-role{font-family:var(--spec);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-rev)}
/* the rest of a bio opens on request, so the team reads as a list before it reads as an essay */
.member-more{display:flex;flex-direction:column;gap:12px}
.member-more-toggle{list-style:none;cursor:pointer;font-family:var(--spec);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest-rev);display:inline-flex;align-items:center;gap:10px}
.member-more-toggle::-webkit-details-marker{display:none}
.member-more-toggle::after{content:"+";transition:transform .3s ease}
.member-more[open]>.member-more-toggle::after{transform:rotate(45deg)}
@media (max-width:900px){
  .apart-layout,.apart-grid,.story-wide,.story-wide .story-text,.story-grid-2,.values-grid{grid-template-columns:1fr}
  .story-grid-2{gap:24px}
  .values-head{margin-top:40px}
  .member{grid-template-columns:1fr;gap:18px;padding:16px}
  .member-photo{max-width:260px}
}

/* ---- Legal pages: the text on a glass page, a sticky contents list lighting where you are ---- */
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.legal-toc{position:sticky;top:calc(var(--header-h) + 32px);display:flex;flex-direction:column;gap:2px;padding:18px 12px}
.legal-toc-title{display:block;padding:2px 12px 10px}
.legal-toc .subnav-link{white-space:normal;text-transform:none;letter-spacing:.02em;font-size:13px;line-height:1.4;
  border-radius:10px;padding:8px 12px}
.legal-glass{padding:44px 52px}
.legal-glass .legal{max-width:none}
.legal-glass .legal-heading:first-of-type{margin-top:28px}
.legal-heading{scroll-margin-top:calc(var(--header-h) + 28px)}
.legal a{color:var(--forest-rev)}
@media (max-width:900px){
  .legal-layout{grid-template-columns:1fr;gap:0}
  .legal-toc{display:none}
  .legal-glass{padding:26px 22px}
}

/* ---- Quote context on the contact form (from a range page's ?product=) ---- */
.form-about{align-self:flex-start;font-family:var(--spec);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest-rev);padding:7px 14px;border-radius:999px;border:1px solid rgba(var(--lamp-rgb),.14);
  background:rgba(var(--lamp-rgb),.05)}

/* ---- Reveal: sections arrive rather than sit there. Only when scripts run (html.js). ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .stage-item{transition:none}
  .glass,.subnav-link,.header{transition:none}
}

/* the sheet is fixed, so it sits over the page; declared after .glass so its position wins */
.menu{position:fixed;left:16px;right:16px;top:calc(var(--header-h) + 10px);z-index:49;border-radius:22px}

/* The hidden attribute must win over the display rules above (the contact form hides its fields on success). */
[hidden]{display:none !important}