/* ============================================================================
   LASER LIGHT UK — "Quiet Luxury Skin Clinic"
   Bespoke editorial rebuild. Calm, clinical-but-warm. Refined sand/bronze/ink.
   No multiplied radial glows. No marquee. No light-beam dividers. No bounce.
   Hairline rules, generous negative space, one orchestrated page-load reveal.
   ========================================================================== */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg, picture { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Neutrals — warm, tinted toward the brand. Never pure black/white. */
  --paper:    #f6f1ea;   /* page base — warm porcelain */
  --paper-2:  #efe8dd;   /* recessed panels */
  --sand:     #e7dccb;   /* warm sand surface */
  --sand-2:   #ddcfb9;   /* deeper sand */
  --linen:    #fbf8f3;   /* lifted cards */

  --ink:      #211d18;   /* primary text — warm charcoal */
  --ink-2:    #564e44;   /* secondary text */
  --ink-3:    #8a7f70;   /* tertiary / captions */

  /* Single intentional accent — refined champagne bronze, used sparingly. */
  --bronze:   #a8875b;
  --bronze-d: #8a6c43;   /* deeper, for text on light (AA) */
  --bronze-ink:#6f5532;  /* darkest, small text on sand (AA) */

  /* Dark editorial surface (the deep clinic section / footer) */
  --noir:     #1c1813;
  --noir-2:   #262019;
  --noir-line:#3a3127;
  --noir-text:#d8cdba;

  --line:     #d8ccb8;   /* hairline on light */
  --line-soft:#e3d9c9;

  /* Type */
  --ff-display: "Cormorant", Georgia, "Times New Roman", serif;
  --ff-body:    "Outfit", system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lede: clamp(1.125rem, 1.04rem + .42vw, 1.3125rem);
  --fs-h3:   clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
  --fs-h2:   clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --fs-h1:   clamp(2.7rem, 1.7rem + 4.6vw, 5.4rem);
  --fs-hero: clamp(3rem, 1.4rem + 7vw, 7rem);

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-y:  clamp(4.5rem, 9vw, 9rem);
  --maxw:   76rem;
  --maxw-wide: 84rem;

  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow:      0 1px 2px rgba(33,29,24,.04), 0 14px 38px -22px rgba(33,29,24,.22);
  --shadow-soft: 0 30px 70px -40px rgba(33,29,24,.4);

  --ease:   cubic-bezier(.22,.61,.36,1);  /* ease-out-quart — natural decel */
  --ease-2: cubic-bezier(.16,1,.3,1);     /* ease-out-expo */
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--bronze); color: var(--linen); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--ink);
}
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--maxw-wide); }

.h-xl  { font-size: var(--fs-h1); }
.h-lg  { font-size: var(--fs-h2); }
.h-md  { font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.4rem); }
.big   { font-size: var(--fs-h2); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
}
.muted { color: var(--ink-2); }

/* Eyebrow — small caps label, hairline tick before it (the only "accent mark") */
.eyebrow {
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}
.eyebrow::before {
  content: ""; width: 2.2em; height: 1px;
  background: currentColor; opacity: .55;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

em, .ital { font-style: italic; color: var(--bronze-d); font-weight: 400; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  --bx: 1.4rem; --by: .85rem;
  display: inline-flex; align-items: center; gap: .55em;
  padding: var(--by) var(--bx);
  font-family: var(--ff-body);
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
  white-space: nowrap;
}
.btn .ic { width: 1.05em; height: 1.05em; }
.btn-solid { background: var(--ink); color: var(--linen); }
.btn-solid:hover { background: var(--noir); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: var(--linen); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--linen); }
.btn-light { background: var(--linen); color: var(--ink); }
.btn-light:hover { background: #fff; transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { --bx: 1rem; --by: .55rem; font-size: var(--fs-xs); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--linen);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .t-row:focus-visible {
  outline: 2px solid var(--bronze-d); outline-offset: 3px; border-radius: 4px;
}

/* ============================================================================
   HEADER — flat, opaque, no backdrop-blur glass. Hairline base on scroll.
   ========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.site-head.scrolled { background: var(--paper); border-bottom-color: var(--line); }
.head-inner {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: .95rem var(--gutter);
}
.brand { flex-shrink: 0; margin-right: auto; }
.brand img { height: clamp(26px, 4.4vw, 34px); width: auto; }

.nav-main { display: flex; gap: clamp(1.4rem, 2.4vw, 2.6rem); align-items: center; }
.nav-main a {
  text-decoration: none; color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 400; letter-spacing: .01em;
  position: relative; padding: .3rem 0;
  transition: color .3s var(--ease);
}
.nav-main a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--bronze-d);
  transition: width .4s var(--ease);
}
.nav-main a:hover { color: var(--ink); }
.nav-main a:hover::after, .nav-main a.is-active::after { width: 100%; }
.nav-main a.is-active { color: var(--ink); }

.head-actions { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.tel-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 500;
  transition: color .3s var(--ease);
}
.tel-pill:hover { color: var(--ink); }
.tel-pill .ic { width: 1.05rem; height: 1.05rem; color: var(--bronze-d); }
.head-cta { --by: .6rem; --bx: 1.1rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .4rem; color: var(--ink); border-radius: 8px;
}
.nav-toggle .ic { width: 26px; height: 26px; }

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(28,24,19,.42);
  opacity: 0; transition: opacity .4s var(--ease);
}
.drawer-backdrop.show { opacity: 1; }
.nav-drawer {
  position: fixed; top: 0; right: 0; z-index: 96;
  width: min(86vw, 360px); height: 100dvh;
  background: var(--paper); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 1.4rem 1.6rem 1.8rem;
  transform: translateX(102%);
  transition: transform .5s var(--ease-2);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.drawer-word { font-family: var(--ff-display); font-size: 1.5rem; letter-spacing: -.01em; }
.drawer-close { background: none; border: 0; cursor: pointer; color: var(--ink); padding: .3rem; }
.drawer-close .ic { width: 26px; height: 26px; }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  text-decoration: none; color: var(--ink);
  font-family: var(--ff-display); font-size: 1.85rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer-links a:hover { color: var(--bronze-d); padding-left: .4rem; }
.drawer-foot { margin-top: auto; padding-top: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.drawer-tel {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm);
}
.drawer-tel .ic { width: 1.1rem; height: 1.1rem; color: var(--bronze-d); }

/* ── Flash messages ─────────────────────────────────────────────────────── */
.flash-wrap { max-width: var(--maxw); margin: 1.2rem auto 0; padding-inline: var(--gutter); display: grid; gap: .6rem; }
.flash { padding: .85rem 1.1rem; border-radius: var(--r); font-size: var(--fs-sm); border: 1px solid; }
.flash-success { background: #eef3ec; border-color: #c9dac0; color: #3a5230; }
.flash-error   { background: #f6ece9; border-color: #e3c5bd; color: #7a3a2c; }

/* ============================================================================
   SECTIONS
   ========================================================================== */
.sec { padding-block: var(--sec-y); }
.sec-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec-head { max-width: 44rem; }
.sec-head .eyebrow { margin-bottom: 1.1rem; }
.sec-head p { margin-top: 1.1rem; }

/* ── HERO — asymmetric editorial split ──────────────────────────────────── */
.hero {
  position: relative; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--linen), var(--paper) 60%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.hero-copy { max-width: 36rem; }
.hero-copy .eyebrow { margin-bottom: 1.6rem; }
.hero-title { font-size: var(--fs-hero); line-height: .94; letter-spacing: -.02em; margin-bottom: 1.6rem; }
.hero-title .l2 { display: block; font-style: italic; color: var(--bronze-d); font-weight: 400; }
.hero-text { max-width: 32rem; margin-bottom: 2.2rem; }
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; }

.hero-figure { position: relative; }
.hero-shot {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/5; box-shadow: var(--shadow-soft); background: var(--sand-2);
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hero-rule { position: absolute; left: -1.4rem; top: 12%; bottom: 12%; width: 1px; background: var(--line); }
.hero-badge {
  position: absolute; left: -1.5rem; bottom: 1.8rem;
  display: flex; align-items: center; gap: .8rem; max-width: 16rem;
  background: var(--linen); border: 1px solid var(--line);
  padding: .95rem 1.15rem; border-radius: var(--r); box-shadow: var(--shadow);
}
.hero-badge .ic { width: 26px; height: 26px; color: var(--bronze-d); flex-shrink: 0; }
.hero-badge span { font-size: .85rem; line-height: 1.4; color: var(--ink-2); }
.hero-badge strong { color: var(--ink); font-weight: 600; }

/* Hero meta — quiet trust line, replaces the marquee */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.4rem;
  margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line-soft);
}
.hero-meta .m { display: flex; flex-direction: column; gap: .2rem; }
.hero-meta .m b { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 1; }
.hero-meta .m span { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }

