/* ==========================================================================
   LUXE AESTHETICS CLINIC — shared foundation
   One brand across all four demos. Only the demo-N.css files change the look.

   Palette is taken from Lindsay's own printed collateral and her logo:
   cream #F5F0EC, deep olive #2B3419, antique gold #B08E5D, black serif mark.

   Every text/ground pairing below has been contrast-checked. The clinic's
   audience skews older, so nothing here drops under WCAG AA (4.5:1) and the
   body size floor is 18px.
   ========================================================================== */

:root{
  /* --- ink --------------------------------------------------------------- */
  --ink:        #1E2617;   /* headings + body on light   13.8:1 on cream      */
  --ink-2:      #2B3419;   /* dark section grounds (her flyer bar)            */
  --ink-soft:   #4A5540;   /* secondary copy              6.96:1 on cream     */
  --mute:       #5D6551;   /* captions + meta             5.39:1 on cream     */

  /* --- gold -------------------------------------------------------------- */
  --gold:       #B08E5D;   /* rules, dots, borders; text on ink   5.11:1      */
  --gold-deep:  #7C5D30;   /* gold text on light grounds          5.36:1      */
  --gold-lite:  #C9AE84;   /* gold text on ink grounds            7.34:1      */

  /* --- grounds ----------------------------------------------------------- */
  --cream:      #F5F0EC;
  --paper:      #FBF9F7;
  --sand:       #E9E0D6;
  --nude:       #DCC9B6;
  --white:      #FFFFFF;

  --line:       rgba(30,38,23,.14);
  --line-soft:  rgba(30,38,23,.08);
  --line-gold:  rgba(176,142,93,.38);

  /* --- type -------------------------------------------------------------- */
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --caps:  'Jost', 'Helvetica Neue', Arial, sans-serif;
  --body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --- rhythm ------------------------------------------------------------ */
  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec-y: clamp(80px, 7.8vw, 136px);   /* between sections */
  --sec-y-lg: clamp(104px, 10vw, 176px); /* the three that carry the page */
  --ease: cubic-bezier(.22,.68,.24,1);

  /* accessibility floor — do not lower these */
  --body-size: 18px;
  --tap: 48px;
  --tap-lg: 56px;
}

/* ==========================================================================
   reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  font-size:var(--body-size);
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

h1,h2,h3,h4,.serif{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  line-height:1.06;
  letter-spacing:-.005em;
  /* Cormorant ships oldstyle figures on some cuts — force lining so prices
     and phone numbers don't sit at three different heights */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1;
}

/* ==========================================================================
   focus — visible, gold, and never removed
   ========================================================================== */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:2px;
}
.on-ink :focus-visible{outline-color:var(--gold-lite)}

/* ==========================================================================
   layout helpers
   ========================================================================== */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell-wide{width:100%;max-width:1520px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}
.measure{max-width:66ch}
.center{text-align:center;margin-inline:auto}

