/* ==========================================================================
   LuxLine Electrolysis LLC
   Palette sampled from the real treatment room: navy wall, brushed brass,
   walnut, cream, and the teal in the wave painting.
   ========================================================================== */

:root{
  --canvas:#13293F;
  --canvas-deep:#0D1D2E;
  --panel:#1B3350;
  --panel-2:#23405F;
  --card:#F4EFE6;
  --card-ink:#1B2A3A;
  --card-ink-soft:#4A5C70;
  --accent:#C9A15A;
  --accent-hover:#DCB670;
  --accent-muted:#6B5530;
  --teal:#3E7C87;
  --sand:#C8A882;
  --text-primary:#F2EDE4;
  --text-secondary:#ABBBCD;
  --hairline:rgba(201,161,90,.22);
  --hairline-strong:rgba(201,161,90,.46);

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,8,14,.95),0 3px 12px rgba(5,8,14,.78),0 10px 44px rgba(5,8,14,.8);

  --gutter:clamp(20px,5vw,64px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw + 13px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--accent);color:var(--canvas-deep)}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--accent-hover);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed;left:10px;top:10px;z-index:200;
  transform:translateY(-220%);
  /* also invisible, not merely parked off screen: an overscroll bounce can
     drag a fixed element back into view, which made it flash on scroll up */
  opacity:0;pointer-events:none;
  background:var(--accent);color:var(--canvas-deep);
  padding:12px 20px;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;
  transition:transform .3s var(--ease),opacity .18s linear;
}
.skip:focus{transform:translateY(0);opacity:1;pointer-events:auto}

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

/* --------------------------------------------------------------------------
   The one environment: a fixed layer behind everything so scrolling feels
   like moving through a place, not past stacked sections.
   -------------------------------------------------------------------------- */

.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90rem 60rem at 18% -10%,rgba(62,124,135,.16),transparent 60%),
    radial-gradient(70rem 50rem at 92% 12%,rgba(201,161,90,.012),transparent 62%),
    radial-gradient(80rem 70rem at 50% 108%,rgba(38,70,104,.5),transparent 65%);
}
.env::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(60rem 40rem at 30% 40%,rgba(201,161,90,.008),transparent 60%);
  animation:envdrift 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(4%,3%,0) scale(1.08)}
}

/* Two broad pools of light that drift very slowly behind everything, one
   brass and one taken from the teal in the wave painting. They move as a
   field rather than as objects, so there is nothing discrete on screen that
   could be mistaken for something crawling on it. */
.glow{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.glow::before,.glow::after{
  content:"";position:absolute;border-radius:50%;will-change:transform;
}
.glow::before{
  width:64vw;height:64vw;left:-20vw;top:-22vw;
  background:radial-gradient(circle,rgba(201,161,90,.014),rgba(201,161,90,.005) 45%,transparent 70%);
  animation:glowDriftA 72s var(--ease-soft) infinite alternate;
}
.glow::after{
  width:70vw;height:70vw;right:-18vw;bottom:-22vw;
  background:radial-gradient(circle,rgba(62,124,135,.40),rgba(62,124,135,.18) 45%,transparent 74%);
  animation:glowDriftB 94s var(--ease-soft) -18s infinite alternate;
}
@keyframes glowDriftA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(16vw,12vh,0) scale(1.12)}
}
@keyframes glowDriftB{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-14vw,-10vh,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .glow::before,.glow::after{animation:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(13,29,46,.92),rgba(13,29,46,.72) 62%,rgba(13,29,46,0));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,161,90,.12);
  transition:background .5s var(--ease-soft),border-color .5s var(--ease-soft);
}
/* Held for one synchronous measurement of the bar's full height while it is
   compacted - see navRestingHeight in site.js. Never painted. */
.nav.nav-nofx,.nav.nav-nofx *{transition:none !important}
.nav.stuck{
  /* frosted rather than solid, so the header keeps the glass look the whole
     way down the page */
  background:rgba(13,29,46,.72);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  border-bottom-color:rgba(201,161,90,.2);
}
/* full size at the top of the page, a little more compact once you start reading */
.nav-in,.brand svg,.brand-wm b,.brand-wm span,.nav-links a.btn-book{
  transition:all .45s var(--ease-soft);
}
.nav.stuck .nav-in{padding-top:9px;padding-bottom:9px}
.nav.stuck .brand svg{width:clamp(44px,3.5vw,58px)}
.nav.stuck .brand-wm b{font-size:clamp(21px,2vw,30px)}
.nav.stuck .brand-wm span{font-size:clamp(10px,.85vw,12px)}
.nav.stuck .nav-links a.btn-book{padding:12px clamp(20px,2.2vw,32px)}
@media (prefers-reduced-motion:reduce){
  .nav-in,.brand svg,.brand-wm b,.brand-wm span,.nav-links a.btn-book{transition:none}
}
.nav-in{
  max-width:none;margin:0;
  padding:14px clamp(18px,2.4vw,44px);
  display:flex;align-items:center;gap:clamp(16px,2vw,30px);
}
.brand{
  display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);
  text-decoration:none;flex:0 0 auto;
}
.brand svg{width:clamp(52px,4.6vw,76px);height:auto;flex:0 0 auto}
/* Beside the mark, behind a brass hairline - not squeezed into the lockup,
   which is what forced it small. Tighter tracking buys the width that the
   larger type costs, so it still clears the navigation. */
.brand-tag{
  display:none;
  /* the whole descriptor carries the heavier weight, so "Hair Removal" sits
     level with "Permanent" and only the glow and sweep set that word apart */
  font-family:var(--mono);font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#C6D4E4;white-space:nowrap;
  padding-left:clamp(20px,1.6vw,26px);
  border-left:1px solid rgba(201,161,90,.34);
  align-self:center;
  transition:opacity .5s var(--ease-soft);
}

@media (min-width:1560px){.brand-tag{display:inline-block}}/* Below 1000px there is no room beside the mark, so it takes its own line
   under the bar rather than disappearing. Its own line, not a third line of
   the logo - that is what forced it small before. It keeps a readable size. */
@media (max-width:1559px){
  .nav-in{flex-wrap:wrap;row-gap:0}
  .brand-tag{
    display:block;
    order:3;flex:0 0 100%;
    padding-left:0;border-left:0;
    margin:9px 0 1px;
    font-size:11.5px;letter-spacing:.16em;
    text-align:center;
    color:#C6D4E4;
  }
}
@media (max-width:380px){
  .brand-tag{font-size:10.5px;letter-spacing:.12em}
}
.nav.stuck .brand-tag{opacity:.8}

/* The same sweep the Book Now button carries, on the same 7s cycle, but
   travelling through the letters rather than across a panel behind them.
   Guarded by @supports: without background-clip the text would vanish. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-tag .shine{
    /* the glow is painted from the glyph outlines, so it still shows even
       though the letters themselves are filled by the clipped gradient */
    text-shadow:0 0 12px rgba(201,161,90,.42),0 0 26px rgba(201,161,90,.22);
    background-image:linear-gradient(100deg,
      #C6D4E4 0%,#C6D4E4 34%,#FFD98C 45%,#FFF6DC 50%,#FFD98C 55%,
      #C6D4E4 66%,#C6D4E4 100%);
    background-size:300% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    /* Two animations. The first is a single pass that runs the moment the word
       paints. The second is the ongoing one, started at zero with the same 7s
       round and the same hold as the Book Now button, so from then on the word
       and the button catch the light together. The one-shot is listed last so
       it wins while it runs; both animations rest at an unlit position, so the
       handover at 1.82s is invisible. */
    animation:
      tagshine 7s var(--ease-soft) 0s infinite,
      tagshine-first 1.82s var(--ease-soft) 0s 1;
  }
}
@keyframes tagshine{0%,74%{background-position:100% 0}100%{background-position:0% 0}}
@keyframes tagshine-first{0%{background-position:100% 0}100%{background-position:0% 0}}

@media (prefers-reduced-motion:reduce){
  .brand-tag .shine{
    animation:none;background-image:none;
    color:#C6D4E4;-webkit-text-fill-color:#C6D4E4;
    text-shadow:0 0 12px rgba(201,161,90,.42);
  }
}
.brand-wm{display:flex;flex-direction:column;align-items:center;line-height:1}
.brand-wm b{
  font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.6vw,40px);letter-spacing:.30em;
  color:var(--text-primary);white-space:nowrap;
  /* the tracking leaves a phantom space after the last letter; pulling it
     back is what actually centres the two lines on each other */
  margin-right:-.30em;
}
.brand-wm span{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(11px,1.05vw,15px);letter-spacing:.36em;
  color:var(--accent);margin-top:8px;white-space:nowrap;
  margin-right:-.36em;
}


.nav-links{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  /* a list carries a 1em top margin by default, which pushed the stacked
     menu 17px clear of the header instead of hanging off it */
  margin:0 0 0 auto;list-style:none;padding:0;
}
.nav-links a{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(13px,1.05vw,15px);letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;
  color:var(--text-secondary);
  padding:6px 0;position:relative;
  transition:color .35s var(--ease-soft);
  white-space:nowrap;
}
/* The rule grows with a transform rather than with `right`. Animating `right`
   relayouts the bar on every frame, and this line is only 1px tall, so each
   redraw landed on a different half-pixel - Safari drops a hairline on some of
   those phases, which is what made the rule flash on and off. A scaled
   transform is composited: no layout, and the line is drawn once. */
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* moving the pointer down into the submenu takes it off the About link,
   which made the gold rule slide away and back. Keep it drawn for as long
   as the submenu is open. */
.nav-links .has-sub:hover > a::after,
.nav-links .has-sub:focus-within > a::after{transform:scaleX(1)}

/* ---- the About tab names a group, not a page ---------------------------
   About Me, Contact, Reviews and FAQ sit under it, and not one of them is a
   page called About, so the tab itself no longer goes anywhere. It is a
   button rather than a link: a button still takes keyboard focus, which is
   what opens the panel for anyone not using a mouse, and a screen reader
   announces it for what it is. The rules below make it read exactly like the
   tabs on either side of it.
   ----------------------------------------------------------------------- */
.nav-links .navgroup{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(13px,1.05vw,15px);letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-secondary);
  padding:6px 0;position:relative;
  margin:0;background:none;border:0;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;white-space:nowrap;
  transition:color .35s var(--ease-soft);
}
.nav-links .navgroup::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.nav-links .navgroup:hover{color:var(--text-primary)}
.nav-links .has-sub:hover > .navgroup::after,
.nav-links .has-sub:focus-within > .navgroup::after,
.nav-links .has-sub.is-open > .navgroup::after{transform:scaleX(1)}
/* a tap opens the panel where there is no pointer to hover with */
.nav-links .has-sub.is-open .subnav{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
/* you are somewhere inside this group, though not on a page called About */
.nav-links .navgroup.is-section{
  color:var(--accent-hover);
  text-shadow:0 0 16px rgba(201,161,90,.55),0 0 34px rgba(201,161,90,.24);
}
/* The page you are on. On desktop there is also a gold rule under it, but in
   the dropdown that rule is hidden, so colour is the only cue there. Gold with
   a soft glow says "you are here" far more plainly than a brighter white did. */
/* Contact hangs under About rather than taking its own slot in the row,
   which is what let the descriptor beside the logo come back. */
.nav-links .has-sub{position:relative}
.nav-links .subnav{
  position:absolute;top:100%;left:-14px;margin:0;padding:8px 0;
  list-style:none;
  /* No backdrop blur here. The bar above already has one, and a blur nested
     inside another blur is a long-standing WebKit defect: Safari re-rasterises
     the whole bar while this panel is open, which is what made the 1px rule
     under the tab blink. The panel is 97% opaque, so the blur was costing that
     for nothing - measured, removing it moves no pixel by more than 4/255. */
  background:rgba(13,29,46,.97);
  border:1px solid rgba(201,161,90,.22);border-radius:3px;
  box-shadow:0 16px 38px rgba(5,10,18,.5);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft),visibility .28s;
  z-index:30;
}
.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-links .subnav a{display:block;padding:9px 14px;white-space:nowrap}
/* the same gold rule the tabs above it use, inset to the panel's padding
   instead of spanning the full width of the panel */
.nav-links .subnav a::after{display:block;left:14px;right:14px;bottom:5px;transform:scaleX(0)}
.nav-links .subnav a:hover::after{transform:scaleX(1)}
.nav-links .subnav a:hover{color:var(--text-primary)}
/* inside the panel Contact behaves like any other tab even on its own page:
   the same resting grey, the same cream on hover, and no rule until hovered */
.nav-links .subnav a[aria-current="page"]{
  color:var(--text-secondary);
  text-shadow:none;
}
.nav-links .subnav a[aria-current="page"]:hover{color:var(--text-primary)}
.nav-links .subnav a[aria-current="page"]::after{transform:scaleX(0)}
.nav-links .subnav a[aria-current="page"]:hover::after{transform:scaleX(1)}

.nav-links a[aria-current="page"]{
  color:var(--accent-hover);
  text-shadow:0 0 16px rgba(201,161,90,.55),0 0 34px rgba(201,161,90,.24);
}

