/* ============================================================
   CLUB 116 LONGEVITY / Central Park South
   Visual system: deep spa green · warm cream · ink · muted gold
   Mobile-first. WCAG AA. Reduced-motion respected.
   ============================================================ */

:root{
  /* The greens were teal leaning at hue 169 while every photograph on the site
     sits between 120 and 156, so the chrome and the pictures disagreed. These
     are pulled onto the photography's hue and taken up in saturation, which is
     where most of the extra weight comes from. Every pairing below was checked
     against WCAG AA; two of them were failing before and pass now. */
  --green:#1C1B19;
  --green-deep:#121110;
  --green-soft:#2A2825;
  --cream:#F5F2EC;
  --sand:#E8E3DA;
  --sand-2:#DAD3C7;
  --ink:#161513;
  --ink-soft:#33312D;
  --mute:#4D4A45;
  --mute-on-green:#C9C4BC;
  --gold:#B03A25;
  --gold-soft:#F28C6E;
  --line:rgba(17,18,17,.15);
  --line-green:rgba(245,241,233,.20);
  --f-serif:'Cormorant Garamond', Georgia, serif;
  --f-sans:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-text:'Crimson Pro', Georgia, 'Times New Roman', serif;
  --radius:2px;
  --wrap:1240px;
  --pad:clamp(18px,4vw,48px);
  --ease:cubic-bezier(.22,.8,.3,1);
}
html, body{ width:100%; max-width:100%; overflow-x:hidden; }
@media(max-width:720px){
  :root{ --pad:16px; }
}
@media(max-width:400px){
  :root{ --pad:16px; }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* The nav is fixed, so an anchor that scrolls to the top of the viewport puts
   its own heading behind it. One block had a local scroll-margin for this
   already, which is the tell that it was noticed once and never generalised. */
html{ scroll-padding-top:clamp(84px, 6vw, 104px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:clamp(15px, 0.55vw + 13.5px, 17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }

::selection{ background:var(--green); color:var(--cream); }

/* ---------- texture grain ---------- */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
.on-green .eyebrow, .on-deep .eyebrow{ color:var(--gold-soft); }
h1,h2,h3,.serif{ font-family:var(--f-serif); font-weight:600; letter-spacing:-.024em; }

/* Headlines used to carry a hardcoded <br>, which pinned the break to one
   spot and left orphans at every width it was not designed for. Let the
   browser balance the lines instead, and cap the measure so a display line
   never runs the full width of a large screen. Browsers without balance
   simply wrap normally. */
h1, h2, .display, .h2{ text-wrap:balance; hanging-punctuation:first; }
p, li{ text-wrap:pretty; }
.display{ max-width:16ch; }
.h2{ max-width:20ch; }
.page-hero h1{ max-width:18ch; }
@media(max-width:700px){
  .display{ max-width:14ch; }
  .h2, .page-hero h1{ max-width:17ch; }
}
.display{ font-size:clamp(36px, 4.8vw, 72px); line-height:1.02; letter-spacing:-.024em; }
.h2{ font-size:clamp(32px, 4.6vw, 60px); line-height:1.05; letter-spacing:-.022em; }
.h3{ font-size:clamp(21px, 1.9vw, 28px); line-height:1.2; letter-spacing:-.016em; }
.lead{ font-size:clamp(16px, 1.05vw + 8px, 20px); line-height:1.55; color:var(--ink-soft); font-weight:300; letter-spacing:-.005em; max-width:58ch; }
/* Jost Light on a dark ground thins out; the regular weight reads the same size */
.on-green .lead, .on-deep .lead{ color:var(--mute-on-green); font-weight:400; }
/* light type on dark surfaces renders heavier on macOS without this */
.on-green, .on-deep, .footer, .bleed, .cta-band, .hero-full{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* prices keep lining figures so the digits sit on one baseline */
.mi-price, .t-price, .fd-meta .from, .p-price .from, .hstat-n, .hc-time{ font-variant-numeric:lining-nums; }
.on-green .small, .on-deep .small{ color:var(--mute-on-green); }
.small{ font-size:13.5px; color:var(--mute); letter-spacing:.005em; }
.it{ font-style:italic; font-weight:600; }
.gold{ color:var(--gold); }
/* --gold is sized for cream surfaces. On a dark one it was dark on dark:
   1.73:1 for a 33px headline that needs 3. Pre-existing, and the brighter
   accent is the direction anyway. */
.on-green .gold, .on-deep .gold, .bleed .gold, .footer .gold, .cta-band .gold{ color:var(--gold-soft); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,10vw,140px); position:relative; }
.section-head{ max-width:62ch; margin-bottom:clamp(36px,5vw,64px); }
.on-green{ background:var(--green); color:var(--cream); }
.on-deep{ background:var(--green-deep); color:var(--cream); }
.on-sand{ background:var(--sand); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  padding:16px 30px; border-radius:1px; transition:.45s var(--ease);
  min-height:48px; text-align:center;
}
.btn-solid{ background:var(--green); color:var(--cream); }
.btn-solid:hover{ background:var(--green-deep); transform:translateY(-1px); }
.on-green .btn-solid, .on-deep .btn-solid, .bleed .btn-solid{ background:var(--cream); color:var(--green-deep); }
.on-green .btn-solid:hover, .on-deep .btn-solid:hover{ background:#fff; }
.btn-line{ border:1px solid var(--line); color:var(--ink); background:transparent; }
.btn-line:hover{ border-color:var(--gold); color:var(--gold); }
.on-green .btn-line, .on-deep .btn-line, .bleed .btn-line,
.sheet .btn-line, .mobile-bar .btn-line{ border-color:var(--line-green); color:var(--cream); background:transparent; }
.on-green .btn-line:hover, .on-deep .btn-line:hover, .bleed .btn-line:hover,
.sheet .btn-line:hover, .mobile-bar .btn-line:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
.btn-gold{ background:var(--gold); color:var(--cream); }
.btn-gold:hover{ background:#9A3120; transform:translateY(-1px); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.nav.scrolled{ background:rgba(245,241,233,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px; }
.brand{ display:flex; flex-direction:row; align-items:center; gap:11px; line-height:1.15; z-index:62; flex:none; }
.brand .b-words{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand .b-mark{
  flex:none; width:44px; height:38px; color:var(--gold); transition:background-color .3s;
  background-color:currentColor;
  -webkit-mask:url("mark-116.png") center/contain no-repeat;
          mask:url("mark-116.png") center/contain no-repeat;
}
.brand .b-name{ font-family:var(--f-serif); font-size:clamp(15px,2.2vw,21px); letter-spacing:.18em; text-transform:uppercase; font-weight:500; white-space:nowrap; }
.brand .b-sub{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.nav .brand, .nav .menu a, .nav .burger{ color:var(--ink); }
.nav .brand .b-sub{ color:var(--gold); }
.menu{ display:none; align-items:center; gap:clamp(13px,1.7vw,28px); }
.menu a{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; color:var(--ink-soft); transition:.3s; white-space:nowrap; }
.menu a:hover{ opacity:1; color:var(--gold-soft); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-cta .btn{ padding:13px 22px; min-height:0; white-space:nowrap; }
/* mid-desktop: 5 menu items + Book button is tight , compress spacing + button */
@media(min-width:1080px) and (max-width:1299px){
  .nav-inner{ gap:14px; }
  .menu{ gap:14px; }
  .menu a{ font-size:11.5px; letter-spacing:.1em; }
  .nav-cta .btn{ padding:11px 16px; font-size:11px; letter-spacing:.14em; }
}
.nav-cta .btn-line{ display:none; }
/* position is required for the z-index to apply at all. Without it the
   burger painted below the open sheet, so the menu could only be closed
   by choosing a link, never by tapping the button again. */
.burger{ display:inline-flex; align-items:center; gap:10px; padding:10px 4px 10px 10px; position:relative; z-index:62; }
.burger-label{ font-size:11px; letter-spacing:0.26em; text-transform:uppercase; font-weight:400; color:inherit; }
.burger-lines{ display:grid; gap:5px; }
.burger-lines span{ width:22px; height:1.4px; background:currentColor; transition:.4s var(--ease); display:block; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(1){ transform:translateY(6.4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3){ transform:translateY(-6.4px) rotate(-45deg); }
.sheet{
  position:fixed; inset:0; background:var(--green-deep); color:var(--cream); z-index:61;
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  opacity:0; visibility:hidden; transition:.5s var(--ease);
}
.sheet.open{ opacity:1; visibility:visible; }
.sheet nav a{ font-family:var(--f-serif); font-size:clamp(26px,6.5vw,38px); padding-block:10px; border-bottom:1px solid var(--line-green); display:flex; justify-content:space-between; align-items:center; }
.sheet nav a .no{ font-family:var(--f-sans); font-size:11px; letter-spacing:.3em; color:var(--gold-soft); }
.sheet .sheet-cta{ display:flex; gap:10px; margin-top:30px; flex-wrap:nowrap; }
.sheet .sheet-cta .btn{ flex:1 1 0; min-width:0; padding:14px 8px; min-height:48px; font-size:11px; letter-spacing:0.16em; white-space:nowrap; }

@media(min-width:1080px){
  .menu{ display:flex; }
  .burger{ display:none; }
  .menu a.m-extra{ display:none; }
}
/* 1080 to 1299px: drop the brand sub-line so six links + the Book CTA fit */
@media(min-width:1080px) and (max-width:1299px){
  .brand .b-sub{ display:none; }
}
/* Full menu (7 links) + both CTAs need ~1420px of content , more than the 1240px
   standard column , so the nav gets a wider rail and only opens up once it fits.
   Below this the burger sheet and sticky bottom bar carry Diagnostics/About. */
@media(min-width:1640px){
  .menu a.m-extra{ display:inline-block; }
  .nav-cta .btn-line{ display:inline-flex; }
  .nav .wrap{ max-width:1640px; }
}
/* mobile + tablet nav refinements */
@media(max-width:1079px){
  .nav{ border-bottom:1px solid transparent; transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
  .nav.hero-light{ border-bottom-color:rgba(118,84,35,.18); }
  .nav.scrolled{ border-bottom-color:var(--line); }
  .nav-inner{ padding-block:14px; }
  .brand .b-sub{ display:none; }
  .brand .b-name{ font-size:13.5px; letter-spacing:.22em; }
  .brand{ gap:9px; }
  .brand .b-mark{ width:37px; height:32px; }
  /* top-bar CTA only appears alongside the full menu (>=830px) , burger + sticky bar cover the rest */
  .nav-cta{ display:none; }
}
@media(max-width:720px){
  /* sticky bottom bar already shows the Book CTA , keep the nav clean */
  .nav-inner{ gap:12px; padding-block:14px; }
  .brand{ min-width:0; flex:0 1 auto; overflow:hidden; }
  .brand .b-name{ font-size:12px; letter-spacing:.18em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .burger{ padding:8px 0 8px 8px; gap:8px; flex-shrink:0; }
  .burger-label{ font-size:11px; letter-spacing:0.16em; color:var(--ink-soft); }
  .burger-lines span{ width:18px; }
  .nav.hero-light .burger-label{ color:var(--ink-soft); }
}
@media(max-width:400px){
  .brand .b-name{ font-size:11px; letter-spacing:.14em; }
  .brand{ gap:7px; }
  .brand .b-mark{ width:31px; height:27px; }
  .burger-label{ font-size:9.5px; letter-spacing:.16em; }
  .burger-lines span{ width:16px; }
  .burger{ gap:6px; padding-left:4px; }
}

/* ---------- hero (TYPE-FIRST, CREAM) ---------- */
.hero{
  min-height:100svh; position:relative; overflow:hidden;
  display:flex; align-items:center;
  color:var(--ink);
  background:
    radial-gradient(ellipse 75% 65% at 88% 12%, rgba(118,84,35,.06) 0%, transparent 55%),
    radial-gradient(ellipse 85% 70% at 12% 100%, rgba(28,27,25,.04) 0%, transparent 60%),
    linear-gradient(180deg, #F5F2EC 0%, #EDE9E0 58%, #E8E3DA 100%);
  border-bottom:1px solid var(--line);
}
.hero-field{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-overlay{ display:none; }
.hero-rings-wrap{ display:none; }

@media(max-width:639px){
  }

/* content , center-left anchored */
.hero-body{
  position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(120px,18vh,170px) var(--pad) clamp(56px,8vh,86px);
  display:flex; flex-direction:column;
}


/* opening-soon flag , minimal: just a pulsing dot + tiny label */
.hero .flag{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;
  margin-bottom:22px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
.hero .flag-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(118,84,35,.5);
  animation:flagPulse 2.4s ease-out infinite;
  flex-shrink:0;
}
.hero .flag-label{ color:var(--gold); }
@keyframes flagPulse{
  0%   { box-shadow:0 0 0 0 rgba(118,84,35,.5); }
  70%  { box-shadow:0 0 0 8px rgba(118,84,35,0); }
  100% { box-shadow:0 0 0 0 rgba(118,84,35,0); }
}
@media (prefers-reduced-motion: reduce){ .hero .flag-dot{ animation:none; } }
@media(max-width:520px){
  .hero .flag{ font-size:11px; letter-spacing:.22em; gap:9px; margin-bottom:20px; }
}

.hero .eyebrow{ color:var(--gold); margin-bottom:22px; display:block; }
.hero .display{ color:var(--ink); font-weight:600; }
.hero .display .gold{ color:var(--gold); }
.hero-sub{
  max-width:48ch; margin-top:clamp(22px, 2.6vw, 36px);
  font-size:clamp(15px, 0.7vw + 11px, 19px);
  color:var(--mute); font-weight:300; line-height:1.6; letter-spacing:-.003em;
}
.hero-cta{ display:flex; align-items:center; gap:clamp(18px,2.6vw,28px); margin-top:clamp(28px,4vw,44px); flex-wrap:wrap; }
.hero-cta .btn{ white-space:nowrap; }
.hero-link-quiet{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--gold);
  padding-bottom:5px; transition:.3s; white-space:nowrap;
}
.hero-link-quiet:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* stats , desktop right column */
.hero-stats-overlay{
  position:absolute; right:clamp(28px,6vw,96px); top:50%; transform:translateY(-50%);
  z-index:3; display:none; flex-direction:column; gap:36px; text-align:right;
}
@media(min-width:920px){ .hero-stats-overlay{ display:flex; } }
.hstat{ display:flex; flex-direction:column; gap:4px; padding-right:22px; border-right:1px solid var(--line); }
.hstat-n{
  font-family:var(--f-serif); font-size:clamp(38px,4.6vw,58px);
  color:var(--ink); font-weight:500; line-height:1; letter-spacing:-.02em;
}
.hstat-l{
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--mute);
}

/* coords */
.hero-coords{
  position:absolute; bottom:clamp(20px,2.5vh,30px); left:clamp(28px,6vw,96px);
  z-index:3; font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--mute); opacity:.55; pointer-events:none;
}

/* nav light text over dark hero (legacy) */
.nav.on-hero .brand,
.nav.on-hero .menu a,
.nav.on-hero .burger{ color:var(--cream); }
.nav.on-hero .brand .b-sub{ color:var(--gold-soft); }
.nav.on-hero .brand .b-mark{ color:var(--gold-soft); }
.nav.on-hero .btn-line{ border-color:rgba(245,241,233,.26); color:var(--cream); }
.nav.on-hero .btn-line:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

/* nav dark text over CREAM hero (new) */
.nav.hero-light .brand,
.nav.hero-light .menu a,
.nav.hero-light .burger{ color:var(--ink); }
.nav.hero-light .brand .b-sub{ color:var(--gold); }
.nav.hero-light .brand .b-mark{ color:var(--gold); }
.nav.hero-light .menu a:hover{ color:var(--gold); }
.nav.hero-light .btn-line{ border-color:var(--line); color:var(--ink); }
.nav.hero-light .btn-line:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- trust strip ---------- */
.strip{ background:var(--gold); }
.strip-inner{ display:grid; grid-template-columns:1fr; gap:0; }
.strip-inner > div{
  padding:24px var(--pad); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream); display:flex; align-items:center; gap:14px;
  border-bottom:1px solid rgba(245,241,233,.22);
}
.strip-inner > div:last-child{ border-bottom:none; }
.strip-inner .gl{ color:var(--gold); font-family:var(--f-serif); font-size:20px; letter-spacing:0; font-style:italic; }
@media(min-width:860px){
  .strip-inner{ grid-template-columns:repeat(4,1fr); }
  .strip-inner > div{ border-bottom:none; border-right:1px solid rgba(245,241,233,.22); justify-content:center; text-align:center; }
  .strip-inner > div:last-child{ border-right:none; }
}

/* ---------- image placeholders ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius); min-height:240px;
  display:flex; align-items:flex-end; padding:18px;
  background-position:center; background-size:cover;
  transition:background-position .7s var(--ease);
}
.ph .ph-cap{ position:relative; z-index:2; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(245,241,233,.75); }
.ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, transparent 38%, rgba(0,0,0,.58) 100%); }
/* Two layers, and the order matters: the photograph sits on top of the
   committed artwork. If the photograph is missing the artwork shows through,
   so a slot is never empty. Positions are chosen per image so the subject
   survives the crop rather than being cut in half. */
.ph-stone{ background:#C9BFB2; background-image:url('img/photo-house-entry.webp'); background-size:cover; background-position:50% 50%; }
.ph-linen{ background:#C3B9A5; background-image:url('img/photo-treatment-room.webp'); background-size:cover; background-position:50% 50%; }
.ph-water{ background:#1C1B19; background-image:url('img/photo-robe-sauna.webp'); background-size:cover; background-position:50% 40%; }
.ph-glow{ background:#D9C2AE; background-image:url('img/photo-skin-macro.webp'); background-size:cover; background-position:50% 40%; }
.ph-leaf{ background:#254A3D; background-image:url('img/photo-house-wide.webp'); background-size:cover; background-position:50% 60%; }
.ph-room{ background:#121110; background-image:url('img/photo-consult-two.webp'); background-size:cover; background-position:50% 45%; }

/* ---------- pillars ---------- */
.pillar-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px 30px; display:flex; flex-direction:column; gap:14px;
  transition:.5s var(--ease); position:relative; overflow:hidden;
  box-shadow:0 2px 14px -6px rgba(17,18,17,.09);
}
.pillar:hover{ border-color:var(--gold); box-shadow:0 20px 48px -16px rgba(17,18,17,.22); }

.pillar .p-no{ font-size:11px; letter-spacing:.3em; color:var(--gold); }
.pillar h3{ font-size:26px; }
.pillar p{ font-size:15px; color:var(--mute); }
.p-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.p-tags span{ font-size:11px; letter-spacing:.06em; padding:5px 11px; border:1px solid var(--line); border-radius:100px; color:var(--mute); white-space:nowrap; }
.pillar{ min-height:100%; }
.pillar .p-price{ font-size:13px; letter-spacing:.08em; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pillar .p-price .from{ font-family:var(--f-serif); font-size:21px; font-style:italic; color:var(--green); }
.pillar .p-link{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:inline-flex; gap:8px; align-items:center; }
/* four areas of care, so two by two at every size above phone */
@media(min-width:700px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }

/* ---------- front door band ---------- */
.fd-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.fd{
  background:var(--green-deep); border:1px solid rgba(203,167,90,.18); border-radius:var(--radius);
  padding:0; overflow:hidden; display:flex; flex-direction:column; transition:.5s var(--ease);
}
.fd:hover{ border-color:var(--gold-soft); }
.fd .ph{ min-height:190px; border-radius:0; }
.fd-body{ padding:28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.fd-body h3{ font-size:25px; }
.fd-body p{ font-size:15px; color:var(--mute-on-green); flex:1; }
/* four across leaves each card narrow, so let the price drop cleanly
   under its label instead of breaking mid word */
.fd-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:8px 12px; flex-wrap:wrap; border-top:1px solid var(--line-green); padding-top:16px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.fd-meta > span:first-child{ white-space:nowrap; }
.fd-meta .from{ font-family:var(--f-serif); font-size:21px; font-style:italic; letter-spacing:0; text-transform:none; color:var(--gold-soft); }
/* four entry points now, so two up at tablet and four across on desktop */
@media(min-width:760px){ .fd-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1180px){ .fd-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- protocols ---------- */
.proto-list{ display:flex; flex-direction:column; }
.proto{
  display:grid; grid-template-columns:1fr; gap:8px 30px; padding-block:30px;
  border-top:1px solid var(--line); transition:.4s var(--ease); position:relative;
}
.proto:last-child{ border-bottom:1px solid var(--line); }
.proto h3{ font-size:clamp(26px,3.4vw,38px); transition:.4s; }
.proto:hover h3{ color:var(--gold); transform:translateX(6px); }
.proto .pr-sub{ font-size:15px; color:var(--mute); max-width:64ch; }
.proto .pr-tag{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
/* the starting price sits under the tag on its own line, not after a hanging dot */
.proto .pr-from{ display:block; margin-top:5px; color:var(--ink-soft); letter-spacing:.2em; }
.proto .pr-cta{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); align-self:center; justify-self:start; white-space:nowrap; }
@media(min-width:860px){
  .proto{ grid-template-columns:200px 1fr auto; align-items:center; }
  .proto .pr-tag{ order:0; }
}

/* ---------- membership ---------- */
.tier-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch; }
.tier{
  border:1px solid rgba(203,167,90,.22); border-radius:var(--radius); padding:38px 30px;
  display:flex; flex-direction:column; gap:0; background:var(--green);
  transition:.5s var(--ease); position:relative;
}
.tier:hover{ border-color:var(--gold-soft); }
.tier .t-name{ font-family:var(--f-serif); font-size:29px; }
.tier .t-kick{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; display:block; }
.tier .t-price{ font-family:var(--f-serif); font-size:clamp(36px,4vw,46px); font-style:italic; margin:18px 0 4px; }
.tier .t-per{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-on-green); }
.tier ul{ margin:26px 0 30px; display:flex; flex-direction:column; gap:13px; flex:1; }
.tier ul li{ font-size:15px; color:var(--mute-on-green); padding-left:24px; position:relative; }
.tier ul li::before{ content:"·"; position:absolute; left:6px; color:var(--gold-soft); font-size:22px; line-height:.9; }
.tier ul li b{ color:var(--cream); font-weight:400; }
.tier.feat{ background:var(--cream); color:var(--ink); border-color:var(--gold); border-top-width:2px; }
.tier.feat .t-kick{ color:var(--gold); }
.tier.feat ul li, .tier.feat .t-per{ color:var(--mute); }
.tier.feat ul li b{ color:var(--ink); }
.tier.feat .t-name{ color:var(--green-deep); }
.tier .badge{
  position:absolute; top:-13px; left:30px; background:var(--gold); color:var(--cream);
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase; padding:6px 14px; border-radius:2px;
}
@media(min-width:920px){ .tier-grid{ grid-template-columns:repeat(3,1fr); } .tier.feat{ transform:scale(1.02); } .tier.feat:hover{ transform:scale(1.02); } }

.founding{
  margin-top:clamp(40px,6vw,64px); border:1px solid var(--gold-soft); border-radius:var(--radius);
  padding:clamp(30px,5vw,54px); display:grid; gap:24px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(138,109,59,.16), rgba(138,109,59,.04));
}
.founding .f-count{ font-family:var(--f-serif); font-size:clamp(54px,8vw,92px); font-style:italic; line-height:1; color:var(--gold-soft); }
.founding p{ color:var(--mute-on-green); max-width:54ch; }
@media(min-width:860px){ .founding{ grid-template-columns:auto 1fr auto; align-items:center; } }

/* ---------- diagnostics ---------- */
.diag-grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.diag-steps{ counter-reset:step; display:flex; flex-direction:column; }
.diag-step{ counter-increment:step; padding:24px 0 24px 64px; border-top:1px solid var(--line); position:relative; }
.diag-step:last-child{ border-bottom:1px solid var(--line); }
.diag-step::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:24px;
  font-family:var(--f-serif); font-style:italic; font-size:26px; color:var(--gold);
}
.diag-step h3{ font-size:21px; margin-bottom:6px; }
.diag-step p{ font-size:15px; color:var(--mute); max-width:52ch; }
.marker-cloud{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.marker-cloud span{ font-size:12px; letter-spacing:.1em; padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft); }
@media(min-width:980px){ .diag-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- practice ---------- */
.practice-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(34px,5vw,56px); }
/* the card paints its own ground, so it must set its own ink too, or dropped
   into a dark section it inherits cream text onto a white card */
.cred{ border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; background:#fff; color:var(--ink); overflow:hidden; transition:border-color .4s var(--ease); box-shadow:0 2px 14px -6px rgba(17,18,17,.07); }
.cred h3{ font-size:21px; margin-bottom:10px; display:flex; align-items:baseline; gap:12px; }
.cred h3 .gl{ font-style:italic; color:var(--gold); font-size:25px; }
.cred p{ font-size:15px; color:var(--mute); }
@media(min-width:860px){ .practice-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .practice-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- experience / ritual ---------- */
.ritual{ display:grid; grid-template-columns:1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.ritual-steps{ display:flex; flex-direction:column; }
.rstep{ display:flex; gap:22px; padding-block:20px; border-top:1px solid var(--line-green); align-items:baseline; }
.rstep:last-child{ border-bottom:1px solid var(--line-green); }
.rstep .rn{ font-family:var(--f-serif); font-style:italic; font-size:22px; color:var(--gold-soft); min-width:42px; }
.rstep h3{ font-size:20px; margin-bottom:4px; }
.rstep p{ font-size:14.5px; color:var(--mute-on-green); }
@media(min-width:980px){ .ritual{ grid-template-columns:1fr 1.1fr; } }

/* ---------- reviews ---------- */
.quote-rail{ display:grid; grid-template-columns:1fr; gap:14px; }
.quote{ border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; background:#fff; display:flex; flex-direction:column; gap:18px; box-shadow:0 2px 14px -6px rgba(17,18,17,.07); }
.quote .q-text{ font-family:var(--f-serif); font-size:21px; font-style:italic; line-height:1.4; }
.quote .q-who{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.quote .q-stars{ color:var(--gold); letter-spacing:.3em; font-size:13px; }
@media(min-width:860px){ .quote-rail{ grid-template-columns:repeat(3,1fr); } }

/* ---------- visit ---------- */
.visit-grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,6vw,80px); }
.visit-info dl{ display:grid; grid-template-columns:auto 1fr; gap:14px 28px; margin-top:28px; }
.visit-info dt{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); padding-top:4px; }
.visit-info dd{ font-size:16px; color:var(--ink-soft); }
.map-ph{ min-height:340px; border-radius:var(--radius); position:relative; overflow:hidden; background:linear-gradient(rgba(18,17,16,.28),rgba(18,17,16,.46)), url('img/map.jpg') center/cover; display:grid; place-items:center; }
.map-ph .pin{ text-align:center; color:var(--cream); position:relative; z-index:2; }
.map-ph .pin .serif{ font-size:24px; font-style:italic; }
.map-ph .pin .small{ color:var(--mute-on-green); letter-spacing:.24em; text-transform:uppercase; font-size:11px; margin-top:6px; }


/* ---------- card image bands ---------- */
.p-img{
  height:155px; margin:-34px -28px 0;
  background-size:cover; background-position:center;
  flex-shrink:0; overflow:hidden;
  transition:transform .75s var(--ease);
}
.pillar:hover .p-img{ transform:scale(1.06); }
.cred-img{
  height:110px; margin:-30px -26px 16px;
  background-size:cover; background-position:center;
  overflow:hidden;
  transition:transform .75s var(--ease);
}
.cred:hover .cred-img{ transform:scale(1.06); }
@media(min-width:980px){ .visit-grid{ grid-template-columns:1fr 1fr; align-items:center; } }

/* ---------- booking ---------- */
.book-grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,60px); }
@media(min-width:980px){
  .book-grid{ grid-template-columns:1fr 1fr; align-items:start; }
}
.book-form{ display:grid; gap:14px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute-on-green); }
.field input, .field select{
  background:rgba(245,241,233,.05); border:1px solid var(--line-green); border-radius:2px;
  padding:15px 16px; color:var(--cream); font:inherit; font-size:15px; width:100%;
  transition:.3s; appearance:none;
}
.field select option{ color:var(--ink); }
.field input:focus, .field select:focus{ border-color:var(--gold-soft); outline:none; }
.field input::placeholder{ color:rgba(245,241,233,.4); }
.f-row{ display:grid; gap:14px; }
@media(min-width:640px){ .f-row{ grid-template-columns:1fr 1fr; } }
.book-note{ font-size:13px; color:var(--mute-on-green); display:flex; gap:10px; align-items:flex-start; }
.book-note::before{ content:"·"; color:var(--gold-soft); font-size:18px; line-height:1; }
.embed-ph{ border:1px solid var(--line-green); border-radius:var(--radius); padding:18px 20px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-on-green); text-align:center; }

/* ---------- footer ---------- */
.footer{ background:var(--green-deep); color:var(--cream); padding:clamp(60px,8vw,100px) 0 120px; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:44px; }
.foot-brand .b-name{ font-family:var(--f-serif); font-size:24px; letter-spacing:.2em; text-transform:uppercase; }
.foot-brand .b-sub{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-soft); white-space:nowrap; }
.foot-col h4{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px; font-weight:400; }
.foot-col ul{ display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:14.5px; color:var(--mute-on-green); transition:.3s; }
.foot-col a:hover{ color:var(--cream); }
.news{ display:flex; border:1px solid var(--line-green); border-radius:2px; overflow:hidden; margin-top:16px; max-width:380px; }
.news input{ flex:1; background:transparent; border:none; padding:14px 16px; color:var(--cream); font:inherit; font-size:14px; min-width:0; }
.news input::placeholder{ color:rgba(245,241,233,.4); }
.news button{ background:var(--gold); color:var(--cream); padding:0 22px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:.3s; }
.news button:hover{ background:#9A3120; }
.foot-base{ margin-top:54px; padding-top:26px; border-top:1px solid var(--line-green); display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:12px; color:var(--mute-on-green); letter-spacing:.06em; }
@media(min-width:860px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; } .footer{ padding-bottom:clamp(60px,8vw,100px); } }

/* ---------- sticky mobile CTA ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex;
  background:rgba(18,17,16,.96); backdrop-filter:blur(12px);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:8px; transform:translateY(110%); transition:transform .5s var(--ease);
  box-sizing:border-box;
}
.mobile-bar.show{ transform:translateY(0); }
.mobile-bar .btn{
  flex:1 1 0; min-width:0;
  padding:14px 6px; min-height:48px;
  font-size:11px; letter-spacing:0.14em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(min-width:520px){
  .mobile-bar{ padding-inline:18px; gap:10px; }
  .mobile-bar .btn{ font-size:11px; padding:14px 12px; letter-spacing:.18em; }
}
@media(min-width:860px){ .mobile-bar{ display:none; } }

/* ---------- mobile refinements ---------- */
@media(max-width:639px){
  .hero{ min-height:92svh; }
  .hero-body{ padding:clamp(96px,18vh,128px) 22px clamp(44px,7vh,64px); }
  .hero .eyebrow{ display:none; }
  .hero-rule{ display:none; }
  .display{ font-size:clamp(46px, 13.5vw, 64px); line-height:.98; letter-spacing:-.028em; }
  .h2{ font-size:clamp(30px, 8.4vw, 42px); line-height:1.04; letter-spacing:-.022em; }
  .h3{ font-size:20px; }
  .hero-sub{ font-size:15.5px; line-height:1.55; max-width:38ch; margin-top:22px; }
  .hero-cta{ flex-direction:column; align-items:flex-start; gap:16px; margin-top:32px; }
  .hero-cta .btn{ width:100%; }
  .hero-link-quiet{ font-size:11px; }
  .hero-coords{ display:none; }
  .pillar{ padding:24px 20px 22px; gap:12px; }
  .pillar h3{ font-size:23px; }
  .p-img{ height:140px; margin:-24px -20px 0; }
  .cred{ padding:22px 18px; }
  .cred h3{ font-size:19px; }
  .cred-img{ height:96px; margin:-22px -18px 12px; }
  .tier{ padding:26px 22px; }
  .tier .t-name{ font-size:25px; }
  .section{ padding-block:clamp(56px,9vw,80px); }
  .section-head{ margin-bottom:32px; }
  .fd .ph{ min-height:200px; }
  .fd-body{ padding:22px; }
  .fd-body h3{ font-size:22px; }
  .proto{ grid-template-columns:1fr; padding-block:24px; gap:12px; }
  .proto h3{ font-size:26px; }
  .proto .pr-cta{ justify-self:start; }
  .visit-info dl{ grid-template-columns:1fr; gap:10px; }
  .visit-info dt{ font-size:11px; margin-top:12px; }
  .book-grid{ gap:clamp(24px,5vw,36px); }
  .quote .q-text{ font-size:18px; }
  .diag-step{ padding:20px 0 20px 52px; }
  .diag-step::before{ font-size:22px; top:20px; }
  .ticker-track span{ font-size:17px; }
  .ticker-track span::after{ margin:0 22px; }
}

/* ---------- tablet tweaks ---------- */
@media(min-width:640px) and (max-width:919px){
  .display{ font-size:clamp(40px,6.5vw,58px); }
  .hero-body{ max-width:76%; }
  .fd-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- large screen ---------- */
@media(min-width:1440px){
  .practice-grid{ grid-template-columns:repeat(4,1fr); }
  .hero-body{ max-width:680px; }
}

/* ---------- trust strip mobile ---------- */
@media(max-width:859px){
  .strip-inner > div{ justify-content:flex-start; }
}

/* ---------- scroll progress ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; background:var(--gold); width:0; z-index:70; }

/* ---------- modality ticker ---------- */
.ticker{ overflow:hidden; padding-block:22px; background:var(--green-deep); }
.ticker-track{ display:flex; width:max-content; animation:tick 70s linear infinite; }
.ticker-track span{ font-family:var(--f-serif); font-style:italic; font-size:21px; color:var(--mute-on-green); display:flex; align-items:center; white-space:nowrap; }
.ticker-track span::after{ content:"\00b7"; color:var(--gold-soft); margin:0 30px; font-style:normal; }
@keyframes tick{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ---------- diagnostics & protocols images ---------- */
.diag-photo{
  width:100%; height:clamp(200px,26vw,300px); border-radius:var(--radius);
  background-size:cover; background-position:center;
  margin-bottom:28px; overflow:hidden; flex-shrink:0;
  box-shadow:0 12px 36px -12px rgba(17,18,17,.22);
}
.proto-hero{
  width:100%; height:clamp(180px,22vw,260px); border-radius:var(--radius);
  background-size:cover; background-position:center;
  margin-bottom:clamp(28px,4vw,46px);
  box-shadow:0 10px 30px -10px rgba(17,18,17,.16);
}

/* ---------- diagnostics chart ---------- */
.diag-chart{ margin-top:32px; border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px 10px; }
.diag-chart svg{ width:100%; height:auto; display:block; }
.diag-chart .dc-lab{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; fill:var(--mute); font-family:var(--f-sans); font-weight:400; }
.diag-chart path.draw{ stroke-dasharray:720; stroke-dashoffset:720; transition:stroke-dashoffset 2.6s var(--ease) .5s; }
.diag-chart.in path.draw{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){ .diag-chart path.draw{ stroke-dasharray:none; stroke-dashoffset:0; transition:none; } }

/* ---------- decorative rings backdrop ---------- */

/* ---------- reveal motion ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.12s; }
.reveal-d2{ transition-delay:.24s; }
.reveal-d3{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .pillar, .tier, .fd, .proto h3{ transition:none; }
  [data-para]{ transform:none !important; }
}

/* ---------- 3D depth ---------- */
.pillar, .fd, .tier, .quote, .cred{ will-change:transform; }
.hero-square{ transition:transform .55s var(--ease); }
.quote:hover{ box-shadow:0 20px 48px -16px rgba(17,18,17,.14); }
.cred:hover{ border-color:var(--gold); }

/* ============================================================
   INNER PAGES , solid nav, compact page hero, CTA band
   ============================================================ */

/* always-solid nav on inner pages (overrides JS on-hero toggling) */
.nav.page-nav,
.nav.page-nav.on-hero{
  background:rgba(245,241,233,.92); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav.page-nav .brand, .nav.page-nav .menu a, .nav.page-nav .burger,
.nav.page-nav.on-hero .brand, .nav.page-nav.on-hero .menu a, .nav.page-nav.on-hero .burger{ color:var(--ink); }
.nav.page-nav .brand .b-sub, .nav.page-nav.on-hero .brand .b-sub{ color:var(--gold); }
.nav.page-nav .brand .b-mark, .nav.page-nav.on-hero .brand .b-mark{ color:var(--gold); }
.nav.page-nav .menu a:hover, .nav.page-nav.on-hero .menu a:hover{ color:var(--gold); }
.nav.page-nav .menu a.active{ color:var(--gold); }
.nav.page-nav .btn-line, .nav.page-nav.on-hero .btn-line{ border-color:var(--line); color:var(--ink); }
.nav.page-nav .btn-line:hover, .nav.page-nav.on-hero .btn-line:hover{ border-color:var(--gold); color:var(--gold); }

/* compact page hero on cream */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(132px,18vh,180px) 0 clamp(48px,6vw,76px);
  background:
    radial-gradient(ellipse 70% 65% at 88% 6%, rgba(118,84,35,.06) 0%, transparent 55%),
    linear-gradient(180deg, #F5F2EC 0%, #F5F2EC 70%, #ECE8DE 100%);
  border-bottom:1px solid var(--line);
}
.page-hero .page-hero .page-hero .wrap{ position:relative; z-index:2; }
.page-hero .crumb{
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
}
.page-hero .crumb a{ color:var(--mute); transition:.3s; }
.page-hero .crumb a:hover{ color:var(--gold); }
.page-hero .crumb .sep{ color:var(--gold); }
.page-hero h1{ font-size:clamp(40px,6vw,84px); line-height:1; letter-spacing:-.028em; margin:6px 0 0; }
.page-hero .lead{ max-width:54ch; margin-top:clamp(18px,2.4vw,28px); }
@media(max-width:639px){
  .page-hero{ padding-top:clamp(108px,20vh,140px); }
  .page-hero h1{ font-size:clamp(38px,11vw,52px); }
  .page-hero }

/* CTA band , bottom of inner pages */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,120px) 0;
  background:var(--green-deep); color:var(--cream); text-align:center;
}
.cta-band .cta-band .wrap{ position:relative; z-index:2; max-width:760px; }
.cta-band .eyebrow{ color:var(--gold-soft); }
.cta-band h2{ font-size:clamp(32px,4.6vw,56px); line-height:1.04; margin:16px 0 18px; }
.cta-band p{ color:var(--mute-on-green); max-width:48ch; margin:0 auto 32px; }
.cta-band .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-line{ border-color:var(--line-green); color:var(--cream); }
.cta-band .btn-line:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

/* services detail rows + section intros reused across pages */
.page-section{ padding-block:clamp(56px,8vw,110px); }
.page-intro{ max-width:62ch; margin-bottom:clamp(34px,5vw,60px); }
.page-intro .eyebrow{ display:block; margin-bottom:14px; }

/* ---------- treatment menu ---------- */
.menu-wrap{ max-width:920px; }
.menu-group{ margin-bottom:clamp(46px,6vw,78px); }
.menu-group:last-child{ margin-bottom:0; }
.menu-group-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:6px; padding-bottom:16px; border-bottom:1px solid var(--gold);
}
.menu-group-head .mg-no{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.menu-group-head h2{ font-size:clamp(25px,3vw,36px); line-height:1; letter-spacing:-.02em; }
.menu-item{
  display:grid; grid-template-columns:1fr auto; gap:2px 24px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.menu-item:last-child{ border-bottom:none; }
.menu-item h3{ font-size:clamp(18px,1.9vw,22px); font-weight:500; letter-spacing:-.01em; }
.menu-item .mi-price{
  font-family:var(--f-serif); font-style:italic; font-size:clamp(17px,1.7vw,21px);
  color:var(--gold); white-space:nowrap; text-align:right;
}
.menu-item .mi-price small{
  display:block; font-family:var(--f-sans); font-style:normal; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); margin-top:3px;
}
.menu-item .mi-desc{ grid-column:1 / -1; font-size:14.5px; line-height:1.55; color:var(--mute); max-width:64ch; margin-top:3px; }
@media(max-width:520px){
  .menu-item{ gap:1px 14px; padding:16px 0; }
  .menu-item .mi-desc{ font-size:13.5px; }
}

/* ============================================================================
   PAGE COMPONENTS , programs, bio-age assessment, journal, outcomes, teams
   Added when those five pages were rebuilt onto the Club 116 system.
   ========================================================================= */

/* ---------- jump chips (programs index) ---------- */
.chiprow{ display:flex; gap:9px; flex-wrap:wrap; margin-top:30px; }
.chip{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:10px 18px; transition:.3s var(--ease);
}
.chip:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- program block ---------- */
.prog-block{ border-top:1px solid var(--line); padding-block:clamp(44px,6vw,72px); }
.prog-block:last-of-type{ border-bottom:1px solid var(--line); }
.prog-block .pb-for{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.prog-block h2{ font-family:var(--f-serif); font-size:clamp(30px,4vw,44px); font-weight:500; margin:14px 0 14px; }
.prog-block .pb-lead{ font-size:17px; line-height:1.65; color:var(--mute); max-width:60ch; }
.pb-cols{ display:grid; grid-template-columns:1fr; gap:30px; margin-top:34px; }
.pb-cols h3{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; font-weight:400; }
.ticks{ display:flex; flex-direction:column; gap:10px; }
.ticks li{ font-size:15px; color:var(--ink-soft); padding-left:20px; position:relative; line-height:1.5; }
.ticks li::before{ content:"\2022"; position:absolute; left:0; color:var(--gold-soft); }
.pb-phases{ display:grid; grid-template-columns:1fr; gap:1px; margin-top:34px; background:var(--line); border:1px solid var(--line); }
/* the card paints its own ground, so it must set its own ink too: dropped
   into a dark section it was inheriting cream text onto a cream card */
.phase{ background:var(--cream); color:var(--ink); padding:22px 20px; }
.phase .ph-when{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.phase .ph-what{ font-family:var(--f-serif); font-size:21px; margin:8px 0 6px; }
.phase .ph-note{ font-size:13.5px; color:var(--mute); line-height:1.5; }
.pb-foot{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:32px; }
@media(min-width:860px){
  .pb-cols{ grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); }
  .pb-phases{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- assessment ---------- */
.quiz{ max-width:720px; margin-inline:auto; }
.quiz-card{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); padding:clamp(28px,4vw,44px); box-shadow:0 2px 18px -8px rgba(17,18,17,.09); }
.quiz-meter{ height:2px; background:var(--line); margin-bottom:26px; overflow:hidden; }
.quiz-meter span{ display:block; height:100%; background:var(--gold); width:0; transition:width .45s var(--ease); }
.quiz-step{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.quiz-q{ font-family:var(--f-serif); font-size:clamp(24px,3.2vw,32px); font-weight:500; margin:12px 0 26px; line-height:1.25; }
.quiz-opts{ display:flex; flex-direction:column; gap:10px; }
.quiz-opt{
  text-align:left; border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px;
  font-size:15px; color:var(--ink); background:transparent; transition:.28s var(--ease); cursor:pointer;
}
.quiz-opt:hover{ border-color:var(--gold); color:var(--gold); transform:translateX(3px); }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.quiz-back{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); background:none; border:0; cursor:pointer; }
.quiz-back:hover{ color:var(--gold); }
.quiz-out{ text-align:center; }
.quiz-band{ font-family:var(--f-serif); font-size:clamp(34px,5vw,52px); font-style:italic; color:var(--green); margin:10px 0 6px; }
.quiz-note{ font-size:13.5px; color:var(--mute); line-height:1.6; max-width:52ch; margin:18px auto 0; }
.quiz-disc{ font-size:12px; color:var(--mute); line-height:1.6; border-top:1px solid var(--line); margin-top:26px; padding-top:18px; }

/* ---------- journal ---------- */
.jrn-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.jrn{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); padding:30px 26px; display:flex; flex-direction:column; gap:12px; transition:.4s var(--ease); }
.jrn:hover{ border-color:var(--gold-soft); }
.jrn .j-kick{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); }
.jrn h3{ font-family:var(--f-serif); font-size:23px; font-weight:500; line-height:1.25; }
.jrn p{ font-size:14.5px; color:var(--mute); line-height:1.6; flex:1; }
.jrn .j-meta{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); border-top:1px solid var(--line); padding-top:14px; }
@media(min-width:760px){ .jrn-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .jrn-grid{ grid-template-columns:repeat(3,1fr); } }
/* a four card set reads better two up than three plus a stranded one */
@media(min-width:760px){ .jrn-grid.two{ grid-template-columns:repeat(2,1fr); } }

/* ---------- outcomes ---------- */
.measure-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-green); border:1px solid var(--line-green); }
.measure{ background:var(--green); padding:28px 24px; }
.measure .m-cat{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-soft); }
.measure h3{ font-family:var(--f-serif); font-size:22px; margin:10px 0 8px; color:var(--cream); }
.measure p{ font-size:14px; color:var(--mute-on-green); line-height:1.6; }
@media(min-width:720px){ .measure-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1060px){ .measure-grid{ grid-template-columns:repeat(4,1fr); } }
.pledge{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); padding:clamp(28px,4vw,42px); }
.pledge h3{ font-family:var(--f-serif); font-size:clamp(22px,3vw,30px); font-weight:500; margin-bottom:14px; }
.pledge p{ font-size:15.5px; color:var(--mute); line-height:1.7; max-width:66ch; }
.pledge p + p{ margin-top:14px; }

/* ---------- teams / corporate ---------- */
.aud-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.aud{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:11px 20px; }
.offer-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.offer{ background:var(--cream); color:var(--ink); padding:32px 26px; display:flex; flex-direction:column; gap:10px; }
/* .offer is a cream card, so its numeral needs the dark gold. It had the
   light one, which is 2.09:1 on cream. */
.offer .o-no{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:26px; color:var(--gold); }
.offer h3{ font-family:var(--f-serif); font-size:24px; font-weight:600; }
.offer p{ font-size:14.5px; color:var(--mute); line-height:1.6; }
@media(min-width:780px){ .offer-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1140px){ .offer-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- plain Q&A (programs, teams) ---------- */
.qa{ display:grid; grid-template-columns:1fr; gap:28px clamp(30px,5vw,64px); }
.qa .q{ border-top:1px solid var(--line); padding-top:20px; }
.qa .q h3{ font-family:var(--f-serif); font-size:22px; font-weight:500; margin-bottom:9px; letter-spacing:0; text-transform:none; color:var(--ink); }
.qa .q p{ font-size:15px; color:var(--mute); line-height:1.68; }
@media(min-width:860px){ .qa{ grid-template-columns:1fr 1fr; } }


/* ============================================================================
   BRAND MARK AS ATMOSPHERE
   The 116 monogram doubles as the site's background device: a single large,
   very low-opacity mark set into the heroes, CTA bands and footer. Painted as a
   masked block rather than an <img> so it inherits colour from its section.
   ========================================================================= */
.markwash{
  position:absolute; pointer-events:none; z-index:1;
  background-color:currentColor;
  -webkit-mask:url("mark-116.png") center/contain no-repeat;
          mask:url("mark-116.png") center/contain no-repeat;
}

/* page heroes , replaces the generic rings with the brand's own mark */
.page-hero .markwash{
  right:1.5%; top:50%; transform:translateY(-46%);
  width:min(46vw,520px); aspect-ratio:560/478;
  color:var(--gold); opacity:.085;
}

/* homepage hero , sits with the rings, behind the stats rail */
.hero .markwash{
  right:2%; top:50%; transform:translateY(-52%);
  width:min(46vw,520px); aspect-ratio:560/478;
  color:var(--gold); opacity:.07;
}

/* dark conversion bands , bronze on deep green, as on the signage */
.cta-band .markwash{
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(74vw,620px); aspect-ratio:560/478;
  color:var(--gold-soft); opacity:.075;
}

/* footer , a large mark bleeding off the corner */
.footer{ position:relative; overflow:hidden; }
.footer .markwash{
  right:-3%; bottom:-14%;
  width:min(58vw,500px); aspect-ratio:560/478;
  color:var(--gold-soft); opacity:.07;
}
.footer .wrap{ position:relative; z-index:2; }

/* stacked lockup , footer brand block, echoing the signage lockup */
.foot-brand .b-mark{
  display:block; width:62px; height:53px; margin-bottom:16px;
  background-color:var(--gold-soft);
  -webkit-mask:url("mark-116.png") center/contain no-repeat;
          mask:url("mark-116.png") center/contain no-repeat;
}

@media(max-width:700px){
  .page-hero .markwash, .hero .markwash{ width:min(70vw,340px); opacity:.06; right:-12%; }
  .cta-band .markwash{ width:min(84vw,380px); }
  .footer .markwash{ width:min(80vw,330px); bottom:-22%; }
}
@media(prefers-reduced-motion:no-preference){
  .markwash{ transition:opacity .8s var(--ease); }
}

/* ============================================================================
   MOBILE REFINEMENTS
   Two things the desktop design got away with and phones do not:
   type below ~11px, and tap targets below Apple/Google's 44px minimum.
   Our readers are 30 to 50, so small letterspaced caps are the first thing
   to become unreadable. Sizes below are floors, not redesigns.
   ========================================================================= */
@media(max-width:900px){
  /* --- readable floors --- */
  .eyebrow{ font-size:11.5px; letter-spacing:.2em; }
  .flag-label{ font-size:11.5px; }
  .trust span{ font-size:11.5px; }
  .hstat-l{ font-size:11px; letter-spacing:.16em; }
  .burger-label{ font-size:11px !important; }
  .p-no{ font-size:11.5px; }
  .p-tags span{ font-size:12px; }
  .sheet .sheet-cta .btn{ font-size:12px; }
  .foot-col h4{ font-size:11.5px; }
  .foot-brand .b-sub{ font-size:11.5px; letter-spacing:.2em; }
  .mobile-bar .btn, .sheet .btn{ font-size:12px; }
  .page-hero .crumb, .page-hero .crumb *{ font-size:12px; }
  .phase .ph-when{ font-size:11.5px; }
  .hero-coords{ font-size:11px; }
  .tier .t-kick, .tier .t-per, .jrn .j-kick, .measure .m-cat,
  .prog-block .pb-for, .quiz-step, .offer .o-no,
  .visit-info dt, .visit-grid dt{ font-size:11.5px; }
  .foot-col a, .foot-base, .foot-base a{ font-size:15px; }
  .small{ font-size:14px; }
  .quiz-disc, .qa .q p, .jrn p, .measure p, .offer p, .phase .ph-note{ font-size:15px; }

  /* --- 44px tap targets --- */
  .brand{ padding-block:8px; }
  .burger{ min-height:44px; display:flex; align-items:center; }
  .hero-link-quiet, .p-link, .pr-cta, .fd-meta a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .foot-col ul{ gap:2px; }
  .foot-col ul a{ display:inline-flex; align-items:center; min-height:44px; }
  .foot-base a{ display:inline-flex; align-items:center; min-height:44px; }
  .menu a{ display:inline-flex; align-items:center; min-height:44px; }
  .crumb a, .crumb span{ display:inline-flex; align-items:center; min-height:44px; }
  .chip{ min-height:44px; display:inline-flex; align-items:center; }
  .quiz-opt{ min-height:56px; }
  .news input, .news button{ min-height:48px; }
  .book-form input, .book-form select, .book-form textarea{ min-height:48px; font-size:16px; }
}
/* iOS zooms the page when a focused input is under 16px; keep them at 16 */
@media(max-width:700px){
  input, select, textarea{ font-size:16px; }
  .quiz-q{ font-size:clamp(22px,6.4vw,28px); }
  .pledge p, .prog-block .pb-lead{ font-size:15.5px; }
}


/* ---------- hair band (homepage) ---------- */
.hairband{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,64px); align-items:center; }
/* The photograph now carries a caption, so the order that used to sit on the
   image itself moved to the wrapper that holds both. */
.hairband .hb-side{ order:-1; }
.hairband .hb-media{
  width:100%; aspect-ratio:16/9; border-radius:var(--radius);
  background-size:cover; background-position:center;
  box-shadow:0 14px 40px -14px rgba(17,18,17,.24);
}
.hb-points{ display:flex; flex-direction:column; margin-top:24px; }
.hb-point{ display:flex; gap:16px; padding-block:16px; border-top:1px solid var(--line); align-items:baseline; }
.hb-point:last-child{ border-bottom:1px solid var(--line); }
.hb-point .hb-n{ font-family:var(--f-serif); font-style:italic; font-size:20px; color:var(--gold); min-width:34px; }
.hb-point h3{ font-size:17px; margin-bottom:3px; }
.hb-point p{ font-size:14.5px; color:var(--mute); line-height:1.55; }
@media(min-width:980px){
  .hairband{ grid-template-columns:1.05fr 1fr; }
  .hairband .hb-side{ order:0; }
  .hairband .hb-media{ aspect-ratio:4/5; }
}

/* ---------- form validation and status ---------- */
.f-err{
  display:block; margin-top:7px; font-size:13px; color:#B4462F; line-height:1.4;
}
.book-form .f-err{ color:#E8A08C; }
[aria-invalid="true"]{ border-color:#B4462F !important; }
.book-form [aria-invalid="true"]{ border-color:#E8A08C !important; }
.f-status{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius);
  font-size:14.5px; line-height:1.55; border:1px solid transparent;
}
.f-status.is-ok{   background:rgba(28,27,25,.08);  border-color:rgba(28,27,25,.25);  color:var(--green); }
.f-status.is-warn{ background:rgba(118,84,35,.09); border-color:rgba(118,84,35,.3);  color:var(--gold); }
.f-status.is-err{  background:rgba(180,70,47,.08); border-color:rgba(180,70,47,.3);  color:#8E3623; }
/* on the dark booking band the light-on-light versions disappear */
.book-form .f-status.is-ok{   background:rgba(203,167,90,.14); border-color:rgba(203,167,90,.4); color:var(--cream); }
.book-form .f-status.is-warn{ background:rgba(203,167,90,.14); border-color:rgba(203,167,90,.4); color:var(--gold-soft); }
.book-form .f-status.is-err{  background:rgba(232,160,140,.14); border-color:rgba(232,160,140,.42); color:#F0C4B6; }
.news .f-status{ max-width:380px; }
.f-consent{
  font-size:12.5px; line-height:1.6; color:var(--mute-on-green); margin-top:14px;
}
.f-consent a{ color:var(--gold-soft); text-decoration:underline; }

/* ============================================================
   IMMERSION LAYER
   Scroll linked motion, depth at the section seams, and the fine
   detail that separates an expensive page from a tidy one.
   Everything here is additive: if a browser does not support
   scroll driven animation, or the visitor asks for reduced
   motion, the page renders exactly as it did before.
   ============================================================ */

/* ---------- 1. scroll linked motion ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* images drift and settle as they cross the viewport, so a
       still photograph reads as a moving image without video */
    .p-img, .cred-img, .diag-photo, .proto-hero, .hb-media, .ph, .fd .ph{
      animation: imgDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes imgDrift{
      from{ background-position:50% 38%; transform:scale(1.06); }
      to  { background-position:50% 62%; transform:scale(1.01); }
    }

    /* headings lift into place rather than appearing */
    .section-head h2, .page-intro h2, .hairband h2{
      animation: riseIn ease-out both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
    @keyframes riseIn{
      from{ opacity:0; transform:translateY(26px); }
      to  { opacity:1; transform:none; }
    }

    /* cards arrive in sequence, not all at once */
    .pillar, .cred, .fd, .proto, .plan{
      animation: cardIn ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes cardIn{
      from{ opacity:0; transform:translateY(34px) scale(.985); }
      to  { opacity:1; transform:none; }
    }
  }
}

/* ---------- 2. a full bleed moment ---------- */
/* One section that leaves the centre column and fills the screen.
   The page is otherwise a stack of bands at the same width, which
   is tidy but flat. */
.bleed{
  position:relative; min-height:clamp(420px,72vh,760px);
  display:grid; place-items:center; overflow:hidden;
  background:var(--green-deep); isolation:isolate;
}
.bleed-img{
  position:absolute; inset:-8% 0; z-index:0;
  background-size:cover; background-position:50% 45%;
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .bleed-img{ animation:bleedPan linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes bleedPan{ from{ transform:translateY(-4%) scale(1.08);} to{ transform:translateY(4%) scale(1.08);} }
  }
}
.bleed::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(18,28,24,.30) 0%, rgba(18,28,24,.62) 100%),
    linear-gradient(180deg, rgba(18,28,24,.66) 0%, rgba(18,28,24,.50) 45%, rgba(18,28,24,.76) 100%);
}
.bleed .wrap{ position:relative; z-index:2; text-align:center; }
.bleed .eyebrow{ color:var(--gold-soft); }
.bleed h2{ color:var(--cream); margin:18px auto 20px; max-width:22ch; }
.bleed p{ color:rgba(245,241,233,.82); max-width:56ch; margin:0 auto; font-size:clamp(16px,1.35vw,19px); }
.bleed .cta-row{ margin-top:32px; justify-content:center; }

/* ---------- 3. depth at the seams ---------- */
/* A hairline that fades out at both ends, so section edges read as
   deliberate rather than as two blocks meeting. */
.section + .section::before,
.page-section + .page-section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1240px,92vw); height:1px;
  background:linear-gradient(90deg, transparent, rgba(118,84,35,.22) 18%, rgba(118,84,35,.22) 82%, transparent);
}
.on-green + .section::before, .on-deep + .section::before,
.section.on-green::before, .section.on-deep::before{ background:none; }

/* ---------- 4. card presence ---------- */
.pillar, .cred, .fd{
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.pillar:hover, .cred:hover, .fd:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px -26px rgba(17,18,17,.34);
}
.on-green .pillar:hover, .on-green .fd:hover, .on-deep .fd:hover{
  box-shadow:0 26px 60px -24px rgba(0,0,0,.5);
}

/* a gold rule that draws itself under a link on hover */
.p-link, .pr-cta{ position:relative; }
.p-link::after, .pr-cta::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.p-link:hover::after, .pr-cta:hover::after{ transform:scaleX(1); }

/* ---------- 5. a whisper of grain over the whole page ---------- */
/* Flat colour fields read as digital. A trace of noise reads as print. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 6. the open menu must be closable ---------- */
/* .nav is fixed with its own z-index, which makes it a stacking context, so
   the burger's z-index could never lift it above the full screen sheet. The
   sheet therefore covered the only control that closes it, and the menu could
   be dismissed only by choosing a link. Raise the whole header instead, and
   invert it so the brand and the control read on the dark ground. */
body:has(.sheet.open) .nav{
  z-index:62; background:transparent; backdrop-filter:none; border-bottom-color:transparent; box-shadow:none;
}
body:has(.sheet.open) .nav .b-name,
body:has(.sheet.open) .nav .b-sub,
body:has(.sheet.open) .nav .burger,
body:has(.sheet.open) .nav .burger-label{ color:var(--cream); }
body:has(.sheet.open) .nav .b-mark{ color:var(--gold-soft); }
/* the desktop menu and CTAs are already hidden at sheet widths, but be explicit */
body:has(.sheet.open) .nav .menu,
body:has(.sheet.open) .nav .nav-cta{ opacity:0; pointer-events:none; }

/* ---------- 7. brand system ---------- */
/* The hero carried two small caps labels stacked on top of each other doing
   the same job. One flag line now carries both the address and the tenure. */
.hero .flag{ margin-bottom:22px; }
.hero .flag-label{ letter-spacing:.3em; }

/* The trust line is a row of three, not a wrapping paragraph. */
.hero .trust{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin-top:clamp(26px,3vw,38px);
}
/* three claims on one line: at the label tracking used elsewhere they are
   wider than the hero column and break 2 then 1, which looks like an
   accident rather than a row */
.hero .trust span{ white-space:nowrap; letter-spacing:.16em; }
/* On wide screens the text column is narrower than these three claims, but
   there is a wide gap between it and the stats before the strip would collide.
   Let the strip use that space rather than break 2 then 1. */
@media(min-width:1320px){
  .hero .trust{ width:max-content; max-width:620px; }
}

/* Section numerals.
   The mobile menu already numbers itself 01 to 09. Carrying that through to
   the section labels turns a one off detail into a system, and makes the page
   read as designed rather than assembled. */
.eyebrow[data-n]{ display:inline-flex; align-items:baseline; gap:15px; }
.eyebrow[data-n]::before{
  content:attr(data-n);
  font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:24px;
  letter-spacing:0; text-transform:none; opacity:1; line-height:1;
}

/* ---------- 8. photography built into the page masthead ---------- */
/* Not another card. The photograph is part of the masthead: it bleeds off the
   right edge and dissolves into the page before it reaches the headline, so
   the page opens with an image rather than sitting next to one. */
.page-hero{ position:relative; overflow:hidden; }
.page-hero .ph-art{
  position:absolute; inset:0 0 0 auto; width:min(52%, 680px); z-index:0;
  background-size:cover; background-position:50% 45%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 72%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 72%);
  opacity:.92; pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:2; }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .page-hero .ph-art{ animation:heroArt linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes heroArt{ from{ transform:scale(1.07) translateY(-1.5%);} to{ transform:scale(1.02) translateY(1.5%);} }
  }
}
/* On a phone the headline would sit on top of it, so it drops behind and
   fades from the bottom instead of the side. */
@media(max-width:860px){
  .page-hero .ph-art{
    width:100%; opacity:.3;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 78%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 78%);
  }
}

/* ---------- 9. the homepage hero photograph ---------- */
/* A soft mask dissolved the photograph into the page over about a third of
   its width, which left a muddy gradient between the text and the picture and
   read as a mistake rather than a decision. It is a plate now: a hard left
   edge, bleeding off the right and the bottom, the way a magazine sets a
   facing page. Clean edges are what make it look deliberate.
   It starts below the nav because the nav is transparent until you scroll and
   its links are dark, so anything running under it becomes unreadable. */
.hero{ position:relative; overflow:hidden; --nav-h:clamp(84px, 6.5vw, 108px); }
.hero-art{
  position:absolute; top:var(--nav-h); right:0; bottom:0;
  width:clamp(360px, 44%, 780px); z-index:1;
  background-size:cover; background-position:50% 40%;
  pointer-events:none;
}
/* The one soft edge, and only just: a hairline of the page colour so the
   plate does not look pasted on. */
.hero-art::before{
  content:""; position:absolute; inset:0 auto 0 0; width:1px;
  background:var(--line);
}
.hero-body{ z-index:3; }

/* Two columns rather than a floating panel.
   Absolutely positioning the plate meant its left edge and the text column's
   right edge were set by two unrelated sums, so they collided at 1024 and
   left a 460px void at 1920. As grid tracks they cannot do either: the copy
   takes what is left, the plate takes its share and bleeds off the right.
   The copy starts at the same gutter as every other section on the site,
   rather than hugging the viewport edge. */
@media(min-width:920px){
  .hero{
    display:grid; align-items:center;
    grid-template-columns:1fr clamp(340px, 42%, 820px);
  }
  .hero-body{
    /* both items need the row named. The plate comes first in the document
       and claims column two, and sparse auto placement will not send the copy
       backwards into column one of the same row, so it was landing in a row
       of its own and the plate's row collapsed to the height of its own empty
       content. */
    grid-column:1; grid-row:1; max-width:none; margin-inline:0;
    padding-left:max(clamp(28px,6vw,96px), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    padding-right:clamp(32px,4vw,72px);
  }
  .hero-art{
    position:relative; grid-column:2; grid-row:1; align-self:stretch;
    top:auto; right:auto; bottom:auto; width:auto;
    margin-top:var(--nav-h);
  }
}

.hero-stats{
  display:flex; gap:clamp(26px,3.4vw,52px); align-items:flex-start;
  margin-top:clamp(30px,3.6vw,46px); flex-wrap:wrap;
}
.hero-stats .hstat{
  display:flex; flex-direction:column; gap:2px;
  padding-right:clamp(26px,3.4vw,52px); border-right:1px solid var(--line);
  text-align:left;
}
.hero-stats .hstat:last-child{ border-right:0; padding-right:0; }

/* The drift moves the picture inside the plate rather than moving the plate,
   because the plate's edges are the point now. Transforming the element
   dragged its top edge up under the nav, whose links are dark ink and sit on
   a transparent bar until you scroll. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .hero-art{ animation:heroPlate linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes heroPlate{ from{ background-position:50% 34%; } to{ background-position:50% 47%; } }
  }
}
/* On a phone the photograph used to sit behind the headline at a fifth
   opacity, which put a ghost of a face under the type. It is a plate here
   too: full width, full strength, closing the hero under the copy. */
@media(max-width:920px){
  .hero{
    display:flex; flex-direction:column; min-height:0;
    padding-top:clamp(104px,16vh,132px); padding-bottom:0;
  }
  .hero-body{ order:1; padding-bottom:clamp(36px,7vw,52px); }
  .hero-art{
    order:2; position:relative; inset:auto; width:100%;
    aspect-ratio:4/3; opacity:1; background-position:50% 44%;
  }
  .hero-art::before{ inset:0 0 auto 0; width:auto; height:1px; }
  .hero-coords{ display:none; }
}

/* ---------- 10. the official layer ---------- */
/* Three small components that do most of the work of making the site read
   as a medical practice rather than as a brochure: a caption under a
   photograph, a row of specifications under a headline, and a formal
   practice statement in the footer. All three are deliberately small and
   factual. The premium signal here is precision, not more adjectives. */

/* Plate captions.
   An unlabelled photograph reads as decoration. A labelled one reads as a
   record of the place, which is the difference between a mood board and a
   clinic. The rule is a gold hairline so the caption reads as part of the
   image rather than as a stray line of body copy. */
.plate{
  display:flex; align-items:flex-start; gap:11px;
  margin:12px 0 0;
  font-size:11px; line-height:1.45; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); font-weight:400;
}
.plate::before{
  content:""; flex:0 0 20px; height:1px; margin-top:7px;
  background:var(--gold); opacity:.6;
}
.on-green .plate, .on-deep .plate{ color:var(--mute-on-green); }
.on-green .plate::before, .on-deep .plate::before{ background:var(--gold-soft); }

/* The same caption laid into a large photograph rather than under it, for
   the images that run full width and have no space beneath them. The
   gradient is only as strong as it needs to be to hold the text at AA. */
.plate-in{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:flex-start; gap:11px;
  padding:clamp(16px,2.4vw,26px) clamp(16px,2.4vw,26px) clamp(14px,2vw,20px);
  font-size:11px; line-height:1.45; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,241,233,.78); pointer-events:none;
  background:linear-gradient(0deg, rgba(18,28,24,.62) 0%, rgba(18,28,24,0) 100%);
}
.plate-in::before{
  content:""; flex:0 0 20px; height:1px; margin-top:7px;
  background:var(--gold-soft); opacity:.85;
}

/* Specification rows.
   These sit between a headline and its lead. They are not sentences: they
   are the handful of facts a buyer at this price wants settled before they
   will read a paragraph, set as a row so they cost a glance. Keeping them
   to three items is the whole discipline; a fourth turns a specification
   back into prose. */
.spec{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:7px 0; margin:0 0 18px;
  font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400;
}
.spec > span{ display:inline-flex; align-items:center; }
/* The separator hangs off the end of each item rather than the front of the
   next one. Hung off the front, a row that wraps starts its second line with
   a loose dot. */
.spec > span:not(:last-child)::after{
  content:""; width:3px; height:3px; border-radius:50%; flex:0 0 3px;
  background:var(--gold); opacity:.85; margin:0 13px;
}
.on-green .spec, .on-deep .spec, .bleed .spec{ color:var(--mute-on-green); }
.on-green .spec > span:not(:last-child)::after,
.on-deep .spec > span:not(:last-child)::after,
.bleed .spec > span:not(:last-child)::after{ background:var(--gold-soft); }
.bleed .spec{ justify-content:center; margin:0 auto 20px; }

/* The practice statement.
   A real medical practice publishes who is responsible, what a result is
   worth, and what the site is not. None of it was anywhere on this site,
   which is the single loudest thing separating it from an established
   clinic. It sits above the link columns because it is the more important
   of the two. */
.practice{
  display:grid; gap:26px 44px; grid-template-columns:1fr;
  margin-top:clamp(40px,5vw,54px); padding-top:clamp(30px,4vw,40px);
  border-top:1px solid var(--line-green);
}
/* foot-base already draws its own rule, so it does not need a second one
   eleven pixels above it. */
.practice + .foot-base{ margin-top:clamp(30px,4vw,40px); }
.practice-item .pl{
  display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:10px;
}
.practice-item p{
  font-size:12.5px; line-height:1.65; color:var(--mute-on-green); max-width:46ch;
}
.practice-item a{ color:var(--mute-on-green); text-decoration:underline; text-underline-offset:3px; }
.practice-item a:hover{ color:var(--cream); }
@media(min-width:860px){ .practice{ grid-template-columns:repeat(3, 1fr); } }

/* Registered marks in the footer base, so the last line of the page is a
   statement of fact rather than a keyword list. */
.foot-base .fb-reg{ letter-spacing:.14em; }

/* A caption directly under one of the standing photo blocks takes over that
   block's bottom margin, so it reads as attached to the image rather than
   floating between it and the next paragraph. */
.diag-photo + .plate, .proto-hero + .plate{ margin-top:-14px; }
.diag-photo + .plate{ margin-bottom:28px; }
.proto-hero + .plate{ margin-bottom:clamp(28px,4vw,46px); }

/* .bleed p sets body copy for that band, and it outranks .plate-in, so a
   caption laid into a bleed photograph came out at body size and centred.
   Say it again at higher specificity. */
.bleed .plate-in, .page-hero .plate-in{
  font-size:11px; line-height:1.45; letter-spacing:.14em; text-transform:uppercase;
  max-width:none; margin:0; text-align:left; color:rgba(245,241,233,.78);
}

/* A masthead h1 sets its own bottom margin for a lead paragraph, which is far
   too tight for a row of small caps sitting under a descender. */
.page-hero .spec{ margin-top:16px; }

/* The hero's flag is now the offer, not a location stamp: it carries the
   three things the clinic does, so the scope is settled before the headline
   is read. Where it is moved into the row underneath. */
.hero .flag-label{ display:block; }

/* The specification row sits directly under the headline here, where the
   gold rule used to be, so the reader gets the offer and then the terms
   before any prose. */
.hero .spec{
  margin:clamp(16px,1.8vw,22px) 0 0;
  color:var(--ink-soft);
}
.hero-sub{ margin-top:clamp(18px,2vw,26px); }


/* The monogram wash was there to fill an empty right hand side. The
   photograph fills it now, and the two sat at the same z index with the wash
   painting last, so a 520px monogram landed across the picture. */
.hero .markwash{ display:none; }

/* A specification item must never break across lines: half a fact on each
   line reads as a typo. */
.spec > span{ white-space:nowrap; }

@media(max-width:560px){
  /* the flag fits on one line on a phone only once the tracking comes in;
     at .26em it dropped a single word onto a second line */
  .hero .flag{ letter-spacing:.16em; align-items:flex-start; }
  /* and if it ever does wrap, the dot belongs beside the first line rather
     than floating in the middle of the block */
  .hero .flag-dot{ margin-top:5px; }
  .hero .spec{ letter-spacing:.13em; }
  /* a 3:4 portrait in a 4:3 box throws most of the subject away */
  .hero-art{ aspect-ratio:4/5; }
}

/* The flag says "Hair restoration" where there is room for it and "Hair"
   where there is not, rather than being shrunk under the type floor or left
   to wrap a single word onto a line of its own. */
.fl-narrow{ display:none; }
@media(max-width:560px){
  .fl-wide{ display:none; }
  .fl-narrow{ display:inline; }
}

/* A row of buttons closing a two column block belongs under both columns, not
   stranded in column one of a new row with a void beside it. */
/* The grid's own row gap already separates this from the columns above, so it
   carries no top margin of its own. With one it was double spaced. */
.cta-inline{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:0; }

/* ---------- 11. the three sides ---------- */
/* The navigation used to mix category (what is wrong) with format (how you
   pay) on one level, so Services, Treatments, Packages and Programs were four
   doors into the same content. The three sides are the category axis on its
   own, and this is where the shape of the practice gets stated. */
.pillar-grid.doors{ grid-template-columns:1fr; gap:18px; }
@media(min-width:760px){ .pillar-grid.doors{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1060px){ .pillar-grid.doors{ grid-template-columns:repeat(3,1fr); } }
.doors .p-kick{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); display:block;
}
.doors .pillar h3{ margin-top:2px; }
.doors .chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:6px; }
.doors .chips span{
  font-size:12px; letter-spacing:.02em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.doors .pillar{ gap:12px; }
.doors .p-link{ margin-top:2px; }

/* The question and answer block hardcoded ink and mute, which are the light
   surface colours, so every page that used it on green had to override the
   colour inline on each paragraph. The two new side pages did not know that,
   and came out dark on dark. Make the component answer to its surface
   instead, which also retires the workaround. */
.on-green .qa .q, .on-deep .qa .q, .bleed .qa .q{ border-top-color:var(--line-green); }
.on-green .qa .q h3, .on-deep .qa .q h3{ color:var(--cream); }
.on-green .qa .q p, .on-deep .qa .q p{ color:var(--mute-on-green); }
.on-green .qa .q a, .on-deep .qa .q a{ color:var(--gold-soft); }

/* ---------- 12. glossary tooltips and disclaimers ---------- */
/* Two small components that do the same job from opposite ends: the tooltip
   takes an explanation out of a sentence, and the disclaimer puts back the
   qualification that a medical practice is supposed to state. Both let the
   copy get shorter without getting vaguer. */

.tip{ position:relative; display:inline; white-space:nowrap; }
.tip-t{
  font: inherit; color: inherit; cursor: help;
  border-bottom:1px dotted var(--gold); padding:0; background:none;
  white-space:normal;
}
.tip-t::after{
  content:"\00b0"; font-size:.85em; line-height:1; color:var(--gold);
  vertical-align:super; margin-left:2px;
}
.on-green .tip-t, .on-deep .tip-t, .bleed .tip-t{ border-bottom-color:var(--gold-soft); }
.on-green .tip-t::after, .on-deep .tip-t::after, .bleed .tip-t::after{ color:var(--gold-soft); }
.tip-t:hover, .tip-t:focus-visible{ color:var(--gold); }
.on-green .tip-t:hover, .on-deep .tip-t:hover,
.on-green .tip-t:focus-visible, .on-deep .tip-t:focus-visible{ color:var(--gold-soft); }

.tip-b{
  position:absolute; left:0; top:calc(100% + 9px); z-index:40;
  width:max-content; max-width:min(290px, 78vw);
  background:var(--green-deep); color:var(--mute-on-green);
  border:1px solid rgba(203,167,90,.30); border-radius:var(--radius);
  padding:12px 14px; font-size:13px; line-height:1.5; letter-spacing:0;
  text-transform:none; font-style:normal; font-weight:300; white-space:normal;
  box-shadow:0 18px 40px -16px rgba(10,10,9,.55);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  pointer-events:none;
}
.tip-b.flip{ left:auto; right:0; }
.tip:hover .tip-b, .tip:focus-within .tip-b, .tip.is-open .tip-b{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* a touch device has no hover, so only the explicit open state should show it */
@media (hover: none){
  .tip:hover .tip-b{ opacity:0; visibility:hidden; }
  .tip.is-open .tip-b{ opacity:1; visibility:visible; }
  .tip-t{ cursor:pointer; }
}
@media (prefers-reduced-motion: reduce){ .tip-b{ transition:none; } }

/* Disclaimers. Small, set apart by a rule rather than a box, because a box
   reads as a warning and this is just the practice saying what is true. */
.note{
  margin-top:clamp(18px,2.4vw,26px); padding-left:14px;
  border-left:2px solid var(--gold);
  font-size:12.5px; line-height:1.6; color:var(--mute); max-width:62ch;
}
.on-green .note, .on-deep .note, .bleed .note{
  border-left-color:var(--gold-soft); color:var(--mute-on-green);
}
.note b{ font-weight:400; color:var(--ink-soft); }
.on-green .note b, .on-deep .note b{ color:var(--cream); }
/* inside a card the disclaimer sits under the rule the card already has */
.jrn .note, .pillar .note, .tier .note{ margin-top:14px; font-size:12px; }

/* On a phone a tooltip anchored to its own term cannot fit: the box is wider
   than the gap between the term and the edge, whichever side it flips to, so
   it was being clipped by up to 152px. Below 620px it stops being a popover
   and becomes a panel pinned to the viewport, which always fits and reads as
   a deliberate pattern rather than a broken one. It clears the sticky booking
   bar. */
@media(max-width:620px){
  .tip-b, .tip-b.flip{
    position:fixed; left:var(--pad); right:var(--pad); top:auto;
    bottom:calc(84px + env(safe-area-inset-bottom));
    width:auto; max-width:none; z-index:58;
    font-size:14px; padding:16px 18px;
    transform:translateY(8px);
    box-shadow:0 -10px 44px -18px rgba(10,10,9,.7);
  }
  .tip.is-open .tip-b{ transform:translateY(0); }
  /* the term itself gets a visible held state so it is clear what is explained */
  .tip.is-open .tip-t{ color:var(--gold); }
}



/* An inline trigger is only as tall as its line, which makes it about 25px to
   aim at on a phone. Inline targets are exempt from the WCAG minimum, but a
   fiddly one is still fiddly, so the hit area is extended with a pseudo
   element that costs the line no height. */
.tip-t{ position:relative; }
.tip-t::before{
  content:""; position:absolute; left:-6px; right:-6px; top:-11px; bottom:-11px;
}

/* ---------- 13. the hero folds ---------- */
/* Three vertical folds, one per side of the practice. Selecting one opens it
   and the other two fall back to their spines, so the hero can state the
   whole business and then go into detail on whichever part you point at.
   Hair is open by default because it is the lead offering.

   The motion is the point here, so it is built to be carried by the
   compositor: the photograph lives on its own layer and moves on a
   transform, never on background-size, and the four moving parts are
   staggered rather than fired together. A fold opening should feel like a
   photograph settling, not like a box being resized. */
.hero-folds{
  display:flex; gap:2px; background:var(--green-deep);
  animation:none !important;
  --fold-ease:cubic-bezier(.16,1,.3,1);
}
.fold{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  background:var(--green-deep);
  border:0; padding:0; cursor:pointer; text-align:left; color:var(--cream);
  transition:flex-grow .82s var(--fold-ease);
  will-change:flex-grow;
}
.hero-folds.has-open .fold{ flex-grow:.52; }
.hero-folds.has-open .fold.is-open{ flex-grow:2.6; cursor:pointer; }

/* the photograph, on its own layer, its colour pulled back a touch so
   three pictures from three shoots read as one set */
.fold-img{
  filter:saturate(.84) contrast(1.04);
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-repeat:no-repeat;
  transform:scale(1.16);
  transition:transform 1.05s var(--fold-ease);
  will-change:transform;
}
.fold.is-open .fold-img{ transform:scale(1.02); }       /* opening settles the picture */
.fold:not(.is-open):hover .fold-img{ transform:scale(1.10); }

/* The scrim is sized from a measurement, not by eye. Sampling the real
   rendered pixels behind the open content put the 13.5px line at 2.40:1 over
   the brightest photograph, where AA wants 4.5, so the gradient holds .88
   through the bottom third, which is exactly the band the text occupies. */
.fold::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    rgba(10,10,9,.95) 0%, rgba(10,10,9,.88) 30%,
    rgba(10,10,9,.40) 62%, rgba(10,10,9,.06) 100%);
  transition:opacity .62s var(--fold-ease);
}
.fold:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:-3px; }

/* the rule that draws across an open fold, which is what tells you it landed */
.fold::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:var(--gold-soft); transform:scaleX(0); transform-origin:left center;
  transition:transform .8s var(--fold-ease) .1s;
}
.fold.is-open::before{ transform:scaleX(1); }

/* the spine, which is all a closed fold shows. Centred without a translate,
   because the rotate property composes after transform and a translateX(-50%)
   ends up pushing it the wrong way. */
.fold-spine{
  position:absolute; left:0; right:0; margin-inline:auto; width:max-content;
  bottom:clamp(16px,2vw,24px); z-index:2;
  writing-mode:vertical-rl; rotate:180deg;
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
  transition:opacity .3s var(--fold-ease), translate .5s var(--fold-ease);
}
.fold-spine i{
  font-family:var(--f-serif); font-style:italic; font-weight:600;
  font-size:17px; letter-spacing:0; color:var(--gold-soft);
}
.fold.is-open .fold-spine{ opacity:0; translate:0 14px; pointer-events:none; }

/* and what an open fold shows instead, arriving after the width has moved */
.fold-open{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:clamp(20px,2.4vw,30px);
  opacity:0; translate:0 16px; pointer-events:none;
  transition:opacity .55s var(--fold-ease) .22s, translate .62s var(--fold-ease) .22s;
}
.fold.is-open .fold-open{ opacity:1; translate:0 0; }
/* each line arrives a beat after the one above it */
.fold-open > *{ opacity:0; translate:0 10px; transition:opacity .5s var(--fold-ease), translate .5s var(--fold-ease); }
.fold.is-open .fold-open > *{ opacity:1; translate:0 0; }
.fold.is-open .fold-open > :nth-child(1){ transition-delay:.26s; }
.fold.is-open .fold-open > :nth-child(2){ transition-delay:.32s; }
.fold.is-open .fold-open > :nth-child(3){ transition-delay:.38s; }
.fold.is-open .fold-open > :nth-child(4){ transition-delay:.44s; }

.fold-n{
  font-family:var(--f-serif); font-style:italic; font-weight:600;
  font-size:19px; color:var(--gold-soft); line-height:1;
}
.fold-name{
  font-family:var(--f-serif); font-weight:600; font-size:clamp(21px,1.9vw,27px);
  line-height:1.1; letter-spacing:-.018em; color:var(--cream);
}
.fold-line{
  font-size:13.5px; line-height:1.55; color:rgba(245,241,233,.92);
  max-width:34ch; font-weight:300;
}
.fold-go{
  margin-top:5px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); border-bottom:1px solid rgba(203,167,90,.5); padding-bottom:4px;
  transition:color .3s, border-color .3s;
}
.fold.is-open:hover .fold-go{ color:var(--cream); border-bottom-color:var(--cream); }

