/* ============================================================
   ACTIVATE BEAUTY — "Salon Privé · Plein Verre"
   Split-screen + frosted glass. Video left panel.
   No arches. Glass with opaque AA fallbacks. WCAG 2.1 AA.
   ============================================================ */

:root{
  /* ===== BRAND BOOK V1 tokens (source of truth) ===== */
  --ink:#2A2520;        /* primary text & dark grounds */
  --clay:#B5805F;       /* PRIMARY ACCENT — CTAs, eyebrows, italics, links, active */
  --bone:#EDE6D7;       /* primary canvas / background */
  --paper:#F7F2E8;      /* cards / lighter surfaces */
  --sage:#8F9A82;       /* secondary accent (wellness / IV) */
  --ox:#6B2C2C;         /* depth, hover, alerts ONLY */
  --soft:#756F64;       /* muted text */
  --line-c:#DCD3C2;     /* borders / dividers */
  --warm:#b3aa98;

  /* ===== legacy aliases → brand (role remap) ===== */
  --ivory:#EDE6D7;      /* canvas = Bone */
  --ivory-2:#F7F2E8;    /* lighter surface = Paper */
  --charcoal:#2A2520;   /* Ink */
  --charcoal-2:#1f1b17; /* deeper Ink */
  --oxblood:#B5805F;    /* primary accent = Clay */
  --oxblood-2:#6B2C2C;  /* depth / hover = true Oxblood */
  --platinum:#b3aa98;
  --platinum-2:#DCD3C2;
  --line:rgba(42,37,32,.12);
  --line-light:rgba(237,230,215,.18);
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw:1480px;
  --colw:1080px; /* centerd readable column for inner-page sections (2026) */
  --pad:clamp(1.5rem, 4vw, 4.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 18px 50px -24px rgba(42,37,32,.45);
  --shadow-glass:0 24px 70px -30px rgba(31,27,23,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
/* root bg matches the footer so any mobile over-scroll / URL-bar gap below the footer
   shows the footer color (no jarring white block), light + dark. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.65;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; line-height:1.08; letter-spacing:.004em; }

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--charcoal); color:var(--ivory);
  padding:.8rem 1.2rem; border-radius:0 0 10px 0; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip-link:focus{ left:0; }
:focus-visible{
  outline:2.5px solid var(--oxblood);
  outline-offset:3px;
  border-radius:4px;
}
.glass-on-dark :focus-visible,
.left-glass :focus-visible{ outline-color:var(--platinum-2); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   SHELL — split screen
   ============================================================ */
.shell{
  display:grid;
  grid-template-columns:40% 60%;
  align-items:start;
}

/* ---------- LEFT sticky identity panel ---------- */
.left{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.5rem,2.4vw,2.6rem);
  background:var(--charcoal); /* fallback fill so the panel is never empty */
  isolation:isolate;
}
/* VIDEO fills the entire panel, graded/darkened so the card stays legible */
.left__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 30%;
  z-index:-2;
  background:var(--charcoal);
}
.left__grade{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(42,37,32,.48) 0%, rgba(42,37,32,.34) 32%, rgba(31,27,23,.72) 100%),
    radial-gradient(120% 90% at 30% 18%, rgba(107,44,44,.30) 0%, rgba(42,37,32,0) 55%),
    linear-gradient(90deg, rgba(31,27,23,.34), rgba(31,27,23,.12));
}

/* The floating frosted-glass card */
.left-glass{
  position:relative;
  width:100%;
  max-width:430px;
  max-height:calc(100vh - 3rem);
  max-height:calc(100svh - 3rem);
  overflow:auto;
  padding:clamp(1.6rem,2.2vw,2.4rem);
  border-radius:18px;
  color:var(--ivory);
  /* OPAQUE AA-safe fallback FIRST */
  background:rgba(42,37,32,.74);
  border:1px solid rgba(237,230,215,.16);
  box-shadow:var(--shadow-glass);
  scrollbar-width:thin;
}
.left-glass::-webkit-scrollbar{ width:7px; }
.left-glass::-webkit-scrollbar-thumb{ background:rgba(237,230,215,.22); border-radius:8px; }

@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .left-glass{
    background:rgba(42,37,32,.20);
    -webkit-backdrop-filter:blur(26px) saturate(125%);
    backdrop-filter:blur(26px) saturate(125%);
  }
  /* inner legibility scrim — keeps every line ≥4.5:1 even if blur fails to darken */
  .left-glass::before{
    content:"";
    position:absolute; inset:0;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(31,27,23,.12), rgba(31,27,23,.26));
    z-index:0;
    pointer-events:none;
  }
  .left-glass > *{ position:relative; z-index:1; }
}

.brand{
  display:flex; align-items:baseline; gap:.7rem;
  margin-bottom:1.4rem;
}
/* ===== BRAND WORDMARK — Cormorant Garamond Medium Italic (no icon) ===== */
.wordmark{
  font-family:var(--serif); font-style:italic; font-weight:500;
  letter-spacing:.005em; line-height:1; white-space:nowrap;
  color:var(--ink);
}
.wordmark--light{ color:var(--bone); } /* on dark grounds */
.brand .wordmark{ font-size:1.6rem; }
.brand .tag{
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--platinum-2); font-weight:400; padding-left:.7rem; border-left:1px solid rgba(237,230,215,.28);
}

/* vertical nav inside the card — ALWAYS visible ≥861px */
.left-nav{
  display:flex; flex-direction:column; gap:.1rem;
  margin:0 0 1.5rem;
  border-top:1px solid rgba(237,230,215,.16);
  border-bottom:1px solid rgba(237,230,215,.16);
  padding:.55rem 0;
}
.left-nav a{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:.5rem .2rem;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:400; color:var(--ivory);
  border-radius:6px;
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.left-nav a .idx{ font-size:.62rem; color:var(--platinum); letter-spacing:.1em; }
.left-nav a:hover,.left-nav a:focus-visible{ color:var(--platinum-2); padding-left:.6rem; }

.left-glass h1{
  font-size:clamp(2.1rem,3.1vw,2.85rem);
  line-height:1.04;
  margin-bottom:.7rem;
  letter-spacing:0;
}
.left-glass h1 em{ font-style:italic; color:var(--platinum-2); }
.left-glass .lede{
  font-size:.9rem; color:#EDE6DB; font-weight:300; line-height:1.6;
  margin-bottom:1.3rem;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; font-size:.74rem;
  padding:.95rem 1.5rem; border-radius:10px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:15px; height:15px; flex:none; }
.btn--primary{ background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }
.btn--primary:hover{ transform:translateY(-2px); background:#fff; }
.btn--ox{ background:var(--oxblood); color:var(--ivory); border-color:var(--oxblood); }
.btn--ox:hover{ transform:translateY(-2px); background:var(--oxblood-2); }
.btn--ghost{ background:transparent; color:var(--charcoal); border-color:var(--line); }
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--charcoal); }
.btn--ghost-light{ background:transparent; color:var(--ivory); border-color:rgba(237,230,215,.4); }
.btn--ghost-light:hover{ transform:translateY(-2px); border-color:var(--ivory); }
.btn--block{ width:100%; }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

.left-glass .cta-row{ margin-bottom:1.1rem; }
.microline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-size:.76rem; color:#EDE6DB; margin-bottom:.55rem;
}
.microline .star{ color:var(--platinum-2); letter-spacing:.05em; }
.microline .dot{ width:3px; height:3px; border-radius:50%; background:var(--platinum); display:inline-block; }
.address-line{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.74rem; letter-spacing:.06em; color:var(--platinum-2);
  border-top:1px solid rgba(237,230,215,.16); padding-top:1rem; margin-top:1.1rem;
}
.address-line svg{ width:14px; height:14px; margin-top:2px; flex:none; opacity:.85; }

/* ============================================================
   RIGHT scrolling content
   ============================================================ */
.right{ background:var(--ivory); min-width:0; }
/* Every section: equal L/R padding, centered inner column for balanced symmetry */
.section{
  padding:clamp(3.6rem,7vw,6.4rem) var(--pad);
  border-bottom:1px solid var(--line);
}
.section > *{ max-width:var(--inner, var(--colw, 1080px)); margin-left:auto; margin-right:auto; }
.section:last-of-type{ border-bottom:none; }

/* Alternating background rhythm so sections don't feel uniform */
/* tinted band → faint marble texture over the token gradient (home's .pm__bg technique) */
.section--tint{
  position:relative;
  background:linear-gradient(180deg, var(--ivory-2), var(--ivory));
  border-bottom-color:var(--line);
}
.section--tint::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(/img/marmol_veta_diagonal_banner.webp) center/cover no-repeat;
  opacity:.05;
}
.section--tint > *{ position:relative; z-index:1; }
/* dark band → rich moss-green (matches the home's green promise band), not flat charcoal */
.section--dark{
  position:relative;
  background:linear-gradient(160deg, #3A4632 0%, #2A3327 55%, #1E2A20 100%);
  color:var(--ivory);
  border-bottom-color:rgba(232,184,115,.16);
}
.section--dark::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 90% at 82% 6%, rgba(201,154,69,.16), transparent 56%);
}
.section--dark > *{ position:relative; z-index:1; }
.section--dark .eyebrow{ color:var(--gold-bright); }
.section--dark .eyebrow::before{ background:var(--gold-bright); }
.section--dark h2{ color:#fff; }
.section--dark h2 em{ color:var(--gold-bright); }
.section--dark .intro{ color:#E8ECE0; }
.section--wide{ --inner:1040px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--oxblood); font-weight:500; margin-bottom:1.2rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--oxblood); display:inline-block; opacity:.6; }
.section h2{
  font-size:clamp(1.9rem,4vw,2.9rem);
  margin-bottom:1rem; max-width:18ch;
}
.section h2 em{ font-style:italic; color:var(--oxblood); }
.section .intro{
  font-size:1.04rem; color:#4a4744; max-width:58ch; font-weight:300;
}

/* intro section */
.intro-sec h2{ max-width:24ch; }
.intro-sec .intro{ font-size:1.12rem; }

/* ---------- TRUST STRIP — prominent centered proof row ---------- */
.trust{
  display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center;
  margin:2.6rem auto 0; max-width:780px;
}
.trust__cell{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:.3rem clamp(.8rem,2.4vw,1.8rem);
}
/* thin Line/Clay rules between items, evenly spaced */
.trust__cell + .trust__cell{
  border-left:1px solid var(--line-c);
}
.trust__num{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,5.4vw,3.4rem); color:var(--ink);
  line-height:1; letter-spacing:.005em;
  display:inline-flex; align-items:baseline; justify-content:center; gap:.18em;
  white-space:nowrap; margin-bottom:.7rem;
}
/* "K", "+ yrs", suffixes: smaller but on the SAME baseline (never sub/superscript) */
.trust__num .unit{ font-size:.62em; letter-spacing:.01em; }
/* star optically centered with the number (Oxblood for AA-safe warmth on bone) */
.trust__num .star{
  color:var(--ox); font-size:.78em; line-height:1;
  align-self:center; transform:translateY(.02em);
}
.trust__label{
  font-family:var(--sans); font-weight:500;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5a5650; line-height:1.5; max-width:16ch;
}

/* ---------- CATEGORIES — four ways we care ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2.2rem;
}
.cat{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease), box-shadow .6s var(--ease) .06s;
}
.cat:hover,.cat:focus-visible{ transform:translateY(-3px); box-shadow:0 26px 60px -28px rgba(42,37,32,.5); }
@media (prefers-reduced-motion:reduce){ .cat:hover,.cat:focus-visible{ transform:none; } }
.cat__media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.cat__media img{ width:100%; height:100%; object-fit:cover; }
.cat__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,37,32,0) 38%, rgba(42,37,32,.82) 100%);
}
.cat__body{ position:absolute; left:0; right:0; bottom:0; padding:1.3rem 1.3rem 1.15rem; color:var(--ivory); z-index:1; }
.cat__body h3{ font-size:1.45rem; color:var(--ivory); margin-bottom:.18rem; }
.cat__body p{ margin:0; font-size:.8rem; letter-spacing:.04em; color:var(--platinum-2); }

/* ---------- GLOW / RESULTS DIVIDER BAND (full-bleed image + Ink scrim) ---------- */
.glowband{
  position:relative; overflow:hidden;
  padding:clamp(3.6rem,7vw,6rem) var(--pad);
  border-bottom:1px solid rgba(237,230,215,.12);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(320px,38vw,440px);
}
.glowband__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 50%; z-index:0;
}
.glowband__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(31,27,23,.58) 0%, rgba(31,27,23,.40) 45%, rgba(31,27,23,.66) 100%),
    radial-gradient(80% 90% at 50% 50%, rgba(42,37,32,.30), rgba(42,37,32,.62) 100%);
}
.glowband__inner{ position:relative; z-index:2; max-width:30ch; margin:0 auto; }
.glowband .eyebrow{ justify-content:center; color:var(--platinum-2); }
.glowband .eyebrow::before{ background:var(--platinum-2); }
.glowband h2{
  font-size:clamp(1.8rem,3.6vw,2.7rem); color:var(--ivory); margin:0 auto; max-width:none;
}
.glowband h2 em{ font-style:italic; color:var(--platinum-2); }
.glowband p{
  margin:1rem auto 0; max-width:46ch; font-size:1rem; font-weight:300; color:#EDE6DB;
}

/* ---------- TREATMENTS — balanced 2-col masonry filling the column ---------- */
.tx-grid{
  columns:2; column-gap:1.2rem; margin-top:2.2rem;
}
.tx-card{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 1.2rem;
  border:1px solid var(--line); border-radius:14px; padding:1.7rem 1.6rem;
  background:linear-gradient(180deg,#fff, var(--ivory));
  transition:transform .35s var(--ease), box-shadow .6s var(--ease) .06s, border-color .35s var(--ease);
}
/* desktop: summary acts as a static header (no toggle) */
.tx-card > summary{ list-style:none; }
.tx-card > summary::-webkit-details-marker{ display:none; }
.tx-card[open]{}
.tx-acc-chev{ display:none; }
.tx-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:rgba(42,37,32,.22); }
@media (prefers-reduced-motion:reduce){ .tx-card:hover{ transform:none; } }
.tx-card__head{
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.05rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--line);
  cursor:default;
}
.tx-ico{
  width:40px; height:40px; flex:none; border-radius:10px;
  display:grid; place-items:center; color:var(--oxblood);
  background:rgba(181,128,95,.07); border:1px solid rgba(181,128,95,.14);
}
.tx-ico svg{ width:20px; height:20px; }
/* IV / Wellness uses Sage as a subtle secondary accent */
.tx-ico--sage{ color:var(--sage); background:rgba(143,154,130,.10); border-color:rgba(143,154,130,.22); }
.tx-card h3{ font-size:1.32rem; }
.tx-list{ list-style:none; margin:0; padding:0; }
.tx-list li{ border-bottom:1px dotted var(--line); }
.tx-list li:last-child{ border-bottom:none; }
/* each treatment row is now a link to its service page */
.tx-list li a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem 0; font-size:.86rem; color:#46423e; text-decoration:none;
  transition:color .2s var(--ease);
}
.tx-list li a .name{ position:relative; transition:color .2s var(--ease); }
.tx-list li a:hover .name{ color:var(--oxblood); }
.tx-list li a:hover .name::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--oxblood);
}
.tx-list li a:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:4px; }
.tx-list .price{ font-family:var(--serif); font-size:1rem; color:var(--charcoal); white-space:nowrap; transition:color .2s var(--ease); }
.tx-list li a:hover .price{ color:var(--oxblood); }
.tx-foot{
  margin-top:2rem; font-size:.86rem; color:#5a5650; font-style:italic; font-family:var(--serif);
  max-width:62ch;
}

/* ---------- ABOUT KSENIYA ---------- */
/* balanced 2-col: a contained portrait (left) + readable mini-bio (right).
   align-items:start keeps the portrait at its own natural size — it NEVER
   stretches to the text column's height and never covers the copy. */
.about{
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,3.5vw,3.4rem); align-items:start;
}
/* left column = portrait + "Training & recognition" beneath it, so the
   photo column fills its height instead of leaving dead space below. */