.eyebrow{
  font-family:var(--caps);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.on-ink .eyebrow{color:var(--gold-lite)}

.rule-gold{width:64px;height:1px;background:var(--gold);border:0;margin:22px 0}
.center .rule-gold{margin-inline:auto}

.lede{font-size:clamp(19px,1.5vw,21px);line-height:1.72;color:var(--ink-soft)}

/* ==========================================================================
   buttons — 48px minimum target, no exceptions
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--tap-lg);padding:0 32px;
  font-family:var(--caps);font-size:14px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid transparent;border-radius:2px;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.btn--ink{background:var(--ink);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(198,168,124,.38)}
.btn--ink:hover{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)}
.on-ink .btn--ink:hover{background:var(--cream);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--cream)}
.btn--ink:hover{background:var(--gold-deep)}
.btn--gold{background:var(--gold);color:#231A0B}
.btn--gold:hover{background:var(--ink);color:var(--cream)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.on-ink .btn--ghost{border-color:rgba(245,240,236,.5);color:var(--cream)}
.on-ink .btn--ghost:hover{background:var(--cream);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}

.link-u{
  font-family:var(--caps);font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:4px;
  display:inline-flex;align-items:center;min-height:32px;
  transition:color .35s var(--ease),border-color .35s var(--ease)
}
.link-u svg{width:18px;height:18px;margin-left:10px;transition:transform .4s var(--ease)}
.link-u:hover svg{transform:translateX(6px)}
.link-u:hover{color:var(--gold-deep);border-color:var(--ink)}
.on-ink .link-u{color:var(--cream)}
.on-ink .link-u:hover{color:var(--gold-lite)}

/* ==========================================================================
   grounds

   Each ground publishes --ground so that tiles separated by a 1px gap can
   paint themselves in the section's own colour. Using `inherit` there picks
   up the hairline colour instead and the whole row goes grey.
   ========================================================================== */
.g-cream{background:var(--cream);--ground:var(--cream)}
.g-paper{background:var(--paper);--ground:var(--paper)}
.g-sand{background:var(--sand);--ground:var(--sand)}
.g-nude{background:var(--nude,#DED3C2);--ground:var(--nude,#DED3C2)}
.g-nude{background:var(--nude);--ground:var(--nude)}
.g-ink{background:var(--ink-2);--ground:var(--ink-2);color:rgba(245,240,236,.86)}
/* a warm deep close for a page that is otherwise all daylight */
.g-deep{background:var(--deep,#2B231C);--ground:var(--deep,#2B231C);color:rgba(245,238,230,.86)}
.g-ink h1,.g-ink h2,.g-ink h3,.g-ink h4,
.g-deep h1,.g-deep h2,.g-deep h3,.g-deep h4{color:#FBF6EF}

/* Anything that hardcodes a colour for a light ground has to be answered on
   a dark one, or it turns into dark text on a dark panel. This block is the
   single place that happens. */
.on-ink .lede,.on-ink .tr-body,.on-ink p,
.on-ink .men-pt p,.on-ink .prp-use p,.on-ink .prp-honest,
.on-ink .wt-help p,.on-ink .cs-main p{color:rgba(245,240,236,.82)}
.on-ink .lf-q,.on-ink .wt-help b,
.on-ink .tr-facts dd,.on-ink .cs-lead,.on-ink .wt-lead,
.on-ink .prac-lead,.on-ink .prac-pull,.on-ink .creds-grid b{color:var(--cream)}
.on-ink .lf-note,.on-ink .tr-facts dt,.on-ink .cs-fact dd,
.on-ink .creds-grid span,.on-ink .fm-treat span{color:rgba(245,240,236,.66)}
.on-ink .tr-lead,.on-ink .wt-punch,.on-ink .fm-q,
.on-ink .cs-fact dt,.on-ink .creds-note{color:var(--gold-lite)}
.on-ink .lf-card{background:rgba(245,240,236,.05);border-color:rgba(245,240,236,.2)}
.on-ink .lf-card:hover{border-color:var(--gold);background:rgba(245,240,236,.09)}
.on-ink .lf-go{color:var(--cream)}
.on-ink .tr-card,.on-ink .creds-grid li,.on-ink .cs-side{background:rgba(245,240,236,.05);border-color:rgba(245,240,236,.2)}
.on-ink .tr-table,.on-ink .tr-row,.on-ink .acc-item{border-color:rgba(245,240,236,.2)}
.on-ink .tr-facts>div,.on-ink .cs-fact,.on-ink .fm-treat{border-color:rgba(245,240,236,.14)}
.on-ink .acc-q{color:var(--cream)}
.on-ink .fm-treat b,.on-ink .fm-panel h3{color:var(--cream)}
.on-ink .fm-list button{background:transparent;border-color:rgba(245,240,236,.24);color:rgba(245,240,236,.82)}
.on-ink .fm-list button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#231A0B}
.on-ink .fm-switch{background:transparent;border-color:rgba(245,240,236,.24)}
.on-ink .fm-switch button{color:rgba(245,240,236,.66)}
.on-ink .fm-switch button[aria-pressed="true"]{background:var(--gold);color:#231A0B}

/* ==========================================================================
   scroll reveal
   IntersectionObserver, plus a hard safety net — nothing may ever stay
   invisible because an observer failed to fire (headless browsers, old iOS).
   ========================================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.05s}
.rv-d2{transition-delay:.10s}
.rv-d3{transition-delay:.15s}
.rv-d4{transition-delay:.20s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   FACE MAP
   The container and the SVG share one aspect ratio, so a hotspot drawn at
   viewBox coordinate (x,y) lands on the same pixel of the portrait at every
   screen width. Do not change one aspect without the other.
   ========================================================================== */
.fm{--fm-accent:var(--gold)}

.fm-switch{
  display:inline-flex;padding:5px;gap:4px;
  border:1px solid var(--line);border-radius:999px;background:var(--white)
}
.fm-switch button{
  min-height:44px;padding:0 26px;border-radius:999px;
  font-family:var(--caps);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);transition:background .35s var(--ease),color .35s var(--ease)
}
.fm-switch button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}

.fm-stage{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);border-radius:2px}
.fm-stage::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(104deg, transparent 34%, rgba(255,244,220,.55) 50%, transparent 66%);
  mix-blend-mode:screen;
}
.fm-stage.is-swept::after{animation:fmSweep 1100ms var(--ease) 1}
@keyframes fmSweep{
  0%{opacity:0;transform:translate3d(-60%,0,0)}
  30%{opacity:1}
  100%{opacity:0;transform:translate3d(60%,0,0)}
}
@media (prefers-reduced-motion: reduce){.fm-stage.is-swept::after{animation:none}}
.fm-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.fm-stage{border-radius:2px}
.fm-art{position:absolute;inset:0;width:100%;height:100%}
.fm-stage>img[hidden]{display:none}
.fm-art [hidden]{display:none}
.fm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Each zone is a real button in the tab order. The hit area is a generous
   invisible ellipse; the visible affordance is a dashed feature outline with
   a leader line running out to its label — the treatment-diagram language —
   always on screen, never hover-only. */
.fm-zone{cursor:pointer}
.fm-hit{fill:transparent}
.fm-dash{fill:none;stroke:var(--fm-line,var(--gold));stroke-width:1.7;
  stroke-dasharray:5 7;stroke-linecap:round;opacity:0;
  transition:opacity 600ms linear, stroke 200ms var(--ease)}
.fm-lead{fill:none;stroke:var(--fm-line,var(--gold));stroke-width:1.2;
  stroke-dasharray:3 6;stroke-linecap:round;opacity:0;transition:opacity 600ms linear}
.fm-stage.in .fm-dash,.fm-stage.in .fm-lead{opacity:.9}
@keyframes fmMarch{to{stroke-dashoffset:-48}}
.fm-zone[aria-pressed="true"] .fm-dash{stroke:var(--fm-strong,#3A2C1A);stroke-width:2.2;
  animation:fmMarch 6s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,226,170,.85))}
.fm-zone:hover .fm-dash,.fm-zone:focus-visible .fm-dash{opacity:1;stroke-width:2.2}
.fm-ring{
  fill:rgba(253,250,246,.6);
  stroke:var(--fm-line,var(--gold));stroke-width:2;
  transition:fill .35s var(--ease),stroke-width .35s var(--ease),transform .45s var(--ease);
  transform-box:fill-box;transform-origin:center
}
.fm-dot{fill:var(--gold);transition:transform .45s var(--ease);transform-box:fill-box;transform-origin:center}
.fm-zone:hover .fm-ring,
.fm-zone:focus-visible .fm-ring{fill:var(--accent-ring,rgba(176,142,93,.5));stroke-width:3}
.fm-zone:hover .fm-dot,
.fm-zone:focus-visible .fm-dot{transform:scale(1.5)}
.fm-zone[aria-pressed="true"] .fm-ring{fill:var(--gold);stroke:var(--ink);stroke-width:3}
.fm-zone[aria-pressed="true"] .fm-dot{fill:var(--ink);transform:scale(1.35)}

/* the pulse that tells a first-time visitor the face is interactive */
.fm-pulse{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.fm-stage.hint .fm-pulse{animation:fmPulse 2.6s var(--ease) 3}
@keyframes fmPulse{
  0%{opacity:.85;transform:scale(1)}
  70%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(2.6)}
}

.fm-tag{
  font-family:var(--caps);font-size:15.5px;letter-spacing:.12em;text-transform:uppercase;
  fill:var(--fm-text,var(--ink));paint-order:stroke;stroke:var(--fm-halo,rgba(245,240,236,.94));stroke-width:5px;stroke-linejoin:round;
  opacity:0;transition:opacity .4s linear;pointer-events:none
}
.fm-stage.in .fm-tag{opacity:.92}
.fm-zone:hover .fm-tag,
.fm-zone:focus-visible .fm-tag,
.fm-zone[aria-pressed="true"] .fm-tag{opacity:1;font-weight:500}

/* the list under the face: the accessible route to exactly the same
   information, and the primary control on a phone */
.fm-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fm-list button{
  min-height:76px;height:100%;padding:10px 20px;text-align:left;justify-content:flex-start;
  display:inline-flex;align-items:center;line-height:1.25;border:1px solid var(--line);border-radius:999px;
  background-color:var(--white);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-size:0% 100%;background-position:left center;
  font-family:var(--caps);font-size:14px;letter-spacing:.08em;color:var(--ink-soft);
  position:relative;overflow:hidden;
  transition:background-size .45s var(--ease-swap),color .3s var(--ease),
             border-color .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)
}
.fm-list button:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(30,26,22,.09)}
/* The gold wash fills the pill from the left as it is chosen. Done with a
   background image rather than a pseudo-element: a negatively stacked ::before
   sat behind the button's own background and never showed. */
.fm-list button[aria-pressed="true"]{background-size:100% 100%;border-color:var(--gold);color:#1A1208;
  box-shadow:0 12px 30px var(--accent-shadow,rgba(176,142,93,.28))}

.fm-panel{min-height:1px;position:relative}

/* The zone number as a small badge in the corner. It was a huge ghosted
   numeral behind the heading, but the headings vary in length and the long
   ones ran straight through it. */
.fm-num{
  position:absolute;right:0;top:2px;z-index:1;
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-gold);
  font-family:var(--serif);font-size:22px;color:var(--gold-deep);
}
/* the gold zone badge sits top right, so only the two lines beside it need to
   clear it — indenting the body too gave the panel two different right edges */
.fm-panel .eyebrow,.fm-panel h3{padding-right:76px}
@media (max-width:768px){ .fm-panel .eyebrow,.fm-panel h3{padding-right:56px} }
.fm-panel .fm-treats,.fm-panel .fm-cta{padding-right:0}