.nav-links li:last-child{margin-left:6px}
.nav-links a.btn{
  padding:14px 24px;font-size:clamp(12.5px,1vw,14px);letter-spacing:.11em;
  color:#12202F;
}

/* the one button the whole site is pointing at */
.nav-links a.btn-book{
  position:relative;overflow:hidden;
  padding:clamp(15px,1.5vw,20px) clamp(24px,2.6vw,40px);
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.16em;
  border-radius:3px;
  box-shadow:0 10px 34px rgba(201,161,90,.34),0 0 0 1px rgba(201,161,90,.5);
  animation:bookglow 5s var(--ease-soft) -1s infinite alternate;
}
.nav-links a.btn-book::before{
  content:"";position:absolute;inset:5px;
  border:1px solid rgba(18,32,47,.42);
  border-radius:1px;pointer-events:none;
}
.nav-links a.btn-book::after{
  content:"";position:absolute;top:-20%;bottom:-20%;width:42%;left:-70%;
  /* the tab rule above sets height:1px, which with a top offset would squash
     this sweep to a hairline */
  height:auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:bookshine 6s var(--ease-soft) -2s infinite;
}
.nav-links a.btn-book:hover{transform:translateY(-2px) scale(1.02)}
@keyframes bookglow{
  from{box-shadow:0 10px 34px rgba(201,161,90,.28),0 0 0 1px rgba(201,161,90,.42)}
  to{box-shadow:0 14px 44px rgba(201,161,90,.5),0 0 0 1px rgba(201,161,90,.72)}
}
@keyframes bookshine{0%,74%{left:-70%}100%{left:130%}}
.nav-links a.btn:hover{color:#12202F}
/* buttons carry no underline - except Book Now, whose ::after is its shine
   sweep. This rule used to catch it too, so the sweep never once ran. */
.nav-links a.btn:not(.btn-book)::after{display:none}

.navtoggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--hairline);
  color:var(--text-primary);font-family:var(--mono);font-weight:600;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;
  border-radius:3px;cursor:pointer;
  transition:border-color .35s var(--ease-soft),color .35s var(--ease-soft);
}
.navtoggle:hover{border-color:var(--hairline-strong)}
.navtoggle-page{display:none}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  padding:15px 28px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;
  transition:background .4s var(--ease-soft),color .4s var(--ease-soft),
             border-color .4s var(--ease-soft),transform .4s var(--ease),
             box-shadow .4s var(--ease-soft);
}
.btn-primary{
  background:var(--accent);color:#12202F;font-weight:600;
  box-shadow:0 6px 26px rgba(201,161,90,.16);
}
.btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(201,161,90,.26);
}
.btn-ghost{
  background:transparent;color:var(--text-primary);
  border-color:var(--hairline-strong);
}
.btn-ghost:hover{
  border-color:var(--accent);color:var(--accent-hover);
  transform:translateY(-2px);
}
.btn-ink{
  background:var(--card-ink);color:var(--card);
}
.btn-ink:hover{background:#26394D;transform:translateY(-2px)}

/* every button carries the same engraved inner frame */
.btn::before{
  content:"";position:absolute;inset:4px;
  border:1px solid currentColor;opacity:.3;
  border-radius:1px;pointer-events:none;
}
.btn-primary::before{border-color:rgba(18,32,47,.42);opacity:1}
.btn-ink::before{border-color:rgba(244,239,230,.34);opacity:1}
.btn-ghost::before{border-color:rgba(201,161,90,.3);opacity:1}
.btn-quiet::before{border-color:rgba(27,42,58,.26);opacity:1}

/* and the gold ones catch the light, like the one in the header */
.btn-primary{box-shadow:0 8px 26px rgba(201,161,90,.22),0 0 0 1px rgba(201,161,90,.34)}
.btn-primary:hover{box-shadow:0 14px 40px rgba(201,161,90,.36),0 0 0 1px rgba(201,161,90,.6)}
.btn-primary::after,.btn-ink::after{
  content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-70%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:bookshine 7s var(--ease-soft) infinite;
}
.btn-ink::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.btn-primary:nth-of-type(2)::after,.btn-ink:nth-of-type(2)::after{animation-delay:-3s}

@media (prefers-reduced-motion:reduce){
  .btn-primary::after,.btn-ink::after{display:none}
}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

main{position:relative;z-index:2}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gutter)}

section{position:relative;z-index:1}
/* so an anchor link does not land behind the sticky header */
section[id],main[id],article[id]{scroll-margin-top:clamp(125px,16vh,175px)}

.sec{padding:clamp(50px,6.6vw,92px) 0}
.sec-tight{padding:clamp(36px,4.6vw,62px) 0}
/* a section that sits right under the one before it */
.sec-snug{padding:clamp(46px,5.8vw,82px) 0 clamp(36px,4.6vw,62px)}
.sec-nobottom{padding-bottom:0}

/* the about page keeps the roomier rhythm it already had */
body.roomy .sec{padding:clamp(72px,10vw,132px) 0}
body.roomy .sec-tight{padding:clamp(52px,7vw,88px) 0}

.kicker-lg{
  font-size:clamp(16px,1.6vw,22px) !important;
  letter-spacing:.07em !important;
  margin-bottom:22px !important;
}
.kicker{
  font-family:var(--mono);font-weight:600;
  font-size:13px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);
  margin:0 0 18px;display:block;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:300;margin:0;line-height:1.08}

h1{font-size:clamp(38px,6.2vw,74px);letter-spacing:-.012em}
h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.008em}
h3{font-size:clamp(22px,2.5vw,30px);line-height:1.2}
h4{font-size:clamp(18px,1.7vw,21px);line-height:1.25}

.lede{
  font-size:clamp(17px,1.4vw,20px);
  color:var(--text-secondary);
  max-width:62ch;
  line-height:1.72;
}

/* One line spacing for all running prose. Components that genuinely need
   something tighter (cards, the footer) set their own below; nothing else
   should, or the pages drift apart again. */
p{margin:0 0 1.15em;line-height:1.72}
p:last-child{margin-bottom:0}

.measure{max-width:66ch}
.measure-tight{max-width:52ch}

.rule{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--hairline-strong),transparent);
}

/* the statement block under the hero */
.statement{
  font-family:var(--display);font-weight:300;
  font-size:clamp(27px,4vw,46px);line-height:1.18;
  letter-spacing:-.01em;color:var(--text-primary);margin:0;
}
.statement-sub{
  font-size:clamp(17.5px,1.75vw,25px);color:var(--text-secondary);
  margin:16px 0 0;line-height:1.42;
}
.statement-sm{font-size:clamp(19px,1.95vw,25px);line-height:1.2}
/* "Anywhere on the body" was the strongest claim in that sentence and the
   easiest to skip, buried mid-line in secondary grey. It gets its own line,
   the brass, and a soft lift so the eye lands on it. */
/* the opening word picks up the same gold as "Anywhere on the body."
   below it, so the two land as a matched pair */
.statement .gold-word{color:var(--accent-hover)}

.statement-anywhere{
  font-family:var(--display);font-weight:500;
  font-size:clamp(24px,3vw,38px);line-height:1.2;
  letter-spacing:.005em;
  color:var(--accent-hover);
  margin:clamp(14px,1.6vw,20px) 0 0;
  text-shadow:0 0 22px rgba(201,161,90,.28);
}
/* set exactly like the paragraph above it - same face, size, weight and
   leading - so only the brass colour sets it apart */
.statement-anywhere--centred{
  text-align:center;
  margin-top:clamp(22px,2.6vw,32px);
  font-family:inherit;
  font-size:clamp(17px,1.4vw,20px);
  font-weight:400;
  line-height:1.72;
  letter-spacing:normal;
  text-shadow:none;
}
.statement-quiet{
  font-size:clamp(21px,2.6vw,30px);color:var(--text-secondary);
}

/* --------------------------------------------------------------------------
   The signature: a brass line that draws itself down the page
   -------------------------------------------------------------------------- */

.thread{
  position:absolute;left:0;transform:translateX(var(--rail,26px));
  top:0;bottom:0;width:2px;z-index:0;pointer-events:none;
}
@media (max-width:1150px){.thread{display:none}}
.thread svg{width:2px;height:100%;overflow:visible;display:block}
.thread path{
  stroke:var(--accent);stroke-width:1;fill:none;opacity:.5;
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:var(--off,1000);
}
.node{
  position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px;
  border-radius:50%;border:1px solid var(--accent);
  background:var(--canvas);
  transform:scale(0);
  transition:transform .7s var(--ease);
}
.node.lit{transform:scale(1)}
.node::after{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--accent);opacity:0;
  transition:opacity .7s var(--ease-soft) .12s;
}
.node.lit::after{opacity:1}

/* --------------------------------------------------------------------------
   The care card: warm cream paper on the navy field
   -------------------------------------------------------------------------- */

.care{
  background:var(--card);color:var(--card-ink);
  border-radius:3px;
  padding:clamp(28px,4.4vw,60px);
  box-shadow:0 30px 80px rgba(4,10,18,.44),0 2px 0 rgba(255,255,255,.06) inset;
  position:relative;
}
.care::before{
  content:"";position:absolute;top:14px;left:14px;width:26px;height:26px;
  border-top:1px solid var(--accent);border-left:1px solid var(--accent);
  opacity:.6;
}
.care::after{
  content:"";position:absolute;bottom:14px;right:14px;width:26px;height:26px;
  border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);
  opacity:.6;
}
.care h2,.care h3,.care h4{color:var(--card-ink)}
.care .kicker{color:#7E5C1F}
.care p{color:var(--card-ink-soft)}
.care strong{color:var(--card-ink);font-weight:600}
.care hr{
  height:1px;border:0;margin:clamp(26px,3.4vw,40px) 0;
  background:linear-gradient(90deg,rgba(201,161,90,.5),rgba(27,42,58,.14),transparent);
}
.care-title{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 8px;
}
.care-title h2{font-size:clamp(22px,2.5vw,30px);line-height:1.2}
.care-num{
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:#7E5C1F;
}

.checks{list-style:none;margin:0;padding:0}
.checks li{
  position:relative;padding-left:30px;margin:0 0 15px;
  color:var(--card-ink-soft);line-height:1.68;
}
.checks li:last-child{margin-bottom:0}
.checks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:12px;height:1px;background:var(--accent);
}
.checks li strong{color:var(--card-ink)}
.checks .sub{list-style:none;margin:12px 0 0;padding:0}
.checks .sub li{padding-left:26px;font-size:.95em}
.checks .sub li::before{width:8px;background:#B9A88C}

/* --------------------------------------------------------------------------
   The storefront: the product photograph leads
   -------------------------------------------------------------------------- */

.shopgrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
}
.shopcard{
  background:var(--card);color:var(--card-ink);
  border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 22px 54px rgba(4,10,18,.36);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease-soft);
}
.shopcard:hover{transform:translateY(-4px);box-shadow:0 30px 66px rgba(4,10,18,.46)}
.shopcard-shot{margin:0;background:#fff;overflow:hidden}
.shopcard-shot img{
  display:block;width:100%;aspect-ratio:1/1;
  object-fit:cover;transition:transform .8s var(--ease);
}
.shopcard:hover .shopcard-shot img{transform:scale(1.03)}
.shopcard-body{
  padding:clamp(20px,2.2vw,26px);
  display:flex;flex-direction:column;flex:1;
}
.shopcard h3{
  margin:0 0 8px;color:var(--card-ink);
  font-size:clamp(21px,2.1vw,26px);line-height:1.16;
}
.shopcard .prod-tag{margin:0 0 14px}
.shopcard p{color:var(--card-ink-soft);font-size:.93em;line-height:1.62;margin:0 0 20px}
.shopcard .btn-row{margin-top:auto;gap:10px;justify-content:center}
.shopcard .btn{padding:12px 16px}

@media (max-width:1024px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.shopgrid{grid-template-columns:1fr}}

/* the transparency note, centred under the EWG list */
.transbox{
  margin:clamp(34px,4.2vw,50px) auto 0;
  max-width:60ch;text-align:center;
}
.transbox h3{
  font-size:clamp(23px,2.6vw,32px);line-height:1.2;
  margin:0 0 18px;color:var(--text-primary);
}
.transbox p{color:var(--text-secondary);margin:0 0 14px}
.transbox p:last-child{margin-bottom:0}
@media (max-width:620px){.transbox h3 br{display:none}}

/* the refill promise, centred */
.refillnote{
  max-width:64ch;margin:clamp(34px,4.4vw,56px) auto 0;text-align:center;
}
.refillnote h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(24px,3vw,36px);line-height:1.18;
  color:var(--text-primary);margin:0 0 16px;
}
.refillnote p{color:var(--text-secondary);margin:0}

/* the EWG mark, shown at the size it appears on a box */
.ewgmark{
  display:flex;align-items:center;gap:18px;
  margin:0 0 26px;
}
.ewgmark img{
  width:clamp(150px,17vw,196px);height:auto;flex:0 0 auto;
  background:#fff;border-radius:12px;padding:14px;
  box-shadow:0 14px 34px rgba(4,10,18,.44);
}
.ewgmark span{
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  line-height:1.7;
}