.about__col{ display:flex; flex-direction:column; gap:1.6rem; align-self:start; }
.about__col .about-creds{ margin:0; }
/* Fixed-aspect frame with a sensible max width — overflow hidden so the
   parallax translate can never push the image past its own bounds. */
.about__media{
  margin:0; position:relative; align-self:start;
  width:100%; max-width:460px;
  aspect-ratio:4/5; overflow:hidden;
  border-radius:16px; box-shadow:var(--shadow-soft);
}
/* parallax frame — image is slightly taller than the frame and translates a
   few px on scroll; the extra height stays inside the overflow:hidden frame. */
.about__media img{
  position:absolute; inset:0;
  width:100%; height:110%; object-fit:cover; object-position:50% 22%;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .about__media img{ height:100%; transform:none !important; }
}
.about__media figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(42,37,32,0), rgba(42,37,32,.84));
  color:var(--ivory); padding:1.5rem 1.3rem 1rem; font-size:.8rem; letter-spacing:.04em;
}
.about__media figcaption strong{ display:block; font-family:var(--serif); font-size:1.22rem; font-weight:500; letter-spacing:.01em; }
.about__media figcaption span{ color:var(--platinum-2); }
.about__text{ display:flex; flex-direction:column; justify-content:flex-start; }
.about blockquote{
  margin:1.4rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.2; color:var(--charcoal);
}
.about blockquote .mark{ color:var(--oxblood); }
.about .about-body{ font-size:1rem; color:#4a4744; max-width:52ch; }
.about .about-body + .about-body{ margin-top:1.1rem; }
.about .about-lead{ font-family:var(--serif); font-style:italic; font-size:1.12rem; color:#3f3b37; }
/* compact inline credential list — "Training & recognition" */
.about-creds{ margin:1.5rem 0 0; padding:1.3rem 0 0; border-top:1px solid var(--line); }
.about-creds__title{
  font-family:var(--sans); font-weight:500; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oxblood); margin:0 0 .85rem;
}
.about-creds ul{ list-style:none; margin:0; padding:0; }
.about-creds li{
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.4rem 0; font-size:.88rem; color:#46423e; line-height:1.5;
}
.about-creds li svg{ width:15px; height:15px; flex:none; margin-top:.28rem; color:var(--oxblood); }
.about-creds .yr{ color:var(--soft); font-style:italic; font-family:var(--serif); }
.about__cta{ margin-top:1.6rem; }

/* ---------- CREDENTIALS — refined text list + modal lightbox ---------- */
.creds__list{ list-style:none; margin:2.2rem 0 0; padding:0; }
.cred-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.1rem;
  padding:1.25rem .2rem; border-top:1px solid var(--line);
}
.cred-row:last-child{ border-bottom:1px solid var(--line); }
.cred-row__yr{
  font-family:var(--serif); font-size:1.1rem; color:var(--oxblood);
  width:3.4ch; text-align:right; letter-spacing:.02em;
}
.cred-row__yr.is-empty{ color:var(--platinum); }
.cred-row__body h3{
  font-family:var(--serif); font-size:1.28rem; font-weight:500; color:var(--charcoal);
  line-height:1.18; margin:0 0 .2rem;
}
.cred-row__body p{ margin:0; font-size:.84rem; color:#5a5650; letter-spacing:.01em; }
.cred-row__view{
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--oxblood); background:rgba(181,128,95,.06);
  border:1px solid rgba(181,128,95,.18); border-radius:9px;
  padding:.6rem .85rem; transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.cred-row__view svg{ width:14px; height:14px; flex:none; }
.cred-row__view:hover,.cred-row__view:focus-visible{
  background:var(--oxblood); color:var(--ivory); border-color:var(--oxblood); transform:translateY(-1px);
}
@media (prefers-reduced-motion:reduce){ .cred-row__view:hover,.cred-row__view:focus-visible{ transform:none; } }
.creds__cap{ margin-top:1.6rem; font-size:.82rem; color:#5a5650; font-style:italic; font-family:var(--serif); }

/* Reusable modal / lightbox */
.modal{
  position:fixed; inset:0; z-index:160;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,2.4rem);
  visibility:hidden; pointer-events:none;
}
.modal__scrim{
  position:absolute; inset:0; background:rgba(31,27,23,.74);
  opacity:0; transition:opacity .3s var(--ease);
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .modal__scrim{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
}
.modal__dialog{
  position:relative; z-index:1; max-width:min(560px,100%); width:100%;
  background:var(--ivory); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(31,27,23,.7);
  overflow:hidden; transform:translateY(14px); opacity:0;
  transition:opacity .3s var(--ease), transform .35s var(--ease);
  max-height:calc(100svh - 3rem); display:flex; flex-direction:column;
}
.modal.open{ visibility:visible; pointer-events:auto; }
.modal.open .modal__scrim{ opacity:1; }
.modal.open .modal__dialog{ transform:none; opacity:1; }
@media (prefers-reduced-motion:reduce){
  .modal__scrim,.modal__dialog{ transition:none; }
  .modal__dialog{ transform:none; }
}
.modal__close{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:40px; height:40px; border-radius:9px;
  background:rgba(237,230,215,.92); border:1px solid var(--line); color:var(--charcoal);
  display:grid; place-items:center;
}
.modal__close svg{ width:18px; height:18px; }
.modal__close:hover{ background:#fff; }
.modal__img{
  width:100%; height:auto; max-height:70svh; object-fit:contain; background:var(--ivory-2);
}
.modal__cap{
  padding:1.1rem 1.3rem; border-top:1px solid var(--line); background:#fff;
}
.modal__cap h3{ font-family:var(--serif); font-size:1.18rem; font-weight:500; margin:0 0 .15rem; }
.modal__cap p{ margin:0; font-size:.8rem; color:#5a5650; }

/* ---------- REVIEWS — full-screen cinematic film-quote (dark band) ----------
   Ink ground, ≈82vh, content optically centered. The quote is the hero. */
.reviews-sec{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  min-height:82vh; min-height:82svh;
}
/* eyebrow at the visual top of the centered group — clay-tint on dark */
.reviews-eyebrow{
  font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone); margin:0 0 clamp(2rem,4vw,3.2rem);
  display:inline-flex; align-items:center; gap:.55rem;
}
.reviews-eyebrow .star{ color:#DAB9A4; font-size:.95rem; letter-spacing:.1em; }
/* the fade stage — sized to the giant quote, vertically centered in the band */
.carousel{
  position:relative; width:100%; max-width:none; margin:0 auto;
  min-height:clamp(360px,44vw,520px);
}
/* track fills the carousel via absolute inset:0 — using height:100% here
   collapses to 0 (parent has min-height, not height), which piled every
   slide at the top and let them overlap the eyebrow. */
.carousel__track{ position:absolute; inset:0; }
.crev{
  position:absolute; inset:0; margin:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity 1s var(--ease); pointer-events:none;
}
.crev.active{ opacity:1; pointer-events:auto; }
/* THE STAR — giant Cormorant italic poster pull-quote */
.crev p{
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem,6.2vw,5.5rem); line-height:1.1; color:#F7F2E8; /* on charcoal ≈ 13:1 */
  max-width:16ch; text-wrap:balance; letter-spacing:.002em;
}
.crev cite{ font-style:normal; }
.crev cite strong{
  display:block; font-family:var(--sans); font-weight:500; color:var(--bone);
  font-size:1rem; letter-spacing:.06em; margin-bottom:.35rem;
}
.crev cite span{ font-size:.76rem; letter-spacing:.16em; color:#DAB9A4; text-transform:uppercase; }
/* reduced motion / no-JS: show only the FIRST review, static */
.carousel.is-static{ min-height:0; }
.carousel.is-static .carousel__track{ height:auto; }
.carousel.is-static .crev{ position:relative; inset:auto; opacity:1; pointer-events:auto; }
.carousel.is-static .crev:not(.active){ display:none; }
@media (prefers-reduced-motion:reduce){
  .crev{ transition:none; }
}

/* ---------- MORE WAYS — chip grid ---------- */
.more-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:2.2rem; }
.more-card{
  border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.5rem; background:#fff;
  display:flex; gap:1rem; align-items:flex-start;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.more-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:rgba(42,37,32,.22); }
@media (prefers-reduced-motion:reduce){ .more-card:hover{ transform:none; } }
.more-ico{
  width:42px; height:42px; flex:none; border-radius:10px; display:grid; place-items:center; color:var(--oxblood);
  background:rgba(181,128,95,.07); border:1px solid rgba(181,128,95,.14);
}
.more-ico svg{ width:20px; height:20px; }
.more-card h4{ font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:.01em; margin-bottom:.2rem; color:var(--charcoal); }
.more-card p{ margin:0; font-size:.86rem; color:#5a5650; }

/* ---------- ACADEMY — visual course-card band ---------- */
/* clay-tint accent/italic so it reads clearly on the dark ground
   (override the generic .section--dark h2 em platinum) */
.section--dark h2 em.academy-accent,
.academy-accent{ color:#DAB9A4; font-style:italic; }
/* heading + body copy LEFT-aligned (the card grid stays centered as a group) */
.academy-sec{ text-align:left; }
.academy-sec .eyebrow,
.academy-sec h2{ text-align:left; margin-left:0; margin-right:0; }
.academy-sec h2{ max-width:24ch; }
.academy{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem);
  align-items:stretch; margin:2.4rem auto 0;
  text-align:left;
}
/* the course "card" — Domestika-style */
.academy__card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(237,230,215,.18); border-radius:18px;
  background:linear-gradient(160deg, rgba(237,230,215,.06), rgba(181,128,95,.12));
  box-shadow:var(--shadow-glass);
}
.academy__media{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  border-bottom:1px solid rgba(237,230,215,.14);
}
.academy__media img{ width:100%; height:100%; object-fit:cover; }
.academy__badge{
  position:absolute; top:.9rem; left:.9rem; z-index:1;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--sans); font-weight:500; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background:#DAB9A4; border-radius:8px; padding:.4rem .65rem;
}
.academy__card-body{ padding:clamp(1.4rem,2.6vw,2rem); }
.academy__kicker{
  font-family:var(--sans); font-weight:500; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:#DAB9A4; margin:0 0 .55rem;
}
.academy__card-body h3{
  font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,1.85rem); color:var(--bone);
  margin:0 0 .9rem; line-height:1.12;
}
/* RIGHT column — descriptive copy + module list + CTA */
.academy__detail{ display:flex; flex-direction:column; justify-content:center; }
.academy__detail p{ margin:0 0 1.4rem; font-size:1rem; color:#E8E0D2; max-width:52ch; }
/* module list — left-aligned bullets with check ticks */
.academy__modules{ list-style:none; margin:0 0 1.7rem; padding:0; }
.academy__modules li{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.6rem 0; font-size:.92rem; color:#EDE6D7;
  border-bottom:1px solid rgba(237,230,215,.12);
}
.academy__modules li:last-child{ border-bottom:none; }
.academy__modules .num{
  flex:none; font-family:var(--serif); font-size:.95rem; color:#DAB9A4; line-height:1.5;
  width:1.8ch; text-align:right;
}
.academy__modules svg{ width:17px; height:17px; flex:none; margin-top:.15rem; color:#DAB9A4; }
@media (max-width:860px){
  .academy{ grid-template-columns:1fr; text-align:left; }
}

/* ---------- BOOK — elegant 2-column: left-aligned info + framed map (≈half) ---------- */
.book{ text-align:left; }
.book .eyebrow,
.book h2,
.book .intro{ text-align:left; margin-left:0; margin-right:0; }
.book-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.4rem);
  align-items:stretch; margin:2.4rem auto 0;
}
/* INFO column — refined, left-aligned, no boxes */
.book-info{
  min-width:0; text-align:left;
  display:flex; flex-direction:column; justify-content:center;
}
.book-info__line{
  font-family:var(--serif); font-style:italic; font-size:1.16rem;
  color:#4a4744; margin:0 0 1.6rem; max-width:42ch; line-height:1.4;
}
.book-details{ list-style:none; margin:0; padding:0; }
.book-details li{
  display:flex; align-items:flex-start; gap:.95rem;
  padding:1.05rem 0; border-top:1px solid var(--line);
}
.book-details li:last-child{ border-bottom:1px solid var(--line); }
.book-details__ico{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center; color:var(--oxblood);
  background:rgba(181,128,95,.07); border:1px solid rgba(181,128,95,.14);
}
.book-details__ico svg{ width:18px; height:18px; }
.book-details dt,
.book-details__k{
  font-family:var(--sans); font-weight:500; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--oxblood);
  margin:0 0 .2rem;
}
.book-details__v{ font-size:.96rem; color:#332f2b; margin:0; line-height:1.5; }
.book-details__v a{ border-bottom:1px solid var(--line); transition:border-color .2s var(--ease); }
.book-details__v a:hover{ border-color:var(--charcoal); }
.book .cta-row{ margin-top:2rem; }
/* framed Google map — large, prominent, palette-tinted; fills its half */
.book-map{
  position:relative; margin:0; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-c); box-shadow:var(--shadow-soft);
  background:var(--ivory-2); min-height:100%;
}
.book-map iframe{
  display:block; width:100%; height:100%; min-height:480px; border:0;
  filter:grayscale(.30) sepia(.12) contrast(.97);
}
@media (max-width:860px){
  /* mobile: info first, then full-width map — no side gaps */
  .book-grid{ grid-template-columns:1fr; gap:2rem; }
  .book-map{ min-height:0; }
  .book-map iframe{ height:340px; min-height:0; }
}