.fm-panel h3{font-size:clamp(30px,3.4vw,42px);margin-bottom:6px}
.fm-panel .fm-q{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2vw,26px);color:var(--gold-deep);line-height:1.3}
.fm-body{margin-top:18px;max-width:52ch}
.fm-cta{margin-top:26px}

/* Name over description. Side by side, a long label pushed its description
   right and a short one pulled it left, so no two zones lined up. */
.fm-treats{margin-top:30px;display:flex;flex-direction:column;gap:0}
.fm-treat{padding:18px 0 20px;border-top:1px solid var(--line-soft);position:relative}
.fm-treat:last-child{border-bottom:1px solid var(--line-soft)}
.fm-treat b{
  display:block;margin-bottom:7px;
  font-family:var(--caps);font-weight:500;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);
}
.fm-treat span{display:block;font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:52ch}
/* a gold tick that draws itself down the left of each row as it arrives */
.fm-treat::before{
  content:"";position:absolute;left:0;top:-1px;width:38px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
}

/* the panel re-enters every time a zone changes */
.fm-panel.is-in .eyebrow,.fm-panel.is-in h3,.fm-panel.is-in .fm-q,
.fm-panel.is-in .fm-body,.fm-panel.is-in .fm-treat,.fm-panel.is-in .fm-cta{
  animation:fmRise 640ms var(--ease) both;
}
.fm-panel.is-in h3{animation-delay:60ms}
.fm-panel.is-in .fm-q{animation-delay:120ms}
.fm-panel.is-in .fm-body{animation-delay:180ms}
.fm-panel.is-in .fm-treat{animation-delay:calc(240ms + var(--i,0) * 90ms)}
.fm-panel.is-in .fm-cta{animation-delay:520ms}
.fm-panel.is-in .fm-treat::before{
  animation:fmTick 700ms var(--ease) both;
  animation-delay:calc(300ms + var(--i,0) * 90ms);
}
.fm-panel.is-in .fm-num{animation:fmGhost 900ms var(--ease) both}
@keyframes fmRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes fmTick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fmGhost{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .fm-panel.is-in .eyebrow,.fm-panel.is-in h3,.fm-panel.is-in .fm-q,
  .fm-panel.is-in .fm-body,.fm-panel.is-in .fm-treat,.fm-panel.is-in .fm-cta,
  .fm-panel.is-in .fm-num{animation:none}
  .fm-treat::before{transform:scaleX(1)}
}

/* ==========================================================================
   testimonial — one on screen at a time, score + source only, never a count
   ========================================================================== */
.tq{position:relative}
.tq-item{display:none}
.tq-item.on{display:block;animation:tqIn .7s var(--ease)}
@keyframes tqIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tq-quote{font-family:var(--serif);font-size:clamp(26px,3.2vw,42px);line-height:1.28;color:var(--ink)}
.on-ink .tq-quote{color:var(--cream)}
.tq-by{margin-top:22px;font-family:var(--caps);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.on-ink .tq-by{color:var(--gold-lite)}
.tq-nav{margin-top:34px;display:flex;gap:10px;justify-content:center}
.tq-nav button{
  width:var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)
}
.tq-nav button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.on-ink .tq-nav button{border-color:rgba(245,240,236,.32);color:var(--cream)}
.on-ink .tq-nav button:hover{background:var(--cream);color:var(--ink)}

.stars{display:inline-flex;gap:3px;align-items:center}
.stars svg{width:16px;height:16px;fill:var(--gold)}

/* ==========================================================================
   accordion (FAQ)
   ========================================================================== */