/* --------------------------------------------------------------------------
   Norwex products, four compact cards
   -------------------------------------------------------------------------- */

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)}
.pcard{
  background:var(--card);color:var(--card-ink);
  border-radius:3px;padding:clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:128px 1fr;
  gap:clamp(16px,2vw,24px);align-items:start;
  box-shadow:0 22px 54px rgba(4,10,18,.36);
  position:relative;
}
.pcard::after{
  content:"";position:absolute;bottom:12px;right:12px;width:20px;height:20px;
  border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);opacity:.55;
}
.pcard-shot{
  border-radius:2px;overflow:hidden;background:#fff;
  box-shadow:0 8px 20px rgba(27,42,58,.12);
}
.pcard-shot img{display:block;width:100%;height:auto}
.pcard .care-num{display:block;margin-bottom:6px}
.pcard h3{
  margin:0 0 6px;color:var(--card-ink);
  font-size:clamp(19px,1.9vw,23px);line-height:1.18;
}
.pcard .prod-tag{margin:0 0 12px}
.pcard p{color:var(--card-ink-soft);font-size:.94em;line-height:1.62;margin:0 0 16px}
.pcard .btn{padding:11px 16px;font-size:11px;letter-spacing:.12em}
.pcard .btn-row{gap:10px}

@media (max-width:980px){.pgrid{grid-template-columns:1fr}}
@media (max-width:520px){
  .pcard{grid-template-columns:1fr}
  .pcard-shot{max-width:150px}
}

/* --------------------------------------------------------------------------
   Norwex products on the cream card
   -------------------------------------------------------------------------- */

.prod-head{
  display:grid;grid-template-columns:190px 1fr;
  gap:clamp(20px,3vw,34px);align-items:center;
}
.prod-shot{
  border-radius:3px;overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(27,42,58,.13);
}
.prod-shot img{display:block;width:100%;height:auto}

.btn-quiet{
  background:transparent;color:var(--card-ink);
  border-color:rgba(27,42,58,.34);
}
.btn-quiet:hover{
  border-color:var(--card-ink);background:rgba(27,42,58,.06);
  color:var(--card-ink);transform:translateY(-2px);
}

/* the wider range, as a plain honest list of links */
.linklist{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(27,42,58,.16)}
.linklist li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  padding:15px 0;border-bottom:1px solid rgba(27,42,58,.16);
}
.linklist .nm{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,2vw,23px);color:var(--card-ink);
  text-decoration:none;border-bottom:1px solid rgba(27,42,58,.3);
  transition:border-color .35s var(--ease-soft),color .35s var(--ease-soft);
}
.linklist .nm:hover{color:#000;border-bottom-color:#000}
.linklist .rf{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#7E5C1F;text-decoration:none;
  border:1px solid rgba(126,92,31,.4);border-radius:999px;padding:4px 11px;
  transition:background .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.linklist .rf:hover{background:rgba(126,92,31,.1);border-color:#7E5C1F}

/* the two sets, side by side */
.sets{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px);margin-top:26px}
.sets figure{margin:0}
.sets .prod-shot{margin-bottom:14px}
.sets h3{margin:0 0 6px;font-size:clamp(19px,2vw,24px);color:var(--card-ink)}

".sets p{margin:0 0 12px;color:var(--card-ink-soft);font-size:.95em}
.setbreak{display:inline}
@media (max-width:700px){.setbreak{display:none}}
.sets .setlead{
  font-family:var(--mono);font-weight:600;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#7E5C1F;
  margin:0 0 10px;
}
.sets .checks li{margin-bottom:9px;font-size:.95em}

/* a statement band sitting over a section like a header */
.statementband{
  text-align:center;
  border:1px solid var(--hairline);
  border-radius:3px;
  background:rgba(27,51,80,.42);
  padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,44px);
  margin:0 0 clamp(30px,3.8vw,48px);
}
.statementband p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(20px,2.3vw,30px);line-height:1.28;
  letter-spacing:-.005em;color:var(--text-primary);
  margin:0;max-width:44ch;margin-inline:auto;
}

/* the heading block with the reel beside it */
.withreel{
  display:grid;grid-template-columns:minmax(0,540px) auto;justify-content:start;
  gap:clamp(20px,2.6vw,38px);align-items:start;
}
.reel-copy{max-width:min(540px,100%)}
@media (max-width:900px){
  .withreel{grid-template-columns:1fr;justify-items:center}
  .withreel > div:first-child{justify-self:start}
}

/* the treatment photographs, one at a time */
.rotator{margin:0}
.rot-stage{
  /* 3:2 rather than 16:9. Most of these photographs are 3:2 or 4:3, and a
     widescreen frame was cutting a quarter off the top and bottom of them. */
  position:relative;aspect-ratio:3/2;overflow:hidden;
  border-radius:3px;border:1px solid rgba(201,161,90,.18);
  background:var(--canvas-deep);
  box-shadow:0 24px 60px rgba(4,10,18,.4);
}
.rot-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--ease-soft);
}
.rot-img.is-on{opacity:1}
/* This frame is wider than the 3:2 stage, so covering it would cut the chair
   off one edge and the lamp off the other. It is shown whole instead, with the
   stage colour filling what is left. */