/* ---------- FOOTER social row ---------- */
.footer__social{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; }
.footer__social a{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; margin:0;
  color:var(--platinum-2); border:1px solid rgba(237,230,215,.2); background:rgba(237,230,215,.04);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.footer__social a svg{ width:19px; height:19px; }
.footer__social a:hover,.footer__social a:focus-visible{
  color:var(--ivory); border-color:rgba(237,230,215,.5); background:rgba(237,230,215,.1); transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){ .footer__social a:hover,.footer__social a:focus-visible{ transform:none; } }


/* ---------- FOOTER ---------- */
.footer{
  background:var(--charcoal); color:var(--ivory);
  padding:clamp(2.6rem,5vw,4rem) var(--pad) 2.4rem;
}
.footer__top{ display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-start; justify-content:space-between; }
.footer__brand .wordmark{ display:inline-block; font-size:1.85rem; margin-bottom:1rem; }
.footer__brand .ftag{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--platinum-2); max-width:34ch; margin:0 0 .9rem; line-height:1.4; }
.footer__brand p{ font-size:.84rem; color:var(--platinum-2); max-width:36ch; margin:0; line-height:1.7; }
.footer__col h5{
  font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--platinum); margin:0 0 .9rem;
}
.footer__col p,.footer__col a{ display:block; font-size:.84rem; color:#E4DCCF; margin-bottom:.45rem; line-height:1.55; }
.footer__col a:hover{ color:#fff; }
.footer__legal{
  margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid rgba(237,230,215,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between;
}
.footer__legal .disclaimer{ font-size:.74rem; color:var(--platinum); max-width:64ch; line-height:1.6; font-style:italic; }
.footer__links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.footer__links a{ font-size:.72rem; letter-spacing:.06em; color:var(--platinum-2); }
.footer__links a:hover{ color:#fff; }

/* ============================================================
   MOBILE TOP BAR + DRAWER  (hidden on desktop)
   ============================================================ */
.mtopbar{ display:none; }
.drawer{ display:none; }
.mbook{ display:none; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* small stagger — applied to children inside a .stagger group via JS-set delay */
.reveal[data-delay]{ transition-delay:var(--rd, 0ms); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .reveal[data-delay]{ transition-delay:0ms; }
}

/* ============================================================
   GLOBAL LEFT-ALIGN (client requirement)
   Every heading, paragraph, eyebrow, lead and bullet across the whole
   home is LEFT-justified and anchored to a consistent left edge.
   ONLY TWO EXCEPTIONS stay centered: the Reviews film-quote band and
   the Trust stats strip (re-asserted at the bottom of this block).
   ============================================================ */
.right .section,
.right .section > *,
.glowband,
.glowband__inner{
  text-align:left;
}
/* Centre each section's inner column (was hard-left-pinned, which crammed
   content to the left edge on wide screens). Max-widths keep copy tidy;
   text stays left-aligned inside the centerd column. */
.section > *{
  margin-left:auto; margin-right:auto;
}
.section h1,.section h2,.section h3,.section h4,
.section p,.section li,.section .eyebrow,
.section .intro,.section .lede,
.glowband h1,.glowband h2,.glowband h3,.glowband h4,
.glowband p,.glowband .eyebrow{
  text-align:left;
}
/* Glowband content stays left-anchored (it's a full-bleed band); section
   headings follow the centerd .section > * column. */
.glowband h2,.glowband p{ margin-left:0; margin-right:0; }

/* Glowband: was a centered flex band → make it a left-aligned content band */
.glowband{ justify-content:flex-start; }
.glowband__inner{ margin-left:0; margin-right:0; max-width:46ch; }
.glowband .eyebrow{ justify-content:flex-start; }

/* ----- EXCEPTION A: Reviews film-quote band STAYS centered -----
   Specificity-boosted so it overrides the global .right .section rules. */
.right .reviews-sec,
.right .reviews-sec *,
.right .reviews-sec p,
.right .reviews-sec h2,
.right .reviews-sec .eyebrow{ text-align:center; }
.right .reviews-sec .crev p{ margin-left:auto; margin-right:auto; }

/* ----- EXCEPTION B: Trust stats strip STAYS centered (as a group) ----- */
.right .trust__cell,
.right .trust__num,
.right .trust__label{ text-align:center; }

/* ============================================================
   RESPONSIVE — single clean switch at 860px
   ============================================================ */
@media (max-width:860px){
  .shell{ display:block; }

  /* sticky mobile top bar — ALWAYS visible */
  .mtopbar{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:90;
    padding:.7rem clamp(1rem,4vw,1.4rem);
    background:rgba(42,37,32,.94); color:var(--ivory);
    border-bottom:1px solid rgba(237,230,215,.14);
  }
  @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
    .mtopbar{
      background:rgba(42,37,32,.7);
      -webkit-backdrop-filter:blur(16px) saturate(120%);
      backdrop-filter:blur(16px) saturate(120%);
    }
  }
  .mtopbar .wordmark{ font-size:1.4rem; }
  .hamb{
    width:44px; height:44px; border-radius:9px; flex:none;
    background:transparent; border:1px solid rgba(237,230,215,.32);
    display:grid; place-items:center; color:var(--ivory);
  }
  .hamb svg{ width:20px; height:20px; }

  /* LEFT becomes top hero — video bg fills, glass card vertically centered.
     Extra bottom padding lifts the card clear of the fixed .mbook bar. */
  .left{
    position:relative; height:auto; min-height:88vh; min-height:88svh;
    padding:clamp(1.4rem,5vw,2rem);
    padding-bottom:calc(clamp(1.4rem,5vw,2rem) + 4.6rem);
    align-items:center;
  }
  .left__video{ object-position:50% 28%; }
  .left-glass{
    max-width:560px; margin:0 auto; max-height:none; overflow:visible;
  }
  .left-nav{ display:none; } /* nav lives in the drawer on mobile */

  /* drawer */
  .drawer{
    display:block;
    position:fixed; inset:0; z-index:120;
    visibility:hidden; pointer-events:none;
  }
  .drawer__scrim{
    position:absolute; inset:0; background:rgba(31,27,23,.55);
    opacity:0; transition:opacity .3s var(--ease);
  }
  .drawer__panel{
    position:absolute; top:0; right:0; height:100%; width:min(82vw,360px);
    background:var(--charcoal); color:var(--ivory);
    padding:1.4rem 1.4rem 2rem;
    transform:translateX(100%); transition:transform .35s var(--ease);
    display:flex; flex-direction:column; overflow:auto;
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.8);
  }
  .drawer.open{ visibility:visible; pointer-events:auto; }
  .drawer.open .drawer__scrim{ opacity:1; }
  .drawer.open .drawer__panel{ transform:none; }
  @media (prefers-reduced-motion:reduce){
    .drawer__scrim,.drawer__panel{ transition:none; }
  }
  .drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
  .drawer__head .wordmark{ font-size:1.4rem; }
  .drawer__close{
    width:42px; height:42px; border-radius:9px; background:transparent;
    border:1px solid rgba(237,230,215,.3); color:var(--ivory); display:grid; place-items:center;
  }
  .drawer__close svg{ width:18px; height:18px; }
  .drawer nav{ display:flex; flex-direction:column; border-top:1px solid rgba(237,230,215,.16); }
  .drawer nav a{
    padding:1rem .2rem; font-size:.92rem; letter-spacing:.14em; text-transform:uppercase;
    border-bottom:1px solid rgba(237,230,215,.12); color:var(--ivory);
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .drawer nav a .idx{ font-size:.66rem; color:var(--platinum); }
  .drawer nav a:hover,.drawer nav a:focus-visible{ color:var(--platinum-2); }
  .drawer__cta{ margin-top:auto; padding-top:1.6rem; }

  /* sticky bottom Book button — ALWAYS visible */
  .mbook{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:80;
    padding:.7rem clamp(1rem,4vw,1.4rem) calc(.7rem + env(safe-area-inset-bottom,0));
    background:rgba(237,230,215,.9); border-top:1px solid var(--line);
  }
  @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
    .mbook{
      background:rgba(237,230,215,.78);
      -webkit-backdrop-filter:blur(16px) saturate(120%);
      backdrop-filter:blur(16px) saturate(120%);
    }
  }
  .right{ padding-bottom:5rem; } /* clearance for the sticky book bar */
  .section{ max-width:none; }

  /* stack grids */
  .cat-grid{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .more-grid{ grid-template-columns:1fr; }
  .academy{ grid-template-columns:1fr; text-align:left; }
  /* mobile: portrait fits the screen width and is centered above the text */
  .about__col{ gap:1.3rem; align-items:stretch; }
  .about__media{ width:100%; max-width:420px; margin-inline:auto; align-self:center; }

  /* TREATMENTS become collapsible accordions on mobile */
  .tx-grid{ columns:auto; margin-top:1.8rem; }
  .tx-card{ margin:0 0 .9rem; padding:0; }
  .tx-card > summary{
    list-style:none; cursor:pointer;
    display:block; padding:1.2rem 1.4rem;
  }
  .tx-card > summary::-webkit-details-marker{ display:none; }
  .tx-card .tx-card__head{
    margin:0; padding:0; border-bottom:none; cursor:pointer;
    position:relative; justify-content:center;
  }
  /* mobile: no category icons; centered category title */
  .tx-card .tx-ico{ display:none; }
  .tx-card .tx-card__head h3{ text-align:center; }
  .tx-acc-chev{
    display:grid; place-items:center; width:24px; height:24px;
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    color:var(--oxblood); transition:transform .3s var(--ease);
  }
  .tx-acc-chev svg{ width:18px; height:18px; }
  .tx-card[open] .tx-acc-chev{ transform:translateY(-50%) rotate(180deg); }
  @media (prefers-reduced-motion:reduce){ .tx-acc-chev{ transition:none; } }
  .tx-card .tx-list{ padding:0 1.4rem 1.4rem; }
  .tx-card .tx-list li:first-child{ border-top:1px solid var(--line); padding-top:.9rem; }
}

/* trust strip wraps to 2×2 on narrow screens, keeping rules clean */
@media (max-width:600px){
  .trust{ flex-wrap:wrap; max-width:380px; }
  .trust__cell{ flex:1 1 42%; padding:1rem .6rem; }
  .trust__cell:nth-child(odd){ border-left:none; }
  .trust__cell:nth-child(n+3){ border-top:1px solid var(--line-c); }
}

@media (max-width:520px){
  .cred-row{ grid-template-columns:1fr; gap:.6rem; text-align:left; }
  .cred-row__yr{ text-align:left; width:auto; }
  .cred-row__view{ justify-self:start; }
}

/* lock scroll when drawer open */
body.no-scroll{ overflow:hidden; }

/* ============================================================
   SHARED INNER-PAGE HEADER + MEGA-MENU  (non-home pages)
   Plein Verre language: Charcoal ground, Bone text, Clay accent.
   Slim, sticky, backdrop-filter with opaque AA-safe fallback.
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--charcoal); /* opaque AA-safe fallback FIRST */
  color:var(--bone);
  border-bottom:1px solid rgba(237,230,215,.14);
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .site-header{
    background:rgba(42,37,32,.82);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    backdrop-filter:blur(18px) saturate(120%);
  }
}
.site-header__bar{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:1.2rem;
  padding:.85rem var(--pad);
}
.site-header .wordmark{ font-size:1.45rem; color:var(--bone); flex:none; }
.site-header__spacer{ flex:1 1 auto; }

/* desktop nav */
.site-nav{ display:flex; align-items:center; gap:.08rem; }
.site-nav > a,
.site-nav__trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--sans); font-weight:400;
  font-size:.685rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone); background:transparent; border:0;
  padding:.7rem .44rem; border-radius:8px;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.site-nav > a:hover,.site-nav > a:focus-visible,
.site-nav__trigger:hover,.site-nav__trigger:focus-visible{
  color:var(--platinum-2); background:rgba(237,230,215,.06);
}
.site-nav__trigger svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.site-nav__item[data-open="true"] .site-nav__trigger svg{ transform:rotate(180deg); }
.site-header__cta{ flex:none; margin-left:.3rem; padding:.7rem .95rem; font-size:.68rem; }

/* mega-menu host */
.site-nav__item{ position:relative; }
.mega{
  position:absolute; top:calc(100% + .55rem); left:50%; transform:translateX(-50%) translateY(8px);
  width:min(920px, calc(100vw - 2 * var(--pad)));
  background:var(--charcoal-2); color:var(--bone);
  border:1px solid rgba(237,230,215,.16); border-radius:16px;
  box-shadow:var(--shadow-glass);
  padding:1.6rem 1.8rem 1.3rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  z-index:120;
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .mega{
    background:rgba(31,27,23,.92);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
    backdrop-filter:blur(22px) saturate(120%);
  }
}
.site-nav__item[data-open="true"] .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion:reduce){ .mega{ transition:none; } }
.mega__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.8rem;
}
.mega__col h3{
  font-family:var(--sans); font-weight:500;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay); margin:0 0 .7rem;
}
.mega__col ul{ list-style:none; margin:0; padding:0; }
.mega__col li{ margin:0; }
.mega__col a{
  display:block; padding:.4rem .2rem;
  font-family:var(--sans); font-weight:300; font-size:.86rem; letter-spacing:.01em;
  color:#E4DCCF; border-radius:6px;
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.mega__col a:hover,.mega__col a:focus-visible{ color:var(--bone); padding-left:.5rem; }
.mega__foot{
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:center;
  margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid rgba(237,230,215,.14);
}
.mega__foot a{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--platinum-2);
  transition:color .2s var(--ease);
}
.mega__foot a:hover,.mega__foot a:focus-visible{ color:var(--bone); }
.mega__foot a svg{ width:13px; height:13px; }

/* header hamburger — only on mobile */
.site-header__hamb{ display:none; }

@media (max-width:1260px){
  .site-nav{ display:none; }              /* desktop nav hidden — lives in drawer (collapses early so the longer ES nav never overflows) */
  .site-header__cta{ display:none; }
  /* mobile bar = identical to the home bar: tighter toggle<->burger gap + same height */
  .site-header__bar{ gap:.45rem; padding-top:1.04rem; padding-bottom:1.04rem; }
  /* hamburger plain (no box/border), same icon size + color as the home burger */
  .site-header__hamb{
    display:grid; place-items:center; flex:none;
    width:auto; height:auto; padding:.3rem; border-radius:0;
    background:none; border:0; color:var(--moss-head);
  }
  .site-header__hamb svg{ width:26px; height:26px; }

  /* the inner-page drawer reuses the home .drawer pattern; its mega
     collapses to a disclosure accordion */
  .drawer__group{ border-bottom:1px solid rgba(237,230,215,.12); }
  .drawer__group > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem .2rem; font-size:.92rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
  }
  .drawer__group > summary::-webkit-details-marker{ display:none; }
  .drawer__group > summary .chev{ transition:transform .3s var(--ease); }
  .drawer__group[open] > summary .chev{ transform:rotate(180deg); }
  .drawer__group .chev svg{ width:16px; height:16px; }
  .drawer__sub{ list-style:none; margin:0; padding:0 0 .8rem; }
  .drawer__sub li{ margin:0; }
  .drawer__sub a{
    display:block; padding:.55rem .2rem .55rem 1rem;
    font-size:.82rem; letter-spacing:.06em; text-transform:none; color:#E4DCCF;
    border-bottom:0;
  }
  .drawer__sub a:hover,.drawer__sub a:focus-visible{ color:var(--bone); }
  .drawer__subhead{
    font-family:var(--sans); font-weight:500; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--clay); padding:.7rem .2rem .3rem;
  }
}
@media (prefers-reduced-motion:reduce){
  .site-nav__trigger svg,.drawer__group > summary .chev{ transition:none; }
}