@media (prefers-reduced-motion: reduce){
  .fold, .fold-img, .fold-open, .fold-open > *, .fold-spine, .fold::after, .fold::before{
    transition:none !important;
  }
  .fold-img{ transform:none; }
  .fold.is-open::before{ transform:scaleX(1); }
}

@media(max-width:920px){
  .hero-folds{ aspect-ratio:1/1; }
  /* a closed fold has to stay wide enough to hold its own spine */
  .hero-folds.has-open .fold{ flex-grow:.66; }
  .hero-folds.has-open .fold.is-open{ flex-grow:2.1; }
  .fold-spine{ font-size:11px; letter-spacing:.14em; gap:7px; bottom:14px; }
  .fold-spine i{ font-size:14px; }
  .fold-open{ padding:18px; gap:6px; }
  .fold-name{ font-size:21px; }
  .fold-line{ font-size:13px; max-width:30ch; }
}
@media(max-width:480px){
  .hero-folds{ aspect-ratio:4/5; }
  .fold-line{ display:none; }
}

/* ---------- 14. the full-width hero ----------
   The folds are the hero now rather than a plate beside it. Each fold
   carries its own headline, terms and call to action, laid over the
   photograph and vertically centred, and the open fold takes about two
   thirds of the width so the other two stay a real strip of picture rather
   than a sliver. The nav runs over the top of the photographs, so it goes
   light here and a short scrim holds it legible.

   Everything is scoped to .hero-full so the older grid hero (still used by
   the section 9 rules) keeps working elsewhere. */