.acc-item{border-top:1px solid var(--line)}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.acc-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--tap);padding:26px 0;text-align:left;
  font-family:var(--serif);font-size:clamp(21px,2.1vw,26px);color:var(--ink);line-height:1.25;
  transition:color .3s var(--ease)
}
.acc-q:hover{color:var(--gold-deep)}
.acc-ico{flex:none;width:26px;height:26px;position:relative}
.acc-ico::before,.acc-ico::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--gold);
  transition:transform .4s var(--ease)
}
.acc-ico::after{transform:rotate(90deg)}
.acc-q[aria-expanded="true"] .acc-ico::after{transform:rotate(0)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-q[aria-expanded="true"]+.acc-a{grid-template-rows:1fr}
.acc-a>div{overflow:hidden}
.acc-a p{padding-bottom:28px;max-width:70ch;font-size:17.5px}

/* ==========================================================================
   floating demo switcher — standard on every TRS demo build
   ========================================================================== */
.dswitch{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:900}
.dswitch-in{
  display:flex;align-items:center;gap:2px;padding:6px;border-radius:999px;
  background:rgba(20,24,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.34)
}
.dswitch a{
  min-height:38px;display:inline-flex;align-items:center;padding:0 15px;border-radius:999px;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:background .3s var(--ease),color .3s var(--ease)
}
.dswitch a:hover{color:#fff}
.dswitch a.on{background:var(--gold);color:#231A0B}
.dswitch .sep{width:1px;height:18px;background:rgba(255,255,255,.2);margin:0 4px}
@media (max-width:560px){
  /* five links on a 360px phone need the labels shortened, or the pill wraps
     onto two lines and looks broken */
  .dswitch a{padding:0 9px;font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .dswitch-in{padding:5px;gap:0}
  .dswitch .sep{margin:0 2px}
  .dswitch a .lbl{display:none}
}

/* ==========================================================================
   utility
   ========================================================================== */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}

/* ==========================================================================
   STRUCTURE
   The grid skeleton every demo shares. The demo-N files change how it looks,
   never whether it holds together. Keeping the skeleton in one place is what
   stops one demo quietly developing a ragged row that the others don't have.
   ========================================================================== */

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:var(--cream);
  border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--line)}
/* A fixed header with no top offset keeps its static position and scrolls
   out of view with the page, which is why demos 3 and 4 lost their menu on
   the way down. */
.hdr--over{position:fixed;top:0;left:0;right:0;background:transparent}
.hdr-in{max-width:var(--shell);margin-inline:auto;padding:16px var(--gutter);
  display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.brand{display:block;flex:none}
.brand-mark{height:56px;width:auto;color:var(--ink)}
.nav{display:flex;gap:clamp(10px,1.4vw,24px);margin-left:auto;flex-wrap:nowrap;min-width:0}
/* demo 2 sets the nav in tracked uppercase, which is wide enough to push the
   actions off the right edge before the mobile breakpoint takes over */
.hdr-in>*{min-width:0}
.navlink{font-family:var(--caps);font-size:14.5px;letter-spacing:.01em;padding-inline:2px;color:var(--ink-soft);
  white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.navlink:hover{color:var(--ink);border-bottom-color:var(--gold)}
/* A hairline between the navigation and the actions. With the nav in title
   case the last link and the phone number read as one run of text. */
.hdr-act{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);margin-left:auto;flex:none}
.nav+.hdr-act::before{content:"";width:1px;height:20px;background:var(--line);flex:none}
.nav+.hdr-act{margin-left:0}
.hdr-tel{font-family:var(--caps);font-size:14.5px;white-space:nowrap;letter-spacing:.05em;color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px}
.hdr-tel:hover{color:var(--gold-deep)}
.hdr-btn{min-height:46px;padding:0 20px;font-size:13px;letter-spacing:.12em;white-space:nowrap}
.burger{display:none;width:var(--tap);height:var(--tap);flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span:not(.sr){display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

.navpanel{position:fixed;inset:0;z-index:70;background:var(--cream);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.navpanel.is-open{opacity:1;visibility:visible}
.navpanel-in{height:100%;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:96px var(--gutter) 40px}
.navpanel-in a{font-family:var(--serif);font-size:clamp(28px,7vw,42px);color:var(--ink);
  padding:10px 0;border-bottom:1px solid var(--line-soft)}

/* ---------- section heads ---------- */
.sec-head{margin-bottom:clamp(40px,5vw,68px)}
.sec-head h2{margin:10px 0 14px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.sec-head .lede{max-width:52ch}

/* ---------- hero shells ---------- */
.hero{position:relative;padding-block:clamp(56px,7vw,104px)}
.hero-in{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
/* The apex. Everything else on the page is deliberately subordinate to it. */
.hero h1{font-size:clamp(42px,5.6vw,80px)}
.hero-sub{margin-top:24px;max-width:46ch}
.hero-btns{margin-top:36px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.hero-strap{margin-top:40px;font-family:var(--caps);font-size:13.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-deep)}
.on-ink .hero-strap{color:var(--gold-lite)}
.hero-media figcaption{margin-top:14px;font-family:var(--caps);font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.on-ink .hero-media figcaption{color:rgba(245,240,236,.6)}

/* ---------- ribbon ---------- */
.ribbon{padding-block:clamp(30px,3.4vw,46px)}
.ribbon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
.ribbon-item{background:var(--ground,var(--cream));padding:6px clamp(14px,2vw,28px)}
.ribbon-item b{display:block;font-family:var(--caps);font-weight:500;font-size:16px;
  letter-spacing:.02em;color:var(--ink)}
.ribbon-item span{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--mute)}
.g-ink .ribbon-item b{color:var(--cream)}
.g-ink .ribbon-item span{color:rgba(245,240,236,.66)}
.g-ink .ribbon-grid{background:rgba(245,240,236,.16)}

/* ---------- what are you looking for ---------- */
.lookfor{padding-block:var(--sec-y)}
.lf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.lf-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
  min-height:100%;padding:clamp(24px,2.4vw,34px);
  border:1px solid var(--line);background:var(--white);
  transition:border-color .4s var(--ease),transform .5s var(--ease),background .4s var(--ease)}
.lf-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.lf-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.24em;color:var(--gold-deep)}
.lf-q{font-family:var(--serif);font-size:clamp(24px,2.3vw,32px);line-height:1.14;color:var(--ink)}
/* Four across, the questions run to two or three lines and the notes only line
   up if every question box reserves the same three. Two across and below, they
   all fit on one line, and the reservation is just a hole in the card. */
@media (min-width:1081px){ .lf-q{min-height:3.42em;min-height:3lh} }
.lf-note{font-size:16.5px;line-height:1.6;color:var(--mute);flex:1}
.lf-go{margin-top:8px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--caps);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.lf-go svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.lf-card:hover .lf-go svg{transform:translateX(6px)}

/* ---------- face map ---------- */
.fmsec{padding-block:var(--sec-y)}
.fm-layout{display:grid;gap:clamp(36px,4.4vw,72px);align-items:start}
.fm-left{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.fm-right{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.fm-right .fm-col-face{order:2}
.fm-right .fm-col-panel{order:1}
.fm-switch{margin-bottom:22px}
.fm-hintline{margin:18px 0 14px;font-size:16px;color:var(--mute)}
.on-ink .fm-hintline{color:rgba(245,240,236,.66)}
.fm-col-panel{position:sticky;top:112px}

/* ---------- treatments ---------- */
.treatments{padding-block:var(--sec-y)}
.tr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
.tr-card{background:var(--ground,var(--paper));padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:10px}
.tr-card h3{font-size:clamp(23px,2vw,29px)}
.tr-lead{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-deep);line-height:1.35}
.tr-body{font-size:16.5px;line-height:1.62;color:var(--ink-soft);flex:1}
.tr-n{font-family:var(--caps);font-size:12px;letter-spacing:.24em;color:var(--gold-deep)}
.tr-facts{margin-top:6px;display:flex;flex-direction:column;gap:0}
.tr-facts>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line-soft)}
.tr-facts dt{font-family:var(--caps);font-size:14px;letter-spacing:.05em;color:var(--mute);flex:none}
.tr-facts dd{font-size:15.5px;text-align:right;color:var(--ink)}

.tr-table{border-top:1px solid var(--line)}
.tr-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,300px);gap:clamp(20px,3vw,48px);
  padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--line)}
.tr-row h3{font-size:clamp(24px,2.3vw,34px);margin-bottom:10px}
.tr-row .tr-main p{font-size:16.5px;line-height:1.65;max-width:56ch}
.tr-row .tr-n{padding-top:8px}

/* ---------- practitioner ---------- */
.prac{padding-block:var(--sec-y)}
/* The portrait is a phone photograph, so it is set small and deliberate
   rather than blown up across half the row, where every softness showed. */
.prac-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(36px,5vw,80px);align-items:center}
.prac-media{max-width:340px}
/* Flipping only reordered the figure, so the text dropped into the 4fr
   column and the portrait sat in the 8fr one with a gutter of dead space
   beside it. The ratio has to mirror too. */
.prac--flip .prac-in{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.prac--flip .prac-media{order:2;justify-self:end}
.prac-img{width:100%}
.prac-media figcaption{margin-top:14px;font-family:var(--caps);font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.prac-body h2{margin:14px 0 20px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.prac-lead{font-size:21px;line-height:1.55;color:var(--ink);margin-bottom:20px}
.prac-body p{margin-bottom:20px;max-width:60ch}
.prac-pull{margin-top:30px;padding-left:26px;border-left:1px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);
  line-height:1.34;color:var(--ink)}

/* ---------- consultation ---------- */
.consult{padding-block:var(--sec-y)}
.cs-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(36px,5vw,80px);align-items:start}
.cs-main h2{margin:14px 0 22px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.cs-lead{font-size:21px;line-height:1.5;color:var(--ink);margin-bottom:22px}
.cs-main p{margin-bottom:20px;max-width:60ch}
.cs-side{padding:clamp(26px,2.6vw,38px);background:var(--paper);border:1px solid var(--line)}
.cs-facts{display:flex;flex-direction:column}
.cs-fact{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.cs-fact dt{font-family:var(--caps);font-size:14px;letter-spacing:.04em;color:var(--gold-deep)}
.cs-fact dd{margin-top:5px;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}
.cs-prep{margin-top:26px}
.cs-prep h3{font-size:21px;margin-bottom:12px}
.cs-prep ul{display:flex;flex-direction:column;gap:9px;list-style:none;padding:0}
.cs-prep li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.55}
.cs-prep li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--gold-deep)}
.cs-btn{margin-top:28px;width:100%}