.rot-img--whole{object-fit:contain}
.rot-dots{display:flex;justify-content:center;gap:10px;margin-top:18px}
.rot-dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--hairline-strong);background:transparent;
  transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft),transform .4s var(--ease);
}
.rot-dot:hover{border-color:var(--accent)}
.rot-dot.is-on{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
/* Client reviews, quoted from the booking page. Two columns that fall to one
   on a phone; the gold rule at the head of each card stands in for a quote
   mark, which the display face does not draw well at this size. */
.quotes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(28px,3.6vw,42px);
}
.quote{
  margin:0;padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(201,161,90,.22);border-radius:3px;
  position:relative;
}
.quote::before{
  content:"";position:absolute;top:0;left:clamp(22px,2.6vw,32px);
  width:34px;height:2px;background:var(--accent);opacity:.8;
}
.quote blockquote{
  margin:0;color:var(--text-primary);
  font-size:clamp(15px,1.15vw,17px);line-height:1.7;
  /* clipped to a snippet until Read more is pressed. A height rather than a
     line clamp, so the two paragraphs inside behave predictably. */
  max-height:8.5em;overflow:hidden;position:relative;
  transition:max-height .45s var(--ease-soft);
}
.quote blockquote p{margin:0}
.quote blockquote p + p{margin-top:.7em}
/* the clipped text fades out rather than stopping mid letter */
.quote:not(.is-open):not(.is-short) blockquote::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.6em;
  background:linear-gradient(180deg,rgba(27,51,80,0),var(--panel-2));
  pointer-events:none;
}
.quote.is-open blockquote{max-height:200em}
.quote-more{
  margin-top:10px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);
  border-bottom:1px solid rgba(201,161,90,.42);
  transition:border-bottom-color .3s var(--ease-soft),color .3s var(--ease-soft);
}
.quote-more:hover{color:var(--text-primary);border-bottom-color:var(--accent-hover)}
.stars{display:flex;gap:4px;margin:0 0 clamp(12px,1.5vw,16px)}
.stars svg{width:15px;height:15px;fill:var(--accent-hover);display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.quote figcaption{
  margin-top:clamp(14px,1.8vw,20px);
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.quote figcaption span{
  display:block;margin-top:4px;
  font-weight:500;font-size:10.5px;letter-spacing:.12em;
  color:var(--text-secondary);
}
@media (max-width:760px){
  .quotes{grid-template-columns:1fr}
}

.rot-note{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.08em;color:#7E8FA3;text-align:center;margin:14px 0 0;
}

/* the reel, embedded from Facebook */
.fbvid{
  margin:clamp(34px,4.4vw,56px) auto 0;
  width:fit-content;text-align:center;
}
.fbvid-frame{
  width:fit-content;margin:0 auto;
  border-radius:3px;overflow:hidden;
  border:1px solid rgba(201,161,90,.2);
  background:var(--canvas-deep);
  box-shadow:0 22px 54px rgba(4,10,18,.4);
  line-height:0;
}
.fbvid iframe{display:block;max-width:100%}
/* a video file served from the site rather than an embed */
.fbvid .demovid{display:block;max-width:100%;height:auto;background:var(--canvas-deep)}
.fbvid figcaption{
  font-family:var(--mono);font-weight:500;font-size:11.5px;
  letter-spacing:.08em;color:var(--text-secondary);
  padding-top:14px;
}

/* the product film, played only when asked for */
.vidbox{
  margin:0;border-radius:3px;overflow:hidden;
  border:1px solid rgba(201,161,90,.18);
  background:var(--canvas-deep);
}
.vidbox video{display:block;width:100%;height:auto;background:#000}
.vidbox figcaption{
  font-family:var(--mono);font-weight:500;font-size:11.5px;
  letter-spacing:.08em;color:var(--text-secondary);
  padding:14px 16px;border-top:1px solid rgba(201,161,90,.14);
}

@media (max-width:720px){
  .prod-head{grid-template-columns:1fr;gap:20px}
  .prod-shot{max-width:220px}
  .sets{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Cards on the navy
   -------------------------------------------------------------------------- */

.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

.card{
  background:linear-gradient(165deg,rgba(27,51,80,.9),rgba(19,41,63,.9));
  border:1px solid rgba(201,161,90,.14);
  border-radius:3px;
  padding:clamp(22px,2.6vw,32px);
  position:relative;overflow:hidden;
  transition:border-color .55s var(--ease-soft),transform .55s var(--ease),
             box-shadow .55s var(--ease-soft);
}
.card:hover{
  border-color:rgba(201,161,90,.4);
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(4,10,18,.4);
}
.card h3,.card h4{margin:0 0 10px}
.card h3{font-size:clamp(18.5px,1.8vw,22px);line-height:1.25}
.card p{color:var(--text-secondary);margin:0;font-size:.96em}
.card-mark{
  width:34px;height:34px;margin:0 0 18px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);border-radius:50%;
  font-family:var(--mono);font-size:12px;color:var(--accent);
}

/* one living element per section, whisper level */
.card::after{
  content:"";position:absolute;left:-40%;top:-60%;width:80%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(201,161,90,.05),transparent);
  transform:translateX(-30%);
  animation:sheen 14s var(--ease-soft) -4s infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%,72%{transform:translateX(-40%);opacity:0}
  84%{opacity:1}
  100%{transform:translateX(210%);opacity:0}
}

/* the areas we treat, as a field of tags so the breadth reads at a glance */
.areas{
  list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.areas li{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--text-primary);
  border:1px solid rgba(201,161,90,.26);
  border-radius:999px;padding:9px 16px;
  background:rgba(27,51,80,.5);
  transition:border-color .45s var(--ease-soft),background .45s var(--ease-soft);
}
.areas li:hover{border-color:rgba(201,161,90,.6);background:rgba(201,161,90,.08)}
.js .areas.stagger > *{opacity:0;transform:translateY(10px)}
.areas.stagger.in > *{opacity:1;transform:none}
/* the default stagger only covers six children; this list has twenty-one */
.areas.stagger.in > *:nth-child(n+7){transition-delay:.42s}
.areas.stagger.in > *:nth-child(n+11){transition-delay:.50s}
.areas.stagger.in > *:nth-child(n+15){transition-delay:.58s}
.areas.stagger.in > *:nth-child(n+19){transition-delay:.66s}
/* and retire every one of them, or hovers lag forever */
.areas.stagger.done > *:nth-child(n){transition-delay:0s !important}

/* five parallel reasons, as rows so each one has room to be read */
.reasons{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.reasons li{
  display:grid;grid-template-columns:3.4rem 15rem 1fr;
  gap:clamp(14px,2vw,32px);align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--hairline);
  transition:background .5s var(--ease-soft);
}
.reasons li:hover{background:rgba(201,161,90,.04)}
.reasons .n{
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.reasons h3{margin:0;font-size:clamp(20px,2.1vw,26px)}
.reasons p{margin:0;color:var(--text-secondary)}

/* the aftercare timeline: seven steps, each with room to be read */
.timeline{list-style:none;margin:0;padding:0;counter-reset:tl;border-top:1px solid var(--hairline)}
.timeline > li{
  display:grid;grid-template-columns:15rem 1fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(26px,3.2vw,40px) 0;
  border-bottom:1px solid var(--hairline);
}
.tl-mark .n{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.tl-mark h3{margin:0;font-size:clamp(20px,2.1vw,26px);line-height:1.2}
.tl-lead{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,1.9vw,24px);line-height:1.3;
  color:var(--text-primary);margin:0 0 16px;
}
.tl-body p{color:var(--text-secondary);margin:0 0 13px}
.tl-body p:last-child{margin-bottom:0}
@media (max-width:860px){
  .timeline > li{grid-template-columns:1fr;gap:14px}
}

/* --------------------------------------------------------------------------
   Entrances
   -------------------------------------------------------------------------- */

/* Everything that fades in on scroll starts hidden, which means that if this
   stylesheet loads but the script does not, three quarters of the page is
   blank. Hiding is therefore opt-in: the script writes a `js` class onto
   <html> from the page head, before anything paints. No script, no hiding. */
.js .rise{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.in{opacity:1;transform:none}

.js .stagger > *{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
/* the steps run to nine, because the longest lists on the site now have nine
   rows; without these the later ones would arrive before the middle ones */
.stagger.in > *:nth-child(1){transition-delay:.00s}
.stagger.in > *:nth-child(2){transition-delay:.05s}
.stagger.in > *:nth-child(3){transition-delay:.10s}
.stagger.in > *:nth-child(4){transition-delay:.15s}
.stagger.in > *:nth-child(5){transition-delay:.20s}
.stagger.in > *:nth-child(6){transition-delay:.25s}
.stagger.in > *:nth-child(7){transition-delay:.30s}
.stagger.in > *:nth-child(8){transition-delay:.35s}
.stagger.in > *:nth-child(9){transition-delay:.40s}
/* retire the delays once the entrance is done, at matching specificity */
.stagger.done > *:nth-child(1),.stagger.done > *:nth-child(2),
.stagger.done > *:nth-child(3),.stagger.done > *:nth-child(4),
.stagger.done > *:nth-child(5),.stagger.done > *:nth-child(6),
.stagger.done > *:nth-child(7),.stagger.done > *:nth-child(8),
.stagger.done > *:nth-child(9){transition-delay:0s !important}

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */

.phead{
  position:relative;
  padding:clamp(72px,10vw,132px) 0 clamp(44px,5.5vw,68px);
  min-height:min(62vh,500px);
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.phead h1{max-width:16ch}
.phead--wide h1{max-width:22ch}
/* "The Things People Actually Want to Ask" left "Ask" stranded on a line of
   its own at the default width. A little more room and it falls as two. */
.phead--ask .phead-in h1{max-width:min(680px,100%)}
/* A headline that must break at a chosen word rather than wherever the box
   runs out. The span is empty and block level, so it pushes what follows onto
   its own line at every width. */
.phead-in h1 .h1-br{display:block}
/* Below about 430px "Permanent Hair Removal" is wider than the screen at the
   38px floor, so the type is allowed to go under that floor - sized from the
   viewport so the line always clears the gutters, down to the narrowest
   phones. */
@media (max-width:560px){
  .phead--room .phead-in h1{font-size:min(38px,calc(10vw - 5px))}
}
.phead .lede{margin-top:22px}
.phead-art{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
/* the same treatment as the home page hero: the photograph runs at full
   strength, and only a soft pool of shade sits behind the words. */
.phead::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 128% at 20% 60%,
      rgba(19,41,63,.88) 0%,rgba(19,41,63,.79) 34%,rgba(19,41,63,.5) 58%,
      rgba(19,41,63,.14) 76%,rgba(19,41,63,0) 88%),
    linear-gradient(180deg,
      rgba(19,41,63,.44) 0%,rgba(19,41,63,.06) 24%,rgba(19,41,63,.04) 56%,
      rgba(19,41,63,.5) 88%,var(--canvas) 100%);
}
.phead-in{position:relative;z-index:2;width:100%}

/* a cut-out lineup instead of a photograph, same shading, same feel */
.phead-art.contain{
  /* The source here is a square photograph on a pale background, not a cut-out,
     so letting it run full bleed blew a 540px file up past 1400px. It sits as a
     framed inset instead: sharp, and clearly deliberate rather than stretched. */
  inset:auto;
  right:clamp(18px,4.5vw,72px);
  bottom:clamp(18px,3vw,46px);
  width:min(33%,360px);
  aspect-ratio:1/1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:4px;
  border:1px solid rgba(201,161,90,.24);
  box-shadow:0 24px 56px rgba(4,10,18,.52);
}
/* and the words stop before the bottles start */
.phead--lineup .phead-in h1,
.phead--lineup .phead-in .lede{max-width:min(520px,52%)}

@media (max-width:1024px){
  .phead-art.contain{width:min(38%,300px)}
  .phead--lineup .phead-in h1,
  .phead--lineup .phead-in .lede{max-width:min(520px,72%)}
}
@media (max-width:720px){
  /* on a phone the product cards start immediately below, so the header
     does not need a cramped thumbnail as well */
  .phead-art.contain{display:none}
  .phead--lineup .phead-in h1,
  .phead--lineup .phead-in .lede{max-width:100%}
}

/* gold over a photograph cannot reach the readability floor at this size */
.phead-in .kicker{
  display:inline-block;
  color:var(--accent-hover);
  background:rgba(8,10,18,.86);
  border:1px solid rgba(201,161,90,.32);
  border-radius:999px;
  /* the headline shrinks on a phone but this pill was pinned at 13px, so it
     grew from a fifth of the headline to a third of it. Let it ease down with
     the headline - a little smaller, not dramatically so. */
  font-size:clamp(10.5px,0.33vw + 8.2px,13px);
  padding:clamp(5px,.5vw,7px) clamp(10px,1.2vw,15px);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,10,18,.9);
}
.phead-in h1,.phead-in .lede{text-shadow:var(--tshadow)}
/* the subtitle under a page headline is set in the same type as the home page
   hero's subline, so the two read as one family - larger and more tightly set
   than the body ledes further down a page */
.phead-in .lede{
  color:#DCE5EF;max-width:min(620px,56%);
  font-size:clamp(18px,1.85vw,26px);
  line-height:1.45;
  /* the pill and headline share one left edge; the subtitle centres beneath
     them, as an accent rather than a second alignment */
  text-align:center;
}
@media (max-width:1024px){.phead-in .lede{max-width:min(620px,78%)}}
@media (max-width:820px){.phead-in .lede{max-width:100%}}

@media (max-width:820px){
  /* Services and Contact carry only a label and a headline, so a 430px floor
     left nearly 300px of empty navy. A lower floor lets every header sit
     closer to the height its own content needs. */
  .phead{min-height:min(44vh,330px)}
  /* those two have no intro paragraph at all, so they are given a shorter
     floor again - enough for the photograph to read, without the band of
     empty navy underneath the words */
  .phead--room,.phead--door{min-height:min(34vh,258px)}
  /* on a phone the text spans the full width, so the shade is a bed under it
     with a clear window near the top where the photograph reads */
  .phead::before{
    background:linear-gradient(180deg,
      rgba(19,41,63,.76) 0%,
      rgba(19,41,63,.68) 26%,
      rgba(19,41,63,.74) 52%,
      rgba(19,41,63,.86) 78%,
      rgba(19,41,63,.94) 92%,
      var(--canvas) 100%);
  }
}

/* Contact carries the least in its header, so above 820px - where the block
   above stops - the 500px floor left a tall band of empty photograph over the
   words. This runs a straight line from the shortened height at 820px to the
   full 500px at 1280px, so there is no step at either end. Services is left
   alone; it has more in its header and reads fine. */
@media (min-width:821px){
  .phead--door{min-height:min(62vh,clamp(293px,45vw - 76px,500px))}
}

/* --------------------------------------------------------------------------
   Figures
   -------------------------------------------------------------------------- */

figure{margin:0}
.shot{
  border-radius:3px;overflow:hidden;position:relative;
  border:1px solid rgba(201,161,90,.16);
  background:var(--panel);
}
.shot img{width:100%;display:block}
.shot figcaption{
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);
  padding:14px 16px;border-top:1px solid rgba(201,161,90,.14);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(19px,2vw,24px);font-weight:300;
  color:var(--text-primary);
  transition:color .4s var(--ease-soft);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-hover)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:12px;height:12px;margin-top:-6px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .5s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 26px;color:var(--text-secondary);max-width:70ch}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot{
  position:relative;z-index:2;
  background:var(--canvas-deep);
  border-top:1px solid rgba(201,161,90,.16);
  padding:clamp(30px,4vw,46px) 0 24px;
  margin-top:clamp(60px,8vw,110px);
  font-size:.88em;
}
/* Business details left, contact right. With only two blocks left, the full
   page width threw them to opposite edges with a void between. Holding them
   to a narrower band keeps them reading as one footer rather than two
   stranded corners. */
.foot-grid{
  display:grid;gap:clamp(40px,9vw,140px);
  grid-template-columns:auto auto;
  justify-content:center;
  align-items:start;
  margin:0 auto;
}
/* Both blocks share a left edge. Flush-left against flush-right left their
   facing edges ragged, which read as untidy however far apart they sat. */
.foot-contact{text-align:left}
/* the rule under "Contact Us" hugs the words rather than the column */
.foot-ul{
  display:inline-block;
  border-bottom:1px solid rgba(201,161,90,.55);
  padding-bottom:4px;
}
@media (max-width:620px){
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .foot-contact{text-align:left}
}
.foot h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
  line-height:1.4;margin:0 0 12px;
}
.foot a{color:var(--text-secondary);text-decoration:none;
  transition:color .35s var(--ease-soft)}
.foot a:hover{color:var(--accent-hover)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 9px}
.foot p{color:var(--text-secondary);font-size:.95em;line-height:1.7;margin:0 0 10px}
.foot p:last-child{margin-bottom:0}
.foot-base{
  margin-top:clamp(22px,2.8vw,32px);padding-top:16px;
  border-top:1px solid rgba(201,161,90,.12);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;
  /* was #6C7E92, which measured 4.09:1 against the footer - under the 4.5:1
     floor for text this small. The legal link lives on this line, and terms
     a visitor cannot comfortably read are not conspicuous ones. */
  color:#8095AD;
}

/* --------------------------------------------------------------------------
   Terms & Privacy: a plain reading page, no photograph and no header panel.
   The type is quieted - secondary grey, a step below body copy - so it reads
   as reference rather than competing with the pages that ask you to book.
   It is deliberately NOT footnote-sized: these are the terms someone may
   actually need to read, on a phone, and terms nobody can read are worth
   less than terms they can.
   -------------------------------------------------------------------------- */
.legal-in{max-width:min(76ch,100%)}
.legal h1{
  font-size:clamp(30px,4vw,46px);line-height:1.12;
  margin:0 0 clamp(8px,1vw,12px);
}
.legal h2{
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;
  color:var(--accent-hover);
  margin:clamp(42px,5vw,66px) 0 clamp(12px,1.4vw,18px);
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--hairline);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:clamp(26px,3vw,38px)}
.legal h3{
  font-family:var(--body);font-weight:600;
  font-size:clamp(14.5px,.6vw + 12.5px,16px);line-height:1.4;
  letter-spacing:.005em;color:var(--text-primary);
  margin:clamp(22px,2.6vw,30px) 0 5px;
}
.legal p{
  font-size:clamp(14.5px,.5vw + 12.8px,15.5px);
  line-height:1.74;color:var(--text-secondary);
  margin:0;
}
.legal .legal-date{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#6C7E92;
  margin:0 0 clamp(6px,.8vw,10px);
}

/* the legal link sitting on the footer's bottom line */
/* the one thing on that line you can click, so it sits a step brighter than
   the text around it - 7.04:1, against 5.53:1 for the line itself */
.foot-base a{
  color:#91A9C4;text-decoration:none;
  border-bottom:1px solid rgba(145,169,196,.55);
  padding-bottom:1px;
}
.foot-base a:hover,.foot-base a:focus-visible{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form{display:grid;gap:16px;max-width:560px}
.field{display:grid;gap:7px}
.field label{
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.field input,.field textarea{
  background:rgba(13,29,46,.6);
  border:1px solid rgba(201,161,90,.24);
  border-radius:2px;color:var(--text-primary);
  font-family:var(--body);font-size:16px;
  padding:13px 14px;width:100%;
  transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft);
}
.field input:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(13,29,46,.85);outline:none;
}
.field textarea{min-height:130px;resize:vertical}
.formnote{
  font-size:.9em;color:var(--text-secondary);margin:0;
}
/* --------------------------------------------------------------------------
   The one interactive moment
   -------------------------------------------------------------------------- */

/* Four blocks on a true two-by-two grid: paragraph and photograph on the top
   row, film and Synchro writing on the bottom one. Because they share grid
   rows rather than sitting in two independent stacks, the film and the writing
   beside it start on exactly the same line at every width. */
.onegrid{
  display:grid;grid-template-columns:1.05fr .95fr;
  column-gap:clamp(30px,5vw,72px);
  row-gap:clamp(24px,3vw,34px);
  align-items:start;
}
.hold{
  border:1px solid var(--hairline);border-radius:3px;
  background:linear-gradient(165deg,rgba(27,51,80,.7),rgba(19,41,63,.7));
  padding:clamp(22px,3vw,34px);text-align:center;
}
.hold-btn{
  background:none;border:0;padding:0;cursor:pointer;display:block;
  margin:0 auto;touch-action:none;-webkit-user-select:none;user-select:none;
}
.hold-art{
  display:block;width:auto;height:clamp(176px,25vw,236px);
  overflow:visible;
}
.hold .probe{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.hold .spark{
  opacity:calc(var(--p,0)*var(--p,0));
  filter:drop-shadow(0 0 10px rgba(201,161,90,.85));
}
.hold-readout{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  margin:18px 0 6px;
}
.hold-help{
  font-size:.86em;color:var(--text-secondary);margin:0;
}
.hold.done .hold-btn{cursor:default}
.hold.done .hold-readout{color:var(--accent-hover)}

/* the reveal used to reserve its full height from the first paint, which left
   321px of empty navy under the widget for text most visitors never trigger.
   It now collapses to nothing and opens smoothly instead. */
.hold-reveal{display:grid;transition:grid-template-rows .7s var(--ease)}
.js .hold-reveal{grid-template-rows:0fr}
.hold-reveal .reveal-in{overflow:hidden;min-height:0}
.hold-reveal.in{grid-template-rows:1fr}
.js .hold-reveal p{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  color:var(--text-secondary);margin:0 0 12px;
}
.hold-reveal p:first-child{margin-top:clamp(18px,2.2vw,26px)}
.hold-reveal p:last-child{margin-bottom:0}
.hold-reveal p strong{color:var(--text-primary)}
.hold-reveal.in p{opacity:1;transform:none}
.hold-reveal.in p:nth-child(1){transition-delay:.05s}
.hold-reveal.in p:nth-child(2){transition-delay:.28s}
.hold-reveal.in p:nth-child(3){transition-delay:.51s}

/* --------------------------------------------------------------------------
   Electrolysis and laser
   -------------------------------------------------------------------------- */

.vs{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(16px,2.4vw,28px);align-items:start}
.vs-col{border-radius:3px;padding:clamp(24px,3vw,40px)}
.vs-col h3{margin:0 0 20px}
.vs-quiet{
  border:1px solid rgba(169,185,203,.16);
  background:rgba(27,51,80,.35);
  margin-top:clamp(14px,2.4vw,34px);
}
.vs-quiet h3{color:var(--text-secondary)}
.vs-loud{
  border:1px solid rgba(201,161,90,.4);
  background:linear-gradient(165deg,rgba(24,48,74,.85),rgba(19,41,63,.9));
  box-shadow:0 24px 60px rgba(4,10,18,.36);
}
.vs-list{list-style:none;margin:0;padding:0}
.vs-list li{
  position:relative;padding-left:26px;margin:0 0 13px;
  color:var(--text-secondary);line-height:1.6;
}
.vs-list li:last-child{margin-bottom:0}
.vs-list li::before{
  content:"";position:absolute;left:0;top:.66em;width:11px;height:1px;
  background:rgba(169,185,203,.5);
}
.vs-loud .vs-list li{color:var(--text-primary)}
.vs-loud .vs-list li::before{background:var(--accent)}

/* --------------------------------------------------------------------------
   The room
   -------------------------------------------------------------------------- */

.roomgrid{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:clamp(16px,2.4vw,28px);align-items:start;
}
.roomshot-lg{grid-column:1;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column}
.roomshot-lg img{flex:1;min-height:0;object-fit:cover;width:100%}
.roomgrid > div{grid-column:2;grid-row:1;padding:clamp(4px,1vw,14px) 0}
.roomgrid > figure:nth-of-type(2){grid-column:2;grid-row:2}
.roomgrid > figure:nth-of-type(3){grid-column:1 / -1;grid-row:3}

/* --------------------------------------------------------------------------
   FAQ, close, contact
   -------------------------------------------------------------------------- */

.faqgrid{
  display:grid;grid-template-columns:.62fr 1fr;
  gap:clamp(28px,4.6vw,64px);align-items:start;
}
.faqgrid > div:first-child{position:sticky;top:110px}

.close-wide{max-width:min(980px,100%) !important}
.oneline{white-space:nowrap}
@media (max-width:900px){.oneline{white-space:normal}}

.close{
  text-align:center;max-width:62ch;margin:0 auto;
  padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--hairline-strong);
}
.close .btn-row{justify-content:center}
.close .lede{margin-left:auto;margin-right:auto}
.close .lede.lede-lg{font-size:clamp(17.5px,1.75vw,25px);line-height:1.45;max-width:44ch}
/* The contact closing holds its heading on one line. Below 981px it already
   does; above that the heading goes on growing to 52px inside a 62ch box and
   "visit." dropped to a line of its own, so the block is given the 763px the
   heading needs at full size. */
@media (min-width:981px){
  .close--wide{max-width:min(800px,100%)}
}

.contactgrid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.6vw,64px);align-items:start;
}
/* The doorway photograph is a tall 3:4 portrait. Left to fill its column it
   stood 656px on a desktop and, once the grid stacks, nearly a whole tablet
   screen. Hold it to a sensible width at every size. */