.hero.hero-full{
  display:flex; flex-direction:column; align-items:stretch;
  padding:0; min-height:100svh;
  background:var(--green-deep); color:var(--cream);
  border-bottom:0;
}
.hero-full .hero-field{ display:none; }
.hero-full .hero-folds{
  flex:1 1 auto; aspect-ratio:auto;
  /* the joints between folds are a hairline of light, the way a triptych is
     framed, rather than a dark seam that disappears into the pictures */
  gap:1px; background:rgba(245,241,233,.14);
  /* the content inside a fold is out of flow, so a short viewport cannot
     grow the fold to fit it. This is the least height the copy needs. */
  min-height:640px;
}
.hero-full .hero-folds.has-open .fold{ flex-grow:.62; }
.hero-full .hero-folds.has-open .fold.is-open{ flex-grow:2.3; cursor:default; }
.hero-full .fold{ transition:flex-grow .9s var(--fold-ease); will-change:auto; }
/* the gold rule along the foot of an open fold is gone; the short rule that
   draws in above the flag says the same thing without adding a line to the
   two already at the foot of the hero */
.hero-full .fold::before{ display:none; }

/* the whole closed fold is the button. A button cannot hold a heading, so
   the button is a transparent layer over the fold and the copy sits above it.
   Its label is for screen readers only. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.fold-hit{
  position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%;
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  -webkit-appearance:none; appearance:none; color:inherit; font:inherit;
}
.fold.is-open .fold-hit{ pointer-events:none; }
.fold-hit:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:-4px; }
.hero-full .fold-spine{ pointer-events:none; }
/* a closed fold says it opens: a small plus after its name */
.hero-full .fold-spine::after{
  content:"+"; font-family:var(--f-serif); font-weight:300; font-size:17px; line-height:1;
  color:var(--gold-soft); opacity:.9;
}