/* ── PROMISE ────────────────────────────────────────────────────────────── */
.promise { background: var(--paper); }
.promise-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: end; }
.promise-grid .big { margin-top: 1.2rem; max-width: 14ch; }
.promise-side .lede { margin-bottom: 2.2rem; }
.promise-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  border-top: 1px solid var(--line); padding-top: 1.6rem;
}
.promise-stats .st .n { font-family: var(--ff-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 500; line-height: 1; color: var(--ink); }
.promise-stats .st .l { font-size: var(--fs-xs); color: var(--ink-3); margin-top: .4rem; letter-spacing: .03em; }

/* ── TREATMENTS LEDGER ──────────────────────────────────────────────────── */
.treat { background: var(--linen); border-block: 1px solid var(--line-soft); }
.treat-list { margin-top: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--line); }
.t-row {
  display: grid; grid-template-columns: 3.2rem auto 1fr auto;
  gap: clamp(1rem, 2.5vw, 2rem); align-items: baseline;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background .4s var(--ease), padding-left .45s var(--ease-2);
}
.t-row:hover { background: var(--paper-2); padding-left: clamp(.6rem, 1.4vw, 1.4rem); }
.t-num { font-family: var(--ff-display); font-size: 1rem; font-style: italic; color: var(--bronze-ink); align-self: baseline; }
.t-ic { color: var(--bronze-d); align-self: center; }
.t-ic .ic { width: 30px; height: 30px; }
.t-main h3 { font-size: var(--fs-h3); font-weight: 500; margin-bottom: .35rem; transition: color .3s var(--ease); }
.t-row:hover .t-main h3 { color: var(--bronze-d); }
.t-main p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }
.t-go {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); align-self: center; white-space: nowrap;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.t-go .ic { width: 1.1em; height: 1.1em; }
.t-row:hover .t-go { color: var(--ink); gap: .7em; }
.treat-foot { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Collapsed remainder of the ledger — keeps the homepage short.
   Animated with grid-template-rows (never height). */
.treat-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-2); }
.treat-more.open { grid-template-rows: 1fr; }
.treat-more-inner { overflow: hidden; }
.treat-list-rest { margin-top: 0; border-top: 0; }
#treatToggle .chev { transition: transform .5s var(--ease-2); }
#treatToggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .treat-more, #treatToggle .chev { transition: none; } }

/* ── TECH — dark editorial ──────────────────────────────────────────────── */
.tech { background: var(--noir); color: var(--noir-text); }
.tech .eyebrow { color: var(--bronze); }
.tech-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tech h2 { color: var(--linen); margin-top: 1.2rem; }
.tech h2 em { color: var(--bronze); }
.tech p { color: var(--noir-text); margin-top: 1.4rem; max-width: 38ch; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 2.4rem; border-top: 1px solid var(--noir-line); }
.specs .sp { padding: 1.2rem 0; border-bottom: 1px solid var(--noir-line); }
.specs .sp:nth-child(odd) { padding-right: 1.5rem; }
.specs .sp:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--noir-line); }
.specs .v { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 500; color: var(--linen); line-height: 1; }
.specs .k { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: #a89a83; margin-top: .5rem; }
.tech-figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--shadow-soft); background: var(--noir-2); border: 1px solid var(--noir-line); }
.tech-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* ── PROCESS ────────────────────────────────────────────────────────────── */
.process { background: var(--paper); }
.steps { margin-top: clamp(2.2rem, 4vw, 3.4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); counter-reset: step; }
.step { position: relative; padding-top: 2.4rem; counter-increment: step; }
.step::before { content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--ff-display); font-style: italic; font-size: 1.35rem; color: var(--bronze-d); }
.step::after { content: ""; position: absolute; top: .6rem; left: 2.6rem; right: -1.2rem; height: 1px; background: var(--line); }
.step:last-child::after { display: none; }
.step h3 { font-size: var(--fs-h3); font-weight: 500; margin-bottom: .6rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ── BEGIN — the product doorway on the homepage ────────────────────────── */
.begin { background: var(--linen); border-bottom: 1px solid var(--line-soft); }
.begin-head { max-width: 40rem; }
.begin-head h2 { margin-top: 1rem; }
.begin-head p { margin-top: .8rem; font-size: var(--fs-sm); }
.begin-row { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.begin-chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .65em 1.2em; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), gap .3s var(--ease);
}
.begin-chip .ic { width: 1em; height: 1em; color: var(--bronze-d); transition: color .3s var(--ease); }
.begin-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--linen); gap: .8em; }
.begin-chip:hover .ic { color: var(--bronze); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta { background: var(--noir); color: var(--noir-text); }
.cta-inner { max-width: 46rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-inner .eyebrow { color: var(--bronze); margin-bottom: 1.4rem; }
.cta-inner h2 { color: var(--linen); }
.cta-inner h2 em { color: var(--bronze); }
.cta-inner .lede { color: var(--noir-text); margin: 1.4rem 0 2.2rem; }
.cta-actions { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.cta .btn-outline { color: var(--linen); border-color: #4a4034; }
.cta .btn-outline:hover { background: var(--linen); color: var(--ink); border-color: var(--linen); }

/* ============================================================================
   INNER PAGES
   ========================================================================== */
.page-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--linen), var(--paper));
}
.page-hero .eyebrow { margin-bottom: 1.2rem; }
.page-hero .lede { margin-top: 1.2rem; max-width: 40rem; }
.crumb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 1.4rem; }
.crumb a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { border-color: var(--bronze-d); }
.crumb .ic { width: 1em; height: 1em; }
.crumb span { color: var(--ink); }

/* ── Treatments page ────────────────────────────────────────────────────── */
.tf { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; padding-block: clamp(2.4rem, 5vw, 4rem); border-bottom: 1px solid var(--line-soft); }
.tf:nth-child(even) .tf-media { order: 2; }
.tf-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--shadow); background: var(--sand-2); }
.tf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tf:hover .tf-media img { transform: scale(1.04); }
.tf-body { position: relative; }
.tf-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.tf-num { font-family: var(--ff-display); font-style: italic; font-size: 1.5rem; color: var(--bronze-ink); }
.tf-ic { color: var(--bronze-d); }
.tf-ic .ic { width: 30px; height: 30px; }
.tf-body h2 { margin-bottom: .9rem; }
.tf-body .lede { margin-bottom: 1rem; }
.tf-actions { margin-top: 1.6rem; display: flex; gap: .9rem; flex-wrap: wrap; }