/* ============================================================
   COOKIE CONSENT BANNER (US privacy / consent) — site-wide
   ============================================================ */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  background:var(--charcoal); color:var(--bone); /* opaque AA-safe fallback */
  border-top:1px solid rgba(237,230,215,.16);
  box-shadow:0 -18px 50px -28px rgba(31,27,23,.7);
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .cookie{
    background:rgba(42,37,32,.92);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    backdrop-filter:blur(18px) saturate(120%);
  }
}
.cookie.is-visible{ transform:translateY(0); }
.cookie[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .cookie{ transition:none; } }
.cookie__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  padding:1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom,0));
}
.cookie__copy{ flex:1 1 380px; min-width:0; }
.cookie__title{
  font-family:var(--serif); font-weight:500; font-size:1.15rem; color:var(--bone);
  margin:0 0 .3rem;
}
.cookie__desc{ margin:0; font-size:.82rem; line-height:1.55; color:#E4DCCF; }
.cookie__desc a{ color:var(--platinum-2); border-bottom:1px solid rgba(237,230,215,.3); }
.cookie__desc a:hover{ color:var(--bone); }
.cookie__actions{ flex:none; display:flex; flex-wrap:wrap; gap:.7rem; }
.cookie__btn{ padding:.8rem 1.4rem; }
/* the cookie banner is always a dark ground (both themes) → the ghost "Reject" button needs a
   fixed light foreground (was --moss-head = 1.56:1 fail). WCAG 2.1 AA fix. */
.cookie .btn--ghost{ color:#EDE6D7; border-color:rgba(237,230,215,.5); }
.cookie .btn--ghost:hover,.cookie .btn--ghost:focus-visible{ border-color:#EDE6D7; color:#fff; }
@media (max-width:600px){
  .cookie__actions{ width:100%; }
  .cookie__btn{ flex:1 1 auto; }
}

/* ============================================================
   SHOP — product grid, product page, "checkout coming soon" modal
   Shared by /shop/ hub + all /shop/<product>/ pages.
   Plein Verre tokens; left-aligned; mobile-first.
   ============================================================ */
.shop-grid{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
.prod-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .35s var(--ease,ease), box-shadow .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion:reduce){ .prod-card{ transition:none; } }
.prod-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(42,37,32,.5); border-color:var(--clay); }
.prod-card__media{ aspect-ratio:1/1; overflow:hidden; background:var(--bone); }
.prod-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-card__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.prod-card__title{ font-family:var(--serif); font-weight:500; font-size:1.18rem; line-height:1.25; margin:0; color:var(--ink); }
.prod-card__price{ display:flex; align-items:baseline; gap:.55rem; margin-top:auto; }
.prod-card__now{ font-weight:600; color:var(--ink); }
.prod-card__was{ font-size:.85rem; color:var(--soft); text-decoration:line-through; }
.prod-card__tag{
  align-self:flex-start; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oxblood); background:rgba(107,44,44,.08); padding:.25rem .55rem; border-radius:6px;
}

/* product detail */
.prod{ display:grid; gap:2.4rem; align-items:start; }
@media (min-width:820px){ .prod{ grid-template-columns:1.05fr 1fr; gap:3.4rem; } }
.prod__media{
  border-radius:18px; overflow:hidden; background:var(--bone); border:1px solid var(--line);
  aspect-ratio:1/1;
}
.prod__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod__price{ display:flex; align-items:baseline; gap:.7rem; margin:.3rem 0 1.2rem; }
.prod__now{ font-family:var(--serif); font-size:1.9rem; font-weight:500; color:var(--ink); }
.prod__was{ color:var(--soft); text-decoration:line-through; font-size:1.05rem; }
.prod__qty{ display:flex; align-items:center; gap:.9rem; margin:0 0 1.2rem; }
.prod__qty label{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.prod__qty select{
  font:inherit; padding:.55rem .8rem; border:1px solid var(--line); border-radius:10px;
  background:var(--paper-2,#fff); color:var(--ink);
}
/* Dark mode: the white select box was glaring/illegible → dark card + gold hairline */
html[data-theme="dark"] .prod__qty select{
  background:var(--card) !important; color:var(--ink) !important;
  border-color:rgba(216,174,99,.28) !important;
}
.prod__note{ font-size:.82rem; color:var(--soft); line-height:1.6; margin:.9rem 0 0; }
.prod__list{ margin:.4rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.prod__list li{ position:relative; padding-left:1.3rem; line-height:1.6; }
.prod__list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--clay); }

/* "checkout coming soon" modal */
.shop-modal[hidden]{ display:none; }
.shop-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.shop-modal__scrim{ position:absolute; inset:0; background:rgba(42,37,32,.55); }
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .shop-modal__scrim{ -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
}
.shop-modal__panel{
  position:relative; max-width:420px; width:100%; background:var(--paper);
  border:1px solid var(--line); border-radius:18px; padding:2rem 1.8rem 1.8rem;
  box-shadow:0 30px 80px -30px rgba(42,37,32,.6); text-align:left;
}
.shop-modal__title{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0 0 .6rem; color:var(--ink); }
.shop-modal__desc{ margin:0 0 1.4rem; line-height:1.6; color:var(--ink); }
.shop-modal__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.shop-modal__close{
  position:absolute; top:.8rem; right:.8rem; width:38px; height:38px; display:grid; place-items:center;
  border:none; background:transparent; color:var(--soft); cursor:pointer; border-radius:50%;
}
.shop-modal__close:hover{ background:var(--bone); color:var(--ink); }
.shop-modal__close svg{ width:20px; height:20px; }

/* ============================================================
   INNER-PAGE LEFT PANEL  (desktop ≥861px)
   Injected by site.js on pages with .site-header. Mirrors the
   home split-screen: fixed identity + nav panel left, content
   right. Hidden ≤860px so mobile keeps its top header + drawer.
   ============================================================ */
.side{ display:none; }                 /* hidden by default (mobile) */
@media (min-width:861px){
  body.has-side{ --side-w:clamp(330px,35vw,500px); padding-left:var(--side-w); }
  body.has-side .site-header{ display:none; }   /* the panel replaces the top bar on desktop */

  .side{
    display:flex; position:fixed; left:0; top:0; z-index:30;
    width:var(--side-w); height:100vh; height:100svh; overflow:hidden;
    align-items:center; justify-content:center;
    padding:clamp(1.3rem,2vw,2.2rem); background:var(--charcoal); isolation:isolate;
  }
  .side__bg{
    position:absolute; inset:0; z-index:-2;
    background-size:cover; background-position:50% 28%; background-color:var(--charcoal);
  }
  .side__grade{
    position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(180deg, rgba(42,37,32,.52) 0%, rgba(42,37,32,.40) 32%, rgba(31,27,23,.80) 100%),
      radial-gradient(120% 90% at 30% 18%, rgba(107,44,44,.30) 0%, rgba(42,37,32,0) 55%);
  }
  .side__glass{
    position:relative; width:100%; max-width:420px;
    max-height:calc(100svh - 2.6rem); overflow:auto;
    padding:clamp(1.5rem,2vw,2.2rem); border-radius:18px; color:var(--ivory);
    background:rgba(42,37,32,.74); border:1px solid rgba(237,230,215,.16);
    box-shadow:var(--shadow-glass); scrollbar-width:thin;
  }
  @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
    .side__glass{
      background:rgba(42,37,32,.22);
      -webkit-backdrop-filter:blur(24px) saturate(125%);
      backdrop-filter:blur(24px) saturate(125%);
    }
  }
  .side .brand{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.2rem; }
  .side .brand .wordmark{ font-size:1.5rem; }
  .side__ctx{
    font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
    color:var(--platinum-2); margin:0 0 1.1rem;
  }
  .side-nav{
    display:flex; flex-direction:column; gap:.1rem; margin:0 0 1.4rem;
    border-top:1px solid rgba(237,230,215,.16); border-bottom:1px solid rgba(237,230,215,.16);
    padding:.5rem 0;
  }
  .side-nav a{
    display:flex; align-items:baseline; justify-content:space-between; padding:.5rem .2rem;
    font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory);
    border-radius:6px; transition:color .25s var(--ease), padding-left .25s var(--ease);
  }
  .side-nav a .idx{ font-size:.6rem; color:var(--platinum); letter-spacing:.1em; }
  .side-nav a:hover, .side-nav a:focus-visible{ color:var(--platinum-2); padding-left:.6rem; }
  .side-nav a[aria-current="page"]{ color:var(--platinum-2); }
  .side .btn--block{ width:100%; margin:0 0 1rem; }
  .side__micro{
    display:flex; flex-wrap:wrap; gap:.4rem .55rem; align-items:center;
    font-size:.74rem; color:#E4DCCF; margin-bottom:1rem;
  }
  .side__micro .star{ color:#DAB9A4; }
  .side__addr{
    font-size:.74rem; color:var(--platinum-2); line-height:1.5; margin:0;
    padding-top:.9rem; border-top:1px solid rgba(237,230,215,.14);
  }
  /* reduced motion: no nav slide */
  @media (prefers-reduced-motion:reduce){ .side-nav a{ transition:none; } }
}

/* ============================================================
   RESPONSIVE TABLES (guides: .cost-table, .cmp)
   On phones, let cells wrap instead of forcing a wide table that
   has to be scrolled left/right inside its wrapper. !important is
   needed because each guide's inline <style> (loaded after this
   file) sets white-space:nowrap on number cells.
   ============================================================ */
@media (max-width:600px){
  .cost-table-wrap, .cmp-wrap{ overflow-x:visible !important; max-width:100% !important; }
  /* guides set an inline min-width (520–560px) on these tables; on phones that
     forces horizontal page scroll. Drop it and lay out fixed so cells wrap. */
  .cost-table, .cmp{
    width:100% !important; min-width:0 !important; table-layout:fixed !important;
    font-size:.82rem !important;
  }
  .cost-table th, .cost-table td,
  .cmp th, .cmp td{
    padding:.5rem .5rem !important;
    white-space:normal !important; word-break:break-word; overflow-wrap:anywhere;
  }
  .cost-table tbody td.est{ font-size:.96rem !important; }
}

/* ============================================================
   EDITORIAL MEDIA BLOCKS (reusable on inner pages)
   Left-aligned, no arches, lazy-friendly. Used to add visual
   richness to secondary pages (About, Locations, Find us…). Each is a
   direct child of .section so it inherits the 920px content cap.
   ============================================================ */
.media-band{ margin:2.6rem 0 0; }
.media-band figure{ margin:0; }
.media-band img{
  width:100%; height:auto; display:block; border-radius:16px;
  aspect-ratio:16/9; object-fit:cover; box-shadow:var(--shadow-soft);
}
.media-band figcaption,
.media-split figcaption,
.media-trio figcaption{ margin-top:.65rem; font-size:.82rem; color:var(--soft); line-height:1.5; }

.media-split{ display:grid; gap:clamp(1.4rem,3vw,2.6rem); align-items:center; margin:2.4rem 0 0; }
@media (min-width:760px){
  .media-split{ grid-template-columns:1fr 1fr; }
  .media-split--rev figure{ order:2; }
}
.media-split figure{ margin:0; }
.media-split img{
  width:100%; height:auto; display:block; border-radius:16px;
  aspect-ratio:3/2; object-fit:cover; box-shadow:var(--shadow-soft);
}
.media-split__text h2,
.media-split__text h3{ margin-top:0; }

.media-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2.4rem 0 0; }
.media-trio figure{ margin:0; }
.media-trio img{
  width:100%; height:auto; display:block; border-radius:14px;
  aspect-ratio:4/5; object-fit:cover; box-shadow:var(--shadow-soft);
}
.media-trio .media-trio__cap{ margin-top:.55rem; font-size:.8rem; font-weight:500; color:var(--ink); }
@media (max-width:680px){
  .media-trio{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .media-trio img{ aspect-ratio:1/1; }
}
@media (max-width:420px){ .media-trio{ grid-template-columns:1fr; } }

/* a slim full-bleed-feel band of diverse faces */
.media-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.7rem; margin:2.2rem 0 0; }
.media-strip img{ width:100%; height:100%; display:block; border-radius:12px; aspect-ratio:3/4; object-fit:cover; }
@media (max-width:600px){ .media-strip{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); } }

/* legal pages — "draft pending legal review" notice (mockup phase) */
.legal-note{
  background:rgba(181,128,95,.09); border:1px solid var(--clay);
  border-left:4px solid var(--clay); border-radius:12px;
  padding:1.05rem 1.3rem; font-size:.9rem; line-height:1.6; color:var(--ink);
}
.legal-note strong{ color:var(--oxblood); }

/* ============================================================
   BLOG — featured posts (image cards) + collapsible categories
   Used on the /guides/ hub. Magazine feel: 1 large + 2 stacked.
   ============================================================ */
.gd-featured{ padding-bottom:clamp(3rem,6vw,5rem); }
.gd-featured__head{ display:flex; align-items:baseline; gap:1rem; margin:0 0 1.3rem; }
.gd-featured__head .eyebrow{ margin:0; }
.feat-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:680px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){
  .feat-grid{ grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; }
  .feat-card--lead{ grid-row:1 / span 2; }
}
.feat-card{
  position:relative; display:flex; min-height:230px; border-radius:18px; overflow:hidden;
  text-decoration:none; background:var(--charcoal); box-shadow:var(--shadow-soft);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feat-card--lead{ min-height:340px; }
.feat-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -26px rgba(42,37,32,.6); }
.feat-card:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.feat-card__media{ position:absolute; inset:0; overflow:hidden; }
.feat-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.feat-card:hover .feat-card__media img{ transform:scale(1.06); }
.feat-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,37,32,.10) 0%, rgba(42,37,32,.52) 52%, rgba(31,27,23,.90) 100%);
}
.feat-card__body{ position:relative; align-self:flex-end; display:flex; flex-direction:column; align-items:flex-start; padding:1.3rem 1.5rem 1.45rem; color:var(--bone); }
.feat-card__title{ display:block; }
.feat-card__dek{ display:block; }
.feat-card__tag{
  display:inline-block; font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#1f1b17; background:var(--platinum-2); padding:.28rem .6rem; border-radius:999px; margin-bottom:.6rem;
}
.feat-card__title{
  font-family:var(--serif); font-weight:500; line-height:1.14; margin:0 0 .35rem; color:var(--ivory);
  font-size:clamp(1.25rem,2vw,1.6rem);
}
.feat-card--lead .feat-card__title{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
.feat-card__dek{ font-size:.86rem; line-height:1.5; color:#E7DFD2; margin:0 0 .7rem; max-width:46ch; }
.feat-card__more{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); }
.feat-card__more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.feat-card:hover .feat-card__more svg{ transform:translateX(5px); }

/* collapsible category sections */
.guide-acc{ border-top:1px solid var(--line); }
.guide-acc__head{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem;
  padding:1.15rem 0; transition:color .2s var(--ease);
}
.guide-acc__head::-webkit-details-marker{ display:none; }
.guide-acc__head:hover{ color:var(--oxblood); }
.guide-acc__head h2{ margin:0; font-size:clamp(1.25rem,2.3vw,1.6rem); }
.guide-acc__count{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.guide-acc__chev{ margin-left:auto; display:grid; place-items:center; width:26px; height:26px; color:var(--clay); transition:transform .35s var(--ease); }
.guide-acc__chev svg{ width:20px; height:20px; }
.guide-acc[open] .guide-acc__chev{ transform:rotate(180deg); }
.guide-acc .gd-grid{ padding:.2rem 0 1.7rem; }
@media (prefers-reduced-motion:reduce){
  .feat-card, .feat-card__media img, .feat-card__more svg, .guide-acc__chev{ transition:none; }
}

/* ============================================================
   BLOG ARTICLE — advanced editorial components (featured posts)
   Full-width article layout (no side panel on /guides/).
   ============================================================ */
.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--clay),var(--oxblood)); z-index:200; transition:width .08s linear; }

.article-hero{
  position:relative; max-width:1120px; margin:0 auto clamp(1.6rem,3vw,2.4rem);
  border-radius:20px; overflow:hidden; min-height:clamp(300px,44svh,500px);
  display:flex; align-items:flex-end; isolation:isolate; box-shadow:var(--shadow-soft);
}
.article-hero__img{ position:absolute; inset:0; z-index:-2; }
.article-hero__img img{ width:100%; height:100%; object-fit:cover; }
.article-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(42,37,32,.18) 0%, rgba(42,37,32,.5) 50%, rgba(31,27,23,.9) 100%); }
.article-hero__inner{ width:100%; padding:clamp(1.6rem,3.5vw,2.6rem); color:var(--ivory); }
.article-hero__kicker{ font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--platinum-2); }
.article-hero h1{ color:var(--ivory); font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.06; margin:.5rem 0 .55rem; }
.article-hero h1 em{ color:var(--platinum-2); font-style:italic; }
.article-hero__meta{ font-size:.8rem; color:#E7DFD2; display:flex; flex-wrap:wrap; gap:.2rem .8rem; }

.pull-quote{
  margin:2.4rem auto; padding:.1rem 0 .1rem 1.6rem; border-left:3px solid var(--clay);
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.3; color:var(--ink); max-width:var(--inner,920px);
}
.pull-quote cite{ display:block; margin-top:.7rem; font-family:var(--sans); font-style:normal; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin:2.2rem auto; max-width:var(--inner,920px); }
.stat{ background:var(--bone); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.1rem; }
.stat__num{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3vw,2.4rem); color:var(--oxblood); line-height:1; }
.stat__label{ font-size:.8rem; color:var(--soft); margin-top:.45rem; line-height:1.4; }

.callout{ background:linear-gradient(180deg, rgba(181,128,95,.10), rgba(181,128,95,.04)); border:1px solid var(--clay); border-left:4px solid var(--clay); border-radius:14px; padding:1.2rem 1.4rem; margin:2rem auto; max-width:var(--inner,920px); }
.callout__title{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oxblood); margin:0 0 .5rem; }
.callout p{ margin:0; line-height:1.6; }

/* ============================================================
   ★★★ SIGNATURE RE-SKIN (2026) ★★★
   Re-maps the whole site to the "signature-marta" identity:
   warm ivory canvas · GOLD accents · MOSS-GREEN headings ·
   Cormorant + Jost. Token names unchanged so all ~100 inner
   pages inherit it. Includes a full dark mode + a color wave.
   ============================================================ */
:root{
  /* canvases */
  --bone:#FCFAF6; --ivory:#FCFAF6; --ivory-2:#F3EEE4; --paper:#F3EEE4;
  /* ink */
  --ink:#23201B; --charcoal:#23201B; --charcoal-2:#16130F;
  /* primary accent → GOLD (AA-safe ink value; bright value for fills below) */
  --clay:#74570D; --oxblood:#74570D; --oxblood-2:#6B2C2C; --ox:#6B2C2C;
  /* secondary accent → MOSS */
  --sage:#4A583F;
  --soft:#6B6256;
  --line-c:#E2DAC9; --line:rgba(138,106,18,.16); --line-light:rgba(237,230,215,.16);
  --warm:#b3aa98; --platinum:#C9BCA8; --platinum-2:#DAB9A4;
  /* signature extras */
  --gold:#C99A45; --gold-bright:#E8B873; --gold-ink:#74570D; --moss-head:#4A583F; --moss-deep:#2A3327;
  /* signature-home token aliases (so pages authored against the home's names just work) */
  --bg:#FCFAF6; --ink:#23201B; --ink-soft:#6B6256; --card:#FFFFFF; --marble:#F5F1EA; --onyx:#16130F;
  --moss:#4A583F; --line-soft:rgba(35,32,27,.10); --champagne:#EADFC9;
  color-scheme:light;
}