/* the copy: left-aligned, centred on the height, clear of the nav. Its
   inset is a variable because the scrim below is measured from it. */
.hero-full .fold{ --copy-x:clamp(28px,5vw,96px); }
.hero-full .fold-open{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:0;
  padding:calc(var(--nav-h) + 12px) clamp(28px,5vw,96px) clamp(48px,7vh,84px) var(--copy-x);
  opacity:0; translate:0 18px; pointer-events:none;
  /* leaving is quick and undelayed; arriving (below) is slower and waits for
     the width to be most of the way there, so the two never overlap */
  transition:opacity .28s ease, translate .28s ease;
}
.hero-full .fold.is-open .fold-open{
  opacity:1; translate:0 0; pointer-events:auto;
  transition:opacity .6s var(--fold-ease) .18s, translate .7s var(--fold-ease) .18s;
}
.hero-full .fold-open > *{ filter:blur(6px); transition:opacity .22s ease, translate .22s ease, filter .22s ease; }
.hero-full .fold.is-open .fold-open > *{ filter:blur(0); transition:opacity .55s var(--fold-ease), translate .6s var(--fold-ease), filter .6s var(--fold-ease); }
.hero-full .fold.is-open .fold-open > :nth-child(1){ transition-delay:.2s; }
.hero-full .fold.is-open .fold-open > :nth-child(2){ transition-delay:.27s; }
.hero-full .fold.is-open .fold-open > :nth-child(3){ transition-delay:.34s; }
.hero-full .fold.is-open .fold-open > :nth-child(4){ transition-delay:.41s; }
.hero-full .fold.is-open .fold-open > :nth-child(5){ transition-delay:.48s; }
@media(min-width:920px){
  /* The copy box and the photograph are both a fixed size, independent of
     the fold, so while the fold widens the picture is revealed rather than
     re-cropped and the type never re-wraps mid-move. The fold's overflow
     clips whatever does not fit yet. */
  .hero-full .fold-open{ inset:0 auto 0 0; width:min(65vw, calc(var(--copy-x) + 688px)); }
  .hero-full .fold-img{
    inset:0 auto 0 50%; width:calc(65vw + 20px);
    transform:translateX(-50%) scale(1.12);
    /* the pointer parallax rides on translate, a separate channel from the
       scale, so neither transition interrupts the other */
    translate:var(--px, 0px) var(--py, 0px);
    transition:transform 1.2s var(--fold-ease), translate 1s cubic-bezier(.2,.8,.2,1);
  }
  .hero-full .fold.is-open .fold-img{ transform:translateX(-50%) scale(1.02); }
  .hero-full .fold:not(.is-open):hover .fold-img{ transform:translateX(-50%) scale(1.08); }
}
.hero-full .fold-open > *{ max-width:640px; }
.hero-full .fold-open .display{
  /* two sentences, one to a line: the break is in the markup and the size
     is set so the longer sentence fits the copy box at every width */
  max-width:none; font-size:clamp(34px, 4.3vw, 62px);
}
@media(max-width:639px){ .hero-full .fold-open .display{ font-size:clamp(36px, 11vw, 46px); line-height:1.02; } }
/* The first fold is the one most people see, and its copy lines up with
   the brand in the nav and the column every section below uses, rather
   than hugging the edge of the picture. The other two folds start away
   from the viewport edge, so they keep their own padding. */