/* ── Treatment detail ───────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.detail-head { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; max-width: 46rem; }
.detail-head .ic-wrap { color: var(--bronze-d); }
.detail-head .ic { width: 38px; height: 38px; }
/* "more treatments" ledger rows have no number column */
.treat-list .t-row:not(:has(.t-num)) { grid-template-columns: auto 1fr auto; }
.about-body p + p { margin-top: 1.2rem; }
.about-body p { color: var(--ink-2); line-height: 1.75; }
.detail-aside { position: sticky; top: 6rem; }
.detail-figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-soft); background: var(--sand-2); }
.detail-figure img { width: 100%; height: 100%; object-fit: cover; }
.detail-note { margin-top: 1.2rem; padding: 1.5rem 1.6rem; background: var(--linen); border: 1px solid var(--line); border-radius: var(--r); }
.detail-note h4 { font-family: var(--ff-display); font-size: 1.35rem; font-weight: 500; margin-bottom: .5rem; }
.detail-note p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── About page ─────────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.about-figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-soft); background: var(--sand-2); position: sticky; top: 6rem; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.values { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4rem); }
.value { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.value h3 { font-size: var(--fs-h3); font-weight: 500; margin-bottom: .6rem; display: flex; align-items: baseline; gap: .7rem; }
.value .vn { font-style: italic; font-size: 1.1rem; color: var(--bronze-ink); }
.value p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ── Gallery page — masonry ─────────────────────────────────────────────── */
.gallery-masonry { columns: 3; column-gap: 1.1rem; }
.gallery-masonry figure { break-inside: avoid; margin-bottom: 1.1rem; border-radius: var(--r); overflow: hidden; position: relative; background: var(--sand-2); }
.gallery-masonry img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease); }
.gallery-masonry figure:hover img { transform: scale(1.04); }
.gallery-masonry figcaption { position: absolute; inset: auto 0 0 0; padding: 1.3rem 1rem .85rem; background: linear-gradient(transparent, rgba(28,24,19,.62)); color: var(--linen); font-size: var(--fs-xs); }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.form-card { background: var(--linen); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow); }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin-bottom: .45rem; }
.field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs-sm); color: var(--ink); transition: border-color .3s var(--ease), background .3s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze-d); background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1rem; line-height: 1.5; }
.form-note a { color: var(--bronze-d); }

.contact-aside { display: flex; flex-direction: column; gap: 1.3rem; }
.info-block { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line-soft); }
.info-block:last-of-type { border-bottom: 0; }
.ib-ic { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--bronze-d); }
.ib-ic .ic { width: 1.2rem; height: 1.2rem; }
.info-block h4 { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.ib-body { font-size: var(--fs-base); color: var(--ink); }
.ib-body a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.ib-body a:hover { border-color: var(--bronze-d); }
.map-embed { margin-top: .4rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/11; background: var(--sand-2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(.96); }

/* ── Consultation builder — the skin-plan product ───────────────────────── */
.consult { background: var(--paper); }
.consult-grid { display: grid; grid-template-columns: 1.05fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.consult-form { min-width: 0; }
.cstep { border: 0; padding: 0; margin: 0 0 clamp(2rem, 4vw, 3rem); opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-2), transform .8s var(--ease-2); }
.cstep.is-open { opacity: 1; transform: none; }
.cstep legend {
  display: flex; align-items: baseline; gap: .9rem; padding: 0; margin-bottom: 1.3rem;
  font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 500; color: var(--ink);
}
.cstep legend i { font-style: italic; font-size: 1.05rem; color: var(--bronze-ink); }

/* Concern ledger — selectable hairline rows, echoes the treatments ledger */
.concern-ledger { border-top: 1px solid var(--line); }
.c-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: .95rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .35s var(--ease), padding-left .4s var(--ease-2);
}
.c-row:hover { background: var(--paper-2); padding-left: .7rem; }
.c-row input { position: absolute; opacity: 0; pointer-events: none; }
.c-mark { width: 1.05rem; height: 1.05rem; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: border-color .3s var(--ease); flex: none; }
.c-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bronze-d); transform: scale(0); transition: transform .35s var(--ease-2); }
.c-row input:checked ~ .c-mark { border-color: var(--bronze-d); }
.c-row input:checked ~ .c-mark::after { transform: scale(1); }
.c-row input:focus-visible ~ .c-mark { outline: 2px solid var(--bronze-d); outline-offset: 3px; }
.c-label { font-weight: 500; color: var(--ink); }
.c-row input:checked ~ .c-label { color: var(--bronze-ink); }
.c-match { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; text-align: right; }