.contactgrid .shot{max-width:430px}
@media (max-width:980px){
  .contactgrid .shot{max-width:min(360px,78%);margin-left:auto;margin-right:auto}
}

/* --------------------------------------------------------------------------
   Inner page components
   -------------------------------------------------------------------------- */

.wrap-cards{max-width:900px;margin:0 auto;padding:0 var(--gutter)}

.planrow{
  display:grid;grid-template-columns:.8fr 1fr;
  gap:clamp(26px,4.4vw,64px);align-items:start;
}
.machinegrid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,56px);align-items:start;
}

.readout{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin:0 0 16px;
}
.readout span{
  font-family:var(--display);font-weight:300;
  font-size:clamp(34px,4.6vw,52px);letter-spacing:0;
  color:var(--text-primary);line-height:1;
}

.mehead{
  display:grid;grid-template-columns:270px 1fr;
  gap:clamp(24px,3.4vw,46px);align-items:center;
}
.mehead h1{
  font-size:clamp(30px,4.6vw,56px);
  text-wrap:balance;white-space:nowrap;
}
@media (max-width:1080px){
  .mehead{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
  .mehead .portrait{max-width:230px}
}
.portrait{
  border-radius:3px;overflow:hidden;
  border:1px solid rgba(201,161,90,.3);
  box-shadow:0 26px 60px rgba(4,10,18,.44);
}
.portrait img{width:100%;display:block}

.story{max-width:76ch;margin:0 auto}
.story p{font-size:1.02em}
.pull{
  margin:clamp(26px,3.4vw,42px) 0;padding:2px 0 2px 24px;
  border-left:2px solid var(--accent);
  font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.5vw,30px);line-height:1.3;
  color:var(--card-ink);
}

.price{
  padding:clamp(30px,4.4vw,56px);
  max-width:820px;margin:0 auto;
}
.price-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;
}
.price-head h2{margin:0}
.price-meta{
  font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-secondary);margin:12px 0 0;
}
.price-tag{
  font-family:var(--display);font-weight:300;
  font-size:clamp(36px,5.4vw,58px);color:var(--accent);
  margin:0;line-height:1;
}

.ewggrid{
  display:grid;grid-template-columns:.6fr 1fr;
  gap:clamp(26px,4.4vw,64px);align-items:start;
}
.ewggrid > div:first-child{position:sticky;top:110px}

.checks-dark li{color:var(--text-secondary)}
.checks-dark li strong{color:var(--text-primary)}
.checks-dark li::before{background:var(--accent)}

.prod-tag{
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#7E5C1F;margin:12px 0 0;
}

/* --------------------------------------------------------------------------
   The rate ladder
   -------------------------------------------------------------------------- */

.ratesgrid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4.4vw,64px);align-items:start;
}
/* wide: copy top left, table down the right, photograph under the copy */
@media (min-width:1000px){
  .ratesgrid > :first-child{grid-column:1;grid-row:1}
  .ratesgrid .ratetable{grid-column:2;grid-row:1 / span 2}
}
/* sized to hold "You book time, not areas." on a single line at every width */
.ratesgrid h2{font-size:clamp(30px,4.2vw,47px)}
.ratewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rates{
  width:100%;border-collapse:collapse;
  font-variant-numeric:tabular-nums;
  min-width:340px;
}
.rates th,.rates td{
  text-align:left;padding:15px 14px;
  border-bottom:1px solid rgba(201,161,90,.16);
}
.rates thead th{
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
  border-bottom-color:var(--hairline-strong);
}
.rates tbody th{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,2vw,24px);color:var(--text-primary);
}
.rates tbody td{color:var(--text-secondary);font-size:1.02em}
.rates tbody td:nth-child(2){color:var(--text-primary);font-weight:600}
.rates tbody tr:last-child th,.rates tbody tr:last-child td{border-bottom:0}
.rates tr.best th,.rates tr.best td{background:rgba(201,161,90,.07)}
.rates tr.best td:nth-child(2){color:var(--accent)}
.ratenote{
  margin-top:20px;color:var(--text-secondary);font-size:.96em;
  border-left:2px solid var(--accent);padding-left:16px;
}
.ratenote strong{color:var(--text-primary)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:980px){
  .planrow,.machinegrid,.ewggrid,.ratesgrid{grid-template-columns:1fr}
  .ewggrid > div:first-child{position:static}
  .onegrid,.vs,.faqgrid,.contactgrid{grid-template-columns:1fr}
  /* stacked into one column, the film must stay next to the writing that
     explains it, so the photograph drops below both */
  .onegrid .txshot--lead{order:1}
  .faqgrid > div:first-child{position:static}
  .vs-quiet{margin-top:0}
  .roomgrid{grid-template-columns:1fr}
  .roomshot-lg,.roomgrid > div,
  .roomgrid > figure:nth-of-type(2),
  .roomgrid > figure:nth-of-type(3){grid-column:1;grid-row:auto}
}