/* MOSS-GREEN headings on light grounds (protect dark containers below) */
h1,h2,h3{ color:var(--moss-head); }
h4{ color:var(--charcoal); }
/* keep headings light inside dark grounds */
.site-header h1,.site-header h2,.site-header h3,
.footer h1,.footer h2,.footer h3,.footer h4,
.left h1,.left h2,.left h3,.left-glass h1,.left-glass h2,.left-glass h3,
.mega h1,.mega h2,.mega h3,.mega h4,
.drawer h1,.drawer h2,.drawer h3,.drawer h4,
.cookie h1,.cookie h2,.cookie h3,
[class*="--dark"] h1,[class*="--dark"] h2,[class*="--dark"] h3,[class*="--dark"] h4,
.is-dark h1,.is-dark h2,.is-dark h3{ color:inherit; }

/* GOLD primary CTA (bright fill, dark text) */
.btn--ox{ background:var(--gold); color:#23201B; border-color:var(--gold); box-shadow:0 14px 34px -16px rgba(201,154,69,.7); }
.btn--ox:hover,.btn--ox:focus-visible{ background:#D8AE63; border-color:#D8AE63; color:#23201B; }
.btn--ghost{ border-color:rgba(74,88,63,.4); color:var(--moss-head); }
.btn--ghost:hover{ border-color:var(--moss-head); }

/* eyebrow → gold */
.eyebrow{ color:var(--gold-ink); }
.eyebrow::before{ background:var(--gold); opacity:.9; }

/* focus ring → gold */
:focus-visible{ outline-color:var(--gold-ink); }

/* ===== DARK MODE (token flip + explicit dark grounds) ===== */
html[data-theme="dark"]{
  --bone:#14110D; --ivory:#14110D; --ivory-2:#1B1712; --paper:#1B1712;
  --ink:#F1E9DA; --charcoal:#F1E9DA; --charcoal-2:#0E0B07;
  --clay:#E3BE76; --oxblood:#E3BE76; --oxblood-2:#EAC07A; --ox:#E3BE76;
  --sage:#C2CEAA; --soft:#B6AC99;
  --line-c:rgba(216,174,99,.26); --line:rgba(216,174,99,.2); --line-light:rgba(241,233,218,.14);
  --warm:#8a8273; --platinum:#B6AC99; --platinum-2:#E3BE76;
  --gold:#D8AE63; --gold-bright:#EAC07A; --gold-ink:#E3BE76; --moss-head:#C2CEAA; --moss-deep:#C2CEAA;
  --bg:#14110D; --ink:#F1E9DA; --ink-soft:#B6AC99; --card:#1F1A13; --marble:#221C15; --onyx:#0E0B07;
  --moss:#C2CEAA; --line-soft:rgba(241,233,218,.12); --champagne:#3A3120;
  color-scheme:dark;
}
html[data-theme="dark"] body{ background:var(--ivory); color:var(--ink); }
/* dark grounds must STAY dark even though --charcoal flipped light */
html[data-theme="dark"] .site-header{ background:rgba(14,11,7,.86); border-bottom-color:rgba(216,174,99,.18); }
html[data-theme="dark"] .cookie{ background:#0E0B07; }
html[data-theme="dark"] .mega{ background:#17120C; border-color:rgba(216,174,99,.2); }
html[data-theme="dark"] .left{ background:#100D09; }
/* common hardcoded white surfaces → dark card */
html[data-theme="dark"] .stat,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] .tx-link,
html[data-theme="dark"] .svc-hero__media,
html[data-theme="dark"] .mega__col{ background:var(--paper); border-color:var(--line-c); }
/* .tx-link body text hardcodes a mid-grey — lift it on the dark card */
html[data-theme="dark"] .tx-link p{ color:var(--soft); }
html[data-theme="dark"] .btn--ox{ color:#1C1710; }
html[data-theme="dark"] .btn--ghost{ border-color:rgba(241,233,218,.3); color:var(--moss-head); }

/* --------------------------------------------------------------
   Guide / blog inner-page surfaces that hardcode background:#fff
   or linear-gradient(180deg,#fff,…) in their page-local <style>.
   These are NOT caught by [class*="card"], so in dark mode they
   rendered as white (or white→dark gradient) bands with dark text
   that washed out. Force a dark ground + readable text. The
   gradient ones also need !important to beat the inline gradient.
   -------------------------------------------------------------- */
html[data-theme="dark"] .quick-answer,
html[data-theme="dark"] .quick-box,
html[data-theme="dark"] .quick,
html[data-theme="dark"] .keybox,
html[data-theme="dark"] .snap,
html[data-theme="dark"] .sig,
html[data-theme="dark"] .driver,
html[data-theme="dark"] .suit,
html[data-theme="dark"] .found__i,
html[data-theme="dark"] .cta-block,
html[data-theme="dark"] .compare,
html[data-theme="dark"] .cmp,
html[data-theme="dark"] .cmp-table,
html[data-theme="dark"] .cost-table,
html[data-theme="dark"] .rangetable{
  background:var(--card) !important; border-color:var(--line-c) !important;
}
/* table header bands inside those tables also hardcode #fff / gradient */
html[data-theme="dark"] .compare thead,
html[data-theme="dark"] .compare thead th,
html[data-theme="dark"] .cmp thead,
html[data-theme="dark"] .cmp thead th,
html[data-theme="dark"] .cmp-table thead th,
html[data-theme="dark"] .cost-table thead th,
html[data-theme="dark"] .rangetable thead,
html[data-theme="dark"] .rangetable thead th,
html[data-theme="dark"] .rangetable th,
html[data-theme="dark"] .rangetable__row:first-child,
html[data-theme="dark"] .rangetable__row.head{
  background:var(--marble) !important;
}
/* div-table rows + their muted sub-labels / notes hardcode dark greys */
html[data-theme="dark"] .rangetable .area,
html[data-theme="dark"] .rangetable .range{ color:var(--ink) !important; }
html[data-theme="dark"] .rangetable .area span,
html[data-theme="dark"] .rangetable__note{ color:var(--soft) !important; }
/* their body copy hardcodes a dark grey (e.g. #3f3b37) that vanishes on dark */
html[data-theme="dark"] .quick-answer p,
html[data-theme="dark"] .quick-box p,
html[data-theme="dark"] .keybox p,
html[data-theme="dark"] .snap p,
html[data-theme="dark"] .sig p,
html[data-theme="dark"] .driver p,
html[data-theme="dark"] .suit p,
html[data-theme="dark"] .found__i p,
html[data-theme="dark"] .compare td,
html[data-theme="dark"] .compare th,
html[data-theme="dark"] .cmp td,
html[data-theme="dark"] .cost-table td,
html[data-theme="dark"] .cost-table th,
html[data-theme="dark"] .rangetable td,
html[data-theme="dark"] .rangetable th{
  color:var(--ink) !important;
}

/* theme toggle button (injected by site.js into every header) */
.theme-toggle{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(237,230,215,.35); color:var(--bone); cursor:pointer;
  transition:border-color .3s, color .3s, transform .4s var(--ease); }
.theme-toggle:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:rotate(-22deg); }
.theme-toggle svg{ width:17px; height:17px; }
.side__glass .brand{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.theme-toggle--side{ margin-left:auto; width:34px; height:34px; }
.theme-toggle .moon{ display:none; }
html[data-theme="dark"] .theme-toggle .sun{ display:none; }
html[data-theme="dark"] .theme-toggle .moon{ display:block; }
/* expanding color wave for theme switch (View Transitions) */
::view-transition-old(root),::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
::view-transition-new(root){ z-index:9999; } ::view-transition-old(root){ z-index:1; }
.theme-ring{ position:fixed; z-index:9997; width:0; height:0; border-radius:50%; transform:translate(-50%,-50%);
  pointer-events:none; mix-blend-mode:screen; }
@media (prefers-reduced-motion:reduce){ .theme-toggle{ transition:none; } }

/* ============================================================
   ★ SIGNATURE SHELL (2026-06-10) — every inner page now uses the
   HOME's layout language: light top bar, light mega, light drawer,
   light footer. All token-based → dark mode flips automatically.
   (The old dark header/footer + left glass side-menu are retired.)
   ============================================================ */
/* --- top bar: light, like the home nav --- */
.site-header{ background:rgba(252,250,246,.92); color:var(--ink); border-bottom:1px solid var(--line); }
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .site-header{ background:rgba(252,250,246,.84); -webkit-backdrop-filter:blur(16px) saturate(120%); backdrop-filter:blur(16px) saturate(120%); }
}
html[data-theme="dark"] .site-header{ background:rgba(14,11,7,.88); border-bottom-color:var(--line); }
.site-header .wordmark{ color:var(--moss-head); }
.site-nav > a,.site-nav__trigger{ color:var(--ink); }
.site-nav > a:hover,.site-nav > a:focus-visible,
.site-nav__trigger:hover,.site-nav__trigger:focus-visible{ color:var(--gold-ink); background:rgba(201,154,69,.08); }
.site-header__hamb{ color:var(--moss-head); }
.theme-toggle{ border-color:var(--line); color:var(--moss-head); }
.theme-toggle:hover{ border-color:var(--gold); color:var(--gold-ink); }

/* --- mega menus: light card --- */
.mega{ background:var(--ivory-2); color:var(--ink); border:1px solid var(--line); box-shadow:0 36px 80px -36px rgba(35,32,27,.4); }
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .mega{ background:rgba(243,238,228,.96); -webkit-backdrop-filter:blur(20px) saturate(120%); backdrop-filter:blur(20px) saturate(120%); }
}
html[data-theme="dark"] .mega{ background:rgba(27,23,18,.97); }
.mega__col h3{ color:var(--gold-ink); }
.mega__col a{ color:var(--soft); }
.mega__col a:hover,.mega__col a:focus-visible{ color:var(--ink); }
.mega__foot{ border-top-color:var(--line); }
.mega__foot a{ color:var(--gold-ink); }
.mega__foot a:hover,.mega__foot a:focus-visible{ color:var(--ink); }

/* --- mobile drawer: light panel --- */
.drawer__scrim{ background:rgba(22,19,15,.45); }
.drawer__panel{ background:var(--bone); color:var(--ink); box-shadow:-20px 0 60px -30px rgba(0,0,0,.35); }
.drawer__head .wordmark{ color:var(--moss-head); }
.drawer__close{ border-color:var(--line); color:var(--moss-head); }
.drawer nav{ border-top-color:var(--line); }
.drawer nav a{ color:var(--ink); border-bottom-color:var(--line-soft); }
.drawer nav a .idx{ color:var(--gold-ink); }
.drawer nav a:hover,.drawer nav a:focus-visible{ color:var(--gold-ink); }
.drawer__subhead{ color:var(--gold-ink); }
.drawer__sub a{ color:var(--soft); }

/* --- footer: light, like the home foot --- */
.footer{ background:var(--ivory-2); color:var(--ink); border-top:1px solid var(--line); }
.footer .wordmark,.footer .wordmark--light{ color:var(--moss-head); }
.footer__brand .ftag{ color:var(--moss-head); }
.footer__brand p{ color:var(--soft); }
.footer__col h5{ color:var(--gold-ink); }
.footer__col p,.footer__col a{ color:var(--soft); }
.footer__col a:hover{ color:var(--ink); }
.footer__legal{ border-top-color:var(--line); }
.footer__legal .disclaimer{ color:var(--soft); }
.footer__links a{ color:var(--soft); }
.footer__links a:hover{ color:var(--ink); }
.footer__social a{ color:var(--moss-head); border-color:var(--line); }
.footer__social a:hover,.footer__social a:focus-visible{ color:var(--gold-ink); border-color:var(--gold); }

/* --- mobile sticky book bar: keep readable in dark --- */
html[data-theme="dark"] .mbook{ background:rgba(20,17,13,.88); border-top-color:var(--line); }

/* the retired left side panel: never render even if stale markup exists */
.side{ display:none !important; }
body.has-side{ padding-left:0 !important; }
body.has-side .site-header{ display:block !important; }

/* ============================================================
   ★ SIG-HERO — the one hero component every inner page uses
   (home language: eyebrow + huge serif H1 + sub + CTAs + framed
   image). Agents transform page markup to this; CSS lives here
   once so every category is pixel-identical. Token-based = dark-safe.
   ============================================================ */
.sig-hero{ background:var(--ivory); padding:clamp(1.2rem,3vw,2.4rem) var(--pad) clamp(2.8rem,6vw,4.6rem); }
.sig-hero__inner{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sig-hero .crumbs{ margin-bottom:clamp(1.2rem,3vw,2rem); }
.sig-hero .eyebrow{ display:inline-flex; align-items:center; gap:.9rem; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-ink); font-weight:500; }
.sig-hero .eyebrow::before{ content:""; width:38px; height:1px; background:var(--gold); opacity:.9; }
.sig-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.02; color:var(--moss-head); letter-spacing:.004em; margin:1.1rem 0 0; }
.sig-hero h1 em,.sig-hero h1 .gold-it{ font-style:italic; color:var(--gold-ink); }
.sig-hero__sub{ margin:1.3rem 0 0; font-size:1.1rem; line-height:1.7; color:var(--soft); max-width:50ch; font-weight:300; }
.sig-hero__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.4rem; margin:1.5rem 0 0; }
.sig-hero__meta .from{ font-family:var(--sans); font-weight:500; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); }
.sig-hero__meta .amt{ font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--moss-head); font-variant-numeric:lining-nums tabular-nums; }
.sig-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.sig-hero__media{ position:relative; margin:0; aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 34px 70px -40px rgba(35,32,27,.5); }
.sig-hero__media::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(201,154,69,.25); border-radius:14px; }
.sig-hero__media img{ width:100%; height:100%; object-fit:cover; }
.sig-hero--plain .sig-hero__inner{ grid-template-columns:1fr; max-width:880px; text-align:left; }
@media (max-width:920px){
  .sig-hero__inner{ grid-template-columns:1fr; gap:1.8rem; }
  .sig-hero__media{ order:-1; aspect-ratio:16/10; }
  .sig-hero h1{ font-size:clamp(2.3rem,9vw,3.2rem); }
}
html[data-theme="dark"] .sig-hero__media{ box-shadow:0 34px 70px -40px rgba(0,0,0,.7); }

/* ============================================================
   SIG-BODY — inner-page body sections speak the HOME language
   ------------------------------------------------------------
   The signature home reads as: moss serif headings with gold
   italic accents, white cards on a warm canvas, gold hairlines,
   refined radius + soft lift on hover. Inner treatment pages
   were built earlier with charcoal heads + hardcoded grays
   (#4a4744/#5a5650/#fff) that look generic in light and break
   in dark. This layer retunes them — token-based so dark mode
   flips automatically, and scoped under `.page` (every inner
   <main> is `.page`) so it OUTWEIGHS the page-local <style>
   blocks that load after site.css. Dark bands (.section--dark)
   are deliberately excluded so the FAQ band keeps its light ink.
   ============================================================ */

/* — Section headings: signature moss serif + gold italic (skip dark bands) — */
.page .section:not(.section--dark) h2{ color:var(--moss-head); }
.page .section:not(.section--dark) h2 em,
.page .section:not(.section--dark) h3 em{ font-style:italic; color:var(--gold-ink); }
.page .section .intro,
.page .section .lede{ color:var(--ink-soft); }

/* — Prose / body copy — */
.page .prose p{ color:var(--ink-soft); }
.page .prose h2,
.page .prose h3{ color:var(--moss-head); }
.page .prose h2 em,
.page .prose h3 em{ font-style:italic; color:var(--gold-ink); }

/* — STEPS: refined rule + serif gold numerals + moss heads — */
.page .steps li{ border-top:1px solid var(--line); }
.page .steps li:last-child{ border-bottom:1px solid var(--line); }
.page .steps .step-n{ font-family:var(--serif); font-style:italic; color:var(--gold-ink); }
.page .steps h3{ color:var(--moss-head); }
.page .steps p{ color:var(--ink-soft); }

/* — SERVICE CARDS (.svc) in the category hubs: premium home-language card.
     No per-service imagery exists, so these read as elegant text cards:
     white surface, gold hairline, moss serif name, gold price, gold-edge lift. */