/* Pill choices */
.pill-set { display: flex; flex-wrap: wrap; gap: .55rem; }
.pill { cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-flex; align-items: center;
  padding: .55em 1.1em; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--ink-2); background: var(--linen);
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.pill:hover span { border-color: var(--bronze-d); color: var(--ink); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.pill input:focus-visible + span { outline: 2px solid var(--bronze-d); outline-offset: 3px; }
.pill-set.sm .pill span { font-size: var(--fs-xs); padding: .5em .95em; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; margin-bottom: 1.1rem; }
.duo-label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin-bottom: .6rem; }
.cf-problem { margin: .9rem 0 0; font-size: var(--fs-sm); color: #7a3a2c; }
.cstep .btn-block { margin-top: 1.2rem; }

/* Plan rail */
.plan-rail { position: sticky; top: 5.5rem; }
.plan-card { background: var(--linen); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2.1rem); box-shadow: var(--shadow); }
.plan-empty p { margin-top: 1rem; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.6; max-width: 24ch; }
.plan-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 1rem; }
.plan-summary { margin-top: .7rem; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.plan-expect { margin-top: .9rem; padding: .85rem 1rem; background: var(--paper); border-left: 2px solid var(--bronze); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; border-radius: 0 var(--r) var(--r) 0; }
.plan-course { margin-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.pc-step { display: grid; grid-template-columns: 7.2rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.pc-step b { font-family: var(--ff-display); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.pc-step span { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.plan-link { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.2rem; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-ink); text-decoration: none; transition: gap .3s var(--ease); }
.plan-link:hover { gap: .8em; }
.plan-link .ic { width: 1.1em; height: 1.1em; }

/* Sent state */
.consult-sent { background: var(--paper); }
.sent-card { max-width: 44rem; }
.sent-card h1 { margin-top: 1.2rem; }
.sent-card .lede { margin-top: 1.2rem; }
.sent-next { margin-top: 2rem; border-top: 1px solid var(--line); }
.sent-next .sn { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.sent-next .sn b { font-family: var(--ff-display); font-style: italic; font-weight: 500; color: var(--bronze-ink); }
.sent-next .sn span { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.sent-actions { margin-top: 2rem; display: flex; gap: .9rem; flex-wrap: wrap; }

@media (max-width: 920px) {
  .consult-grid { grid-template-columns: 1fr; }
  /* Plan becomes a quiet pinned bar that expands on tap */
  .plan-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; padding: 0 .8rem .8rem; pointer-events: none; }
  .plan-card { pointer-events: auto; max-width: 34rem; margin-inline: auto; box-shadow: var(--shadow-soft); transform: translateY(0); transition: transform .5s var(--ease-2); }
  .plan-card[data-empty="true"] { transform: translateY(115%); }
  .plan-card .plan-summary, .plan-card .plan-course, .plan-card .plan-link, .plan-card .plan-expect { display: none; }
  .plan-card.expanded .plan-summary, .plan-card.expanded .plan-course,
  .plan-card.expanded .plan-link, .plan-card.expanded .plan-expect { display: block; }
  .plan-card.expanded .plan-course { display: block; }
  .plan-card { cursor: pointer; padding: 1rem 1.2rem; border-radius: var(--r); }
  .plan-title { margin-top: .4rem; font-size: 1.25rem; }
  .consult-form { padding-bottom: 5.5rem; }
  .duo { grid-template-columns: 1fr; }
}

/* ── Legal / prose ──────────────────────────────────────────────────────── */
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--fs-h3); margin: 2rem 0 .8rem; }
.prose h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; font-family: var(--ff-body); font-weight: 600; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1rem 1.2rem; }
.prose a { color: var(--bronze-d); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-foot { background: var(--noir); color: var(--noir-text); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.foot-grid { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; }
.foot-word { font-family: var(--ff-display); font-size: 1.9rem; color: var(--linen); letter-spacing: -.01em; }
.foot-word em { color: var(--bronze); font-style: italic; }
.foot-tag { margin-top: .6rem; color: var(--noir-text); font-size: var(--fs-sm); }
.foot-strap { margin-top: 1rem; color: #a89a83; font-size: var(--fs-sm); max-width: 26ch; }
.foot-social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.foot-social a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--noir-line); border-radius: 50%; color: var(--noir-text); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.foot-social a:hover { background: var(--bronze); color: var(--noir); border-color: var(--bronze); }
.foot-social .ic { width: 1.2rem; height: 1.2rem; }
.foot-col h4 { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a89a83; margin-bottom: 1.1rem; }
.foot-col ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.foot-col a { color: var(--noir-text); text-decoration: none; font-size: var(--fs-sm); transition: color .3s var(--ease); }
.foot-col a:hover { color: var(--linen); }
.foot-col address { font-style: normal; color: var(--noir-text); font-size: var(--fs-sm); line-height: 1.7; }
.foot-hours { margin-top: 1rem; color: #a89a83; font-size: var(--fs-xs); line-height: 1.7; }
.foot-contact { display: block; color: var(--linen); text-decoration: none; font-size: var(--fs-sm); margin-bottom: .5rem; }
.foot-contact:hover { color: var(--bronze); }
.foot-btn { margin-top: 1rem; }
.site-foot .foot-btn { color: var(--linen); border-color: #4a4034; }
.site-foot .foot-btn:hover { background: var(--linen); color: var(--ink); border-color: var(--linen); }
.foot-bar { border-top: 1px solid var(--noir-line); max-width: var(--maxw); margin-inline: auto; padding: 1.6rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-xs); color: #8a7d68; }
.foot-legal { display: flex; gap: 1.4rem; }
.foot-legal a { color: #8a7d68; text-decoration: none; }
.foot-legal a:hover { color: var(--noir-text); }
.foot-credit { color: #6f6453; }

/* ── Cookie bar ─────────────────────────────────────────────────────────── */
.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; max-width: 34rem; margin-inline: auto; background: var(--noir); color: var(--noir-text); border: 1px solid var(--noir-line); border-radius: var(--r); padding: 1rem 1.1rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-soft); opacity: 0; transition: opacity .5s var(--ease); }
.cookie-bar p { font-size: var(--fs-xs); line-height: 1.5; }
.cookie-bar a { color: var(--bronze); }

/* ============================================================================
   ELEVATION PASS — "Light Study" (see DESIGN.md). The signature device is a
   warm light spectrum (porcelain → blush → honey → bronze: skin tones, lit
   well). Layered darkroom-print photos, paper grain, ghost numerals, plate
   annotations, serif marquee. De-housed: squared buttons, indexed labels.
   ========================================================================== */
:root {
  --blush:  #d8a08e;
  --honey:  #c89d63;
  --mauve:  #b08a96;
  --pearl:  #ead9c2;
  --spectrum: linear-gradient(90deg, transparent 0%, var(--pearl) 18%, var(--blush) 42%, var(--honey) 64%, var(--bronze) 86%, transparent 100%);
  --spectrum-solid: linear-gradient(90deg, var(--pearl), var(--blush), var(--honey), var(--bronze));
}

/* Paper grain — the site sits on stock, not on a flat hex value */
body {
  background-image:
    radial-gradient(900px 480px at 88% -6%, rgba(216,160,142,.07), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0 0.09 0 0 0 0.028 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* De-housed buttons — squared, letterspaced smallcaps. No pills on this site. */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .13em; font-size: .8rem; font-weight: 500; --bx: 1.5rem; --by: .95rem; }
.btn-sm { font-size: .72rem; }

/* De-housed label device — spectrum tick instead of the house hairline */
.eyebrow::before { height: 2px; background: var(--spectrum-solid); opacity: 1; }

/* The light line — a hair of warm spectrum. Crowns the page, divides acts. */
.site-head::before { content: ""; display: block; height: 3px; background: var(--spectrum-solid); }
.lightline { height: 2px; background: var(--spectrum); }

/* Beams — long, barely-there shafts of warm light behind content */
.beam { position: absolute; pointer-events: none; height: 1px; left: -10%; right: -10%;
  background: var(--spectrum); opacity: .55; transform: rotate(-7deg); }
.hero .beam { top: 24%; }
.beam-tech { top: 14%; transform: rotate(-5deg); opacity: .4; }
.beam-cta { top: 30%; transform: rotate(-6deg); opacity: .35; }

/* Ghost numerals — enormous italic serif outlines anchoring each act */
.has-num { position: relative; overflow: hidden; }
.has-num::before {
  content: attr(data-num); position: absolute; top: -1.5rem; right: -.5rem; z-index: 0;
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(9rem, 18vw, 17rem); line-height: 1; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px rgba(168,135,91,.25);
}
.has-num > .wrap { position: relative; z-index: 1; }

/* Margin labels — vertical small caps in the gutter (wide screens) */
.side-label { display: none; }
@media (min-width: 1280px) {
  .side-label {
    display: block; position: absolute; left: 1.4rem; top: clamp(4.5rem, 9vw, 9rem);
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
    color: var(--ink-3); z-index: 1;
  }
  .side-label::after { content: ""; display: block; width: 1px; height: 3.2rem; background: var(--line); margin: 1rem auto 0; }
}

/* HERO — layered darkroom-print composition */
.hero { overflow: hidden; position: relative; }
.hero-title .l2 {
  background: linear-gradient(95deg, var(--bronze-d), var(--blush) 55%, var(--honey));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-shot { overflow: visible; }
.hero-shot::before {
  content: ""; position: absolute; inset: -1rem -1rem 1rem 1rem; z-index: -1;
  border: 1px solid var(--bronze); opacity: .5; border-radius: var(--r-lg);
}
.hero-shot img { border-radius: var(--r-lg); }
.hero-figure { padding-bottom: 3.2rem; }
.hero-mini {
  position: absolute; left: -2.2rem; bottom: 0; width: min(46%, 13rem); z-index: 3;
  background: var(--linen); border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .55rem .65rem; box-shadow: var(--shadow-soft);
  transform: rotate(-2.5deg);
}
.hero-mini img { border-radius: 4px; aspect-ratio: 5/4; object-fit: cover; }
.hero-mini figcaption { font-family: var(--ff-display); font-size: .86rem; line-height: 1.3; color: var(--ink-2); padding: .5rem .2rem 0; }
.hero-mini figcaption em { color: var(--bronze-d); }
.hero-annot {
  position: absolute; right: -1.1rem; top: 8%; writing-mode: vertical-rl;
  font-family: var(--ff-display); font-style: italic; font-size: .92rem; color: var(--ink-3);
}

/* STRIP — refined noir marquee. Decorative, uninteractable, always moving. */
.strip { background: var(--noir); overflow: hidden; padding: .8rem 0; pointer-events: none; user-select: none; }
.strip-track { display: flex; width: max-content; animation: stripmove 60s linear infinite; will-change: transform; }
.strip .grp { display: flex; align-items: center; flex: none; }
.strip .it { font-family: var(--ff-display); font-style: italic; font-size: 1.02rem; color: var(--noir-text); padding: 0 1.7rem; white-space: nowrap; }
.strip .dot { width: 5px; height: 5px; flex: none; background: var(--bronze); transform: rotate(45deg); opacity: .8; }
@keyframes stripmove { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* BEGIN — chips squared, each with a hue of the spectrum */
.begin-chip { border-radius: 3px; }
.begin-chip .hue { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hue.h0 { background: var(--blush); }
.hue.h1 { background: var(--honey); }
.hue.h2 { background: var(--bronze); }
.hue.h3 { background: var(--mauve); }
.begin-chip:hover .hue { background: var(--pearl); }

/* Spectrum underline under key headings */
.spectrum-u { position: relative; padding-bottom: 1.1rem; }
.spectrum-u::after { content: ""; position: absolute; left: 0; bottom: 0; width: 9rem; height: 2px; background: var(--spectrum-solid); }

/* Promise stats — italic serif moments */
.promise-stats .st .n em { font-style: italic; color: var(--bronze-d); }

/* TREATMENTS — tinted icon chips, one hue per row (cycled) */
.t-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--linen); transition: transform .4s var(--ease-2); }
.hue-ic.h0 { background: #f3e1d8; color: #8a4f3b; }
.hue-ic.h1 { background: #f0e3cc; color: #7a5c2e; }
.hue-ic.h2 { background: #ecdfc7; color: var(--bronze-ink); }
.hue-ic.h3 { background: #ecdde2; color: #6e4a56; }
.t-row:hover .t-ic { transform: rotate(-6deg) scale(1.06); }

/* TECH — framed machine portrait, a beam entering the dark */
.framed { position: relative; overflow: visible; }
.framed::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--bronze); opacity: .35; border-radius: var(--r-lg); pointer-events: none; }
.framed img { border-radius: var(--r-lg); }
.tech { position: relative; overflow: hidden; }
.cta { position: relative; overflow: hidden; }

/* PROCESS — steps joined by the spectrum, not a flat hairline */
.step::after { background: var(--spectrum-solid); opacity: .45; }

/* Inner pages + builder pick up the device */
.page-hero { position: relative; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--spectrum); }
.plan-card { position: relative; }
.plan-card::before { content: ""; position: absolute; top: -1px; left: 1.2rem; right: 1.2rem; height: 2px; background: var(--spectrum-solid); border-radius: 2px; }
.pill span { border-radius: 3px; }
.tabs a { border-radius: 3px; }

@media (max-width: 920px) {
  .hero-mini { left: .4rem; width: 11rem; }
  .hero-annot { display: none; }
  .has-num::before { font-size: 8rem; top: -1rem; }
}

/* ============================================================================
   LIGHT LAB — the interactive layer (DESIGN.md · Elevation 2).
   The Wavelength Rail, exposure develops, prism caustic, film-strip process,
   tech light-switch. Light is the world this site lives in.
   ========================================================================== */

/* ── THE WAVELENGTH RAIL ── a calibrated 400–1100 nm axis ──────────────── */
.rail { margin: clamp(2.2rem, 4vw, 3.4rem) 0 clamp(2rem, 3.5vw, 3rem); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-axis { position: relative; height: 224px; min-width: 640px; margin-inline: clamp(1rem, 5vw, 4.5rem) clamp(2.4rem, 6vw, 5.5rem); }
.rail-line {
  position: absolute; left: 0; right: 2.6rem; top: 50%; height: 5px; border-radius: 3px;
  /* visible spectrum to 700 nm (42.8% of the axis), then infrared falls to noir */
  background: linear-gradient(90deg,
    #8a7fc7 0%, #6f9fc0 10%, #7fae8e 19%, #cdb96a 28%, #c98a5a 35%, #b35d4e 42.8%,
    #7a4f3c 55%, #4a382c 75%, #241d18 100%);
  opacity: .85;
}
.rail-tick { position: absolute; top: calc(50% + 12px); transform: translateX(-50%); text-align: center;
  font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); }
.rail-tick i { display: block; width: 1px; height: 7px; background: var(--line); margin: 0 auto 3px; }
.rail-tick small { font-size: .58rem; color: var(--ink-3); margin-left: 1px; }
.rail-zone { position: absolute; top: calc(50% + 78px); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.rail-zone.vis { left: 12%; } .rail-zone.ir { left: 64%; }

.rail-pt { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); text-decoration: none; text-align: center; width: 0; }
.rail-pt i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px;
  border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); transition: transform .35s var(--ease-2), border-color .3s, box-shadow .3s; }
.rail-pt b, .rail-band b, .rail-cap b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: .92rem; color: var(--ink); white-space: nowrap; line-height: 1.15; }
.rail-pt small, .rail-band small, .rail-cap small { display: block; font-size: .62rem; letter-spacing: .08em; color: var(--bronze-ink); white-space: nowrap; margin-top: 1px; }
.rail-pt .lbl, .rail-pt b { position: relative; }
/* lanes: 0 above, 1 below, 2 high above */
.rail-pt b { position: absolute; left: 50%; transform: translateX(-50%); }
.rail-pt small { position: absolute; left: 50%; transform: translateX(-50%); }
.rail-pt.lane0 b { bottom: calc(50% + 26px); } .rail-pt.lane0 small { bottom: calc(50% + 12px); }
.rail-pt.lane1 b { top: calc(50% + 40px); }   .rail-pt.lane1 small { top: calc(50% + 58px); }
.rail-pt.lane2 b { bottom: calc(50% + 62px); } .rail-pt.lane2 small { bottom: calc(50% + 48px); }
.rail-pt.lane3 b { top: calc(50% + 76px); }   .rail-pt.lane3 small { top: calc(50% + 94px); }
/* edge clamps — labels hug the axis ends instead of clipping */
.rail-pt.edge-l b, .rail-pt.edge-l small { left: 0; transform: none; text-align: left; }
.rail-pt.edge-r b, .rail-pt.edge-r small { left: auto; right: 0; transform: none; text-align: right; }
.rail-pt:hover i, .rail-pt.active i { border-color: var(--bronze-d); transform: translate(-50%,-50%) scale(1.45); box-shadow: 0 0 0 7px rgba(200,157,99,.18); }
.rail-pt:hover b, .rail-pt.active b { color: var(--bronze-d); }

.rail-band { position: absolute; top: 50%; text-decoration: none; height: 0; }
.rail-band::before { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 12px;
  border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; transition: border-color .3s; }
.rail-band b { position: absolute; left: 50%; transform: translateX(-50%); bottom: 48px; }
.rail-band small { position: absolute; left: 50%; transform: translateX(-50%); bottom: 32px; }
.rail-band:hover::before, .rail-band.active::before { border-color: var(--bronze-d); }
.rail-band:hover b, .rail-band.active b { color: var(--bronze-d); }

.rail-cap { position: absolute; right: 0; top: 50%; text-decoration: none; text-align: right; }
.rail-cap::before { content: ""; position: absolute; right: 38px; top: -1px; width: 26px; border-top: 1.5px dashed var(--ink-3); }
.rail-cap b { margin-top: 80px; } .rail-cap small { text-align: right; }
.rail-cap::after { content: "⟶"; position: absolute; right: 8px; top: -13px; color: var(--ink); font-size: 1rem; transition: color .3s; }
.rail-cap:hover::after, .rail-cap.active::after { color: var(--bronze-d); }
.rail-cap:hover b, .rail-cap.active b { color: var(--bronze-d); }

.rail-carriage { position: absolute; top: 14%; bottom: 20%; left: -5%; width: 1px; background: var(--bronze); opacity: 0;
  transition: left .65s var(--ease-2), opacity .4s var(--ease); pointer-events: none; }
.rail-carriage i { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0;
  border: 5px solid transparent; border-top-color: var(--bronze); }
.rail-carriage.on { opacity: .9; }
.rail-key { font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; font-family: var(--ff-display); font-size: .95rem; margin-top: .4rem; }

/* ── EXPOSURE DEVELOP — sections develop like photographic prints ──────── */
.develop { position: relative; }
.develop > .wrap { filter: brightness(.94) saturate(.9); transition: filter 1.3s var(--ease-2) .15s; }
.develop.in > .wrap { filter: none; }
.develop::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(234,217,194,.22) 50%, rgba(216,160,142,.12) 54%, transparent 64%);
  transform: translateX(-130%); }
.develop.in::after { animation: expose 1.5s var(--ease-2) 1 forwards; }
@keyframes expose { to { transform: translateX(130%); } }

/* ── PRISM CAUSTIC — the hero refracts the cursor (fine pointers only) ──── */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background:
      radial-gradient(190px 130px at calc(var(--cx, 70%) + 30px) calc(var(--cy, 30%) - 12px), rgba(138,127,199,.10), transparent 70%),
      radial-gradient(220px 150px at var(--cx, 70%) var(--cy, 30%), rgba(216,160,142,.13), transparent 70%),
      radial-gradient(200px 140px at calc(var(--cx, 70%) - 34px) calc(var(--cy, 30%) + 14px), rgba(200,157,99,.11), transparent 70%);
    transition: opacity .6s var(--ease); }
  .hero-grid { position: relative; z-index: 1; }
}

/* ── EXPOSURE-STRIP PROCESS — the journey as developed film frames ─────── */
.steps { counter-reset: fr; }
.step { background: var(--linen); border: 1px solid var(--line); border-radius: 4px;
  padding: 2.9rem 1.3rem 1.5rem; counter-increment: fr; overflow: hidden; }
.step::before { content: "FR·0" counter(fr); top: 1.9rem; left: 1.3rem; font-family: var(--ff-body); font-style: normal;
  font-size: .62rem; letter-spacing: .3em; color: var(--bronze-ink); }
.step::after { /* sprocket perforations along the top, like exposed film */
  content: ""; top: 0; left: 0; right: 0; height: 12px; opacity: 1;
  background: var(--noir);
  -webkit-mask: radial-gradient(circle 3px at 10px 6px, transparent 95%, #000) 0 0/26px 12px repeat-x;
          mask: radial-gradient(circle 3px at 10px 6px, transparent 95%, #000) 0 0/26px 12px repeat-x; }
.step h3 { margin-top: .6rem; }
.step:last-child::after { display: block; }   /* re-enable: old hairline rule hid it */
.steps .step:nth-child(1) { transition-delay: .05s; }
.steps .step:nth-child(2) { transition-delay: .2s; }
.steps .step:nth-child(3) { transition-delay: .35s; }
.steps .step:nth-child(4) { transition-delay: .5s; }

/* ── TECH LIGHT-SWITCH — the machine lights as the beam crosses it ─────── */
.tech .tech-figure img { filter: brightness(.4) contrast(.96); transition: filter 1.7s var(--ease-2) .25s; }
.tech.in .tech-figure img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .develop > .wrap { filter: none; transition: none; }
  .develop.in::after { animation: none; }
  .tech .tech-figure img { filter: none; transition: none; }
  .rail-carriage { transition: none; }
}

@media (max-width: 700px) {
  .rail-axis { height: 180px; }
  .rail-key { padding-left: .1rem; }
}

/* ============================================================================
   MOTION — one orchestrated reveal, slow ease-out, no bounce.
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-2), transform .9s var(--ease-2); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .t-row, .nav-drawer, .drawer-backdrop { transition: none; }
}

/* QA: html.snap = everything developed/revealed (headless screenshots) */
html.snap .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.snap .develop > .wrap { filter: none !important; }
html.snap .develop::after { display: none !important; }
html.snap section.tech .tech-figure img { filter: none !important; }
html.snap .cstep { opacity: 1 !important; transform: none !important; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-main { display: none; }
  .nav-toggle { display: inline-flex; }
  .head-cta { display: none; }       /* tel-pill stays; CTA lives in the drawer */
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-figure { order: -1; max-width: 28rem; }
  .hero-rule { display: none; }
  .hero-badge { left: auto; right: 1rem; }
  .promise-grid { grid-template-columns: 1fr; align-items: start; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-figure { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .tf, .tf:nth-child(even) .tf-media { grid-template-columns: 1fr; }
  .tf:nth-child(even) .tf-media, .tf-media { order: -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { position: static; max-width: 30rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 2; }
  .values { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --gutter: 1.25rem; }
  .head-inner { gap: 1rem; }
  .tel-pill span { display: none; }   /* keep icon, drop number text on tiny screens */
  .t-row { grid-template-columns: auto 1fr; gap: .9rem 1rem; }
  .t-num, .t-go { display: none; }
  .promise-stats { grid-template-columns: 1fr; gap: 1rem; }
  .specs { grid-template-columns: 1fr; }
  .specs .sp:nth-child(even) { padding-left: 0; border-left: 0; }
  .specs .sp:nth-child(odd) { padding-right: 0; }
  .steps { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: span 2; }
  .foot-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand { grid-column: auto; }
}

/* ════════ ELEVATION 3 — conviction pass (DESIGN.md, 2026-06-03 eve) ════════
   Viewport-scale hero type, prints collaged into the letters, a VISIBLE light
   wash; begin = flat pearl field + typographic index; CTA = the light room. */

/* ── HERO XL ── */
.hero-xl { padding: calc(var(--head-h, 76px) + 3.2rem) 0 0; overflow: hidden; }
.hero-xl .wrap { position: relative; z-index: 1; }
.hero-xl .eyebrow { margin-bottom: 2.4rem; }

.hero-display {
  font-family: var(--ff-display); font-weight: 480; color: var(--ink);
  font-size: clamp(3.4rem, 9.2vw, 8.6rem);
  line-height: .92; letter-spacing: -.025em; margin: 0 0 1rem;
  position: relative; z-index: 3; pointer-events: none; /* type crosses OVER the print */
}
.hero-display .w1, .hero-display .w2 { display: block; }
.hero-display .w2 { margin-left: .12em; }
.hero-display .w2 em { font-style: italic; font-weight: 400; color: var(--bronze-d);
  /* paper halo keeps the italic legible where it crosses the photograph */
  text-shadow: 0 1px 0 rgba(246,241,234,.55), 0 0 22px rgba(246,241,234,.85), 0 0 2px rgba(246,241,234,.9); }

/* the static light wash — light is VISIBLE on arrival, all devices */
.hero-caustic { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46rem 20rem at 72% 18%, rgba(234,217,194,.50), transparent 68%),
    radial-gradient(34rem 16rem at 64% 30%, rgba(216,160,142,.26), transparent 70%),
    radial-gradient(30rem 14rem at 80% 26%, rgba(200,157,99,.22), transparent 72%),
    radial-gradient(22rem 12rem at 58% 14%, rgba(176,138,150,.16), transparent 75%);
}

/* stage: copy column + prints that RISE INTO the headline */
.hero-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hero-aside { max-width: 30rem; padding-top: 1.4rem; }
.hero-aside .hero-text { margin-bottom: 2rem; }
.hero-prints { position: relative; margin-top: clamp(-5.2rem, -5.5vw, -2rem);
  margin-right: calc(-1 * clamp(0rem, 2vw, 2.4rem)); z-index: 2; }
.hero-prints .hero-shot { box-shadow: 0 26px 70px -28px rgba(33,29,24,.45); }
.hero-prints .hero-mini { position: absolute; left: -3.4rem; bottom: -2.6rem; width: 11.5rem;
  transform: rotate(-3.5deg); }
.hero-prints .hero-annot { position: absolute; right: -.4rem; top: -1.9rem; }

/* baseline bar: meta becomes a ruled instrument line under the composition */
.hero-baseline { display: flex; gap: clamp(1.6rem, 4vw, 3.6rem); flex-wrap: wrap;
  margin-top: 3.4rem; padding: 1.3rem 0 2.6rem; border-top: 1px solid var(--line);
  position: relative; }
.hero-baseline::before { content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 1px; background: var(--spectrum); opacity: .8; }
.hero-baseline .m { display: flex; flex-direction: column; gap: .2rem; }
.hero-baseline .m b { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 500;
  color: var(--ink); line-height: 1; }
.hero-baseline .m span { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-3);
  text-transform: uppercase; }
.hero-baseline .m-nm { margin-left: auto; text-align: right; }
.hero-baseline .m-nm b { color: var(--bronze-d); }

/* ── BEGIN — flat committed pearl field + typographic index ── */
.begin-field { background: var(--pearl); }
.begin-field .begin-head .muted { color: #6d6052; }
.begin-index { list-style: none; margin: 2.2rem 0 0; padding: 0;
  columns: 2; column-gap: clamp(2rem, 5vw, 5rem); }
.begin-index li { break-inside: avoid; }
.begin-index a { display: flex; align-items: baseline; gap: 1rem; text-decoration: none;
  padding: .95rem .2rem; border-bottom: 1px solid rgba(33,29,24,.18); position: relative;
  color: var(--ink); }
.begin-index .bi-n { font-size: .72rem; letter-spacing: .14em; color: #8a7a64;
  font-variant-numeric: tabular-nums; }
.begin-index .bi-l { font-family: var(--ff-display); font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 500; line-height: 1.15; }
.begin-index .ic { margin-left: auto; align-self: center; width: 15px; height: 15px;
  color: var(--bronze-d); opacity: 0; transform: translateX(-6px); transition: all .35s var(--ease); }
.begin-index a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: 0; background: var(--ink); transition: width .45s var(--ease-2); }
.begin-index a:hover::after, .begin-index a:focus-visible::after { width: 100%; }
.begin-index a:hover .ic, .begin-index a:focus-visible .ic { opacity: 1; transform: none; }
.begin-index a:hover .bi-l { font-style: italic; }

/* ── CTA — the light room ── */
.cta-room { position: relative; overflow: hidden; }
.cta-room .cta-ray { position: absolute; pointer-events: none; z-index: 0;
  left: -12%; right: -12%; top: 50%; height: 9rem;
  transform: translateY(-50%) rotate(-7deg);
  background: linear-gradient(90deg, transparent 2%, rgba(234,217,194,.13) 22%,
    rgba(216,160,142,.17) 46%, rgba(200,157,99,.15) 64%, rgba(168,135,91,.10) 84%, transparent 98%);
  filter: blur(10px);
}
.cta-room .cta-inner { position: relative; z-index: 1; }
.cta-room .h-lg { font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-style: italic; font-weight: 420; }

/* ── responsive ── */
@media (max-width: 900px) {
  .hero-stage { grid-template-columns: 1fr; }
  .hero-prints { margin-top: .6rem; order: 2; max-width: 26rem; }
  .hero-aside { order: 1; padding-top: .4rem; }
  .begin-index { columns: 1; }
}
@media (max-width: 480px) {
  .hero-display { font-size: clamp(3rem, 16.5vw, 4rem); }
  .hero-prints .hero-mini { left: -.6rem; bottom: -1.8rem; width: 9rem; }
  .hero-baseline .m-nm { margin-left: 0; text-align: left; }
  .hero-xl .hero-cta { width: 100%; }
  .hero-xl .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   v4 — THE SPECTRUM (DESIGN.md, 2026-06-03 night)
   The page is the clinic's physics. White light → flat wavelength fields.
   Type retired: Cormorant/Outfit → Syne / Instrument Sans (see base.html).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --ff-display: "Fraunces", "Cormorant", Georgia, serif;
  --ff-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --white-light: #faf8f5;
  --spec-ink: #18130f;
  --b-violet: #46127f; --b-violet-deep: #340b61;
  --b-green:  #0e6b3c; --b-green-deep:  #0a522e;
  --b-amber:  #9a4d00; --b-amber-deep:  #7c3e00;
  --b-red:    #7c1a1a; --b-red-deep:    #611212;
  --b-ir:     #161210; --b-ir-deep:     #0d0a09;
}
body { background: var(--white-light); }

/* ── nm readout — fixed margin instrument ── */
.nm-readout { position: fixed; right: clamp(.6rem, 2vw, 2rem); top: 50%; z-index: 40;
  transform: translateY(-50%) rotate(0.001deg); text-align: right; pointer-events: none;
  font-variant-numeric: tabular-nums; mix-blend-mode: difference; color: #fff;
  opacity: 0; transition: opacity .5s var(--ease); }
.nm-readout.on { opacity: .92; }
.nm-readout b { display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1; letter-spacing: -.02em; }
.nm-readout span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
@media (max-width: 700px) { .nm-readout { display: none; } }

/* ── shared spectrum typography ── */
.spec-eyebrow { display: inline-block; font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; opacity: .75; margin-bottom: 1.4rem; }
.spec-eyebrow.center { display: block; text-align: center; }
.spec-h2 { font-family: var(--ff-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1.04; margin: 0 0 1rem; max-width: 22ch; }
.spec-h2 em { font-style: normal; opacity: .55; }
.spec-muted { opacity: .72; max-width: 52ch; }
.spec-lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: 46ch; }
.spec-white { background: var(--white-light); color: var(--spec-ink); padding: clamp(4rem, 8vw, 7.5rem) 0; }

/* ── HERO — white light ── */
.spec-hero { position: relative; background: var(--white-light); color: var(--spec-ink);
  padding: calc(var(--head-h, 76px) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem); }
.spec-display { font-family: var(--ff-display); font-weight: 500;
  font-size: clamp(3.0rem, 9.5vw, 8.6rem); line-height: 1.0; letter-spacing: -.025em;
  text-transform: none; margin: 0 0 clamp(1.6rem, 3vw, 2.8rem);
  font-variation-settings: "opsz" 144, "SOFT" 50; }
.spec-display span { display: block; }
.spec-display-2 { margin-left: .1em; font-style: italic; font-weight: 500;
  color: var(--spec-ink); opacity: .92;
  font-variation-settings: "opsz" 144, "SOFT" 100; }
.spec-hero-row { display: flex; gap: clamp(2rem, 6vw, 6rem); align-items: flex-end;
  flex-wrap: wrap; margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }
.spec-cta { display: flex; gap: .9rem; flex-wrap: wrap; }

/* centred Begin CTA (concern picker retired 2026-06-08) */
.begin-head-center { text-align: center; max-width: 64ch; margin: 0 auto; }
.begin-head-center .spec-h2 { margin-left: auto; margin-right: auto; max-width: 18ch; }
.begin-head-center .spec-muted { margin-left: auto; margin-right: auto; }
.begin-cta { display: flex; justify-content: center; margin-top: 2.2rem; }

/* soften "What we treat" — Shelley asked to drop the wavelength/tech labels 2026-06-08 */
.band-nm, .band-tag, .band-tech { display: none !important; }
.band-head { gap: 1rem; }
.band-ghost { display: none !important; }
.spec-toc, .nm-readout, .co2-row .band-nm { display: none !important; }
.prism-edge { display: none !important; }

/* Pricing section — sits between bands and the promise zone */
.spec-prices { background: var(--white-light); color: var(--spec-ink);
  padding: clamp(4rem, 8vw, 7rem) 0; }
.prices-head { max-width: 64ch; margin: 0 auto 3rem; text-align: center; }
.prices-head .spec-h2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.price-list { max-width: 720px; margin: 0 auto; border-top: 1px solid rgba(24,19,15,.12); }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(24,19,15,.12); align-items: baseline; }
.price-row .pt { font-family: var(--ff-display); font-weight: 500; font-size: 1.18rem;
  letter-spacing: -.01em; }
.price-row .pt small { display: block; font-family: var(--ff-body); font-weight: 400;
  font-size: .82rem; opacity: .65; margin-top: .15rem; letter-spacing: 0; }
.price-row .pp { font-family: var(--ff-display); font-weight: 500; font-size: 1.18rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-row .pp em { font-style: italic; opacity: .7; font-size: .9em; }
.prices-foot { text-align: center; max-width: 56ch; margin: 2.5rem auto 0; opacity: .72;
  font-size: .92rem; line-height: 1.6; }
.prices-foot .btn { margin-top: 1.4rem; }

/* spectrum TOC — the journey ahead */
.spec-toc-label { display: block; font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; opacity: .6; margin-bottom: .7rem; }
.spec-toc-bar { display: grid; grid-template-columns: repeat(6, 1fr); border: 2px solid var(--spec-ink); }
.toc-seg { display: flex; flex-direction: column; gap: .1rem; padding: .85rem .9rem;
  color: #fff; text-decoration: none; min-width: 0; transition: filter .3s var(--ease); }
.toc-seg b { font-family: var(--ff-display); font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.35rem);
  line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.toc-seg span { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-seg:hover, .toc-seg:focus-visible { filter: brightness(1.18); }
.seg-violet { background: var(--b-violet); }
.seg-green  { background: var(--b-green); }
.seg-amber  { background: var(--b-amber); }
.seg-red    { background: var(--b-red); }
.seg-ir     { background: var(--b-ir); }
.seg-co2    { background: var(--b-ir); color: rgba(255,255,255,.75); border-left: 1px dashed rgba(255,255,255,.4); }
.prism-edge { display: block; height: 5px; background: linear-gradient(90deg,
  var(--b-violet), var(--b-green), var(--b-amber), var(--b-red), var(--b-ir)); }

/* ── BANDS — flat colour fields ── */
.band { position: relative; overflow: hidden; color: #fff;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.band-violet { background: var(--b-violet); }
.band-green  { background: var(--b-green); }
.band-amber  { background: var(--b-amber); }
.band-red    { background: var(--b-red); }
.band-ir     { background: var(--b-ir); }
.band-co2    { background: var(--b-ir-deep); color: rgba(255,255,255,.92);
  padding: clamp(3rem, 6vw, 5rem) 0; }
.band .wrap { position: relative; z-index: 1; }
.band h2, .band h3, .band dd { color: #fff; }  /* base heading ink must not leak onto colour fields */

.band-ghost { position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-display); font-weight: 800; line-height: 1;
  font-size: clamp(11rem, 30vw, 30rem); letter-spacing: -.05em;
  color: rgba(255,255,255,.07); pointer-events: none; user-select: none; white-space: nowrap; }

.band-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.band-tag { font-size: .68rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; opacity: .8; }
.band-nm { font-family: var(--ff-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.03em; }
.band-nm small { font-size: .35em; font-weight: 600; letter-spacing: .06em; margin-left: .12em; }
.band-blurb { max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6;
  opacity: .9; margin: 0 0 clamp(1.8rem, 3vw, 2.8rem); }

.band-list { border-top: 1px solid rgba(255,255,255,.28); }
.band-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto auto;
  gap: 1.2rem 2rem; align-items: center; padding: 1.5rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.28); color: inherit; text-decoration: none;
  transition: background .3s var(--ease), padding .3s var(--ease); }
.band-row:hover, .band-row:focus-visible { background: rgba(255,255,255,.07);
  padding-left: .9rem; padding-right: .4rem; }
.band-row h3 { font-family: var(--ff-display); font-weight: 700; margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.015em; line-height: 1.1; }
.band-row p { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .85; }
.band-tech { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.45); padding: .4rem .7rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.band-go { width: 20px; height: 20px; }
.band-go .ic { width: 20px; height: 20px; }

/* machine block inside the IR band */
.band-machine { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2.6rem, 5vw, 4.5rem); }
.bm-figure { margin: 0; }
.bm-figure img { width: 100%; display: block; filter: grayscale(.2) contrast(1.04); }
.bm-figure figcaption { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  opacity: .7; margin-top: .7rem; }
.bm-copy h3 { font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 .9rem; line-height: 1.08; }
.bm-copy p { opacity: .88; line-height: 1.65; max-width: 52ch; }
.bm-specs { display: grid; grid-template-columns: repeat(4, auto); gap: 1.6rem;
  margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.28); }
.bm-specs dt { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.bm-specs dd { margin: .25rem 0 0; font-family: var(--ff-display); font-weight: 700; font-size: 1.05rem; }

/* CO₂ endnote */
.co2-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem;
  align-items: center; color: inherit; text-decoration: none; padding: 1.2rem .2rem;
  border-top: 1px dashed rgba(255,255,255,.35); border-bottom: 1px dashed rgba(255,255,255,.35); }
.co2-row:hover { background: rgba(255,255,255,.05); }
.co2-row h3 { font-family: var(--ff-display); font-weight: 700; margin: 0 0 .2rem; font-size: 1.25rem; }
.co2-row p { margin: 0; font-size: .92rem; opacity: .8; max-width: 60ch; }

/* ── promise / journey zone ── */
.promise-zone .promise-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem); margin-bottom: clamp(3rem, 6vw, 5rem); }
.promise-print { margin: 1.6rem 0 0; max-width: 21rem; transform: rotate(-2deg); }
.promise-print img { width: 100%; display: block; box-shadow: 0 18px 50px -22px rgba(24,19,15,.4); }
.promise-print figcaption { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .6; margin-top: .6rem; }
.journey-head { margin-bottom: 2rem; }

/* spec-white zones keep the film-frame steps (already styled) but on warm white */
.spec-white .steps { margin-top: 1rem; }

/* begin index inherits; retint for white-light zone */
.begin-zone { border-bottom: 2px solid var(--spec-ink); }
.begin-zone .begin-index a { border-bottom-color: rgba(24,19,15,.22); }

/* hero CTAs at 360px — full width, never clipped */
@media (max-width: 480px) {
  .spec-cta { width: 100%; }
  .spec-cta .btn { width: 100%; justify-content: center; }
  .spec-toc-bar { grid-template-columns: repeat(3, 1fr); }
  .toc-seg:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.25); }
  .band-row { grid-template-columns: 1fr auto; }
  .band-row p { grid-column: 1 / -1; }
  .band-tech { display: none; }
  .band-machine { grid-template-columns: 1fr; }
  .bm-specs { grid-template-columns: repeat(2, 1fr); }
  .promise-zone .promise-grid { grid-template-columns: 1fr; }
  .co2-row { grid-template-columns: 1fr auto; }
  .co2-row .band-nm { grid-column: 1 / -1; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .band-row { grid-template-columns: minmax(0,1fr) auto; }
  .band-row p { grid-column: 1 / -1; }
  .band-machine { grid-template-columns: 1fr; }
  .promise-zone .promise-grid { grid-template-columns: 1fr; }
}

/* the develop sweep reads wrong on flat colour fields — white zones only */
.band .reveal { transition-duration: .7s; }