@media(min-width:920px){
  .hero-full .fold:first-child{ --copy-x:max(clamp(28px,5vw,96px), calc((100vw - var(--wrap)) / 2 + var(--pad))); }
}
@media(min-width:1640px){
  .hero-full .fold:first-child{ --copy-x:max(clamp(28px,5vw,96px), calc((100vw - 1640px) / 2 + var(--pad))); }
}

/* dark-surface colours for everything the light hero set in ink */
.hero-full .flag, .hero-full .flag-label{ color:var(--gold-soft); }
.hero-full .flag{ gap:14px; letter-spacing:.26em; }
/* the pulsing dot read as a notification; a short rule that draws in reads
   as an editorial mark */
.hero-full .flag-dot{
  width:26px; height:1px; border-radius:0; margin:0;
  background:var(--gold-soft); box-shadow:none; animation:none;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .3s ease;
}
.hero-full .fold.is-open .flag-dot{ transform:scaleX(1); transition:transform .8s var(--fold-ease) .3s; }
.hero-full .display{ color:var(--cream); }
.hero-full .display .gold{ color:var(--gold-soft); }
.hero-full .spec{ color:var(--mute-on-green); }
.hero-full .spec > span:not(:last-child)::after{ background:var(--gold-soft); }
.hero-full .hero-sub{ color:rgba(245,241,233,.94); max-width:46ch; font-size:clamp(15px, 0.6vw + 11px, 18px); }
.hero-full .hero-link-quiet{ color:var(--cream); border-bottom-color:rgba(203,167,90,.6); }
.hero-full .hero-link-quiet:hover{ color:var(--gold-soft); border-bottom-color:var(--gold-soft); }

/* Two scrims. The closed one is always there: a short band at the top for
   the nav and a deeper one at the foot for the spine, with the middle of
   the picture left mostly alone. The open one fades in on the photograph's
   own layer so it arrives with the width change instead of snapping, and
   its stops are measured from the copy's left edge in pixels rather than
   as a share of the fold, because the copy is the same width whether the
   fold is 660px wide or 1200. Sampled: the 19px line over the brightest
   hair highlight sat at 4.3:1 with a percentage gradient, and holds 4.5
   with this one. */
.hero-full .fold::after{
  background:
    linear-gradient(180deg, rgba(10,10,9,.74) 0%, rgba(10,10,9,.52) 12%, rgba(10,10,9,0) 30%),
    linear-gradient(0deg, rgba(10,10,9,.90) 0%, rgba(10,10,9,.46) 34%, rgba(10,10,9,.14) 100%);
}
.hero-full .fold:not(.is-open):hover::after{ opacity:.78; }
.hero-full .fold-img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(10,10,9,.92) 0, rgba(10,10,9,.88) calc(var(--copy-x) + 360px),
      rgba(10,10,9,.74) calc(var(--copy-x) + 660px), rgba(10,10,9,.34) calc(var(--copy-x) + 900px),
      rgba(10,10,9,.06) 100%);
  opacity:0; transition:opacity .7s var(--fold-ease);
}
.hero-full .fold.is-open .fold-img::after{ opacity:1; }

/* the strip under the folds: three facts and the coordinates */
.hero-strip{
  position:relative; z-index:2; flex:none;
  display:flex; align-items:center; gap:clamp(20px,3vw,48px);
  padding:clamp(14px,1.4vw,20px) clamp(28px,5vw,96px);
  background:var(--green-deep); border-top:1px solid rgba(245,241,233,.10);
}
.hero-strip .hstat{
  flex-direction:row; align-items:baseline; gap:10px;
  padding-right:clamp(20px,3vw,48px); border-right:1px solid rgba(245,241,233,.10);
}
.hero-strip .hstat:nth-child(3){ border-right:0; padding-right:0; }
.hero-strip .hstat-n{ font-size:clamp(20px,1.6vw,26px); color:var(--cream); font-weight:500; }
.hero-strip .hstat-l{ color:var(--mute-on-green); letter-spacing:.22em; }
.hero-strip .hero-coords{
  position:static; margin-left:auto; opacity:1;
  color:var(--mute-on-green); letter-spacing:.22em;
}
.hero-strip .hero-clock{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-on-green);
  padding-left:clamp(20px,3vw,48px); border-left:1px solid rgba(245,241,233,.10);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hero-strip .hc-time{ color:var(--cream); margin-left:6px; }
.hero-strip .hc-time:empty{ display:none; }

/* the nav over the photographs: the burger label has its own colour rule,
   and the gold sub-line under the brand goes cream, because gold on a
   highlight in the hair photograph measured 3.6:1 */
.nav.on-hero:not(.page-nav) .burger-label{ color:var(--cream); }
.nav.on-hero:not(.page-nav) .brand .b-sub{ color:rgba(245,241,233,.9); }

@media (prefers-reduced-motion: reduce){
  .hero-full .hero-folds, .hero-full .fold-img::after, .fold-hit, .hero-full .flag-dot, .hero-full .fold-open > *{ transition:none !important; }
  .hero-full .fold-open > *{ filter:none; }
  .hero-full .flag-dot{ transform:scaleX(1); }
}

/* On a phone the folds stack. The open one takes the height its copy needs
   and the other two hold a band of picture each with the label sitting in
   it. The rows are grid tracks in fr units, so the move between them is one
   interpolated transition rather than three heights snapping. */