/* ---------- PRP ---------- */
.prp{padding-block:var(--sec-y)}
.prp-top h2{margin:14px 0 20px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.prp-uses{margin-top:clamp(40px,4vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
.prp-use{padding-top:22px;border-top:1px solid var(--line-gold)}
.prp-use h3{font-size:clamp(22px,2vw,28px);margin:10px 0 10px}
.prp-use p{font-size:16.5px;line-height:1.62}
.prp-n{font-family:var(--caps);font-size:12px;letter-spacing:.24em;color:var(--gold)}
.prp-honest{margin-top:clamp(36px,3.6vw,56px);padding:24px 28px;
  background:var(--accent-wash,rgba(176,142,93,.13));
  border-left:1px solid var(--gold);font-size:17px;line-height:1.65}
.prp .btn{margin-top:34px}

/* ---------- men ---------- */
.men{padding-block:var(--sec-y)}
.men-top h2{margin:14px 0 18px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.men-lead{font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);line-height:1.32;
  color:var(--gold-deep);max-width:34ch;margin-bottom:20px}
.on-ink .men-lead{color:var(--gold-lite)}
.men-grid{margin-top:clamp(40px,4vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
.men-pt{padding-top:22px;border-top:1px solid var(--line-gold)}
.men-pt h3{font-size:clamp(21px,1.8vw,26px);margin-bottom:10px}
.men-pt p{font-size:16.5px;line-height:1.62}
/* The concerns used to be padded boxes with hairline dividers between them,
   stacked under the three-column row above. Two grids with different column
   edges, and the box padding pushing the text off the column it sat under,
   read as a mess. Same treatment as the row above now — a rule on top, text
   flush to its column — so only the count differs. */
.men-concerns{margin-top:clamp(34px,3.4vw,52px);list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px)}
.men .link-u{margin-top:34px}

/* ---------- after weight loss ---------- */
.weight{padding-block:var(--sec-y)}
.wt-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,80px);align-items:start}
.wt-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:inherit}
.wt-media{position:sticky;top:112px}
.wt-body h2{margin:14px 0 20px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.wt-lead{font-size:21px;line-height:1.5;color:var(--ink);margin-bottom:20px}
.wt-body p{margin-bottom:18px;max-width:58ch}
.wt-punch{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,34px);
  line-height:1.3;color:var(--gold-deep);margin:26px 0 !important}
.wt-helps{margin:30px 0;display:grid;gap:1px;background:var(--line-soft)}
.wt-help{background:var(--ground,var(--cream));padding:18px 0}
.wt-help b{display:block;font-family:var(--caps);font-weight:500;font-size:17px;color:var(--ink);margin-bottom:4px}
.wt-help p{margin:0;font-size:16.5px;line-height:1.6}
.wt-honest{padding:20px 24px;border-left:1px solid var(--gold);font-size:16.5px}

/* ---------- quotes ---------- */
.quotes{padding-block:var(--sec-y)}
.tq{max-width:940px;margin-inline:auto;text-align:center}
.tq-rating{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px}
.tq-score{font-family:var(--caps);font-size:17px;color:var(--ink)}
.on-ink .tq-score{color:var(--cream)}
.tq-src{font-family:var(--caps);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.on-ink .tq-src{color:rgba(245,240,236,.62)}

/* ---------- credentials ---------- */
.creds{padding-block:var(--sec-y)}
.creds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);list-style:none;padding:0}
.creds-grid li{background:var(--ground,var(--paper));padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:6px;min-height:132px}
.creds-grid b{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink)}
.creds-grid span{font-family:var(--caps);font-size:14.5px;letter-spacing:.05em;color:var(--mute)}
.creds-note{margin-top:24px;font-family:var(--caps);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}

/* ---------- faq ---------- */
.faq{padding-block:var(--sec-y)}
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:clamp(92px,12vh,132px)}
.faq-head h2{margin-top:14px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
@media (max-width:900px){.faq-head{position:static}}

/* ---------- contact ---------- */
.contact{padding-block:var(--sec-y)}
.ct-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,5vw,80px);align-items:start}
.ct-main h2{margin:14px 0 20px;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
/* both CTAs the same width, so they line up whether they sit side by side
   or wrap onto two rows */
.ct-btns{margin-top:34px;display:flex;flex-wrap:wrap;gap:16px}
.ct-btns .btn{min-width:272px;justify-content:center}
@media (max-width:420px){.ct-btns .btn{min-width:0;width:100%}}
.ct-rows,.ct-hours{display:flex;flex-direction:column}
.ct-rows>div,.ct-hours>div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.ct-rows dt,.ct-hours dt{font-family:var(--caps);font-size:14px;letter-spacing:.04em;
  color:var(--gold-deep);flex:none}
.on-ink .ct-rows dt,.on-ink .ct-hours dt{color:var(--gold-lite)}
.ct-rows dd,.ct-hours dd{text-align:right;font-size:16.5px;line-height:1.5}
.ct-rows a{display:inline-flex;align-items:center;min-height:32px;border-bottom:1px solid transparent}
.ct-rows a:hover{border-bottom-color:var(--gold)}
/* Contact sits on a light ground on every demo now, so the details become a
   proper card. Without this the demos that gave it a border had type sitting
   2px from the edge. */
.ct-side{padding:clamp(24px,2.4vw,34px);background:var(--paper);border:1px solid var(--line)}
.on-ink .ct-side{background:rgba(245,240,236,.05);border-color:rgba(245,240,236,.2)}
.ct-hours{margin-top:26px}
.ct-note{margin-top:20px;font-size:16px;line-height:1.55;color:var(--mute)}
.on-ink .ct-note{color:rgba(245,240,236,.7)}
.on-ink .ct-rows>div,.on-ink .ct-hours>div{border-bottom-color:rgba(245,240,236,.16)}

/* ---------- footer ----------
   The mark in the centre, navigation and contact either side, one hairline
   bar underneath. Left column ranges left, right column ranges right, so the
   whole block reads symmetrical about the logo. */
.foot{padding-block:clamp(52px,5.5vw,88px) clamp(28px,3vw,40px)}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start}

.foot-brand{text-align:center;justify-self:center;max-width:380px}
/* The mark is a block-level svg, so text-align could not centre it: it sat
   hard left in its box while the strapline centred, leaving the two out of
   line with each other. */
.foot-mark{height:clamp(78px,7vw,104px);width:auto;color:var(--cream);
  display:block;margin-inline:auto}
.foot-strap{margin-top:18px;font-family:var(--caps);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-lite)}

.foot-col{display:flex;flex-direction:column;gap:2px}
/* Only the mark is centred. Both side columns range left, so every line of
   type in the footer starts on a straight edge. */
.foot-col--r{align-items:flex-start;text-align:left;justify-self:end}
.foot-h{margin-bottom:10px;font-family:var(--caps);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-lite)}
.foot-col a{font-size:16px;display:inline-flex;align-items:center;min-height:34px;
  color:rgba(245,240,236,.82);border-bottom:1px solid transparent}
.foot-col a:hover{color:var(--cream);border-bottom-color:var(--gold)}
.foot-addr{margin-top:12px;font-size:15.5px;line-height:1.65;color:rgba(245,240,236,.66)}
@media (pointer:coarse){.foot-col a{min-height:44px}}

.foot-bottom{margin-top:clamp(36px,4vw,60px);padding-top:22px;
  border-top:1px solid rgba(245,240,236,.16);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:14px;color:rgba(245,240,236,.55)}

/* on a light ground the same footer reads from the palette */
.foot:not(.on-ink) .foot-mark{color:var(--ink)}
.foot:not(.on-ink) .foot-h,.foot:not(.on-ink) .foot-strap{color:var(--gold-deep)}
.foot:not(.on-ink) .foot-col a{color:var(--ink-soft)}
.foot:not(.on-ink) .foot-col a:hover{color:var(--ink)}
.foot:not(.on-ink) .foot-addr,.foot:not(.on-ink) .foot-bottom{color:var(--mute)}
.foot:not(.on-ink) .foot-bottom{border-top-color:var(--line)}