.page .svc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 38px -26px rgba(42,37,32,.40);
}
.page .svc::before{
  content:""; position:absolute; left:1.5rem; right:1.5rem; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,154,69,.55), transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.page .svc{ position:relative; }
.page .svc:hover,
.page .svc:focus-within{
  transform:translateY(-3px);
  box-shadow:0 26px 60px -28px rgba(42,37,32,.5);
  border-color:rgba(201,154,69,.5);
}
.page .svc:hover::before,
.page .svc:focus-within::before{ opacity:1; }
.page .svc__name{ color:var(--moss-head); }
.page .svc__price{ color:var(--gold-ink); }
.page .svc__desc{ color:var(--ink-soft); }
.page .svc__more{ color:var(--gold-ink); }
.page .svc-note{ color:var(--ink-soft); }

/* — CONCERN cards — */
.page .concern{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.page .concern:hover,
.page .concern:focus-within{ border-color:rgba(201,154,69,.5); box-shadow:0 26px 60px -28px rgba(42,37,32,.5); }
.page .concern h3{ color:var(--moss-head); }
.page .concern .more{ color:var(--gold-ink); }

/* — PRICE CARD — */
.page .price-card{
  background:var(--marble); border:1px solid var(--line); border-radius:14px;
}
.page .price-card .from{ color:var(--gold-ink); }
.page .price-card .amt{ color:var(--moss-head); }
.page .price-card p{ color:var(--ink-soft); }

/* — RELATED cards (fix hardcoded #fff → token; gold-edge hover) — */
.page .related-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.page .related-card:hover,
.page .related-card:focus-within{ border-color:rgba(201,154,69,.5); box-shadow:0 26px 60px -28px rgba(42,37,32,.5); }
.page .related-card h3{ color:var(--moss-head); }
.page .related-card p{ color:var(--ink-soft); }

/* — A–Z index groups (treatments hub) — */
.page .tx-group__head h3{ color:var(--moss-head); }
.page .tx-group__all{ color:var(--gold-ink); }
.page .tx-index-list a:hover{ color:var(--gold-ink); }
.page .tx-list .price{ color:var(--gold-ink); }
.page .tx-list .note{ color:var(--ink-soft); }

/* — Rx trademark line (sits OUTSIDE .page, direct child of body) — */
body .rx-line{ background:var(--marble); border-top:1px solid var(--line); }
body .rx-line p{ color:var(--ink-soft); }

/* — Respect reduced-motion (our hover rules outweigh the page-local guards) — */
@media (prefers-reduced-motion:reduce){
  .page .svc:hover,.page .svc:focus-within,
  .page .concern:hover,.page .concern:focus-within,
  .page .related-card:hover,.page .related-card:focus-within{ transform:none; }
}

/* ============================================================
   SIG-BODY · part 2 — boutique coherence
   Give the shop the home's card language: white cards, gold
   hairlines, moss serif titles, gold serif prices, bigger
   blocks. Applies to every shop page (shared classes).
   (Inner pages stay left-aligned to match the sig-hero — the
   fix for "looks poor" is richness, not re-centering.)
   ============================================================ */

/* — SHOP boutique: bigger blocks + home-language product cards (all shop pages) — */
.shop-grid{ gap:1.9rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.prod-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; }
.prod-card:hover,.prod-card:focus-within{ border-color:rgba(201,154,69,.5); box-shadow:0 28px 62px -30px rgba(42,37,32,.5); }
.prod-card__media{ aspect-ratio:1/1; background:var(--marble); }
.prod-card__title{ color:var(--moss-head); font-size:1.24rem; }
.prod-card__now{ color:var(--gold-ink); font-size:1.06rem; font-family:var(--serif); }
.prod-card__tag{ color:var(--gold-ink); background:rgba(201,154,69,.12); }
/* product detail pages */
.page .prod h1{ color:var(--moss-head); }
.page .prod__desc,.page .ship-note,.page .use-steps p{ color:var(--ink-soft); }
.page .use-steps h3{ color:var(--moss-head); }
.page .use-steps .step-n{ color:var(--gold-ink); }

/* ============================================================
   SIG-BODY · part 3 — ONE CENTRED COLUMN (2026 client revision)
   Was: every child anchored to the LEFT edge of a 1480px zone, which
   on any screen ≤1480 collapsed to a narrow column crammed against
   the left with a big empty right gutter — the exact look the client
   asked us to kill. Now: every child shares the left edge of a CENTRED
   --colw column (~1080px), so eyebrow, heading, prose, lists and cards
   line up on one edge AND the whole column is balanced/centerd. Copy
   still reads left-aligned inside. max() collapses to a flush left
   anchor on narrow screens. !important beats every page-local left-pin
   variant (.page/.right .section > * { margin-left:0 }). Full-bleed
   bands (media-band / .bleed) override this below with higher
   specificity to run edge-to-edge.
   ============================================================ */
body .section > *,
body .crumb-bar > *{
  margin-left: max(0px, calc((100% - var(--colw, 1080px)) / 2)) !important;
  margin-right: max(0px, calc((100% - var(--colw, 1080px)) / 2)) !important;
}

/* ============================================================
   DARK MODE — systematic legacy-class repair (DARK ONLY)
   Inner-page CSS was authored for LIGHT mode with hardcoded
   colors (#46423e, #5a5650, #fff gradients, #4a4744…) that vanish
   or turn ugly (white/silver bars) in dark mode. This re-points
   every legacy text / surface class to dark-safe tokens — scoped
   to html[data-theme="dark"] so LIGHT mode is never touched. Wins
   over page-local rules by specificity (+ !important on surfaces).
   ============================================================ */
/* surfaces — kill #fff / light gradients → dark card */
html[data-theme="dark"] .step,
html[data-theme="dark"] .svc,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .next-card,
html[data-theme="dark"] .svc-link,
html[data-theme="dark"] .concern,
html[data-theme="dark"] .pairs-grid > *,
html[data-theme="dark"] .keybox{ background:var(--card) !important; border-color:rgba(216,174,99,.18) !important; }
html[data-theme="dark"] .price-card{ background:var(--marble) !important; }
/* body / muted text → readable token */
html[data-theme="dark"] .prose p,
html[data-theme="dark"] .prose li,
html[data-theme="dark"] .prose .lead,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .steps p,
html[data-theme="dark"] .svc__desc,
html[data-theme="dark"] .svc-note,
html[data-theme="dark"] .related-card p,
html[data-theme="dark"] .concern p,
html[data-theme="dark"] .price-card p,
html[data-theme="dark"] .use-steps p,
html[data-theme="dark"] .do-list li,
html[data-theme="dark"] .svc-link p,
html[data-theme="dark"] .pillars p,
html[data-theme="dark"] .visit-details__v,
html[data-theme="dark"] .ship-note,
html[data-theme="dark"] .tx-list .note,
html[data-theme="dark"] .keybox p,
html[data-theme="dark"] .section .intro,
html[data-theme="dark"] .section .lede{ color:var(--ink-soft) !important; }
/* headings / titles that were hardcoded dark → sage-moss (brand) */
html[data-theme="dark"] .step h3,
html[data-theme="dark"] .svc__name,
html[data-theme="dark"] .svc-link h3,
html[data-theme="dark"] .related-card h3,
html[data-theme="dark"] .concern h3,
html[data-theme="dark"] .pillars h3,
html[data-theme="dark"] .keybox h3{ color:var(--moss-head) !important; }
/* prices / numerals → gold */
html[data-theme="dark"] .svc__price,
html[data-theme="dark"] .price-card .amt,
html[data-theme="dark"] .step .step-n,
html[data-theme="dark"] .use-steps .step-n{ color:var(--gold-ink) !important; }
/* FAQ answer on the dark/green band → clearly legible (was dim) */
html[data-theme="dark"] .faq__a p,
html[data-theme="dark"] .section--dark .faq__a p{ color:#E8ECE0 !important; }
html[data-theme="dark"] .faq__item > summary{ color:#F1E9DA !important; }

/* Hero inner shares the body's left edge (the --maxw centerd zone) so the
   hero copy lines up with the sections below it. */
/* Every inner-page hero shares the SAME centerd column as the body sections,
   so the hero copy lines up exactly with the content below it on every page. */
body .svc-hero__inner,
body .sig-hero__inner{
  max-width: var(--colw, 1080px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   .gd-book — home-style booking band (video of the model + leaf,
   text & buttons left-justified) for the guides/blog CTA. Mirrors
   the home's .book band. Sits on a .section--dark so colors
   already read light.
   ============================================================ */
.gd-book{ position:relative; overflow:hidden; padding:0 !important; border-bottom:0; min-height:clamp(380px,46vw,560px); display:flex; }
.gd-book::before{ display:none !important; } /* drop the section--dark radial glow; the video is the surface */
.gd-book__bg{ position:absolute; inset:0; z-index:0; }
.gd-book__bg video{ width:100%; height:100%; object-fit:cover; object-position:64% 50%; }
.gd-book__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(17,20,13,.95) 0%, rgba(17,20,13,.82) 28%, rgba(17,20,13,.34) 56%, rgba(17,20,13,0) 84%),
    linear-gradient(180deg, rgba(17,20,13,.30), rgba(17,20,13,.20) 40%, rgba(17,20,13,.48)); }
.gd-book__inner{ position:relative; z-index:2; width:100%;
  max-width:var(--maxw,1480px) !important; margin-left:auto !important; margin-right:auto !important;
  padding:clamp(3.4rem,7vw,5.6rem) var(--pad); align-self:center; }
.gd-book__inner > *{ max-width:46ch; margin-left:0 !important; margin-right:0 !important; text-align:left !important; }
.gd-book__inner .eyebrow{ color:var(--gold-bright); }
.gd-book__inner .eyebrow::before{ background:var(--gold-bright); }
.gd-book__inner h2{ color:#fff; margin:1rem 0 0; }
.gd-book__inner h2 em{ color:var(--gold-bright); font-style:italic; }
.gd-book__p{ color:#E8ECE0; margin:1.1rem 0 0; font-size:1.04rem; line-height:1.7; }
.gd-book__inner .cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; max-width:none; }
/* full-bleed fix: the global centerd-column override (body .section > *) was squeezing the
   absolutely-positioned video to ~1080px, leaving green side-bands. Restore edge-to-edge media,
   keep copy centerd — so the band reads full-width like the home booking band. */
body .gd-book > .gd-book__bg,
body .gd-book > .gd-book__scrim{ margin-left:0 !important; margin-right:0 !important; max-width:none !important; }
body .gd-book > .gd-book__inner{ margin-left:auto !important; margin-right:auto !important; max-width:var(--maxw,1480px) !important; }
@media (prefers-reduced-motion:reduce){ .gd-book__bg video{ display:none; } .gd-book__bg{ background:#1b2014; } }
@media (max-width:720px){
  .gd-book__scrim{ background:linear-gradient(180deg, rgba(17,20,13,.55) 0%, rgba(17,20,13,.75) 60%, rgba(17,20,13,.9) 100%); }
  .gd-book__bg video{ object-position:60% 28%; }
}

/* ============================================================
   CONTRAST — class-agnostic safety net (service pages use many
   bespoke class names: .vr-step, .vr-faq, .step, .prose…). Target
   by STRUCTURE, not class name, so every page is covered at once.
   ============================================================ */
/* (a) Green/dark bands are dark in BOTH themes → all text must be light */
.section--dark p,
.section--dark li,
.section--dark dd,
.section--dark .answer,
.section--dark .intro,
.section--dark .lede,
.section--dark summary,
.section--dark [class*="faq"] p,
.section--dark [class*="step"] p{ color:#E6E9DE !important; }
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark summary{ color:#FFFFFF !important; }
.section--dark h2 em,
.section--dark h3 em{ color:var(--gold-bright) !important; }
/* (b) DARK MODE — body text on light sections must be light, whatever the class */
html[data-theme="dark"] .section:not(.section--dark) p,
html[data-theme="dark"] .section:not(.section--dark) li,
html[data-theme="dark"] .section:not(.section--dark) dd,
html[data-theme="dark"] .section:not(.section--dark) .answer,
html[data-theme="dark"] .section:not(.section--dark) .intro,
html[data-theme="dark"] .section:not(.section--dark) .lede,
html[data-theme="dark"] .section:not(.section--dark) summary{ color:var(--ink-soft) !important; }
html[data-theme="dark"] .section:not(.section--dark) h2,
html[data-theme="dark"] .section:not(.section--dark) h3,
html[data-theme="dark"] .section:not(.section--dark) h4{ color:var(--moss-head) !important; }
/* (b2) LEGAL PAGES — cookie/privacy/terms/accessibility prose that lives in
   <article class="legal"> or .ccat / .legal-card (NOT a .section) hardcodes dark hex
   text + light backgrounds, so the .section lift above never reaches it → dark-on-dark.
   Mirror the lift for those containers. */
html[data-theme="dark"] .legal p,
html[data-theme="dark"] .legal li,
html[data-theme="dark"] .legal dd,
html[data-theme="dark"] .legal__lede,
html[data-theme="dark"] .ccat p,
html[data-theme="dark"] .ccat dd,
html[data-theme="dark"] .legal-art cite,
html[data-theme="dark"] .legal-contact__v{ color:var(--ink-soft) !important; }
html[data-theme="dark"] .ccat{ background:var(--card) !important; border-color:var(--line-c) !important; }
/* (b3) Treatment/contact panels with hardcoded #fff (or #fff→token gradient) backgrounds NOT
   caught by [class*="card"] or the explicit list — flip the surface dark so their token-color
   headings (var(--charcoal)/--ink) read, and lift the hardcoded-dark body text within them. */
html[data-theme="dark"] .concern,
html[data-theme="dark"] .iv-index__list a,
html[data-theme="dark"] .cform__success,
html[data-theme="dark"] .consent,
html[data-theme="dark"] .svc,
html[data-theme="dark"] .step,
html[data-theme="dark"] .related,
html[data-theme="dark"] .svc-facts li,
html[data-theme="dark"] .px-fact,
html[data-theme="dark"] .px-pricing{ background:var(--paper) !important; border-color:var(--line-c) !important; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea{ background:var(--paper) !important; color:var(--ink) !important; border-color:var(--line-c) !important; }
html[data-theme="dark"] .iv-index__list a,
html[data-theme="dark"] .cform__success p,
html[data-theme="dark"] .consent label,
html[data-theme="dark"] .svc-note,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .px-fact span{ color:var(--ink-soft) !important; }
html[data-theme="dark"] .section:not(.section--dark) h2 em,
html[data-theme="dark"] .section:not(.section--dark) h3 em{ color:var(--gold-ink) !important; }
/* (b2) BLOG featured cards are an overlay style — light text on a photo, in BOTH
   themes. The broad `[class*="card"]` dark rule above (line ~1605) substring-matches
   every feat-card__* element (…__media/__body/__title/__dek/__more/__tag) and paints
   an opaque --paper panel over the photo, hiding it. Reset the subtree to transparent
   and keep the text light, exactly like light mode (gold pills in dark). */
html[data-theme="dark"] .feat-card__media,
html[data-theme="dark"] .feat-card__body,
html[data-theme="dark"] .feat-card__title,
html[data-theme="dark"] .feat-card__dek,
html[data-theme="dark"] .feat-card__more{ background:transparent !important; border-color:transparent !important; }
html[data-theme="dark"] .gd-featured .feat-card .feat-card__title{ color:#FFFFFF !important; }
html[data-theme="dark"] .feat-card__dek{ color:#E7DFD2 !important; }
html[data-theme="dark"] .feat-card__more{ color:#EDE6D7 !important; }
html[data-theme="dark"] .feat-card__tag{ background:var(--platinum-2) !important; color:#1f1b17 !important; }
/* (c) Dark image heroes — bespoke .vr-hero/.svc-hero/.chero answer text → light */
.svc-hero .answer,.vr-hero .answer,.chero .answer,
[class*="-hero"] .answer{ color:#EDE6DB !important; }

/* (d) Green/dark band text in DARK MODE must stay light — override the
   generic dark-mode body rules (which would set ink-soft on the green band). */
html[data-theme="dark"] .section--dark p,
html[data-theme="dark"] .section--dark li,
html[data-theme="dark"] .section--dark dd,
html[data-theme="dark"] .section--dark .intro,
html[data-theme="dark"] .section--dark .lede,
html[data-theme="dark"] .section--dark .answer,
html[data-theme="dark"] .section--dark summary,
html[data-theme="dark"] .section--dark [class*="faq"] p,
html[data-theme="dark"] .section--dark [class*="step"] p{ color:#E6E9DE !important; }
html[data-theme="dark"] .section--dark h2,
html[data-theme="dark"] .section--dark h3,
html[data-theme="dark"] .section--dark h4{ color:#FFFFFF !important; }
html[data-theme="dark"] .section--dark h2 em,
html[data-theme="dark"] .section--dark h3 em{ color:var(--gold-bright) !important; }

/* ============================================================
   UNIFIED HEADER + FOOTER (2026-06-10)
   One identical top bar and footer on every page, matched to
   the approved home. Header = faithful twin of home .nav;
   footer = the home .foot migrated onto shared tokens.
   ============================================================ */

/* --- brand lockup in the shared header (mirrors home .brand) --- */
.site-header .brand{
  display:inline-flex; flex-direction:column; line-height:1;
  white-space:nowrap; flex:none; text-decoration:none;
  /* the base .brand rule sets align-items:baseline + gap:.7rem, which on a column
     pushes the "Aesthetic Medicine" line ~11px down (looked separated vs the home).
     Reset to match the home wordmark exactly: tight, left-aligned, gap from margin only. */
  align-items:flex-start; gap:0; margin-bottom:0;
}
.site-header .brand b{
  font-family:var(--serif); font-weight:600; font-size:1.5rem;
  letter-spacing:.07em; color:var(--moss-head);
}
.site-header .brand small{
  font-family:var(--sans); font-weight:500; font-size:.54rem;
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold-ink); margin-top:.28rem;
}
@media(max-width:560px){
  .site-header .brand b{ font-size:1.16rem; letter-spacing:.04em; }
  .site-header .brand small{ font-size:.5rem; letter-spacing:.3em; }
}

/* --- phone link in the header (mirrors home .nav__tel) --- */
.site-header__tel{
  display:inline-flex; align-items:center; gap:.42rem; flex:none;
  font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.03em;
  color:var(--ink); text-decoration:none; padding:.5rem .35rem;
  transition:color .25s var(--ease);
}
.site-header__tel svg{ width:16px; height:16px; }
.site-header__tel:hover,.site-header__tel:focus-visible{ color:var(--gold-ink); }
@media(max-width:1519px){ .site-header__tel{ display:none; } }
/* very small phones (≤360px, e.g. old iPhone SE): tighten the mobile bar so the
   wordmark + hamburger never force horizontal scroll. */
@media(max-width:360px){
  .site-header__bar{ padding-left:12px; padding-right:12px; gap:.4rem; }
  .site-header .wordmark{ font-size:1.06rem; }
}

/* ════════════════════════════════════════════════════════════
   TOP BAR ALIGNED TO THE HOME BAR (desktop ≥861px): full-width bar,
   centerd nav links, same height + link typography + underline-hover
   as the home .nav. The mobile bar (≤860px) is left untouched — it
   already matches the home mobile bar. Single file → every inner page
   gets the exact same top bar as the homepage.
   ════════════════════════════════════════════════════════════ */
@media(min-width:861px){
  .site-header__bar{ max-width:none; padding:1.02rem clamp(1.4rem,5vw,5rem); }
  .site-header__spacer{ display:none; }
  .site-nav{ margin-left:auto; margin-right:auto; gap:1.8rem; }
  .site-nav > a,.site-nav__trigger{ font-size:.8rem; letter-spacing:.17em; padding:.2rem 0; border-radius:0; }
  .site-nav > a:hover,.site-nav > a:focus-visible,
  .site-nav__trigger:hover,.site-nav__trigger:focus-visible{ background:transparent; }
  .site-nav > a{ position:relative; opacity:.82; }
  .site-nav > a::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease); }
  .site-nav > a:hover::after,.site-nav > a:focus-visible::after{ width:100%; }
  .site-nav > a:hover{ opacity:1; }
  .site-header__tel{ margin-left:.2rem; }
}

/* ============================================================
   FOOTER — home ".foot" migrated to shared tokens (--bg→--paper,
   --ink-soft→--soft) so it renders identically on every page.
   ============================================================ */
.foot{ background:var(--paper); border-top:1px solid var(--line); padding:clamp(3.5rem,6vw,5rem) 0 4.5rem; }
.foot .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.foot__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2rem; }
.foot__bn{ display:inline-flex; flex-direction:column; line-height:1; margin-bottom:1rem; }
.foot__bn b{ font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.05em; color:var(--moss-head); }
.foot__bn small{ font-family:var(--sans); font-weight:500; font-size:.54rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-ink); margin-top:.3rem; }
.foot__top>div>p{ color:var(--soft); font-size:.9rem; margin:0 0 .5rem; max-width:36ch; }
.foot .fh{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 1rem; font-weight:500; }
.foot__top a{ display:block; color:var(--soft); font-size:.9rem; margin:0 0 .55rem; transition:color .2s; overflow-wrap:anywhere; }
.foot__top a:hover,.foot__top a:focus-visible{ color:var(--ink); }
/* "Leave a Google review" pill (footer Book column) */
.foot__review{ display:inline-flex !important; flex-direction:column; align-items:center; text-align:center; gap:.25rem; margin-top:.5rem !important; padding:.5rem 1.1rem; border:1px solid var(--gold); border-radius:14px; color:var(--gold-ink) !important; font-weight:600; font-size:.82rem; line-height:1.15; white-space:nowrap; transition:background .2s,color .2s,border-color .2s; }
.foot__review:hover,.foot__review:focus-visible{ background:var(--gold); color:#1d1404 !important; border-color:var(--gold); }
.foot__review .foot__stars{ color:var(--gold); letter-spacing:.08em; font-size:.84rem; }
.foot__review:hover .foot__stars,.foot__review:focus-visible .foot__stars{ color:#1d1404; }
.foot__social{ display:flex; gap:.55rem; margin-top:1.3rem; }
.foot__social a{ width:38px; height:38px; margin:0; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--soft); transition:color .25s,border-color .25s,transform .25s; }
.foot__social a:hover,.foot__social a:focus-visible{ color:var(--gold-ink); border-color:var(--gold); transform:translateY(-2px); }
.foot__social svg{ width:17px; height:17px; }
.foot__legal{ margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.79rem; color:#6a665d; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:var(--pad); padding-right:var(--pad); }
.foot .wrap .foot__legal{ padding-left:0; padding-right:0; }
.foot__legal .disc{ max-width:88ch; line-height:1.75; margin:0 0 .9rem; }
.foot__links{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:0 0 .9rem; list-style:none; padding:0; }
.foot__links a{ color:#6a665d; }
.foot__links a:hover,.foot__links a:focus-visible{ color:var(--ink); text-decoration:underline; }
/* mobile: compact footer — twin of the home footer. Brand full-width on top, link
   columns stay 2-up (never collapse to one tall stack), tightened spacing. Compliance
   disclaimer + legal links kept in full. Applies to every inner page at once. */
@media(max-width:920px){ .foot__top{ grid-template-columns:1fr 1fr; gap:1.5rem; } }
@media(max-width:520px){
  .foot{ padding:2.3rem 0 2.8rem; }
  .foot__top{ grid-template-columns:1fr 1fr; gap:1.3rem 1.1rem; }
  .foot__top>div:first-child{ grid-column:1/-1; }
  .foot__bn{ margin-bottom:.45rem; } .foot__bn b{ font-size:1.22rem; }
  .foot__top>div:first-child>p{ font-size:.82rem; line-height:1.5; margin:0 0 .5rem; max-width:46ch; }
  .foot__social{ margin-top:.7rem; gap:.4rem; } .foot__social a{ width:33px; height:33px; } .foot__social svg{ width:15px; height:15px; }
  .foot .fh{ margin-bottom:.5rem; }
  .foot__top a{ font-size:.84rem; margin-bottom:.38rem; }
  .foot__top>div>p{ font-size:.84rem; margin:0 0 .38rem; }
  .foot__legal{ margin-top:1.4rem; padding-top:1rem; font-size:.72rem; }
  .foot__legal .disc{ line-height:1.5; margin:0 0 .55rem; }
  .foot__links{ gap:.25rem .75rem; margin:0 0 .5rem; }
  .foot__review{ white-space:normal; padding:.5rem .8rem; }
}
html[data-theme="dark"] .foot__legal,
html[data-theme="dark"] .foot__legal .disc,
html[data-theme="dark"] .foot__legal p,
html[data-theme="dark"] .foot__links a{ color:#9C9382; }

/* ============================================================
   ★ INNER-PAGE EDITORIAL SYSTEM (2026) ★
   Client ask: kill the narrow column pinned to the LEFT; image &
   CTA bands must run FULL-BLEED edge-to-edge; more marble texture,
   less boxed-in feeling. Lives in shared CSS so every inner page
   inherits it at once. Specificity (.page.right …) is set just
   above the per-page ".page .section" left-pin so this wins
   WITHOUT editing each page's local <style>.
   ============================================================ */

/* 1 ─ (Column centring now lives in the "ONE CENTRED COLUMN" rule
       above, via --colw — single source of truth.) */

/* 2 ─ FULL-BLEED bands: a media-band / media-split / .bleed that is a
       direct child of a .section breaks out to the section's full
       width. Uses negative padding (NOT 100vw) so it can never create
       a horizontal scrollbar. !important + higher specificity beat the
       centerd-column rule above. */
body .section > .media-band,
body .section > .media-split,
body .section > .bleed{
  margin-left:calc(-1 * var(--pad)) !important;
  margin-right:calc(-1 * var(--pad)) !important;
  max-width:none !important; width:auto !important;
}
/* cinematic single image — square corners, wide crop, flush to edges */
body .section > .media-band img{
  border-radius:0; aspect-ratio:16 / 6.5; box-shadow:none;
}
body .section > .media-band figcaption{
  max-width:var(--colw,1080px); margin:.9rem auto 0;
  padding:0 var(--pad); text-align:center; font-style:italic;
}
@media (max-width:860px){
  body .section > .media-band img{ aspect-ratio:4 / 3; }
}

/* 3 ─ MARBLE editorial band — a full-bleed glowband painted on light
       Calacatta with dark ink copy: the "marble texture" closer the
       client wants. Add class="glowband glowband--marble" + set the
       <img> src to /img/marmol_kling_r1.webp. */
.glowband--marble .glowband__scrim{
  background:
    linear-gradient(90deg, rgba(247,242,232,.90) 0%, rgba(247,242,232,.60) 34%, rgba(247,242,232,.16) 64%, rgba(247,242,232,.30) 100%),
    linear-gradient(180deg, rgba(247,242,232,.34), rgba(247,242,232,.10) 45%, rgba(247,242,232,.34) 100%);
}
.glowband--marble .eyebrow{ color:var(--gold-ink); }
.glowband--marble .eyebrow::before{ background:var(--gold); }
.glowband--marble h2{ color:var(--moss-head); }
.glowband--marble h2 em{ color:var(--gold-ink); font-style:italic; }
.glowband--marble p{ color:#4a4744; }
/* DARK MODE: this band keeps a LIGHT Calacatta scrim in both themes, so its copy must
   stay DARK INK. The moss-head/gold-ink tokens flip to light values in dark mode, which
   washed the heading + eyebrow out on the pale stone. Pin them to the light-mode ink. */
html[data-theme="dark"] .glowband--marble .eyebrow{ color:#74570D; }
html[data-theme="dark"] .glowband--marble .eyebrow::before{ background:#C99A45; }
html[data-theme="dark"] .glowband--marble h2{ color:#4A583F; }
html[data-theme="dark"] .glowband--marble h2 em{ color:#74570D; }
html[data-theme="dark"] .glowband--marble p{ color:#4a4744; }

/* 3b ─ Legal pages: `.legal-body` applied to the <section> itself capped the
        WHOLE band to 66ch and left-pinned it, so the policy text no longer
        lined up with the centerd hero. Un-cap the section; keep the 66ch
        measure on the text, left-aligned in the same centerd column. */
body.legal .section.legal-body{ max-width:none; }

/* 4 ─ Even out the tinted-band texture: the old single diagonal vein
       read as a "weird long stripe" running through the section.
       Swap it for even Calacatta marble, very faint. Applies to every
       .section--tint site-wide → subtle marble everywhere. */
.section--tint::before{
  background:url(/img/marmol_kling_r1.webp) center/cover no-repeat;
  opacity:.05;
}

/* 5 ─ RELATED CARDS WITH IMAGE (shared, so every page can use botox's
       image-card pattern). Only cards that actually contain a
       .related-card__media get the flush-image layout (via :has) — so
       untouched text-only cards are never disturbed. Agents add:
         <span class="related-card__media"><img …></span>
         <div class="related-card__body"> …existing h3/p/a… </div>  */
body .related-card:has(.related-card__media){ padding:0 !important; overflow:hidden; }
body .related-card__media{ aspect-ratio:3/2; overflow:hidden; background:var(--marble); }
body .related-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
body .related-card:hover .related-card__media img{ transform:scale(1.04); }
body .related-card__body{ display:flex; flex-direction:column; gap:.5rem; padding:1.4rem 1.5rem 1.4rem; }
@media (prefers-reduced-motion:reduce){ body .related-card:hover .related-card__media img{ transform:none; } }

/* 6 ─ COLLAPSIBLE CONTENT SECTION (guides/blog) — turn long secondary
       sections into a scannable accordion. The <section> keeps its
       background/band; the heading becomes the clickable summary. */
.sec-acc{ margin:0; }
.sec-acc > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
}
.sec-acc > summary::-webkit-details-marker{ display:none; }
.sec-acc > summary:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; border-radius:6px; }
.sec-acc__head{ display:block; min-width:0; }
.sec-acc__head .eyebrow{ margin-bottom:.9rem; }
.sec-acc__head h2{ margin:0; }
.sec-acc__chev{
  flex:none; margin-top:.35rem; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--gold-ink);
  transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.sec-acc__chev svg{ width:18px; height:18px; }
.sec-acc[open] > summary .sec-acc__chev{ transform:rotate(180deg); }
.sec-acc > summary:hover .sec-acc__chev,
.sec-acc > summary:focus-visible .sec-acc__chev{ background:var(--marble); border-color:var(--gold); }
.sec-acc__body{ margin-top:1.7rem; }
.section--dark .sec-acc__chev{ color:var(--gold-bright); border-color:rgba(232,184,115,.3); }
@media (prefers-reduced-motion:reduce){ .sec-acc__chev{ transition:none; } }

/* ============================================================
   BLOG ARTICLE READING EXPERIENCE (2026-06-11)
   Shared, auto-applied enhancements for /blog/<slug>/ articles.
   Everything is gated behind `body.has-blog-article`, a class that
   /assets/site.js adds ONLY on standard blog article pages (not the
   /blog/ hub, not the multi-page guide flipbooks, not other sections).
   Tokens used (var --…) flip automatically in light & dark mode.
   ============================================================ */

/* ---- 1. Reading rhythm: airier prose, comfortable measure ---- */
body.has-blog-article main.page .prose p{
  line-height:1.8;
  max-width:68ch;
  font-size:1.06rem;
}
body.has-blog-article main.page .prose p + p{ margin-top:1.25rem; }
body.has-blog-article main.page .prose h2{ margin:2.6rem 0 .8rem; line-height:1.14; }
body.has-blog-article main.page .prose h3{ margin:2.2rem 0 .65rem; line-height:1.18; }
body.has-blog-article main.page .prose li{ line-height:1.7; }
/* a touch more air between body sections so the read breathes */
body.has-blog-article main.page > .section,
body.has-blog-article main.page article > .section{ scroll-margin-top:96px; }
/* every heading we anchor gets scroll offset under the sticky header */
body.has-blog-article main.page h2[id],
body.has-blog-article main.page h3[id]{ scroll-margin-top:104px; }

/* ---- 7. More editorial hero ---- */
body.has-blog-article .sig-hero h1{ letter-spacing:.002em; }
body.has-blog-article .sig-hero__sub{ font-size:1.12rem; line-height:1.75; }
body.has-blog-article .sig-hero__media img{
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}

/* ---- 5. Pull-quotes (style existing <blockquote>) ---- */
body.has-blog-article .prose blockquote,
body.has-blog-article main.page blockquote:not(.pull-quote){
  margin:2.4rem 0;
  padding:.4rem 0 .4rem 1.6rem;
  border-left:3px solid var(--oxblood);
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.5rem;
  line-height:1.4;
  color:var(--moss-head);
  max-width:62ch;
}
body.has-blog-article main.page blockquote:not(.pull-quote) cite{
  display:block;
  margin-top:.7rem;
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-ink);
}

/* ---- 2. Table of contents ---- */
/* Mobile / default: a collapsible "In this article" block near the top */
.art-toc{
  margin:0 auto;
  max-width:var(--colw,1080px);
}
.art-toc__box{
  border:1px solid var(--line-c);
  border-radius:14px;
  background:linear-gradient(180deg, var(--ivory-2), var(--ivory));
  overflow:hidden;
}
.art-toc__sum{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem;
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.art-toc__sum::-webkit-details-marker{ display:none; }
.art-toc__chev{ flex:none; width:20px; height:20px; transition:transform .3s var(--ease); color:var(--gold-ink); }
.art-toc[open] .art-toc__chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .art-toc__chev{ transition:none; } }
.art-toc__list{ list-style:none; margin:0; padding:.2rem .4rem 1rem; }
.art-toc__list li{ margin:0; }
.art-toc__list li.lvl-3 a{ padding-left:2.4rem; font-size:.92rem; }
.art-toc__list a{
  display:block;
  padding:.5rem 1.2rem .5rem 1.2rem;
  font-family:var(--sans);
  font-weight:400;
  font-size:.98rem;
  line-height:1.4;
  color:var(--ink-soft, var(--soft));
  border-left:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.art-toc__list a:hover,
.art-toc__list a:focus-visible{ color:var(--oxblood); }
.art-toc__list a.is-active{ color:var(--oxblood); border-left-color:var(--oxblood); font-weight:500; }

/* Desktop ≥1024px: slim sticky sidebar to the right of the prose */
@media (min-width:1024px){
  body.has-blog-article main.page .art-toc{ display:none; } /* hide the inline mobile block */
  .art-toc-rail{
    position:fixed;
    top:120px;
    /* Anchor in the RIGHT gutter, hugging the viewport's right margin. JS keeps
       it here (and only reveals it) when the gutter beside the centerd column
       is wide enough, so it never crosses into the prose. This `right` is the
       safe CSS fallback so the rail is NEVER left un-anchored over hero/prose. */
    right:clamp(1rem, calc((100vw - var(--colw, 1080px)) / 2 - 196px), 2.4vw);
    width:180px;
    max-height:calc(100vh - 170px);
    overflow-y:auto;
    z-index:5;
    /* subtle solid/blur card so it stays legible even if it ever overlaps content */
    padding:1rem 1rem 1rem 1rem;
    border:1px solid var(--line-c);
    border-radius:14px;
    background:color-mix(in srgb, var(--ivory, #FCFAF6) 86%, transparent);
    -webkit-backdrop-filter:saturate(1.1) blur(8px);
    backdrop-filter:saturate(1.1) blur(8px);
    box-shadow:0 18px 40px -28px rgba(42,37,32,.4);
    /* hidden until the hero scrolls out of view (JS toggles .is-visible) so it
       can never land on top of the editorial hero — fade + slight rise in */
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .art-toc-rail.is-visible{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
  }
  @media (prefers-reduced-motion:reduce){
    .art-toc-rail{ transition:none; transform:none; }
    .art-toc-rail.is-visible{ transition:none; }
  }
  .art-toc-rail__title{
    font-family:var(--sans);
    font-weight:500;
    font-size:.62rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold-ink);
    margin:0 0 .8rem;
  }
  .art-toc-rail ol{ list-style:none; margin:0; padding:0; }
  .art-toc-rail li{ margin:0 0 .15rem; }
  .art-toc-rail li.lvl-3 a{ padding-left:1.6rem; font-size:.82rem; }
  .art-toc-rail a{
    display:block;
    padding:.35rem .2rem;
    font-family:var(--sans);
    font-weight:400;
    font-size:.86rem;
    line-height:1.35;
    color:var(--soft);
    border-left:2px solid transparent;
    margin-left:-1rem; padding-left:1rem;
    transition:color .2s var(--ease), border-color .2s var(--ease);
  }
  .art-toc-rail a:hover,
  .art-toc-rail a:focus-visible{ color:var(--oxblood); }
  .art-toc-rail a.is-active{ color:var(--oxblood); border-left-color:var(--oxblood); font-weight:500; }
}
@media (max-width:1023px){ .art-toc-rail{ display:none; } }

/* ---- 4. Share row ---- */
.art-share{
  margin:0 auto;
  max-width:var(--colw,1080px);
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  padding-top:.2rem;
}
.art-share__label{
  font-family:var(--sans);
  font-weight:500;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--soft);
  margin-right:.4rem;
}
.art-share__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem;
  font-family:var(--sans);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.04em;
  color:var(--charcoal);
  background:transparent;
  border:1px solid var(--line-c);
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.art-share__btn svg{ width:15px; height:15px; }
.art-share__btn:hover,
.art-share__btn:focus-visible{ border-color:var(--oxblood); color:var(--oxblood); }
.art-share__btn.is-copied{ border-color:var(--oxblood); color:var(--oxblood); }

/* ---- 6. In-article CTA card (injected mid-article on long reads) ---- */
.art-midcta{
  margin:2.8rem auto;
  max-width:var(--colw,1080px);
}
.art-midcta__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.6rem;
  justify-content:space-between;
  border:1px solid var(--line-c);
  border-left:3px solid var(--oxblood);
  border-radius:16px;
  background:linear-gradient(180deg, var(--ivory-2), var(--ivory));
  padding:1.5rem 1.7rem;
}
.art-midcta__copy{ font-family:var(--serif); font-size:1.32rem; line-height:1.4; color:var(--moss-head); max-width:46ch; margin:0; }
.art-midcta__copy em{ font-style:italic; color:var(--gold-ink); }
.art-midcta .btn{ flex:none; }

/* ---- 3. Author / reviewer bio (appended at end of body) ---- */
.art-bio{
  margin:0 auto;
  max-width:var(--colw,1080px);
}
.art-bio__inner{
  display:flex; align-items:flex-start; gap:1.6rem;
  border:1px solid var(--line-c);
  border-radius:18px;
  background:linear-gradient(180deg, var(--ivory-2), var(--ivory));
  padding:clamp(1.5rem,3vw,2.2rem);
}
.art-bio__photo{
  flex:none;
  width:92px; height:92px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line-c);
}
.art-bio__body{ min-width:0; }
.art-bio__kicker{
  font-family:var(--sans);
  font-weight:500;
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 .5rem;
}
.art-bio__name{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--moss-head);
  margin:0 0 .15rem;
}
.art-bio__role{
  font-family:var(--sans);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--soft);
  margin:0 0 .8rem;
}
.art-bio__text{
  font-size:1rem;
  line-height:1.65;
  font-weight:300;
  color:var(--ink-soft, #4a4744);
  max-width:60ch;
  margin:0 0 1.1rem;
}
.art-bio__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem; }
.art-bio__cta .btn{ margin:0; }
.art-bio__guide{
  font-family:var(--sans);
  font-size:.84rem;
  color:var(--oxblood);
  border-bottom:1px solid var(--line-c);
  transition:border-color .2s var(--ease);
}
.art-bio__guide:hover,
.art-bio__guide:focus-visible{ border-color:var(--oxblood); }
@media (max-width:560px){
  .art-bio__inner{ flex-direction:column; gap:1.1rem; }
  .art-bio__photo{ width:72px; height:72px; }
}

/* ============================================================
   INNER-PAGE STICKY MOBILE BOOKING BAR  (.ibook)
   Injected by site.js on inner pages only (gated — never the home;
   never the noindex flipbook guides or academy login/portal).
   Slim, brand-styled, safe-area aware, sits BELOW the cookie banner
   (cookie z-index:140 → .ibook z-index:120), hidden at the very top
   and while the footer is in view. Light + dark mode.
   NOTE: deliberately NOT named .mbook — that is a separate legacy class.
   ============================================================ */
.ibook{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:none; /* base: hidden; shown only ≤760px via media query */
  background:var(--charcoal);
  border-top:1px solid rgba(237,230,215,.16);
  box-shadow:0 -16px 44px -26px rgba(31,27,23,.7);
  transform:translateY(110%);
  transition:transform .38s var(--ease);
  pointer-events:none;
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .ibook{
    background:rgba(42,37,32,.94);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    backdrop-filter:blur(16px) saturate(120%);
  }
}
.ibook.is-on{ transform:translateY(0); pointer-events:auto; }
@media (prefers-reduced-motion:reduce){
  /* no slide — JS toggles visibility directly via .is-on/display */
  .ibook{ transition:none; transform:none; }
  .ibook:not(.is-on){ transform:translateY(110%); }
}
.ibook__in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:.8rem;
  padding:.7rem clamp(1rem,4vw,1.4rem) calc(.7rem + env(safe-area-inset-bottom,0));
}
.ibook__book{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:500; font-size:.82rem;
  letter-spacing:.04em; line-height:1;
  padding:.92rem 1.1rem; border-radius:11px;
  background:var(--oxblood); color:var(--ivory);
  border:1px solid var(--oxblood);
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.ibook__book svg{ width:15px; height:15px; flex:none; }
.ibook__book:hover,.ibook__book:focus-visible{ background:var(--oxblood-2); }
.ibook__book:active{ transform:translateY(1px); }
.ibook__call{
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:#DAB9A4; padding:.55rem .2rem;
}
.ibook__call svg{ width:16px; height:16px; flex:none; }
.ibook__call span{ border-bottom:1px solid rgba(218,185,164,.4); }
.ibook__call:hover,.ibook__call:focus-visible{ color:var(--bone); }
@media (max-width:760px){ .ibook{ display:block; } }
@media (min-width:761px){ .ibook{ display:none !important; } }
@media (max-width:380px){
  .ibook__call span{ display:none; }
  .ibook__call{ padding:.55rem .35rem; }
}
html[data-theme="dark"] .ibook{ background:rgba(20,17,13,.92); border-top-color:var(--line); }
html[data-theme="dark"] .ibook__book{ color:#1C1710; }
html[data-theme="dark"] .ibook__call{ color:var(--gold-bright,#DAB9A4); }
html[data-theme="dark"] .ibook__call:hover,
html[data-theme="dark"] .ibook__call:focus-visible{ color:var(--bone); }

/* ============================================================
   BLOG DATA VISUALS — reusable, dependency-free, theme-aware.
   Drop into any blog body. Components:
     .ab-viz            wrapper (figure) + caption/footnote
     .ab-bars           horizontal range / value bars
     .ab-timeline       vertical stage / day-by-day timeline
     .ab-statgrid       big-number callout cards
     .ab-steps          numbered process flow
     .ab-gauge          single conic-gradient gauge dial
   All surfaces/text use shared tokens so light + dark follow
   automatically. No JS required (bars render at full size).
   ============================================================ */
.ab-viz{ margin:1.6rem 0 .4rem; padding:0; border:0; }
.ab-viz__cap{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 1rem; }
.ab-viz__foot{ display:block; margin-top:.9rem; font-size:.78rem; line-height:1.5; color:var(--soft); }

/* ---- range / value bars ---- */
.ab-bars{ display:flex; flex-direction:column; gap:.15rem; }
.ab-bars__row{ display:grid; grid-template-columns:minmax(7rem,12rem) 1fr minmax(5.5rem,max-content); align-items:center; gap:.55rem 1.1rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.ab-bars__row:last-child{ border-bottom:0; }
.ab-bars__name{ font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--moss-head); line-height:1.25; }
.ab-bars__track{ position:relative; height:13px; border-radius:999px; background:color-mix(in srgb, var(--moss-head) 12%, transparent); overflow:hidden; }
.ab-bars__seg{ position:absolute; top:0; bottom:0; left:var(--lo,0%); right:calc(100% - var(--hi,100%)); border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.ab-bars__seg--solid{ left:0; }
.ab-bars__num{ font-family:var(--sans); font-variant-numeric:tabular-nums; font-weight:600; font-size:.85rem; color:var(--ink); white-space:nowrap; text-align:right; }
@media(max-width:540px){
  .ab-bars__row{ grid-template-columns:1fr auto; gap:.35rem .6rem; }
  .ab-bars__track{ grid-column:1 / -1; order:3; }
}

/* ---- timeline ---- */
.ab-timeline{ list-style:none; margin:1.4rem 0 .4rem; padding:0; position:relative; }
.ab-timeline__item{ position:relative; padding:0 0 1.35rem 2.2rem; }
.ab-timeline__item::before{ content:""; position:absolute; left:6px; top:.5rem; bottom:-.35rem; width:2px; background:color-mix(in srgb, var(--gold) 40%, transparent); }
.ab-timeline__item:last-child::before{ display:none; }
.ab-timeline__item::after{ content:""; position:absolute; left:0; top:.2rem; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }
.ab-timeline__when{ display:inline-block; font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 .25rem; }
.ab-timeline__item h4{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--moss-head); margin:0 0 .25rem; line-height:1.2; }
.ab-timeline__item p{ margin:0; color:var(--soft); font-size:.95rem; line-height:1.6; }

/* ---- stat grid ---- */
.ab-statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin:1.5rem 0 .4rem; }
.ab-stat{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.1rem; text-align:center; }
.ab-stat__n{ display:block; font-family:var(--serif); font-weight:600; font-size:2.1rem; line-height:1; color:var(--gold-ink); letter-spacing:.01em; }
.ab-stat__n small{ font-size:1rem; font-weight:600; }
.ab-stat__l{ display:block; margin-top:.45rem; font-family:var(--sans); font-size:.82rem; line-height:1.4; color:var(--soft); }

/* ---- numbered steps ---- */
.ab-steps{ list-style:none; counter-reset:abstep; margin:1.5rem 0 .4rem; padding:0; display:grid; gap:.75rem; }
.ab-steps__item{ counter-increment:abstep; position:relative; padding:1rem 1.1rem 1rem 3.4rem; background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.ab-steps__item::before{ content:counter(abstep); position:absolute; left:1rem; top:1rem; width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:#1d1404; font-family:var(--sans); font-weight:700; font-size:.9rem; }
.ab-steps__item h4{ font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--moss-head); margin:0 0 .2rem; }
.ab-steps__item p{ margin:0; color:var(--soft); font-size:.93rem; line-height:1.55; }

/* ---- single gauge dial (conic) ---- */
.ab-gauge{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin:1.5rem 0 .4rem; }
.ab-gauge__dial{ --val:50; flex:none; width:128px; height:128px; border-radius:50%; background:conic-gradient(var(--gold) calc(var(--val)*1%), color-mix(in srgb, var(--moss-head) 14%, transparent) 0); display:grid; place-items:center; position:relative; }
.ab-gauge__dial::before{ content:""; position:absolute; inset:14px; border-radius:50%; background:var(--bone); }
.ab-gauge__pct{ position:relative; font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--gold-ink); }
.ab-gauge__txt{ flex:1 1 12rem; }
.ab-gauge__txt h4{ font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--moss-head); margin:0 0 .3rem; }
.ab-gauge__txt p{ margin:0; color:var(--soft); font-size:.95rem; line-height:1.6; }

/* dark-mode surface nudge: stat/step cards already use --paper (dark in dark mode) */
html[data-theme="dark"] .ab-gauge__dial::before{ background:var(--paper); }
html[data-theme="dark"] .ab-steps__item::before{ color:#17120a; }


/* ===== EN<->ES language switch (bilingual site) ===== */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans,inherit);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:.3rem .55rem;border:1px solid var(--line,#DCD3C2);
  border-radius:8px;color:inherit;opacity:.82;white-space:nowrap;
  transition:opacity .2s var(--ease,ease),border-color .2s var(--ease,ease)}
.lang-switch:hover,.lang-switch:focus-visible{opacity:1;border-color:currentColor}
.nav__right .lang-switch{align-self:center}