@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:980px){
  .navtoggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    line-height:1.1;padding-top:8px;padding-bottom:8px;
  }
  .navtoggle-page{
    display:block;margin-top:3px;
    font-size:9px;letter-spacing:.13em;
    color:var(--accent-hover);
  }
  /* stacked, it is just an indented row under About */
  .nav-links .subnav{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;backdrop-filter:none;
    padding:0;min-width:0;
  }
  .nav-links .subnav li{border-bottom:0}
  .nav-links .subnav a{padding:12px 0 12px 20px;font-size:11.5px;opacity:.9}
  .nav-links .subnav a::after{display:none}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(13,29,46,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--hairline);
    padding:8px var(--gutter) 20px;
  }
  .nav-links.open{display:flex}
  /* The dropdown is a fixed 444px tall and absolutely positioned, so on a short
     window (landscape phone, small desktop window) its lower entries fell below
     the fold with no way to reach them - the page behind cannot scroll them into
     view because the nav is sticky. Bound it to the space actually available and
     let it scroll itself. */
  .nav-links.open{
    max-height:calc(100vh - var(--navh, 64px) - 12px);
    max-height:calc(100dvh - var(--navh, 64px) - 12px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links li{width:100%;border-bottom:1px solid rgba(201,161,90,.08)}
  .nav-links li:last-child{border-bottom:0;padding-top:14px}
  .nav-links a{display:block;padding:14px 0;font-size:12.5px}
  .nav-links a::after{display:none}
  /* stacked, the group name is a heading over its indented rows rather than
     a control - the rows are already on screen, so there is nothing to open */
  .nav-links .navgroup{
    display:block;width:100%;text-align:left;
    padding:14px 0;font-size:12.5px;cursor:default;
  }
  .nav-links .navgroup::after{display:none}
  /* Stacked in the menu the submenu is a plain indented row, not the hover
     dropdown the quieting rule further up was written for, so the page you
     are actually on reads gold here the way the top level entries do. */
  .nav-links .subnav a[aria-current="page"],
  .nav-links .subnav a.is-here,
  .nav-links a.is-here{
    color:var(--accent-hover);
    text-shadow:0 0 16px rgba(201,161,90,.55),0 0 34px rgba(201,161,90,.24);
  }
  .nav-links a.is-away[aria-current="page"]{
    color:var(--text-secondary);
    text-shadow:none;
  }
  /* the Book Now button was a 129px box floating at the left of a 390px menu -
     neither inline nor full width, which read as oddly oversized. It now spans
     the menu with its label centred. */
  .nav-links a.btn-book{
    display:flex;align-items:center;justify-content:center;
    width:100%;box-sizing:border-box;
    text-align:center;
    padding:14px 18px;
    margin-top:4px;
  }
}

@media (max-width:860px){
  .reasons li{grid-template-columns:2.8rem 1fr;row-gap:6px}
  .reasons li > p,.reasons li > .step-body{grid-column:2}
}

@media (max-width:720px){
  .grid-2,.grid-3,.grid-5{grid-template-columns:1fr}
  .mehead{grid-template-columns:1fr}
  .portrait{max-width:230px}
  .foot-grid{grid-template-columns:1fr}
  .thread{display:none}
}

@media (pointer:coarse){
  .btn{min-height:44px}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{min-height:44px}

  /* The slideshow dots are 9px of ink. Keep them that size - they are a quiet
     indicator, not a control that should shout - but give each an invisible
     44px pad so a fingertip can actually land on one. */
  .rot-dot{position:relative}
  .rot-dot::before{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }
  .rot-dots{gap:10px}

  /* Footer links sat at 19-20px, the biggest group of fiddly targets on the
     site. Padding opens them up without moving anything visually apart. */
  .foot li{margin:0}
  .foot ul a{display:block;padding:12px 0;min-height:44px;box-sizing:border-box}
  .foot-contact a,.foot p a{display:inline-block;padding:10px 0;min-height:44px}

  .navtoggle{min-height:44px}
}

/* The touch rule above gives every nav link a 44px height by making it
   inline-flex. In the stacked phone menu that also shrinks each link to the
   width of its own word: "Before" became 52px of a 350px row, and a tap
   anywhere else in the row did nothing. Give the rows back their full width.
   This only shows up with a real finger - a narrowed desktop window never
   matches pointer:coarse, which is why it survived so long. */
@media (max-width:980px){
  .nav-links > li > a,
  .nav-links .subnav a{
    display:flex;align-items:center;
    width:100%;box-sizing:border-box;
    min-height:44px;
  }
}

@media (max-height:560px){
  .cue{display:none}
}

/* --------------------------------------------------------------------------
   Reduced motion, honored completely
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .rise,.stagger > *{opacity:1;transform:none}
  .node{transform:scale(1)}
  .node::after{opacity:1}
  .thread path{stroke-dashoffset:0 !important}
  .glow::before,.glow::after{animation:none}
}

body.rm .rise,body.rm .stagger > *{opacity:1;transform:none}
body.rm .node{transform:scale(1)}
body.rm .node::after{opacity:1}
body.rm .thread path{stroke-dashoffset:0 !important}
body.rm .glow::before,body.rm .glow::after{animation:none}

/* --------------------------------------------------------------------------
   The guide list: the before and aftercare instructions, on the navy rather
   than in a stack of cream cards. Number, heading, and body across one row,
   so a long set of instructions reads short.
   -------------------------------------------------------------------------- */
.guide{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.guide > li{
  display:grid;grid-template-columns:3.4rem 17rem 1fr;
  gap:clamp(14px,2vw,32px);align-items:start;
  padding:clamp(22px,2.8vw,34px) 0;
  border-bottom:1px solid var(--hairline);
  transition:background .5s var(--ease-soft);
}
.guide > li:hover{background:rgba(201,161,90,.045)}
.guide .n{align-self:start}
/* an inline link inside a step, styled like the ones in the FAQ answers so a
   link always looks the same wherever it appears in running text */
.guide .body a{
  color:var(--accent-hover);font-weight:600;
  text-decoration:none;
  border-bottom:2px solid rgba(201,161,90,.55);
  padding:0 2px 1px;border-radius:2px;
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft);
}
.guide .body a:hover,.guide .body a:focus-visible{
  background:rgba(201,161,90,.16);
  border-bottom-color:var(--accent-hover);
}
.guide h2{
  margin:0;
  /* set to read exactly like the bold lead-ins inside the bullets
     ("How to Hydrate:", "Avoid Alcohol:") - same face, size, weight
     and colour, so every label on this page matches. */
  font-family:var(--body);
  font-weight:700;
  font-size:inherit;
  line-height:1.68;
  letter-spacing:0;
  color:var(--text-primary);
}
.guide .body > p{margin:0 0 13px;color:var(--text-secondary)}
.guide .body > p:last-child{margin-bottom:0}
.guide .tip{
  margin-top:16px;padding-left:15px;border-left:2px solid var(--accent);
  font-size:.95em;
}
.guide .tip b{color:var(--text-primary);font-weight:600}
@media (max-width:900px){
  .guide > li{grid-template-columns:3.4rem 1fr;gap:6px 14px}
  .guide .body{grid-column:2;margin-top:12px}
}


/* --------------------------------------------------------------------------
   A raised note. Lighter than the canvas rather than cream, so a closing
   paragraph still lifts off the navy without becoming a white box.
   -------------------------------------------------------------------------- */
.panelnote{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(201,161,90,.26);
  border-radius:3px;
  padding:clamp(24px,3.4vw,40px) clamp(24px,3.4vw,48px);
  text-align:center;
  box-shadow:0 18px 44px rgba(4,10,18,.28);
  max-width:min(900px,100%);margin-left:auto;margin-right:auto;
}
.panelnote p{margin:0;color:var(--text-primary);line-height:1.7}
.panelnote p + p{margin-top:14px}
.panelnote strong{color:var(--accent-hover);font-weight:600}
/* buttons keep their own colours; this gold was landing on the primary
   button as gold text on a gold fill, which made it unreadable */
.panelnote a:not(.btn){color:var(--accent-hover)}

/* --------------------------------------------------------------------------
   Slideshow arrows, so the photographs can be stepped through by hand
   -------------------------------------------------------------------------- */
.roomcopy{max-width:min(720px,100%)}
.rot-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;z-index:3;
  background:rgba(13,29,46,.72);
  border:1px solid rgba(201,161,90,.42);
  color:var(--accent-hover);cursor:pointer;padding:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft),transform .3s var(--ease-soft);
}
.rot-arrow:hover{background:rgba(13,29,46,.94);border-color:var(--accent)}
.rot-arrow:active{transform:translateY(-50%) scale(.94)}
.rot-arrow svg{width:19px;height:19px;display:block}
.rot-prev{left:clamp(10px,1.6vw,20px)}
.rot-next{right:clamp(10px,1.6vw,20px)}
@media (max-width:600px){
  .rot-arrow{width:44px;height:44px}
  .rot-arrow svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){.rot-arrow{transition:none}}

/* sized to hold "Your journey should feel as individual as you are." on one line */
.planhead{font-size:clamp(24px,3.1vw,40px)}



/* the frequency reading set inline, at the end of a heading */
.readout-in{
  display:inline;white-space:nowrap;
  font-family:var(--mono);font-size:.30em;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);
}
.readout-in b{
  font-family:var(--display);font-weight:300;font-size:2.6em;
  letter-spacing:0;color:var(--text-primary);
}

/* the Apilus photograph, centred between the copy above and the cards below */
.machineshot{
  max-width:min(820px,100%);
  margin:clamp(32px,4.2vw,56px) auto 0;
}
/* a second heading in the same section, a step down from the one that leads it */
.subhead{
  font-size:clamp(23px,2.9vw,38px);
  max-width:min(34ch,100%);margin:clamp(40px,5.2vw,74px) auto 0;
}

/* This header carries the brightest photograph on the site and a headline that
   runs wider than the narrow ones, so the pool of shade reaches further across
   than the default. Same shape, wider spread. */
/* the Before and Aftercare banners: keep the dark side of the frame under the words */
.phead--water .phead-art{background-position:64% 50%}
.phead--aloe .phead-art{background-position:62% 50%}
@media (max-width:700px){
  .phead--water .phead-art{background-position:72% 44%}
  .phead--aloe .phead-art{background-position:70% 46%}
  .phead.phead--water::before,.phead.phead--aloe::before{
    background:
      radial-gradient(ellipse 130% 120% at 30% 56%,
        rgba(19,41,63,.94) 0%,rgba(19,41,63,.88) 46%,rgba(19,41,63,.62) 70%,
        rgba(19,41,63,.24) 86%,rgba(19,41,63,0) 97%),
      linear-gradient(180deg,
        rgba(19,41,63,.50) 0%,rgba(19,41,63,.10) 22%,rgba(19,41,63,.30) 58%,
        rgba(19,41,63,.72) 88%,var(--canvas) 100%);
  }
}
/* the About banner. Its title is centred, so the pool of shade is centred too
   rather than sitting on the left like the other photo headers. */
.phead--journey .phead-art{background-position:50% 30%}
.phead.phead--journey::before{
  background:
    radial-gradient(ellipse 82% 124% at 50% 50%,
      rgba(19,41,63,.88) 0%,rgba(19,41,63,.76) 38%,rgba(19,41,63,.44) 64%,
      rgba(19,41,63,.12) 84%,rgba(19,41,63,0) 95%),
    linear-gradient(180deg,
      rgba(19,41,63,.52) 0%,rgba(19,41,63,.10) 26%,rgba(19,41,63,.22) 60%,
      rgba(19,41,63,.72) 90%,var(--canvas) 100%);
}
@media (max-width:700px){
  .phead--journey .phead-art{background-position:88% 24%}
  .phead.phead--journey::before{
    background:
      radial-gradient(ellipse 130% 118% at 50% 50%,
        rgba(19,41,63,.92) 0%,rgba(19,41,63,.84) 44%,rgba(19,41,63,.56) 70%,
        rgba(19,41,63,.20) 88%,rgba(19,41,63,0) 97%),
      linear-gradient(180deg,
        rgba(19,41,63,.56) 0%,rgba(19,41,63,.16) 24%,rgba(19,41,63,.30) 60%,
        rgba(19,41,63,.76) 90%,var(--canvas) 100%);
  }
}
.phead--photo::before{
  background:
    radial-gradient(ellipse 96% 130% at 26% 58%,
      rgba(19,41,63,.90) 0%,rgba(19,41,63,.84) 40%,rgba(19,41,63,.56) 64%,
      rgba(19,41,63,.18) 82%,rgba(19,41,63,0) 95%),
    linear-gradient(180deg,
      rgba(19,41,63,.44) 0%,rgba(19,41,63,.06) 24%,rgba(19,41,63,.04) 56%,
      rgba(19,41,63,.5) 88%,var(--canvas) 100%);
}

/* --------------------------------------------------------------------------
   The about page: a title banner, then the portrait beside the story
   -------------------------------------------------------------------------- */
.phead--title{align-items:center;min-height:min(42vh,340px)}
.phead--title .phead-in{text-align:center}
.phead--title h1{max-width:100%;margin:0 auto}

.biogrid{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(28px,4.4vw,64px);align-items:start;
}
.biogrid .portrait{position:sticky;top:clamp(125px,16vh,175px)}
.bio-name{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.1}
.bio-role{
  margin:10px 0 0;font-family:var(--mono);font-weight:600;
  font-size:13px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);
}
.bio-quote{
  margin-top:clamp(24px,3vw,34px);
  /* .pull was written for dark ink on the cream card; on the navy it needs
     the cream text colour instead or it all but disappears */
  color:var(--text-primary);
}
.biogrid .lede{max-width:none;margin-top:18px}
.biogrid p{color:var(--text-secondary)}
@media (max-width:860px){
  .biogrid{grid-template-columns:1fr}
  .biogrid .portrait{position:static;max-width:min(420px,100%);margin:0 auto}
}

/* --------------------------------------------------------------------------
   Why choose electrolysis: a centred lead-in above the five reasons
   -------------------------------------------------------------------------- */
/* the problem, said plainly, immediately above its answer. It used to open the
   claim block under the hero, two sections away from what answers it. */
.whyhook{text-align:center;margin:0 0 clamp(16px,1.9vw,24px)}
/* The problem and its answer are one thought, so the four lines are set as a
   single block that steps down: white statement, grey aside, brass answer,
   grey detail. Two lines at the same size read as two separate headings,
   which is what the 46px white heading and the 46px white hook were doing.
   Scoped to a heading that actually follows a hook - .whyhead heads five
   other sections that must stay exactly as they are. */
.whyhook + .whyintro .whyhead{
  font-size:clamp(23px,3vw,38px);
  color:var(--accent-hover);
  text-shadow:0 0 22px rgba(201,161,90,.28);
}
.whyhook + .whyintro .whyclaim{margin-top:clamp(14px,1.6vw,20px)}
.whyintro{text-align:center}
.whyhead{
  font-size:clamp(26px,3.5vw,46px);line-height:1.12;
  max-width:min(900px,100%);margin:0 auto;
}
/* the full-size title the home page uses for its main section headings;
   .whyhead on its own caps at 46px, which reads as a step down from them */
.whyhead--grand{font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.whyclaim{
  font-size:clamp(17.5px,1.75vw,25px);line-height:1.45;
  color:var(--text-secondary);
  max-width:min(70ch,100%);margin:clamp(20px,2.6vw,30px) auto 0;
}
.whylead{
  display:block;margin:clamp(30px,3.8vw,46px) 0 0;
  /* on the plain background, so it takes the standard gold like every
     other kicker that is not fighting a photograph */
  color:var(--accent);
}

/* a video inside an answer, and the medical note under the list */
.ytwrap{
  position:relative;aspect-ratio:16/9;width:100%;
  margin:clamp(20px,2.6vw,28px) 0 4px;
  border-radius:3px;overflow:hidden;
  border:1px solid rgba(201,161,90,.22);
  background:var(--canvas-deep);
}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.faq-note{
  margin:clamp(26px,3.4vw,38px) 0 0;
  font-size:.86em;line-height:1.7;color:var(--text-secondary);
  opacity:.8;max-width:none;text-align:center;
}
.faq .ans p + p{margin-top:14px}

/* a list inside an answer. .checks cannot be used here: it is coloured for the
   cream card and would be almost invisible on the navy. */
.faq .ans ul{list-style:none;margin:14px 0 0;padding:0}
.faq .ans li{position:relative;padding-left:26px;margin:0 0 10px;line-height:1.7}
.faq .ans li:last-child{margin-bottom:0}
.faq .ans li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:11px;height:1px;background:var(--accent);
}

/* a label inside an answer, and links that read as links rather than as
   underlined prose */
.ans-sub{
  color:var(--text-primary);font-weight:600;
  margin:22px 0 0;
}
.faq .ans a{
  color:var(--accent-hover);font-weight:600;
  text-decoration:none;
  border-bottom:2px solid rgba(201,161,90,.55);
  padding:0 2px 1px;border-radius:2px;
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft);
}
.faq .ans a:hover,.faq .ans a:focus-visible{
  background:rgba(201,161,90,.16);
  border-bottom-color:var(--accent-hover);
}

/* the consultation card leads the services page, so it sits close to the
   header above it and to the rates below rather than floating between them */