@media (max-width:860px){
  .foot-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:36px}
  .foot-col{align-items:center;text-align:center}
  .foot-col--r{align-items:center;text-align:center}
  .foot-bottom{justify-content:center;text-align:center}
}

.img-missing{background:var(--sand);aspect-ratio:4/3;width:100%}

/* ==========================================================================
   responsive
   Three stops, and the rule at every one is that a row must be full. A grid
   of four that leaves one item alone on the last row is the thing that makes
   a page look unfinished.
   ========================================================================== */
@media (max-width:1080px){
  .fm-list{grid-template-columns:repeat(3,1fr)}
  .lf-grid,.tr-grid,.men-concerns{grid-template-columns:repeat(2,1fr)}
  .creds-grid{grid-template-columns:repeat(2,1fr)}
  .ribbon-grid{grid-template-columns:repeat(2,1fr);gap:1px}
  .prp-uses,.men-grid{grid-template-columns:1fr;gap:0}
  .prp-use,.men-pt{padding:22px 0}
  .fm-left,.fm-right{grid-template-columns:1fr}
  .fm-right .fm-col-face,.fm-right .fm-col-panel{order:0}
  .fm-col-panel{position:static}
  .tr-row{grid-template-columns:44px minmax(0,1fr);gap:20px}
  .tr-row .tr-facts{grid-column:2}
}
@media (max-width:1180px){
  .hdr-tel{display:none}
}
@media (max-width:1060px){
  /* six nav items plus a button stop fitting here, and a wrapped header is
     the first thing that makes a site look cheap */
  .nav,.hdr-btn{display:none}
  .burger{display:flex}
  .hdr-act{margin-left:auto}
}
@media (max-width:900px){
  :root{--body-size:17px}
  .nav,.hdr-tel,.hdr-btn{display:none}
  .burger{display:flex}
  .hdr-act{margin-left:auto}
  .hero-in,.prac-in,.cs-grid,.wt-in,.faq-in,.ct-in{grid-template-columns:1fr}
  /* A media query adds no specificity, so .prac--flip .prac-in outranks the
     single-column rule above and kept two columns on a phone. It has to be
     unset at the same weight. */
  .prac--flip .prac-in{grid-template-columns:1fr}
  .prac--flip .prac-media{order:0;justify-self:start}
  .prac-media,.wt-media{max-width:520px}
  .wt-media{position:static}
  .wt-img{aspect-ratio:16/10}
  .fm-stage{max-width:520px}
  .foot-in{gap:36px}
  .ct-rows dd,.ct-hours dd{text-align:left}
  .ct-rows>div,.ct-hours>div{flex-direction:column;gap:4px}
}
/* Below 768px eight labelled 44px targets cannot sit on a 360px-wide face
   without colliding. Shipping a cramped map is worse than shipping a good
   list, so the portrait becomes a still and the list becomes the interface. */
@media (max-width:768px){
  .fm-list{grid-template-columns:1fr}
  .fm-hintline{font-weight:500;color:var(--ink)}
  .on-ink .fm-hintline{color:var(--cream)}
  .fm-list{flex-direction:column;gap:0;border-top:1px solid var(--line)}
  .fm-list button{width:100%;justify-content:flex-start;text-align:left;min-height:66px;
    border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
    font-size:16.5px;letter-spacing:0}
  .fm-list button[aria-pressed="true"]{background:var(--gold);color:#231A0B;border-color:var(--gold)}
  .fm-stage{margin-inline:auto}
}
@media (max-width:640px){
  .lf-grid,.tr-grid,.men-concerns,.creds-grid,.ribbon-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn,.hero-btns .link-u{width:100%;justify-content:center}
  .tr-facts>div{flex-direction:column;gap:2px}
  .tr-facts dd{text-align:left}
  .dswitch{bottom:10px}
}

/* ==========================================================================
   Age statement — required on every page carrying treatment content
   ========================================================================== */
.agebar{padding:16px 0;border-top:1px solid var(--line-soft)}
.agebar p{font-family:var(--caps);font-size:14px;letter-spacing:.05em;color:var(--mute);margin:0}
.on-ink .agebar p{color:rgba(245,240,236,.7)}
.on-ink .agebar{border-color:rgba(245,240,236,.14)}


/* ---------- full-bleed image band ----------
   One photograph, one line. Used where a page runs long on text. */
.band{position:relative;min-height:min(58vh,540px);display:grid;place-items:end start;
  overflow:hidden;isolation:isolate}
.band-media{position:absolute;inset:0;z-index:0}
.band-img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  transform:scale(1.08);transition:transform 2400ms var(--ease)}
.band.in .band-img{transform:none}
/* the line sits over a pale marble ledge, so the old 42% scrim left white
   type all but invisible. Deeper at the foot, and the line is gold leaf. */
/* The line sits bottom-left over a photograph that is dark on the left and
   sunlit on the right, so a bottom-only scrim left "rushed." on bright stone.
   Two gradients: a soft foot, and a little more weight under the words. The
   orchid and the light keep their own exposure. */
.band-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(94deg, rgba(22,17,12,.70) 0%, rgba(22,17,12,.52) 26%,
      rgba(22,17,12,.20) 48%, rgba(22,17,12,0) 66%),
    linear-gradient(180deg, rgba(28,24,20,0) 0 40%, rgba(24,19,14,.20) 68%,
      rgba(24,19,14,.44) 100%)}
.band-in{position:relative;z-index:1;width:100%;
  padding-block:clamp(34px,4vw,60px) clamp(46px,5.4vw,86px)}
.band-rule{display:block;width:clamp(56px,7vw,104px);height:1px;margin-bottom:clamp(18px,2vw,28px);
  background:var(--gold);background-image:var(--foil);
  transform:scaleX(0);transform-origin:left;transition:transform 800ms var(--ease) 200ms}
.band-rule.in{transform:none}
.band-line{margin:0;max-width:34ch;
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(27px,3.5vw,50px);line-height:1.18;letter-spacing:-.005em}
/* one sentence per line, each arriving just after the one above it, and each
   carrying its own sweep of gold leaf */
.band-line span{display:block;padding-bottom:.08em;
  color:var(--gold-lite,#D2B487);
  background-image:linear-gradient(100deg,#C9A86E 0%,#F2E0BA 24%,#BE8F4E 50%,#F5E6C6 74%,#C9A86E 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 18px rgba(24,19,14,.55))}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .band-line span{-webkit-text-fill-color:currentColor;background-image:none}
}
.band.in .band-line span{animation:bandLine 900ms var(--ease) both;
  animation-delay:calc(260ms + var(--i,0) * 130ms)}
@keyframes bandLine{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .band{min-height:min(52vh,420px)}
  .band-line{max-width:24ch}
}
@media (prefers-reduced-motion: reduce){
  .band-img{transform:none;transition:none}
  .band.in .band-line span{animation:none}
}


/* Three sections carry more air than the rest, so the scroll has chapters
   rather than thirteen sections at one volume. */
.sec--lg{padding-block:var(--sec-y-lg)}


/* ==== the men's section ================================================
   Was the longest unbroken text run on every demo. It now opens on a
   portrait that bleeds to the edge, and the four concerns underneath are a
   row of invitations rather than a list of facts. */
.men{padding-block:0 var(--sec-y-lg)}
.men-split{
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  align-items:stretch;gap:0;
  width:100vw;margin-inline:calc(50% - 50vw);
}
.men-media{position:relative;margin:0;min-height:clamp(460px,60vh,680px)}
.men-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.men-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(72px,7vw,128px) clamp(28px,5vw,104px);
}
.men-body>*{max-width:52ch}
.men-under{margin-top:clamp(56px,6vw,96px)}

/* the three points */
.men-grid{margin-top:0}

/* the invitation line above the concerns */
.men-cue{
  margin:clamp(48px,5vw,80px) 0 20px;
  font-family:var(--caps);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);
}