@media(max-width:919px){
  .hero-full .hero-folds{
    display:grid; grid-template-columns:100%;
    /* the closed shares are small on purpose: an fr unit resolves from the
       open row's content, so a bigger share would grow the closed bands with
       it and push the strip off a short phone. Their minimum height is what
       sizes them. */
    grid-template-rows:minmax(auto,2.4fr) minmax(auto,.3fr) minmax(auto,.3fr);
    transition:grid-template-rows .9s var(--fold-ease);
    min-height:0; gap:1px;
  }
  .hero-full .hero-folds:has(.fold:nth-child(2).is-open){ grid-template-rows:minmax(auto,.3fr) minmax(auto,2.4fr) minmax(auto,.3fr); }
  .hero-full .hero-folds:has(.fold:nth-child(3).is-open){ grid-template-rows:minmax(auto,.3fr) minmax(auto,.3fr) minmax(auto,2.4fr); }
  .hero-full .fold{ flex:none; min-height:96px; transition:none; }
  /* the first fold runs under the nav, so its band starts below it */
  .hero-full .fold:first-child{ min-height:calc(96px + var(--nav-h)); }
  .hero-full .fold-open{
    inset:auto 0 0 0; justify-content:flex-start;
    padding:28px 22px 32px;
  }
  .hero-full .fold.is-open .fold-open{ position:relative; }
  .hero-full .fold:first-child .fold-open{ padding-top:calc(var(--nav-h) + 6px); }
  .hero-full .fold-spine{
    writing-mode:horizontal-tb; rotate:none; margin:0; width:auto;
    left:22px; right:auto; top:auto; bottom:0; height:96px;
    display:flex; align-items:center; gap:10px;
    font-size:11px; letter-spacing:.22em;
  }
  .hero-full .fold-spine i{ font-size:15px; }
  .hero-full .fold.is-open .fold-spine{ translate:-10px 0; }
  /* On a phone the plus is a small disc at the far end of the band, where a
     thumb expects it, with its own dark backing so it reads over any part of
     the photograph. It belongs to the button, not the label, so it hides
     with the button when the fold is open. */
  .hero-full .fold-spine::after{ display:none; }
  .hero-full .fold-hit::after{
    content:"+"; position:absolute; right:20px; bottom:31px; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-serif); font-weight:300; font-size:21px; line-height:1; color:var(--cream);
    background:rgba(10,10,9,.72); border:1px solid rgba(203,167,90,.5); border-radius:50%;
    transition:opacity .3s ease;
  }
  .hero-full .fold.is-open .fold-hit::after{ opacity:0; }
  /* the label sits at the left of the band, so the closed scrim leans left */
  .hero-full .fold::after{
    background:
      linear-gradient(180deg, rgba(10,10,9,.62) 0%, rgba(10,10,9,0) 40%),
      linear-gradient(90deg, rgba(10,10,9,.86) 0%, rgba(10,10,9,.52) 46%, rgba(10,10,9,.16) 100%);
  }
  .hero-full .fold-img::after{
    background:
      linear-gradient(0deg, rgba(10,10,9,.88) 0%, rgba(10,10,9,.74) 45%, rgba(10,10,9,.40) 100%);
  }
  /* the flag on a phone is the number and the side, nothing after the dot */
  .hero-full .flag-2{ display:none; }
  .hero-strip{ gap:16px; padding:14px 22px; }
  .hero-strip .hstat{ flex-direction:column; align-items:flex-start; gap:2px; padding-right:16px; }
  .hero-strip .hstat-n{ font-size:22px; }
  .hero-strip .hstat-l{ letter-spacing:.14em; }
  .hero-strip .hero-coords, .hero-strip .hero-clock{ display:none; }
}
@media(min-width:600px) and (max-width:919px){
  /* a wider band on a tablet, so a closed fold is a picture and not a bar */
  .hero-full .fold{ min-height:128px; }
  .hero-full .fold:first-child{ min-height:calc(128px + var(--nav-h)); }
  .hero-full .fold-spine{ height:128px; }
  .hero-full .fold-hit::after{ bottom:47px; }
}
@media(max-width:419px){
  /* three labelled figures do not fit across a narrow phone without wrapping */
  .hero-strip{ display:none; }
}

/* ---------- 15. the landing ----------
   On the first arrival in a session the three folds come in as equal
   windows, and then the first one opens itself. Watching a fold open once
   is how a visitor learns that they open; nothing has to be explained.
   The class on html is set by a short inline script in the head, before
   paint, and removed by flagship.js about a second later (or the moment
   anyone reaches for a fold). Every rule here only neutralises the open
   state while the class is present, so removing it plays exactly the
   transition a click would. */
html.is-landing .hero-full .hero-folds.has-open .fold{ flex-grow:1; }
html.is-landing .hero-full .fold.is-open{ cursor:pointer; }
html.is-landing .hero-full .fold.is-open .fold-hit{ pointer-events:auto; }
html.is-landing .hero-full .fold.is-open .fold-open{ opacity:0; translate:0 18px; pointer-events:none; }
html.is-landing .hero-full .fold.is-open .fold-open > *{ opacity:0; translate:0 10px; filter:blur(6px); }
html.is-landing .hero-full .fold.is-open .flag-dot{ transform:scaleX(0); }
html.is-landing .hero-full .fold.is-open .fold-spine{ opacity:1; translate:0 0; }
html.is-landing .hero-full .fold.is-open .fold-img::after{ opacity:0; }
@media(min-width:920px){
  html.is-landing .hero-full .fold.is-open .fold-img{ transform:translateX(-50%) scale(1.12); }
}
@media(max-width:919px){
  html.is-landing .hero-full .hero-folds{ grid-template-rows:minmax(auto,1fr) minmax(auto,1fr) minmax(auto,1fr) !important; }
  html.is-landing .hero-full .fold.is-open .fold-open{ position:absolute; }
  html.is-landing .hero-full .fold.is-open .fold-img{ transform:scale(1.16); }
}
/* and on every load the photographs and their labels arrive in order,
   left to right, rather than all at once */
@media (prefers-reduced-motion: no-preference){
  .hero-full .fold-img{ animation:foldPhotoIn .9s var(--fold-ease) backwards; }
  .hero-full .fold:nth-child(2) .fold-img{ animation-delay:.1s; }
  .hero-full .fold:nth-child(3) .fold-img{ animation-delay:.2s; }
  html.is-landing .hero-full .fold-spine,
  .hero-full .fold:not(.is-open) .fold-spine{ animation:foldSpineIn .7s var(--fold-ease) .4s backwards; }
  .hero-full .fold:nth-child(2) .fold-spine{ animation-delay:.5s; }
  .hero-full .fold:nth-child(3) .fold-spine{ animation-delay:.6s; }
  @keyframes foldPhotoIn{ from{ opacity:0; } }
  @keyframes foldSpineIn{ from{ opacity:0; translate:0 10px; } }
}

/* ---------- 16. the phone ----------
   A phone read the homepage as twenty seven screens. Most of that was
   padding, decorative pictures and pills that earn their space on a desk
   and not in a hand. Nothing that says something is removed here; what
   goes is repetition and air. */
@media(max-width:639px){
  /* rhythm */
  .section{ padding-block:clamp(48px,8vw,60px); }
  .section-head{ margin-bottom:26px; }

  /* A specification stacks as a list, the dot leading each line, rather
     than a row that wraps and leaves a dot hanging off the end of a line.
     The centred band keeps its row, because a list does not centre. */
  .spec:not(.bleed .spec){ flex-direction:column; align-items:flex-start; gap:7px; letter-spacing:.14em; }
  .spec:not(.bleed .spec) > span:not(:last-child)::after{ display:none; }
  .spec:not(.bleed .spec) > span::before{
    content:""; width:3px; height:3px; border-radius:50%; flex:0 0 3px;
    background:var(--gold); opacity:.85; margin-right:10px;
  }
  .on-green .spec > span::before, .on-deep .spec > span::before,
  .hero-full .spec > span::before{ background:var(--gold-soft); }

  /* cards: a picture is a band across the top, not a slab */
  .fd .ph{ min-height:0; aspect-ratio:2/1; }
  .fd-body{ padding:20px; gap:10px; }
  .fd-body h3{ font-size:21px; }
  .doors .p-img{ height:118px; }
  .doors .pillar{ gap:10px; }
  .jrn{ padding:22px 20px; gap:10px; }
  .jrn h3{ font-size:21px; }
  /* the practice cards lose their room pictures; the four points are the point */
  .cred-img{ display:none; }
  .cred{ padding:20px 18px 18px; }

  /* what a side covers reads as one line of small type, not a field of pills */
  .doors .chips{ display:block; padding-top:0; font-size:12.5px; line-height:1.65; color:var(--mute); }
  .doors .chips span{ border:0; padding:0; border-radius:0; font-size:inherit; letter-spacing:0; color:inherit; }
  .doors .chips span:not(:last-child)::after{ content:"\00a0\00b7\00a0"; color:var(--gold); }
  .chiprow{ gap:6px; margin-top:20px; }
  .chip{ padding:8px 13px; font-size:11px; letter-spacing:.12em; }

  /* buttons in a group are the same width, one under the other */
  .cta-inline, .cta-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .cta-inline .btn, .cta-row .btn{ width:100%; }

  /* A stack of three or four cards is two thousand pixels on a phone. As a
     rail it is one screen: cards side by side at a little over four fifths
     of the width, so the edge of the next one shows and says there is
     more, snapping to the gutter as you swipe. Everything stays in the
     document in the same order; nothing is hidden from a reader or a
     screen reader, only from the first glance. */
  .pillar-grid.doors, .fd-grid, .tier-grid, .jrn-grid{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad)); padding:4px var(--pad) 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .pillar-grid.doors::-webkit-scrollbar, .fd-grid::-webkit-scrollbar,
  .tier-grid::-webkit-scrollbar, .jrn-grid::-webkit-scrollbar{ display:none; }
  .pillar-grid.doors > *, .fd-grid > *, .tier-grid > *, .jrn-grid > *{
    flex:0 0 min(82vw, 340px); scroll-snap-align:start; min-height:0;
  }
  .doors .p-img{ margin-top:-24px; }
  /* the trust rows take a little less each */
  .strip-inner > div{ padding-block:18px; }

  /* the footer: the two link columns sit side by side */
  .footer{ padding-top:48px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .foot-brand, .foot-col:last-child{ grid-column:1 / -1; }
  .foot-col h4{ margin-bottom:8px; }
  .foot-base{ margin-top:32px; }
}

/* ---------- 17. the type system ----------
   Body copy set in a geometric sans (Jost) sat oddly under a Garamond
   display: two different centuries on one page. The reading type is a
   text Garamond now (Crimson Pro, drawn for screens, with a larger
   x-height than Cormorant), so display and text are one family of ideas,
   and the small caps, labels, buttons, prices and form controls move to a
   quiet grotesque (Instrument Sans) that stays crisp at eleven pixels.
   Serif text needs a size or two more than the sans did for the same
   apparent size, so the prose sizes are raised here rather than edited
   in place, and the phone gets its own step. */
body{ font-family:var(--f-text); font-weight:400; font-size:clamp(17px, .5vw + 15px, 19px); line-height:1.58; }
.lead{ font-family:var(--f-text); font-weight:400; font-size:clamp(18px, 1vw + 10px, 22px); line-height:1.5; letter-spacing:0; }
.on-green .lead, .on-deep .lead{ font-weight:400; }
.hero-sub, .hero-full .hero-sub{ font-family:var(--f-text); font-weight:400; font-size:clamp(17px, .7vw + 12px, 21px); line-height:1.5; letter-spacing:0; }
.pillar p, .cred p, .diag-step p, .proto .pr-sub, .fd-body p, .qa .q p, .ph-note, .pb-lead{ font-size:17px; line-height:1.55; }
.jrn p, .menu-item .mi-desc, .hb-point p{ font-size:16.5px; line-height:1.55; }
.pledge p{ font-size:17.5px; line-height:1.62; }
.steps-copy p, .story p, .phase p{ font-size:17px; }
/* the official layer stays in the grotesque */
.eyebrow, .spec, .btn, .menu, .menu a, .brand .b-sub, .burger, .burger-label, .mobile-bar, .sheet nav a,
.strip, .strip-inner, .hero-strip, .hstat-l, .hero-coords, .hero-clock, .hero .flag, .flag-label, .fold-spine,
.j-kick, .j-meta, .fd-meta, .p-kick, .p-price, .t-per, .crumb, .practice-item, .foot-col h4, .foot-col a, .foot-base,
.plate, .plate-in, .ph-when, .pr-tag, .pr-cta, .p-link, .hero-link-quiet, .tip-b, .chip, .doors .chips,
.small, .note, .book-note, .f-consent, .quiz-disc, .mi-price small, .diag-chart text, .news, .f-status,
label, input, select, textarea, .field, .form-row, .ticker-track span, .fb-reg, .sheet-cta, .t-name + *{
  font-family:var(--f-sans);
}
.btn{ font-weight:500; }
.menu a{ font-weight:500; }
.eyebrow, .spec, .plate, .plate-in{ font-weight:500; }
.small, .note, .book-note, .f-consent, .quiz-disc, .practice-item p, .tip-b{ font-weight:400; }
/* an inline term with a tooltip is part of the sentence, so it keeps the sentence's face */
.tip-t{ font-family:inherit; font-size:inherit; }
/* italics in running text are the text face's own */
p em, p i:not(.hb-n):not([class]), .lead em{ font-family:inherit; font-style:italic; }
@media(max-width:639px){
  body{ font-size:17.5px; line-height:1.55; }
  .lead{ font-size:18.5px; line-height:1.5; }
  .hero-sub, .hero-full .hero-sub{ font-size:17.5px; line-height:1.5; }
  .pillar p, .cred p, .diag-step p, .proto .pr-sub, .fd-body p, .qa .q p, .ph-note, .pb-lead, .jrn p, .menu-item .mi-desc, .hb-point p{ font-size:17px; line-height:1.52; }
  .fd-body h3, .jrn h3{ font-size:22px; }
  .qa .q h3{ font-size:21px; }
  .doors .chips{ font-size:12.5px; }
}

/* ---------- 18. the language, tightened ----------
   Corners are 2px everywhere (they were 4px on cards and 0 on plates);
   every photograph is graded a touch toward the others so pictures from
   different shoots read as one set; the first three items in the nav
   carry their numerals as they do on the homepage; and the footer's
   columns are the same three as the homepage's. */
.bleed-img, .cred-img, .diag-photo, .fold-img, .hairband .hb-media, .hero-art, .p-img,
.page-hero .ph-art, .ph, .ph-glow, .ph-leaf, .ph-linen, .ph-room, .ph-stone, .ph-water, .proto-hero{ filter:saturate(.84) contrast(1.04); }
.menu a i{
  font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:15px;
  letter-spacing:0; text-transform:none; color:var(--gold); margin-right:7px;
}
.nav.on-hero:not(.page-nav) .menu a i{ color:var(--gold-soft); }
@media(min-width:860px){ .foot-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr; gap:32px 24px; } }
@media(max-width:639px){
  .foot-col:nth-child(4){ grid-column:1 / -1; }
  .foot-col:nth-child(4) ul{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
}

/* ---------- 19. uniform ----------
   Two things read as two systems on one screen. Cormorant's default
   figures are old style, so "116", "02" and "03" sat low while prices
   and statistics sat on the line: every numeral is lining now, from the
   root. And a gold button on a dark surface was the dark gold of the
   cream pages beside soft gold type: on dark surfaces the button is soft
   gold with ink, the one gold that surface uses. The first fold's copy on
   a phone also starts further below the nav, so the flag's rule no longer
   reads as an underline to the mark. */
html{ font-variant-numeric:lining-nums; }
.on-green .btn-gold, .on-deep .btn-gold, .hero-full .btn-gold, .bleed .btn-gold, .cta-band .btn-gold,
.footer .btn-gold, .mobile-bar .btn-gold, .sheet .btn-gold, .nav.on-hero:not(.page-nav) .btn-gold{
  background:var(--gold-soft); color:var(--ink);
}
.on-green .btn-gold:hover, .on-deep .btn-gold:hover, .hero-full .btn-gold:hover, .bleed .btn-gold:hover, .cta-band .btn-gold:hover,
.footer .btn-gold:hover, .mobile-bar .btn-gold:hover, .sheet .btn-gold:hover, .nav.on-hero:not(.page-nav) .btn-gold:hover{
  background:#F6A48B; color:var(--ink);
}
.hero-link-quiet{ display:inline-block; width:max-content; }
@media(max-width:919px){
  .hero-full .fold:first-child .fold-open{ padding-top:calc(var(--nav-h) + 22px); }
}

/* ============================================================
   20. FOR MEN, ONLINE START (men.html)
   A landing page and a four step intake. The intake is a cream
   sheet on the deep green band so it reads as a form you fill in,
   not a panel you look at. Labels are sans, answers are text.
   ============================================================ */
.mfact span, .mstep .t, .track .kick, .track .tl h4, .track .tprice, .ihead,
.rcard small, .chk span, .drop small, .drop .shots span, .mside dt, .mprice span,
.mprice small, .cmp .c0, .cmp .lbl, .cmp-head span, .mh-chip, .ileft, .i-count{
  font-family:var(--f-sans);
}

/* hero */
.mh{ position:relative; overflow:hidden; padding:clamp(120px,16vh,168px) 0 0; }
.mh .wrap{ position:relative; z-index:2; display:grid; gap:clamp(30px,5vw,64px); }
.mh .crumb{
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-on-green);
  font-family:var(--f-sans);
}
.mh .crumb a{ color:var(--mute-on-green); transition:.3s; }
.mh .crumb a:hover{ color:var(--gold-soft); }
.mh .crumb .sep{ color:var(--gold-soft); }
.mh h1{ font-size:clamp(42px,6.4vw,92px); line-height:.98; letter-spacing:-.028em; margin:6px 0 0; max-width:12ch; color:var(--cream); }
.mh h1 .it{ font-style:italic; font-weight:500; }
.mh .spec{ margin-top:clamp(18px,2.2vw,26px); }
.mh .lead{ max-width:50ch; margin-top:clamp(16px,2vw,22px); }
.mh .cta-row{ display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:clamp(26px,3vw,36px); }
.mh-copy{ padding-bottom:clamp(44px,6vw,80px); }
.mh-art{
  position:relative; aspect-ratio:4/5; min-height:300px; border-radius:var(--radius) var(--radius) 0 0;
  background-size:cover; background-position:50% 24%; filter:saturate(.84) contrast(1.04); overflow:hidden;
}
.mh-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(18,17,16,.72) 0%, rgba(18,17,16,.12) 42%, rgba(18,17,16,0) 70%);
}
.mh-chip{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:2; width:max-content; max-width:calc(100% - 36px);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
  background:rgba(18,17,16,.86); padding:11px 14px; border-left:2px solid var(--gold-soft); line-height:1.5;
}
@media(min-width:900px){
  .mh .wrap{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:end; }
  .mh-art{ min-height:520px; aspect-ratio:auto; height:100%; max-height:640px; }
}

/* four facts under the hero */
.mfacts{ background:var(--green); color:var(--cream); }
.mfacts .wrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.mfact{ padding:20px 0 22px; border-top:1px solid var(--line-green); }
.mfact b{ display:block; font-family:var(--f-serif); font-size:clamp(26px,2.6vw,36px); font-weight:500; line-height:1; color:var(--cream); font-variant-numeric:lining-nums; }
.mfact b em{ font-style:italic; color:var(--gold-soft); }
.mfact span{ display:block; margin-top:9px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-on-green); line-height:1.5; }
@media(min-width:760px){ .mfacts .wrap{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 32px; } }