.sec-hug{padding:clamp(18px,2.2vw,30px) 0}
.sec-hug + .sec{padding-top:clamp(28px,3.4vw,46px)}

/* emphasis that matches the price column in the rate table: cream, semibold */
.panelnote strong.like-price{color:var(--text-primary);font-weight:600}



/* The consultation heading only fills the left of its row, and the rates table
   above ends short, leaving a tall empty column on the right. The clip is
   lifted into that gap so it bridges the two sections and costs no layout
   height, which is what was pushing the heading away from its steps. */
.steps-wrap{position:relative}
.demo-float{
  /* anchored to the top edge of the steps, not to a fixed offset, so no
     amount of rewrapping above it can push the clip into the list */
  position:absolute;z-index:2;margin:0;
  right:0;bottom:calc(100% + 20px);
  width:clamp(210px,19vw,260px);
}
.demo-float .fbvid-frame{width:100%}
.demo-float .demovid{width:100%;height:auto;display:block}
/* once the column is too narrow to hold it, it rejoins the flow under the intro */
@media (max-width:1100px){
  .demo-float{
    position:static;width:100%;max-width:360px;
    margin:clamp(22px,3vw,32px) 0 0;
  }
}

/* the press and hold moment sits between two long sections; its own padding
   plus theirs was stacking up to 184px of navy on each side */
#one{padding-top:clamp(34px,4.4vw,58px);padding-bottom:clamp(34px,4.4vw,58px)}
.sec-trim-bottom{padding-bottom:clamp(38px,4.8vw,62px)}
.sec-trim-top{padding-top:clamp(38px,4.8vw,62px)}
/* closer still: for a section following one that already ends tight */
.sec-trim-top--close{padding-top:clamp(20px,2.6vw,34px)}

/* ------------------------------------------------------------------
   Header scrims, tuned per photograph. The darker images (water, aloe,
   bridge) need far less shade than the bright ones (machine, room), so
   each carries its own rather than sharing one compromise.
   ------------------------------------------------------------------ */
.phead.phead--water::before,.phead.phead--aloe::before{
  background:radial-gradient(ellipse 96% 130% at 26% 58%,rgba(19,41,63,0.648) 0%,rgba(19,41,63,0.605) 40%,rgba(19,41,63,0.403) 64%,rgba(19,41,63,0.130) 82%,rgba(19,41,63,0) 95%),linear-gradient(180deg,rgba(19,41,63,0.317) 0%,rgba(19,41,63,0.043) 24%,rgba(19,41,63,0.029) 56%,rgba(19,41,63,0.400) 88%,var(--canvas) 100%);
}
.phead.phead--journey::before{
  background:radial-gradient(ellipse 82% 124% at 50% 50%,rgba(19,41,63,0.484) 0%,rgba(19,41,63,0.418) 38%,rgba(19,41,63,0.242) 64%,rgba(19,41,63,0.066) 84%,rgba(19,41,63,0) 95%),linear-gradient(180deg,rgba(19,41,63,0.242) 0%,rgba(19,41,63,0.033) 24%,rgba(19,41,63,0.022) 56%,rgba(19,41,63,0.400) 88%,var(--canvas) 100%);
}
@media (max-width:700px){
  /* aftercare's phone crop needs the full shade; measured 0.64x of the floor
     at the lighter setting, so it is restated here rather than inherited */
  .phead.phead--aloe::before{
    background:radial-gradient(ellipse 130% 120% at 30% 56%,rgba(19,41,63,0.920) 0%,rgba(19,41,63,0.840) 44%,rgba(19,41,63,0.560) 70%,rgba(19,41,63,0.200) 88%,rgba(19,41,63,0) 97%),linear-gradient(180deg,rgba(19,41,63,0.440) 0%,rgba(19,41,63,0.060) 24%,rgba(19,41,63,0.040) 56%,rgba(19,41,63,0.500) 88%,var(--canvas) 100%);
  }
  /* prepare can stay light on a phone */
  .phead.phead--water::before{
    background:radial-gradient(ellipse 130% 120% at 30% 56%,rgba(19,41,63,0.662) 0%,rgba(19,41,63,0.605) 44%,rgba(19,41,63,0.403) 70%,rgba(19,41,63,0.144) 88%,rgba(19,41,63,0) 97%),linear-gradient(180deg,rgba(19,41,63,0.317) 0%,rgba(19,41,63,0.043) 24%,rgba(19,41,63,0.029) 56%,rgba(19,41,63,0.400) 88%,var(--canvas) 100%);
  }
}

/* The machine and room photographs were far brighter than the rest of the site,
   so they carried a heavy scrim just to keep the words readable. Both are now
   graded down into the palette (originals kept in not-for-upload/), which let the
   shade come back off. Skin Care still uses the base .phead rule. */
.phead.phead--machine::before{
  /* a tight pool of shade behind the words only; the rest of the photograph
     runs close to full strength */
  background:
    radial-gradient(ellipse 62% 112% at 21% 56%,
      rgba(19,41,63,.95) 0%,rgba(19,41,63,.90) 30%,rgba(19,41,63,.62) 52%,
      rgba(19,41,63,.22) 74%,rgba(19,41,63,0) 88%),
    linear-gradient(180deg,rgba(19,41,63,.34) 0%,rgba(19,41,63,.04) 22%,
      rgba(19,41,63,.04) 60%,rgba(19,41,63,.46) 90%,var(--canvas) 100%);
}
.phead.phead--room::before{
  background:
    radial-gradient(ellipse 60% 112% at 19% 58%,
      rgba(19,41,63,.95) 0%,rgba(19,41,63,.90) 30%,rgba(19,41,63,.62) 52%,
      rgba(19,41,63,.22) 74%,rgba(19,41,63,0) 88%),
    linear-gradient(180deg,rgba(19,41,63,.34) 0%,rgba(19,41,63,.04) 22%,
      rgba(19,41,63,.04) 60%,rgba(19,41,63,.46) 90%,var(--canvas) 100%);
}
/* the doorway photograph: bright stucco on the right, so the pool sits left */
.phead.phead--door::before{
  /* the sunlit foliage on the right of this photograph reaches further across
     than the other headers, so the pool is wider and holds its density longer */
  background:
    radial-gradient(ellipse 88% 118% at 24% 56%,
      rgba(19,41,63,.96) 0%,rgba(19,41,63,.93) 38%,rgba(19,41,63,.80) 58%,
      rgba(19,41,63,.42) 78%,rgba(19,41,63,0) 94%),
    linear-gradient(180deg,rgba(19,41,63,.34) 0%,rgba(19,41,63,.04) 22%,
      rgba(19,41,63,.04) 60%,rgba(19,41,63,.46) 90%,var(--canvas) 100%);
}

/* the skin care intro sits directly above the film, close enough that both
   land in the same glance */
.vid-intro{margin:0 0 clamp(13px,1.6vw,20px);text-align:center}
/* .lede caps itself at 62ch; here it should track the width of the film below it */
.vid-intro .lede{margin:0;max-width:none}
.vid-intro .lede + .lede{margin-top:clamp(10px,1.2vw,15px)}

@media (max-width:820px){
  /* On a phone the words span the full width, so a pool tucked to one side
     cannot cover them. Shade sits over the text block and clears toward the
     bottom, which is the only place the picture can still read. */
  .phead.phead--machine::before{
    background:
      radial-gradient(ellipse 165% 86% at 42% 34%,
        rgba(19,41,63,.96) 0%,rgba(19,41,63,.93) 42%,rgba(19,41,63,.72) 66%,
        rgba(19,41,63,.30) 84%,rgba(19,41,63,0) 97%),
      linear-gradient(180deg,rgba(19,41,63,.50) 0%,rgba(19,41,63,.16) 28%,
        rgba(19,41,63,.06) 72%,rgba(19,41,63,.44) 92%,var(--canvas) 100%);
  }
  /* Services and Contact: the words sit low and there is no intro paragraph,
     so the shade is a bed at the foot and the room shows through above it */
  .phead.phead--room::before,.phead.phead--door::before{
    background:
      radial-gradient(ellipse 165% 82% at 46% 86%,
        rgba(19,41,63,.96) 0%,rgba(19,41,63,.95) 42%,rgba(19,41,63,.86) 62%,
        rgba(19,41,63,.52) 80%,rgba(19,41,63,.12) 94%,rgba(19,41,63,0) 100%),
      linear-gradient(180deg,
        rgba(19,41,63,.44) 0%,rgba(19,41,63,.10) 22%,rgba(19,41,63,.16) 46%,
        rgba(19,41,63,.64) 76%,rgba(19,41,63,.88) 92%,var(--canvas) 100%);
  }
}

/* The contact block is a text-us card, not a form. A form on a static site can
   only hand off to the visitor's mail app, which silently does nothing on a
   phone with no mail account configured. A text reaches Melanie directly. */
.reach{
  border:1px solid var(--hairline);border-radius:3px;
  background:linear-gradient(165deg,rgba(27,51,80,.7),rgba(19,41,63,.7));
  padding:clamp(26px,3.4vw,42px);
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;
}
.reachbtn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  margin:clamp(18px,2.4vw,26px) auto 0;
  padding:clamp(18px,2.2vw,24px) clamp(22px,3vw,34px);
  border:1px solid var(--accent);border-radius:3px;
  background:linear-gradient(180deg,var(--accent-hover),var(--accent));
  color:#12202F;text-decoration:none;min-height:44px;
  box-shadow:0 16px 40px rgba(4,10,18,.34);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.reachbtn:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(4,10,18,.44)}
.reachbtn-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;opacity:.72;
}
.reachbtn-num{
  font-family:var(--mono);font-weight:600;letter-spacing:.05em;
  font-size:clamp(21px,2.4vw,28px);white-space:nowrap;
}
.reach-alt{margin:clamp(14px,1.8vw,20px) 0 0;color:var(--text-secondary)}
.reach-alt a{
  color:var(--accent-hover);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(201,161,90,.45);
}
@media (max-width:900px){
  .reach{padding:clamp(22px,4vw,30px)}
}

/* The same drawn stroke as "forever" in the hero, scaled down to body text:
   thinner line, softer glow, no sparkles - a headline flourish at bullet size
   would shout. It draws when the comparison scrolls into view. */
.inkline{position:relative;display:inline-block}
.inkline-art{
  position:absolute;left:-.05em;right:-.07em;bottom:-.30em;
  width:auto;height:.36em;overflow:visible;color:var(--accent);
  filter:drop-shadow(0 0 5px rgba(201,161,90,.42));
  pointer-events:none;
}
.inkline-art path{stroke-dasharray:220;stroke-dashoffset:220}
.inkline.in .inkline-art path{
  animation:inkdraw 1.25s cubic-bezier(.22,.61,.36,1) 0s forwards;
}
@keyframes inkdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .inkline-art path{stroke-dashoffset:0;animation:none}
}

/* Two-part headline: the statement runs flush left, the instruction sits
   centred underneath it in italic. The asymmetry is the device - it reads as
   a sentence, then an aside, rather than one long line. */
.phead h1.h1-split,
.h1-split{
  display:block;
  /* .phead h1 caps at 16ch. Because ch scales with the font, shrinking the type
     shrank the cap with it and the first sentence stayed stubbornly on three
     lines at every size. Widening the cap is what actually fixes it. */
  max-width:22ch;
}
.h1-split .hs-a,
.h1-split .hs-b{display:block}
.h1-split .hs-a{text-align:left}
.h1-split .hs-b{
  text-align:center;
  font-style:italic;
  margin-top:.12em;
}
@media (max-width:640px){
  .h1-split .hs-b{margin-top:.18em}
}

/* Below 1150px the brass thread is hidden - there is no margin for it to run
   down. The Before and Aftercare lists keep the idea with a dot beside each
   step instead, lighting as that step arrives. Only those two pages have a
   .guide list, so nothing else on the site picks this up. */
@media (max-width:1150px){
  .guide .n{position:relative;align-self:start}
  .guide .n::before,
  .guide .n::after{content:"";position:absolute;border-radius:50%;left:0}
  .guide .n::before{
    top:calc(.46em + 4px);width:9px;height:9px;margin-top:-4.5px;
    border:1px solid var(--accent);background:var(--canvas);
    transform:scale(0);transition:transform .6s var(--ease);
  }
  .guide .n::after{
    top:calc(.46em + 4px);left:2px;width:5px;height:5px;margin-top:-2.5px;
    background:var(--accent);opacity:0;
    transition:opacity .6s var(--ease-soft) .12s;
  }
  .guide > li.dot-on .n::before{transform:scale(1)}
  .guide > li.dot-on .n::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .guide .n::before{transform:scale(1)}
  .guide .n::after{opacity:1}
}

/* Treatment photographs. The sources are modest resolution, so each is held
   to a width it can fill without softening. */
.txshot{margin:clamp(24px,3vw,34px) 0 0;max-width:520px}
/* the upper-lip photograph now opens the right column, so it starts level with
   the paragraph opposite and fills the column the Synchro copy sits in */
.txshot--lead{margin-top:0;max-width:100%}
/* the row gap sets the space above the film */
.vidbox--one{margin-top:0}
.txband{
  margin:clamp(26px,3.4vw,40px) auto 0;
  max-width:min(984px,100%);
}
/* sits in the space left under the session-prices copy, small enough to fill
   that gap rather than compete with the rate table beside it */