/* the concerns: bigger, warmer, obviously tappable */
.men-concerns{margin-top:0;gap:clamp(14px,1.6vw,22px)}
.men-concerns li{display:flex}
.men-concern{
  flex:1;text-align:left;cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px);
  background:var(--paper);border:1px solid var(--line-soft);border-top:0;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
/* a gold rule that draws across the top as you arrive on it */
.men-concern::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  background-image:var(--foil);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.men-concern:hover,.men-concern:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -26px rgba(42,33,24,.34);
  border-color:var(--line);
}
.men-concern:hover::before,.men-concern:focus-visible::before{transform:none}
.men-n{
  font-family:var(--caps);font-size:11.5px;letter-spacing:.2em;color:var(--gold-deep)}
.men-concern b{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);
  letter-spacing:-.005em;color:var(--ink)}
.men-note{font-size:15.5px;line-height:1.6;color:var(--mute)}
.men-go{
  margin-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);opacity:0;transform:translate3d(-6px,0,0);
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
.men-go svg{width:15px;height:15px}
.men-concern:hover .men-go,.men-concern:focus-visible .men-go{opacity:1;transform:none}
@media (hover:none){.men-go{opacity:1;transform:none}}

@media (max-width:900px){
  .men-split{grid-template-columns:1fr}
  .men-media{min-height:clamp(340px,52vh,460px)}
  .men-concerns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .men-concerns{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .men-concern,.men-concern::before,.men-go{transition:none}
}


/* ==== PRP ==============================================================
   The clinical room on one side, the explanation on the other, and the
   process as a diagram you can step through. */
.prp{padding-block:0 var(--sec-y-lg)}
.prp-split{
  display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  align-items:stretch;gap:0;width:100vw;margin-inline:calc(50% - 50vw);
}
.prp-media{position:relative;margin:0;min-height:clamp(440px,58vh,660px)}
.prp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.prp-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(72px,7vw,128px) clamp(28px,5vw,104px);
}
.prp-body>*{max-width:52ch}
.prp-under{margin-top:clamp(56px,6vw,96px)}

.prp-cue{
  margin:0 0 clamp(22px,2.4vw,34px);
  font-family:var(--caps);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);
}

/* the diagram: three steps on one gold line */
.prp-steps{
  list-style:none;margin:0 0 clamp(56px,6vw,88px);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);
  position:relative;
}
/* the line that runs behind the three marks */
.prp-steps::before{
  content:"";position:absolute;left:8%;right:8%;top:34px;height:1px;
  background:var(--line);
}
.prp-step{position:relative;display:flex;flex-direction:column;gap:12px}
.prp-stepbtn{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  background:transparent;border:0;padding:0;text-align:left;cursor:pointer;
}
.prp-ico{
  position:relative;z-index:1;
  width:68px;height:68px;display:grid;place-items:center;border-radius:50%;
  background:var(--ground,var(--cream));
  border:1px solid var(--line);color:var(--mute);
  transition:border-color .45s var(--ease), color .45s var(--ease),
             background .45s var(--ease), transform .45s var(--ease);
}
.prp-ico svg{width:30px;height:30px}
.prp-sn{font-family:var(--caps);font-size:11.5px;letter-spacing:.2em;color:var(--gold-deep)}
.prp-st{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);
  letter-spacing:-.005em;color:var(--ink);
}
.prp-sd{
  margin:0;font-size:16px;line-height:1.62;color:var(--mute);max-width:34ch;
  opacity:.45;transition:opacity .45s var(--ease);
}
/* the open step */
.prp-stepbtn[aria-expanded="true"] .prp-ico{
  border-color:var(--gold);color:var(--gold-deep);transform:scale(1.04);
  box-shadow:0 0 0 5px var(--accent-halo,rgba(176,142,93,.10));
}
.prp-step:has(.prp-stepbtn[aria-expanded="true"]) .prp-sd{opacity:1}
.prp-stepbtn:hover .prp-ico{border-color:var(--gold);color:var(--gold-deep)}

.prp-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}

@media (max-width:900px){
  .prp-split{grid-template-columns:1fr}
  .prp-media{order:-1;min-height:clamp(320px,48vh,440px)}
  .prp-steps{grid-template-columns:1fr;gap:28px}
  .prp-steps::before{display:none}
  .prp-sd{opacity:1}
  .prp-uses{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .prp-ico,.prp-sd{transition:none}
}


/* ==== the four menus ===================================================
   Each demo carries its own header so they are distinguishable before you
   have scrolled a pixel. */

/* --- demo 2: the word, the centred mark, the overlay (Morph pattern) --- */
.hdr--overlay .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hdr--overlay .brand{justify-self:center}
.hdr--overlay .hdr-act{justify-self:end;margin-left:0}
.hdr-word{
  justify-self:start;display:inline-flex;align-items:center;gap:12px;
  background:transparent;border:0;padding:8px 0;cursor:pointer;min-height:44px;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);
}
.hdr-word-l{display:block;width:26px;height:1px;background:currentColor;
  transition:width .4s var(--ease)}
.hdr-word:hover .hdr-word-l{width:38px}
.hdr--overlay .burger{display:none}
/* the panel becomes a full screen on this demo */
.demo2 .navpanel{inset:0;height:100dvh}
/* eight items have to fit a short laptop window, so the type is sized to the
   viewport height and the panel scrolls if it still cannot */
.demo2 .navpanel-in{display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:clamp(6px,1.1vh,16px);height:100%;
  overflow-y:auto;padding-block:clamp(70px,10vh,120px)}
.demo2 .navpanel-in a{font-family:var(--serif);font-size:clamp(20px,4.4vh,40px);
  line-height:1.18;text-transform:none;letter-spacing:-.01em;border:0;
  min-height:0;padding:4px 0}

/* --- demo 3: a panel under Treatments (Everwood pattern) --- */
.nav-has{position:relative;display:inline-flex}
.nav-caret{width:9px;height:6px;margin-left:7px;transition:transform .3s var(--ease)}
.nav-has:hover .nav-caret{transform:rotate(180deg)}
.nav-drop{
  position:absolute;left:50%;top:100%;transform:translate(-50%,8px);
  min-width:280px;padding-top:14px;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-has:hover .nav-drop,.nav-has:focus-within .nav-drop{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-drop-in{
  display:flex;flex-direction:column;padding:14px 0;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 26px 60px -30px rgba(42,33,24,.34);
}
.nav-drop-in a{
  padding:9px clamp(18px,2vw,26px);font-size:15.5px;color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease)}
.nav-drop-in a:hover{background:var(--sand);color:var(--ink)}
.nav-all{margin-top:6px;border-top:1px solid var(--line-soft);padding-top:14px !important;
  font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep) !important}