/* how it works */
.mhow{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); }
.mstep{ padding:24px 0 26px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-content:start; }
.mstep i{ font-family:var(--f-serif); font-style:italic; font-size:clamp(30px,3vw,40px); color:var(--gold); line-height:1; grid-row:span 3; font-variant-numeric:lining-nums; padding-top:2px; }
.mstep .t{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.mstep h3{ font-family:var(--f-serif); font-size:clamp(24px,2.3vw,32px); font-weight:500; line-height:1.08; margin-top:4px; }
.mstep p{ font-size:15.5px; color:var(--mute); max-width:38ch; margin-top:8px; }
@media(min-width:900px){
  .mhow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(24px,3vw,44px); }
  .mstep{ grid-template-columns:1fr; padding:30px 0 36px; }
  .mstep i{ grid-row:auto; margin-bottom:22px; }
}

/* the three tracks */
.tracks{ display:grid; grid-template-columns:1fr; gap:14px; }
.track{
  background:rgba(18,17,16,.55); border:1px solid var(--line-green); border-radius:var(--radius);
  padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:20px; transition:border-color .4s var(--ease);
}
.track:hover{ border-color:rgba(203,167,90,.5); }
.track .kick{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft); }
.track h3{ font-family:var(--f-serif); font-size:clamp(26px,2.6vw,34px); font-weight:500; line-height:1.05; color:var(--cream); margin-top:-8px; }
.track .tl{ display:grid; gap:9px; }
.track .tl h4{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-on-green); font-weight:400;
  padding-bottom:9px; border-bottom:1px solid var(--line-green); display:flex; justify-content:space-between; gap:10px; margin-bottom:3px;
}
.track .tl h4 span{ color:var(--gold-soft); letter-spacing:.16em; }
.track li{ font-size:15px; line-height:1.5; color:var(--mute-on-green); padding-left:16px; position:relative; }
.track li::before{ content:""; position:absolute; left:0; top:.74em; width:6px; height:1px; background:var(--gold-soft); }
.track .tprice{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-green);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-on-green);
}
.track .tprice b{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:30px; letter-spacing:0; text-transform:none; color:var(--gold-soft); font-variant-numeric:lining-nums; line-height:1; }
.track .tprice small{ flex-basis:100%; font-size:12.5px; letter-spacing:.02em; text-transform:none; color:var(--mute-on-green); font-family:var(--f-text); }
@media(min-width:900px){ .tracks{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }

/* app versus here */
.cmp{ border-top:1px solid var(--line); }
.cmp-head{ display:none; }
.cmp-row{ display:grid; grid-template-columns:1fr; gap:8px 24px; padding:18px 0 20px; border-bottom:1px solid var(--line); }
.cmp .c0{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.cmp .c1{ font-size:15px; color:var(--mute); line-height:1.5; }
.cmp .c2{ font-size:16.5px; color:var(--ink); line-height:1.5; }
.cmp .lbl{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:2px; }
@media(min-width:800px){
  .cmp-head{ display:grid; grid-template-columns:.7fr 1fr 1.25fr; gap:0 28px; padding:0 0 12px; }
  .cmp-head span{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
  .cmp-head span:last-child{ color:var(--green); }
  .cmp-row{ grid-template-columns:.7fr 1fr 1.25fr; gap:0 28px; padding:22px 0; }
  .cmp .lbl{ display:none; }
}

/* price strip */
.mprices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; border-top:1px solid var(--line); }
.mprice{ padding:20px 0 22px; border-bottom:1px solid var(--line); }
.mprice b{ display:block; font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:clamp(26px,2.6vw,36px); line-height:1; color:var(--green); font-variant-numeric:lining-nums; letter-spacing:-.01em; }
.mprice span{ display:block; margin-top:9px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); line-height:1.5; }
.mprice small{ display:block; margin-top:5px; font-size:12.5px; color:var(--mute); line-height:1.5; }
@media(min-width:800px){ .mprices{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; } }

/* the intake */
.mstart .wrap{ display:grid; gap:clamp(30px,5vw,60px); position:relative; z-index:2; }
.mside .lead{ margin-top:16px; }
.mside dl{ margin-top:clamp(24px,3vw,34px); display:grid; gap:16px; max-width:44ch; }
.mside dt{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); }
.mside dd{ font-size:15px; line-height:1.55; color:var(--mute-on-green); margin-top:5px; }
@media(min-width:980px){
  .mstart .wrap{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; }
  .mside{ position:sticky; top:112px; }
}
.intake{
  background:var(--cream); color:var(--ink); border-radius:var(--radius);
  padding:clamp(22px,3vw,40px); box-shadow:0 40px 90px -40px rgba(0,0,0,.65);
}
.ihead{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.ihead b{ font-weight:500; color:var(--ink); }
.ibar{ height:2px; background:var(--line); margin:14px 0 clamp(22px,3vw,30px); position:relative; }
.ibar i{ position:absolute; left:0; top:0; bottom:0; width:25%; background:var(--gold); transition:width .6s var(--ease); }
.ist{ display:none; border:0; padding:0; margin:0; min-width:0; }
.ist.is-on{ display:grid; gap:18px; }
.ist h3:focus{ outline:none; }
.ist h3{ font-family:var(--f-serif); font-size:clamp(26px,2.6vw,34px); font-weight:500; line-height:1.08; letter-spacing:-.01em; }
.ist .hint{ font-size:14.5px; color:var(--mute); margin-top:-8px; line-height:1.5; }
.ist .field label{ color:var(--mute); }
.intake .field input, .intake .field select, .intake .field textarea{
  background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:var(--radius);
  padding:14px 16px; font:inherit; font-size:16px; width:100%; transition:.3s; appearance:none;
}
.intake .field textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.intake .field input:focus, .intake .field select:focus, .intake .field textarea:focus{ border-color:var(--gold); outline:none; box-shadow:0 0 0 1px var(--gold); }
.intake .field input::placeholder, .intake .field textarea::placeholder{ color:rgba(17,18,17,.38); }
.intake .field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px;
}
.igroup{ display:grid; gap:10px; }
.igroup > label, .igroup > .glabel{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); font-family:var(--f-sans); }
.igroup[hidden]{ display:none; }
.rcards{ display:grid; gap:10px; }
.rcard{ position:relative; display:block; }
.rcard input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.rcard > span{
  display:grid; grid-template-columns:auto 1fr; gap:3px 16px; align-items:center;
  padding:16px 18px; min-height:72px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.rcard > span i{ font-family:var(--f-serif); font-style:italic; font-size:22px; color:var(--gold); grid-row:span 2; font-variant-numeric:lining-nums; }
.rcard > span b{ font-family:var(--f-serif); font-size:21px; font-weight:500; line-height:1.1; color:var(--ink); }
.rcard > span small{ font-size:12.5px; color:var(--mute); line-height:1.4; }
.rcard:hover > span{ border-color:rgba(118,84,35,.5); }
.rcard input:checked + span{ border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); background:var(--cream); }
.rcard input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
@media(min-width:640px){ .rcards{ grid-template-columns:1fr 1fr; } }
.chk{ display:flex; flex-wrap:wrap; gap:8px; }
.chk label{ position:relative; display:inline-block; }
.chk input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.chk span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:var(--radius);
  font-size:12.5px; letter-spacing:.06em; background:#fff; color:var(--ink-soft); transition:.25s var(--ease); white-space:nowrap;
}
.chk label:hover span{ border-color:rgba(118,84,35,.5); }
.chk input:checked + span{ background:var(--green); color:var(--cream); border-color:var(--green); }
.chk input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.drop{ position:relative; border:1px dashed rgba(17,18,17,.34); border-radius:var(--radius); padding:24px 18px; text-align:center; background:#fff; transition:border-color .3s; }
.drop:hover, .drop.is-over{ border-color:var(--gold); }
.drop input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.drop .shots{ display:flex; justify-content:center; gap:16px; margin-bottom:16px; }
.drop .shots span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); padding-top:8px; border-top:1px solid var(--gold); }
.drop b{ display:block; font-family:var(--f-serif); font-size:23px; font-weight:500; line-height:1.1; }
.drop small{ display:block; font-size:12.5px; color:var(--mute); margin-top:6px; line-height:1.5; }
.thumbs{ display:flex; flex-wrap:wrap; gap:8px; }
.thumbs:empty{ display:none; }
.thumbs img{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); }
.f-check{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.f-check input{ width:18px; height:18px; margin-top:3px; flex:none; accent-color:var(--green); }
.f-check a{ color:var(--gold); text-decoration:underline; }
.f-check.f-bad{ color:#8E3623; }
.ny-note{ display:none; font-size:13.5px; line-height:1.55; color:var(--gold); padding-left:12px; border-left:2px solid var(--gold); }
.ny-note.is-on{ display:block; }
.inav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; }
.inav .btn-line{ border-color:var(--line); color:var(--ink); }
.inav .btn-line:hover{ border-color:var(--gold); color:var(--gold); }
.inav .i-next, .inav .i-send{ margin-left:auto; }
.inav [hidden], .inav[hidden]{ display:none; }
.intake .f-consent{ color:var(--mute); margin-top:0; }
.intake .f-consent a{ color:var(--gold); }
.idone{ display:none; text-align:center; padding:28px 0 14px; }
.idone.is-on{ display:block; }
.idone h3{ font-family:var(--f-serif); font-size:clamp(30px,3vw,40px); font-weight:500; line-height:1.05; }
.idone p{ font-size:16px; color:var(--mute); max-width:40ch; margin:14px auto 0; line-height:1.55; }
.intake .f-status{ margin-top:18px; }

/* hair page band pointing here */
.mo-band{ display:grid; gap:26px; position:relative; z-index:2; }
.mo-band .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
@media(min-width:900px){ .mo-band{ grid-template-columns:1.15fr .85fr; align-items:end; } }

/* phones: the tracks become a rail like the other card grids */
@media(max-width:719px){
  .tracks{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad)); padding:4px var(--pad) 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tracks::-webkit-scrollbar{ display:none; }
  .tracks > *{ flex:0 0 min(84vw, 340px); scroll-snap-align:start; min-height:0; }
  .mh{ padding-top:clamp(104px,18vh,132px); }
  .mh h1{ font-size:clamp(40px,11.5vw,54px); }
  .mh-art{ min-height:0; aspect-ratio:4/3; border-radius:var(--radius); }
  .mh-copy{ padding-bottom:0; }
  .mh .wrap{ padding-bottom:28px; }
  .inav{ flex-wrap:wrap; }
  .inav .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){ .ibar i, .rcard > span, .chk span{ transition:none; } }

/* ============================================================
   21. ONE STRUCTURE: the house strip, hero calls to action,
   the reassurance line, and a bolder display scale
   ============================================================ */
.house{ background:var(--green); color:var(--cream); border-top:1px solid var(--line-green); border-bottom:1px solid var(--line-green); overflow:hidden; position:relative; }
.house-track{ display:flex; width:max-content; animation:house 64s linear infinite; }
.house ul{ display:flex; align-items:center; margin:0; padding:0; list-style:none; flex:none; }
.house li{
  display:flex; align-items:center; gap:22px; padding:15px 0; margin-right:22px;
  font-family:var(--f-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-on-green); white-space:nowrap;
}
.house li::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); flex:none; }
.house li b{ font-weight:500; color:var(--cream); }
.house:hover .house-track{ animation-play-state:paused; }
@keyframes house{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .house-track{ animation:none; width:auto; }
  .house ul{ flex-wrap:wrap; justify-content:center; padding:6px var(--pad); }
  .house ul + ul{ display:none; }
  .house li{ white-space:normal; padding:8px 0; }
}
.page-hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:clamp(24px,3vw,36px); }
.page-hero .cta-row .btn{ padding:17px 32px; }
.cta-sure{
  margin-top:18px; font-family:var(--f-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute-on-green); line-height:1.9;
}
.cta-sure i{ font-style:normal; color:var(--gold-soft); margin:0 8px; }
.cta-band .cta-sure{ text-align:center; margin:22px auto 0; max-width:none; }
h1, .page-hero h1{ font-weight:700; letter-spacing:-.03em; }
.page-hero h1{ font-size:clamp(44px,7vw,98px); line-height:.96; }
.page-hero .lead{ font-size:clamp(17px, 1.05vw + 8px, 21px); }
.h2{ font-size:clamp(34px, 5vw, 66px); }
@media(max-width:639px){ .page-hero h1{ font-size:clamp(40px,11.5vw,54px); } }

/* ---------- serif headlines, a step lighter ---------- */
h1, .page-hero h1, .mh h1{ font-weight:600; }
h2, h3, .h2, .h3, .cta-band h2, .fd-body h3, .pillar h3, .tier .t-name, .menu-item h3{ font-weight:500; }
.it, .gold.it{ font-weight:500; }