/* the treatment photograph now sits beside the consultation card */
.conspair{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3.4vw,48px);align-items:center;
  max-width:1020px;margin:0 auto;
}
.conspair .price{max-width:none;margin:0}
.consshot{margin:0;max-width:clamp(170px,19vw,250px)}
@media (max-width:860px){
  .conspair{grid-template-columns:1fr;justify-items:center}
  .consshot{max-width:min(240px,72%)}
}
@media (max-width:820px){
  .txshot{max-width:100%}
}

/* the full-width photograph closing the equipment page, centred beneath both
   the loupes picture and its paragraph */
.chinshot{
  margin:clamp(32px,4.4vw,58px) auto 0;
  max-width:min(840px,100%);
}

/* her at work on the about page, between the story and the credentials */
.atwork{
  margin:0 auto;
  max-width:min(780px,100%);
}

/* a photograph standing on its own between two text sections - it needs far
   less room around it than a section of copy does */
.sec-photo{
  padding:clamp(6px,0.8vw,12px) 0;
  /* the sections either side bring their own generous padding, so the photo
     pulls back into it rather than sitting in the sum of both */
  margin-top:clamp(-62px,-4.4vw,-26px);
  margin-bottom:clamp(-54px,-3.8vw,-22px);
}

/* the photographs sit right under the claim they illustrate */
.sec-claim{padding-bottom:clamp(14px,1.8vw,24px)}
.sec-photos{
  padding-top:clamp(8px,1vw,14px);
  /* the slideshow ends in its own row of dots, so the standard gap below a
     section left a hole between the photographs and the line that answers them */
  padding-bottom:clamp(20px,2.4vw,32px);
  margin-top:clamp(-30px,-2.2vw,-14px);
}

/* Same device as the Skin Care headline: the statement, then the turn in
   italic underneath. This block is centred, so the asymmetry comes from the
   change of voice rather than the alignment. */
.h2-split{display:block}
.h2-split .hs-a,
.h2-split .hs-b{display:block}
.h2-split .hs-b{
  font-style:italic;
  margin-top:.1em;
}

/* the Synchro description beneath its demo video */
/* the grid row gap sets the space above this, so it starts level with the film */
.synchro{margin-top:0}
.synchro-head{
  font-size:clamp(25px,2.7vw,37px);line-height:1.16;
  letter-spacing:-.005em;
  color:var(--text-primary);
  margin:0 0 clamp(14px,1.6vw,20px);
}
/* the line beneath was competing with the title for attention, so it steps
   back to the body colour and the title carries the weight */
.synchro-lead{
  color:var(--text-secondary) !important;
  margin:0 0 clamp(14px,1.6vw,20px) !important;
}
.synchro p{color:var(--text-secondary);margin:0}
.synchro p + p{margin-top:clamp(12px,1.4vw,18px)}

/* the section title spans both columns; the content below follows closely */
.onehead{margin-bottom:clamp(18px,2.2vw,30px)}


/* A heading that must always break in the same place, whatever the screen.
   The break is set in the markup; automatic balancing is turned off so it
   cannot add a line of its own. */
.hardwrap{
  text-wrap:normal;
  /* The block around this is held to a narrow column - too tight for the 36
     characters before the break. A max-width alone cannot help, because a
     child cannot outgrow its parent; the heading is given its own width and
     centred with a margin that goes negative when it is the wider of the two. */
  width:min(860px,92vw);max-width:none;
  margin-left:calc((100% - min(860px,92vw)) / 2);margin-right:0;
  /* and let the letters keep shrinking on small screens, otherwise the first
     half is wider than the phone and breaks again */
  font-size:min(52px,5.5vw);
}
.hardwrap .hardbreak{display:block}


/* --------------------------------------------------------------------------
   Contact page: the three ways to reach us, and the map
   -------------------------------------------------------------------------- */


.maprow{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(26px,3.6vw,52px);align-items:start;
  margin-top:clamp(26px,3.4vw,40px);
}
/* same frame the video embed uses, a little taller so more of the map shows */
.mapwrap{
  position:relative;aspect-ratio:4/3;width:100%;
  border-radius:3px;overflow:hidden;
  border:1px solid rgba(201,161,90,.22);
  background:var(--canvas-deep);
}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

@media (max-width:980px){
  .maprow{grid-template-columns:1fr}
  .mapwrap{aspect-ratio:1/1}
}


/* Label and fact in two columns, so the labels line up down the left rather
   than running into the text beside them. */
.factlist{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:clamp(18px,2.4vw,32px);row-gap:clamp(12px,1.5vw,18px);
  margin:0;align-items:baseline;
}
.factlist dt{
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.factlist dd{margin:0;color:var(--text-secondary);line-height:1.72}
/* the button sits in the grid itself, in the facts column, so it centres
   on the facts rather than on the block or the page */
.factlist-cta{
  /* lined up with the facts rather than centred: centring left it starting
     25px right of the facts on a desktop and 59px right of everything on a
     phone, so it read as floating loose from the list it belongs to */
  grid-column:2;display:flex;justify-content:flex-start;
  margin-top:clamp(14px,1.8vw,22px);
}
@media (max-width:460px){
  .factlist{grid-template-columns:1fr;row-gap:4px}
  .factlist dt{margin-top:clamp(10px,2vw,14px)}
  .factlist dt:first-child{margin-top:0}
  .factlist-cta{grid-column:1;justify-content:flex-start;margin-top:clamp(18px,3vw,24px)}
}


/* The gold frame: a hairline border, a second hairline set inside it, a soft
   warmth behind, and a short rule centred on the top edge. Decoration only -
   each box that wears it keeps its own padding and layout. */
.goldframe{
  position:relative;
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(201,161,90,.07),transparent 62%),
    linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(201,161,90,.46);
  border-radius:3px;
  box-shadow:0 22px 56px rgba(4,10,18,.34),0 0 44px rgba(201,161,90,.07);
}
.goldframe::before{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(201,161,90,.22);
  border-radius:2px;pointer-events:none;
}
.goldframe::after{
  content:"";position:absolute;top:-1px;left:50%;
  width:clamp(54px,8vw,86px);height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  pointer-events:none;
}
@media (max-width:560px){ .goldframe::before{inset:7px} }

/* the privacy promise adds its own centring and measure */
.privacy-frame{
  max-width:min(880px,100%);margin:0 auto;
  padding:clamp(36px,4.8vw,62px) clamp(28px,4.4vw,68px);
  text-align:center;
}
.privacy-frame .kicker{margin-bottom:14px}
.privacy-frame h2{margin-bottom:clamp(16px,2vw,24px)}
.privacy-frame p{margin:0;color:var(--text-secondary);max-width:62ch;margin-left:auto;margin-right:auto}



/* Equal-width buttons in a row. Laying them out as grid columns rather than
   letting each size to its own label means they match whatever the labels
   say, now or later. */
.btn-row--even{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:clamp(10px,1.4vw,16px);
  max-width:min(580px,100%);
  margin-left:auto;margin-right:auto;
}
.btn-row--even .btn{width:100%}
/* below this the three columns are too narrow to hold "Send a text" on one
   line, which made that button taller than the other two */
@media (max-width:560px){
  .btn-row--even{grid-auto-flow:row}
}
/* inside the narrower note panel the columns are already too tight at 561px,
   where "Send a text" wraps and makes that button taller than the other two */
@media (max-width:640px){
  .panelnote .btn-row--even{grid-auto-flow:row}
}

/* the two button closing rows carry a much longer label than the contact row
   does - "Book your free consultation" needs 304px on its own - so they get a
   wider cap. Below 720px there is no longer room for two columns that clear
   that label, and it would wrap and make one button taller than the other. */
.btn-row--even2{max-width:min(640px,100%)}
@media (max-width:720px){
  .btn-row--even2{grid-auto-flow:row}
}


/* the gold label sits at the top of the price box, above the heading */
.price-kicker{margin:0 0 clamp(12px,1.6vw,18px)}



/* The rose is pinned to the corner rather than placed in the row, so it adds
   nothing to the layout and cannot open a gap between the text and itself. */
.price-rose{
  position:absolute;
  top:clamp(10px,1.6vw,22px);
  right:clamp(10px,1.8vw,26px);
  /* 13vw dipped to 133px around 1024px wide, smaller than both the desktop
     and the tablet sizes either side of it */
  width:auto;height:clamp(150px,17vw,176px);
  opacity:.92;
  pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(201,161,90,.22));
}
/* On a narrow card the corner is where the label and heading live, so the rose
   was both too small to read and sitting on top of the words. It grows, and
   the text above it is given room so the two no longer collide. */
@media (max-width:980px){
  /* Keep the rose close to the size it is on a desktop rather than shrinking
     it with the screen, and let the text take fewer characters per line so it
     wraps beside the rose instead of under it. */
  .price-rose{
    height:clamp(150px,26vw,176px);
    top:clamp(14px,2.4vw,20px);
    right:clamp(12px,2.4vw,20px);
  }
  .price-kicker,
  .price-head > div{padding-right:clamp(88px,22vw,104px)}
}


/* the Contact Us footer heading is a link to the contact page; it keeps the
   heading's own look rather than picking up the footer link styling */
.foot h2 .foot-head-link,
.foot h2 .foot-head-link:hover,
.foot h2 .foot-head-link:focus-visible{
  /* .foot a sets the footer's body grey and a gold hover; both are outranked
     here so the heading keeps the same gold as the heading beside it and the
     hover is carried by the rule underneath instead */
  color:var(--accent);text-decoration:none;
}
/* because the colour now matches its neighbour, hover is shown on the rule
   underneath instead: it brightens and thickens rather than changing hue */
.foot-head-link .foot-ul{
  transition:border-bottom-color .3s var(--ease-soft),
             border-bottom-width .3s var(--ease-soft),
             padding-bottom .3s var(--ease-soft);
}
.foot-head-link:hover .foot-ul,
.foot-head-link:focus-visible .foot-ul{
  border-bottom-color:var(--accent-hover);
  border-bottom-width:2px;
  padding-bottom:3px;
}


/* The three ways to reach us sit low on the contact page now, so they are
   given more presence: the outline buttons carry a brighter edge and a faint
   gold wash so they read as pressable, and the row as a whole is a little
   larger than a standard button row. */
.btn-row--loud .btn{
  padding:16px 26px;
  font-size:12.5px;letter-spacing:.17em;
}
.btn-row--loud .btn-ghost{
  border-color:rgba(201,161,90,.72);
  background:rgba(201,161,90,.07);
  color:var(--text-primary);
}
.btn-row--loud .btn-ghost:hover,
.btn-row--loud .btn-ghost:focus-visible{
  border-color:var(--accent-hover);
  background:rgba(201,161,90,.15);
}
.btn-row--loud .btn-primary{
  box-shadow:0 8px 30px rgba(201,161,90,.26);
}

/* "Advanced" sits on its own line above the rest of the descriptor, a little
   smaller and opened out so the two lines read as a pair rather than a
   sentence that happened to wrap */
.brand-tag .tag-top{
  display:block;
  font-size:.82em;letter-spacing:.3em;
  opacity:.85;
  margin-bottom:2px;
  /* centred over the longer line below it. The trailing letter-spacing after
     the final letter would push it right of true centre, so it is pulled back
     by that same amount. */
  text-align:center;
  text-indent:.3em;
}

/* --------------------------------------------------------------------------
   Aftercare header: the words carry their own shadow instead of the photograph
   carrying a pool of shade. A ring of dark sits around every letter, so the
   aloe shows through at full strength; a faint pool stays underneath for the
   brighter part of the frame. On Aftercare, Services, Equipment, Contact and FAQ.
   -------------------------------------------------------------------------- */
.phead--aloe.phead::before,
.phead--room.phead::before,
.phead--machine.phead::before,
.phead--door.phead::before,
.phead--ask.phead::before{
  background:
    radial-gradient(ellipse 130% 120% at 30% 56%,
      rgba(19,41,63,.34) 0%,rgba(19,41,63,.30) 44%,rgba(19,41,63,.20) 70%,
      rgba(19,41,63,.07) 88%,rgba(19,41,63,0) 97%),
    linear-gradient(180deg,rgba(19,41,63,.20) 0%,rgba(19,41,63,.04) 24%,
      rgba(19,41,63,.04) 58%,rgba(19,41,63,.45) 88%,var(--canvas) 100%);
}
.phead--aloe .phead-in h1,
.phead--aloe .phead-in .lede,
.phead--room .phead-in h1,
.phead--room .phead-in .lede,
.phead--machine .phead-in h1,
.phead--machine .phead-in .lede,
.phead--door .phead-in h1,
.phead--door .phead-in .lede,
.phead--ask .phead-in h1,
.phead--ask .phead-in .lede{
  text-shadow:
    0 0 3px rgba(5,8,14,.98),
    0 0 7px rgba(5,8,14,.92),
    0 0 16px rgba(5,8,14,.8),
    0 0 34px rgba(5,8,14,.6),
    0 2px 4px rgba(5,8,14,.9);
}