/* --- demo 4: the mark centred, the links divided either side --- */
.hdr--split .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(18px,2.4vw,40px)}
.hdr--split .nav--l{justify-content:flex-end}
.hdr--split .nav--r{justify-content:flex-start}
.hdr--split .nav{margin-left:0;align-items:center}
.hdr--split .brand{justify-self:center}
.hdr--split .hdr-btn{margin-left:clamp(10px,1.4vw,22px)}
.hdr--split .burger{display:none}

@media (max-width:1024px){
  .hdr--overlay .hdr-in{grid-template-columns:1fr auto 1fr}
  .hdr--split .hdr-in{grid-template-columns:auto 1fr auto}
  .hdr--split .nav{display:none}
  .hdr--split .burger{display:flex;justify-self:end;grid-column:3}
  .hdr--split .brand{justify-self:start;grid-column:1}
  /* The overlay header has no burger in its markup — its control IS the word
     MENU, which is the whole point of that design. Hiding the word here and
     showing a burger that does not exist left demo 2 with no way to reach the
     navigation at all on a phone or an iPad. */
  .hdr--overlay .hdr-word{display:inline-flex;justify-self:start;grid-column:1}
  .hdr--overlay .brand{grid-column:2;justify-self:center}
  .hdr--overlay .hdr-act{grid-column:3;justify-self:end}
  .nav-drop{display:none}
}


/* ==== glass ============================================================
   Frosted panels over whatever is behind them, with a light top edge so the
   surface catches the light rather than sitting flat. Applied to the things
   that genuinely float over content; a page of frosted everything is slower
   and reads cheaper, not better. */
.glass{
  background:color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:0 24px 60px -32px rgba(42,33,24,.34),
             inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent);
}

/* every header is glass now, over its own ground */
.hdr{
  background:color-mix(in srgb, var(--cream) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.hdr.is-stuck{
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  box-shadow:0 18px 40px -34px rgba(42,33,24,.5);
}

/* the panels that float */
.nav-drop-in,.ct-side,.cs-side,.navpanel{
  background:color-mix(in srgb, var(--paper) 66%, transparent);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
}
.navpanel{border:0}

/* the concern pills read as glass beads */
.fm-list button{
  background-color:color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}

/* ==== glow ==============================================================
   A soft bloom under the things you can press, and a wide ambient light
   behind the sections that carry the page. */
.btn,.men-concern,.lf-card,.tc-card{position:relative}
.btn::before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:radial-gradient(60% 120% at 50% 110%,
    color-mix(in srgb, var(--gold) 55%, transparent), transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.btn:hover::before{opacity:1}
.men-concern:hover,.lf-card:hover,.tc-card:hover{
  box-shadow:0 26px 56px -28px rgba(42,33,24,.34),
             0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}

/* one wide ambient bloom behind the three sections that carry the page */
.sec--lg{position:relative;isolation:isolate}
.sec--lg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,
    color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%);
}

@media (prefers-reduced-motion: reduce){
  .btn::before{transition:none}
}


/* ==== the header must never collide =====================================
   The bigger mark pushed the navigation into the actions. Rather than trim
   the mark back, the header now gives ground in a fixed order: the phone
   goes first, then the whole navigation folds into the menu button. */
/* Demo 1 and demo 3 carry the navigation inline next to a much larger mark,
   and at every desktop width the two run into each other — the last link
   printed straight over the phone number. The number is on the page three
   more times (hero rail, contact, footer), so it is the part that goes. */
.hdr--bar .hdr-tel,.hdr--drop .hdr-tel{display:none}
@media (max-width:1499px){
  .hdr-tel{display:none}
}
/* Bounded at the bottom on purpose. This block sits after the 1060px and
   900px blocks that fold the header down to a burger, and a media query adds
   no specificity — so without the min-width it put the booking button back on
   every phone and pushed demo 1's header 152px past the right edge. */
@media (max-width:1199px) and (min-width:1061px){
  .nav{display:none}
  .hdr-btn{display:inline-flex}
  .burger{display:flex}
  .hdr--overlay .hdr-word{display:inline-flex}
  .hdr--overlay .burger{display:none}
  .hdr--split .burger{display:flex;justify-self:end}
  .hdr--split .hdr-in{grid-template-columns:1fr auto 1fr}
}
/* the mark scales with the window rather than sitting at one fixed size */
.brand-mark{height:clamp(42px,4vw,60px)}

/* ==== thumbs, not cursors ================================================
   Everything tappable gets a 44px box on touch-sized screens, even where the
   ink of the label is smaller than that. The links in the contact panel and
   the footer were 32px high, and the numbers in the demo switcher 23px wide. */
@media (max-width:900px){
  .link-u{min-height:44px;padding-bottom:6px}
  .ct-rows dd a,.foot-col--r a,.foot-legal a{
    display:inline-flex;align-items:center;min-height:44px}
  /* 11.5px is fine on a desktop label and too small in the hand */
  .foot-h,.prp-sn,.men-n{font-size:12.5px}
}
@media (max-width:560px){
  .dswitch a{min-width:40px;justify-content:center;font-size:12px}
}


/* ==== the burger belongs at the right edge ===============================
   `.nav+.hdr-act{margin-left:0}` is two classes and the mobile rule that sets
   margin-left:auto is one, and a media query adds no specificity — so on every
   phone the burger sat tight against the logo with the rest of the bar empty.
   The nav is display:none there but still a sibling, so the divider drew too. */
@media (max-width:1060px){
  .nav+.hdr-act{margin-left:auto}
  .nav+.hdr-act::before{display:none}
}


/* ==== what the phone and the tablet actually need ========================= */
@media (max-width:900px) and (min-width:701px){
  /* an iPad is not a phone: three steps and three uses still fit side by side,
     and stacking them wastes two thirds of the width */
  .prp-steps{grid-template-columns:repeat(3,1fr)}
  .prp-steps::before{display:block;left:16%;right:16%}
  .prp-uses{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px) and (min-width:701px){
  /* the concern map was capped at 520px and pinned left, leaving a third of an
     iPad screen bare beside the page's signature interaction */
  .fm-stage{max-width:none}
  .fm-in,.fm-grid{grid-template-columns:1fr}
}
/* the hairline between ribbon facts is drawn by the grid gap, so the first
   item in each row had no rule and read as 1px out of line with the rest */
@media (max-width:1080px){
  /* The vertical rules are drawn by the 1px grid gap, so the first item in each
     row has none and reads a rule-width out of line with the rest. Stacked or
     two-up, the rules go horizontal and every item starts at the same place. */
  .ribbon-grid{gap:0}
  .ribbon-item{padding-inline:0;padding-block:14px;border-top:1px solid var(--line)}
  .ribbon-item:nth-child(-n+2){border-top:0}
  .g-ink .ribbon-item{border-color:rgba(245,240,236,.16)}
}
@media (max-width:640px){
  .ribbon-item:nth-child(2){border-top:1px solid var(--line)}
  .g-ink .ribbon-item:nth-child(2){border-color:rgba(245,240,236,.16)}
  /* the disclaimer under the model is a legal line, not furniture */
  .model-note{color:var(--ink-soft);font-weight:500}
}
/* At .3em tracking this runs 353px against a 350px shell on a 390pt phone and
   wraps, orphaning the separator onto the second line. Scaled only as far as it
   has to be, and untouched above about 400pt. */
@media (max-width:640px){
  .hero-strap{font-size:min(13.5px, calc((100vw - 48px) / 26.5))}
}
/* single words left alone on the last line of a paragraph */
.lede,.measure,.lf-note,.ribbon-item span,.tr-lead{text-wrap:pretty}