/* ---------- the new sections, checked across widths ---------- */
@media(min-width:720px) and (max-width:899px){
  .mh-art{ aspect-ratio:16/10; min-height:0; max-height:480px; }
  .tracks{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad)); padding:4px var(--pad) 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tracks::-webkit-scrollbar{ display:none; }
  .tracks > *{ flex:0 0 340px; scroll-snap-align:start; min-height:0; }
}
@media(min-width:600px) and (max-width:859px){ .fue-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   EACH SIDE, ITS OWN FLAIR
   Hair keeps the house brass on bottle green. Aesthetics warms to
   copper on a browner green and a warmer stone. Longevity cools to
   verdigris on a bluer green and a cooler stone. The accents carry
   the side (eyebrows, numerals, rules, prices, emphasis); the buttons
   stay the house gold everywhere, so the call to action never changes.
   ============================================================ */
:root{ --cta:#B03A25; --cta-hover:#9A3120; --cta-soft:#F28C6E; --cta-soft-hover:#F6A48B; }
.side-hair{ --gold:#B03A25; --gold-soft:#F28C6E; }
.side-aes{ --gold:#98455A; --gold-soft:#EFA9B6; --sand:#F0E2DA; }
.side-hair.on-cream, .side-hair .page-hero{ background:#F4EFE5; }
.side-aes.on-cream, .side-aes .page-hero{ background:#F9EFEA; }
/* the shared chrome stays the house */
.nav, .sheet, .footer, .house, .mobile-bar{ --gold:#B03A25; --gold-soft:#F28C6E; --green:#1C1B19; --green-deep:#121110; --sand:#E8E3DA; --scrim:10,10,9; }
/* the buttons never take the side */
.btn-gold{ background:var(--cta); color:var(--cream); }
.btn-gold:hover{ background:var(--cta-hover); }
.on-green .btn-gold, .on-deep .btn-gold, .on-dark .btn-gold, .hero-full .btn-gold, .bleed .btn-gold, .cta-band .btn-gold,
.footer .btn-gold, .mobile-bar .btn-gold, .sheet .btn-gold{ background:var(--cta-soft); color:var(--ink); }
.on-green .btn-gold:hover, .on-deep .btn-gold:hover, .on-dark .btn-gold:hover, .hero-full .btn-gold:hover, .bleed .btn-gold:hover, .cta-band .btn-gold:hover,
.footer .btn-gold:hover, .mobile-bar .btn-gold:hover, .sheet .btn-gold:hover{ background:var(--cta-soft-hover); color:var(--ink); }
.news button{ background:var(--cta); } .news button:hover{ background:var(--cta-hover); }

/* ---------- the mobile sheet: the four doors, the rest, the two buttons ---------- */
.sheet{ justify-content:center; overflow-y:auto; padding-top:calc(var(--nav-h, 76px) + 8px); }
.sheet nav a{ display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-green); font-size:inherit; }
.sheet nav a .no{ font-family:var(--f-sans); font-size:11px; letter-spacing:.24em; color:var(--gold-soft); }
.sheet nav a .sh-t{ display:block; min-width:0; }
.sheet nav a b{ display:block; font-family:var(--f-serif); font-weight:500; font-size:clamp(23px,5.8vw,30px); line-height:1.05; letter-spacing:-.015em; color:var(--cream); }
.sheet nav a small{ display:block; margin-top:5px; font-family:var(--f-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-on-green); line-height:1.4; }
.sheet-more{ display:flex; flex-wrap:wrap; gap:0 20px; margin-top:14px; }
.sheet-more a{ font-family:var(--f-sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-on-green); padding:11px 0; min-height:44px; display:inline-flex; align-items:center; }
.sheet .sheet-cta{ margin-top:18px; }
.sheet-foot{ margin-top:16px; font-family:var(--f-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-on-green); line-height:1.6; }
.sheet-foot i{ font-style:normal; color:var(--gold-soft); margin:0 6px; }
@media(max-height:620px){ .sheet nav a{ padding:9px 0; } .sheet nav a b{ font-size:22px; } .sheet-more a{ min-height:40px; padding:8px 0; } }

/* ---------- the sheet arrives one line at a time ---------- */
.sheet nav a, .sheet-more, .sheet-cta, .sheet-foot{ opacity:0; translate:0 12px; transition:opacity .5s var(--ease), translate .55s var(--ease); }
.sheet.open nav a, .sheet.open .sheet-more, .sheet.open .sheet-cta, .sheet.open .sheet-foot{ opacity:1; translate:0 0; }
.sheet.open nav a:nth-child(1){ transition-delay:.06s; } .sheet.open nav a:nth-child(2){ transition-delay:.12s; }
.sheet.open nav a:nth-child(3){ transition-delay:.18s; } .sheet.open nav a:nth-child(4){ transition-delay:.24s; }
.sheet.open .sheet-more{ transition-delay:.32s; } .sheet.open .sheet-cta{ transition-delay:.38s; } .sheet.open .sheet-foot{ transition-delay:.44s; }
/* ---------- a light sweeps the gold button on hover ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-gold::after{ content:""; position:absolute; inset:0; pointer-events:none; translate:-130% 0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.2) 50%, transparent 68%); transition:translate .9s var(--ease); }
.btn-gold:hover::after{ translate:130% 0; }
@media (prefers-reduced-motion: reduce){
  .sheet nav a, .sheet-more, .sheet-cta, .sheet-foot{ opacity:1; translate:0 0; transition:none; }
  .btn-gold::after{ display:none; }
}

/* ---------- the price list: a mark for the most booked, a note for the group under evaluation ---------- */
.mi-tag{ display:inline-block; vertical-align:middle; margin-left:10px; font:500 11px/1 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; font-style:normal; color:var(--gold); border:1px solid rgba(118,84,35,.45); border-radius:var(--radius); padding:5px 8px; }
.mi-note{ font-family:var(--f-sans); font-size:12.5px; letter-spacing:.02em; color:var(--mute); margin:-6px 0 14px; }
@media(min-width:980px){ .pillar-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:900px){ .tracks.two{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   Shared rows: the compact name, line and price rows the homepage uses,
   available to the other pages (the visit page details).
   ============================================================ */
.menu-list{ margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name price" "desc desc"; gap:6px 20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line); position:relative;
}
.row::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); }
.row:hover::after{ transform:scaleX(1); }
.row .name{ grid-area:name; font-family:var(--f-serif); font-weight:600; font-size:clamp(22px,2vw,30px); line-height:1.1; letter-spacing:-.015em; transition:transform .5s var(--ease); }
.row:hover .name{ transform:translateX(6px); }
.row .desc{ grid-area:desc; font-size:14.5px; color:var(--mute); max-width:52ch; }
.row .price{ grid-area:price; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(19px,1.6vw,24px); color:var(--gold); white-space:nowrap; }
.row .price small{ font-family:var(--f-sans); font-style:normal; font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-right:8px; }
/* The menu keeps its description under the name: the split gives the copy
   half the screen, and three columns in half a screen squeezed the middle one. */
.row .desc{ margin-top:2px; }
.menu-list{ margin-top:clamp(24px,3vw,36px); }
.row{ padding:13px 0; gap:2px 16px; }
.row .name{ font-size:clamp(19px,1.6vw,24px); }
.row .desc{ font-size:14.5px; line-height:1.45; max-width:none; }
.row .price{ font-size:clamp(17px,1.4vw,21px); }
.visit .row .price{ font-size:clamp(16px,1.3vw,19px); }
.visit .row .desc{ max-width:none; }
@media(max-width:1023px){ .visit .row .price{ font-size:16px; } }

/* ============================================================
   Annotations: the review stamp under a page hero, and the numbered
   notes at the foot of the treatment menu.
   ============================================================ */
.reviewed{ margin:18px 0 0; display:flex; align-items:center; gap:12px; font-family:var(--f-sans); font-weight:500; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
.reviewed::before{ content:""; flex:none; width:22px; height:1px; background:var(--gold); }
.on-dark .reviewed, .page-hero.on-dark .reviewed, .hero-dark .reviewed{ color:var(--mute-on-green); }
.on-dark .reviewed::before, .page-hero.on-dark .reviewed::before, .hero-dark .reviewed::before{ background:var(--gold-soft); }
.menu-notes{ margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line); max-width:78ch; }
.menu-notes h2{ margin:0 0 12px; font-family:var(--f-sans); font-weight:500; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.menu-notes ol{ list-style:none; margin:0; padding:0; counter-reset:mn; }
.menu-notes li{ position:relative; padding:9px 0 9px 36px; font-size:14px; line-height:1.55; color:var(--mute); border-top:1px solid var(--line); }
.menu-notes li:first-child{ border-top:0; }
.menu-notes li::before{ counter-increment:mn; content:counter(mn, decimal-leading-zero); position:absolute; left:0; top:10px; font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:15px; color:var(--gold); font-variant-numeric:lining-nums; }
.menu-notes li b{ font-weight:500; color:var(--ink-soft); }
@media(max-width:480px){ .menu-notes li{ padding-left:30px; font-size:13.5px; } .reviewed{ letter-spacing:.18em; } }

/* the review stamp on the dark start online hero */
.mh .reviewed{ color:var(--mute-on-green); }
.mh .reviewed::before{ background:var(--gold-soft); }

/* ---------- the treatment pages: the details link on the menu, linked rows ---------- */
.mi-more{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-family:var(--f-sans); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-decoration:none; }
.mi-more::before{ content:""; width:18px; height:1px; background:var(--gold); transition:width .4s var(--ease); }
.mi-more:hover::before{ width:28px; }
.mi-more .arr{ display:inline-block; transition:transform .4s var(--ease); }
.mi-more:hover .arr{ transform:translateX(3px); }
a.row{ color:inherit; text-decoration:none; }
.row .name a{ color:inherit; text-decoration:none; }
.mfact b em{ font-size:.55em; font-style:italic; font-weight:500; }

/* ---------- treatment pages: the breadcrumb becomes one back link on a phone ---------- */
.crumb-back{ display:none; }
@media(max-width:700px){
  .crumb-t > *:not(.crumb-back){ display:none !important; }
  .crumb-t .crumb-back{ display:inline-flex !important; align-items:center; gap:8px; min-height:44px; color:var(--gold); letter-spacing:.2em; }
  .crumb-t .crumb-back .arr{ display:inline-block; font-family:var(--f-serif); font-size:16px; letter-spacing:0; }
}
@media(min-width:701px) and (max-width:1023px){ .crumb-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
@media(min-width:701px){ .crumb-t .crumb-back{ display:none !important; } }

/* treatment pages on a phone: a shorter button label, and the eyebrow gives way to the back link */
.w-narrow{ display:none; }
@media(max-width:480px){ .w-wide{ display:none; } .w-narrow{ display:inline; } }
@media(max-width:700px){ .page-hero .t-eyebrow{ display:none; } .crumb-t{ margin-bottom:6px; } }

/* ============================================================
   Pixel pass. The page hero headline on every inner page is set the
   way the homepage headline is: smaller, normal tracking, one weight.
   The treatment pages take the homepage's section scale.
   ============================================================ */
.page-hero h1{ font-size:clamp(42px, 5.4vw, 78px); line-height:1.02; letter-spacing:-.012em; font-weight:600; max-width:20ch; }
@media(max-width:1023px){ .page-hero h1{ font-size:clamp(38px, 9.4vw, 52px); line-height:1.04; } }
.row .name{ font-weight:500; }
.ph-note{ font-size:14.5px; line-height:1.55; }
.tpage .page-section{ padding-block:clamp(52px, 7vw, 92px); }
.tpage .section-head .h2{ font-size:clamp(30px, 3.6vw, 52px); line-height:1.04; }
.tpage .section-head .lead{ font-size:clamp(18px, 1.4vw, 20px); max-width:60ch; }
.tpage .section-head .h2 + .lead{ margin-top:0; }
.tpage .diag-photo{ margin-top:clamp(28px, 3.4vw, 44px); }
.tpage .qa{ margin-top:clamp(26px, 3vw, 40px); }
.tpage .note{ margin-top:18px; }
.tpage .cta-band h2{ font-size:clamp(30px, 3.8vw, 54px); }
@media(max-width:1023px){
  .tpage .section-head .lead{ font-size:16.5px; }
  .tpage .qa{ gap:22px; }
}
/* the assurance line under a call to action stacks on a phone instead of breaking mid item */
@media(max-width:480px){
  .cta-sure{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .cta-sure i{ display:none; }
  .cta-sure span{ display:block; }
}

/* ============================================================
   Color program, refined. One dark family (eucalyptus and deep) for
   every page; each side keeps its accent and its paper. Prices and
   rules take the section accent. Quiet links are the same everywhere.
   ============================================================ */
.link{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-sans); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; border-bottom:0; padding-bottom:0; }
.link::before{ content:""; flex:none; width:22px; height:1px; background:var(--gold); transition:width .5s var(--ease), background .3s; }
.link .arr{ display:inline-block; transition:transform .45s var(--ease); }
.link:hover::before{ width:34px; }
.link:hover .arr{ transform:translateX(4px); }
.on-dark .link, .on-green .link, .on-deep .link, .footer .link{ color:var(--cream); }
.on-dark .link::before, .on-green .link::before, .on-deep .link::before, .footer .link::before{ background:var(--gold-soft); }
@media(max-width:480px){ .link{ white-space:normal; } .link::before{ width:18px; } }
.mi-more{ color:var(--ink-soft); }
.mi-more:hover{ color:var(--gold); }
/* forms: the booking form's selects match its inputs (that form sits on dark); native controls take the house gold */
.book-form select{ -webkit-appearance:none; appearance:none; padding-right:40px; color:var(--cream); border:1px solid rgba(245,241,233,.2); background-color:rgba(245,241,233,.05); border-radius:var(--radius); font:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23D8B66C' stroke-width='1.4'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }
.book-form select:focus{ border-color:var(--gold-soft); outline:none; }
.book-form select option{ color:var(--ink); background:var(--cream); }
input[type="radio"], input[type="checkbox"]{ accent-color:var(--gold); }
/* selection on dark surfaces */
.on-dark ::selection, .on-green ::selection, .on-deep ::selection, .footer ::selection, .mfacts ::selection, .cta-band ::selection{ background:var(--gold-soft); color:var(--ink); }
/* photo fallbacks on the current papers */
.ph-stone, .ph-linen, .ph-glow{ background-color:var(--sand); }
.ph-water, .ph-leaf{ background-color:var(--green); }
.ph-room{ background-color:var(--green-deep); }

/* ============================================================
   The scale. Five patterns drawn as plain diagrams; picking one
   opens a panel with the step, the usual plan and the published
   prices for that stage. Designed as a radio group, so arrow keys
   move between the patterns and the panel announces itself.
   ============================================================ */
.stage-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:clamp(28px,4vw,40px); }
@media(max-width:1023px){ .stage-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px){ .stage-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
.stage{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 12px 18px;
  background:var(--cream); border:1px solid var(--line); color:var(--ink); cursor:pointer; text-align:center;
  transition:border-color .3s, color .3s, box-shadow .3s;
}
.stage:hover{ border-color:var(--gold); }
.stage:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.stage[aria-checked="true"]{ border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold); }
.stage svg{ width:min(100%,88px); height:auto; display:block; margin-bottom:4px; }
.stage .hd{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.stage .hr{ fill:currentColor; opacity:.22; transition:opacity .3s; }
.stage .hr.thin{ opacity:.13; }
.stage[aria-checked="true"] .hr{ opacity:.34; }
.stage[aria-checked="true"] .hr.thin{ opacity:.2; }
.stage .bare{ fill:var(--cream); }
.stage b{ font-family:var(--f-serif); font-weight:500; font-size:clamp(16px,1.3vw,18px); line-height:1.2; color:var(--ink); }
.stage small{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); line-height:1.4; }
.stage-panel{
  margin-top:20px; border:1px solid var(--line); background:var(--cream); padding:clamp(22px,3vw,36px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(22px,4vw,48px); align-items:start;
}
.stage-panel[hidden]{ display:none; }
@media(max-width:860px){ .stage-panel{ grid-template-columns:1fr; } }
.stage-panel .kick{ display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.stage-panel h3{ font-family:var(--f-serif); font-weight:500; font-size:clamp(26px,2.6vw,36px); line-height:1.1; letter-spacing:-.01em; margin:10px 0 12px; }
.stage-panel p{ max-width:52ch; }
.stage-panel .sp-note{ font-size:14px; color:var(--mute); margin-top:12px; }
.stage-panel .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.stage-panel .menu-list{ margin-top:0; }
.stage-panel .sp-fine{ font-size:12.5px; color:var(--mute); margin-top:14px; max-width:none; }
/* what a case costs, on the dark FUE section */
.fue-cost{ margin-top:clamp(30px,4vw,44px); }
.fue-cost .menu-list{ margin-top:14px; border-top-color:var(--line-green); }
.fue-cost .row{ border-bottom-color:var(--line-green); }
.fue-cost .row .name{ color:var(--cream); }
.fue-cost .row .desc{ color:var(--mute-on-green); }
.fue-cost .row .price{ color:var(--gold-soft); white-space:normal; }
.fue-cost .fc-note{ font-size:14px; line-height:1.6; color:var(--mute-on-green); max-width:74ch; margin-top:16px; }
@media (prefers-reduced-motion: reduce){ .stage, .stage .hr{ transition:none; } }

/* ============================================================
   Before and after. One two panel frame per case, the same person
   on both sides, split in CSS so the pair can never drift apart.
   Labeled the way the work is priced: treatment, count or sessions,
   and time. A frame marked data-placeholder carries a visible tag
   until a consented client photograph replaces it.
   ============================================================ */
.ba{ margin:0; display:flex; flex-direction:column; gap:12px; min-width:0; }
.ba-pair{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px; aspect-ratio:16/9; background:var(--line); overflow:hidden; }
.ba-half{ position:relative; display:block; background-size:204% 100%; background-repeat:no-repeat; filter:saturate(.9) contrast(1.02); }
.ba-before{ background-position:0 50%; }
.ba-after{ background-position:100% 50%; }
.ba-half i{ position:absolute; left:10px; bottom:10px; font-family:var(--f-sans); font-style:normal; font-weight:500; font-size:11px; line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); background:rgba(var(--scrim),.74); padding:7px 9px 6px; }
.ba-tag{ position:absolute; top:10px; left:10px; z-index:2; font-family:var(--f-sans); font-weight:500; font-size:11px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:rgba(245,242,236,.94); border:1px solid var(--line); padding:6px 9px 5px; }
.ba:not([data-placeholder]) .ba-tag{ display:none; }
.ba-meta b{ display:block; font-family:var(--f-serif); font-weight:500; font-size:clamp(18px,1.5vw,21px); line-height:1.2; letter-spacing:-.01em; }
.ba-meta span{ display:block; font-size:13.5px; color:var(--mute); margin-top:4px; }
.ba-meta small{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:8px; }
.ba-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,36px); margin-top:clamp(28px,4vw,40px); }
.ba-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1023px){ .ba-grid.three{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .ba-grid, .ba-grid.three{ grid-template-columns:1fr; gap:26px; } }
.ba-disc{ font-size:12.5px; line-height:1.6; color:var(--mute); max-width:78ch; margin-top:20px; }
.ba-one{ max-width:640px; margin-top:clamp(26px,3vw,36px); }
.ba-one .eyebrow{ display:block; margin-bottom:14px; }
.ba-one .ba-disc{ margin-top:14px; }
.on-green .ba-pair, .on-deep .ba-pair{ background:var(--line-green); }
.on-green .ba-meta b, .on-deep .ba-meta b{ color:var(--cream); }
.on-green .ba-meta span, .on-deep .ba-meta span, .on-green .ba-disc, .on-deep .ba-disc{ color:var(--mute-on-green); }
.on-green .ba-meta small, .on-deep .ba-meta small{ color:var(--gold-soft); }
.on-green .ba-disc .link, .on-deep .ba-disc .link{ color:var(--gold-soft); }

/* ============================================================
   Treatment page hero on a phone. The name carries the headline,
   the tagline drops to a smaller italic deck beneath it, and the
   three facts share one line, so the hero reads in a glance
   instead of five lines of display type.
   ============================================================ */
@media(max-width:700px){
  .tpage .page-hero h1{ font-size:clamp(32px, 8.4vw, 40px); line-height:1.06; letter-spacing:-.01em; max-width:none; }
  .tpage .page-hero h1 .it{ display:block; font-size:.62em; line-height:1.22; margin-top:.4em; letter-spacing:0; font-weight:500; max-width:26ch; }
  .tpage .page-hero .spec{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 0; letter-spacing:.14em; margin-top:14px; }
  .tpage .page-hero .spec > span::before{ display:none; }
  .tpage .page-hero .spec > span:not(:last-child)::after{ display:inline-block; margin:0 10px; }
  .tpage .page-hero .ph-note{ font-size:15.5px; line-height:1.55; }
  .tpage .page-hero .cta-row{ margin-top:18px; }
}

/* ============================================================
   Treatment page hero on a phone, restructured. The photograph is a
   band on top rather than a wash behind the words; the copy sits on
   clean paper below it; the second button becomes a quiet link; and
   the dark facts band, which repeats the price, time and downtime the
   hero just gave, stays off phones.
   ============================================================ */
@media(max-width:700px){
  .tpage .page-hero{ padding-top:74px; padding-bottom:clamp(32px,8vw,44px); min-height:0; }
  .tpage .page-hero .ph-art{
    position:relative; inset:auto; width:100%; height:auto; aspect-ratio:16/10; opacity:1;
    -webkit-mask-image:none; mask-image:none; animation:none; transform:none; margin:0 0 26px;
  }
  .tpage .page-hero .markwash{ display:none; }
  .tpage .page-hero h1{ margin-top:12px; }
  .tpage .page-hero .spec{ margin-top:16px; }
  .tpage .page-hero .ph-note{ margin-top:18px; }
  .tpage .page-hero .cta-row{ margin-top:24px; gap:18px; align-items:flex-start; }
  .tpage .page-hero .cta-row .btn-line{
    width:auto; background:none; border:0; padding:0; box-shadow:none;
    font-size:11px; letter-spacing:.22em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px;
  }
  .tpage .page-hero .cta-row .btn-line::before{ content:""; width:22px; height:1px; background:var(--gold); flex:0 0 22px; }
  .tpage .page-hero .reviewed{ margin-top:22px; }
  .tpage .mfacts{ display:none; }
}

/* ============================================================
   The case leads the page. On a treatment page that has a before
   and after, it sits directly under the hero, the copy beside it on
   wide screens and beneath it on a phone.
   ============================================================ */
.tpage .ba-lead{ padding-block:clamp(40px,6vw,72px); background:var(--sand); border-bottom:1px solid var(--line); }
.ba-lead-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:center; }
.ba-lead-copy .lead{ max-width:46ch; }
.ba-lead-copy .ba-disc{ margin-top:14px; max-width:52ch; }
.ba-lead-copy .link{ margin-top:18px; }
.ba-lead .ba{ max-width:640px; }
@media(max-width:860px){
  .ba-lead-grid{ grid-template-columns:1fr; gap:24px; }
  .ba-lead .ba{ order:-1; max-width:none; }
  .ba-lead-copy .h2{ font-size:clamp(28px,7.5vw,34px); }
}

/* ---------- SEO copy pass, 2026-09-28: longer headlines, menu intros and jump links, footer keyword line ---------- */
.h2.long{ font-size:clamp(28px, 3.3vw, 46px); line-height:1.08; letter-spacing:-.018em; max-width:28ch; }
.section-head .h2.long{ max-width:30ch; }
.tpage .section-head .h2.long{ font-size:clamp(26px, 2.9vw, 40px); }
.lead-2{ margin-top:12px; }
.foot-kw{ font-size:12px; line-height:1.6; color:var(--mute-on-green); margin-top:10px; max-width:52ch; }
.mg-intro{ font-size:15px; line-height:1.55; color:var(--mute); max-width:70ch; margin:12px 0 4px; }
.menu-jump{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 clamp(30px,4vw,48px); }
.menu-jump a{ font-family:var(--f-sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; transition:border-color .2s, color .2s; }
.menu-jump a:hover, .menu-jump a:focus-visible{ border-color:var(--gold); color:var(--gold); }
.ba-meta b a{ color:inherit; text-decoration:none; }
.ba-meta b a:hover, .ba-meta b a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
#stage-panels .stage-panel{ margin-top:22px; }
@media(max-width:700px){
  .h2.long, .section-head .h2.long{ font-size:clamp(25px, 6.8vw, 32px); line-height:1.1; }
  .mg-intro{ font-size:14px; }
  .menu-jump{ gap:6px 8px; }
  .menu-jump a{ font-size:11px; padding:7px 10px; }
}

/* long headline: the accent always starts on its own line */
.h2.long .it{ display:block; }

/* a hero headline that runs long: one size down, accent on its own line */
.page-hero h1.long, .mh h1.long{ font-size:clamp(36px, 4.6vw, 64px); line-height:1.02; max-width:16ch; }
.page-hero h1.long .it, .mh h1.long .it{ display:block; }
@media(max-width:700px){ .page-hero h1.long, .mh h1.long{ font-size:clamp(32px, 9vw, 40px); } }
/* footer base line on phones: keep the tap targets, lose the weight */
@media(max-width:700px){
  .foot-base{ font-size:12.5px; letter-spacing:.02em; line-height:1.5; }
  .foot-base .fb-reg{ font-size:11.5px; letter-spacing:.08em; }
  .foot-base a{ font-size:13px; }
}