:root{
  /* Watt Plastic Surgery & Med Spa, Tampa.
     Taken from their own stylesheet: #243c24 forest green carries the brand,
     #d4c4b4 warm sand is the counterpoint, #16262e is the near-black they use
     for nav. The sand is DECORATIVE — about 1.9:1 on white — so it never sets
     type on a light ground; the greens below carry all text. */
  --navy:#243c24; --sky:#6e8c6e; --white:#FFFFFF;
  --navy-d:#1b2e1b;   /* pressed states, secondary type */
  --navy-deep:#16262e; /* emphasis type that must out-weigh --navy */
  --sky-l:#c8d8c8;    /* on green only */
  /* The one colour that only ever means "act here". Their sand reads as warmth
     rather than action, so the bronze they already use is pushed a little
     deeper to carry buttons at 4.6:1 on white. */
  --accent:#8a6a45; --accent-d:#6f5537;
  --sand:#d4c4b4;
  --ink:#16262e;
  --text:rgba(22,38,46,.76); --dim:rgba(22,38,46,.54); --faint:rgba(22,38,46,.3);
  --tint:#f6f4f0; --tint-2:#ece7df;
  --line:rgba(36,60,36,.16); --line-2:rgba(36,60,36,.3);
  /* Their site runs Carme and Montserrat. The theme's structure is kept —
     a display face for the wordmark and hero, a serif voice, a light sans for
     everything else — with faces chosen to sit against green rather than navy. */
  --display:'Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:calc(clamp(20px,5vw,80px) * var(--ts));
  --ts:1;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Smooth scrolling is deliberately NOT set on the root: it left the document
   unscrollable in testing. Anchors jump instead, and scroll-margin keeps the
   header from covering the heading you land on. */
html{scroll-behavior:auto}
:target{scroll-margin-top:96px}
body{background:var(--white);color:var(--text);font-family:var(--sans);font-size:calc(16px * var(--ts));font-weight:200;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.12;letter-spacing:-.005em}
h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:calc(1280px * var(--ts));margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:calc((11px) * var(--ts));font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--navy)}
.lede{font-size:calc((clamp(15px,1.3vw,17px)) * var(--ts));max-width:62ch;text-wrap:pretty}

/* Softly-cornered rectangles, not pills — 4px reads as considered where a full
   ellipse reads as generic. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:calc((11.5px) * var(--ts));font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:13px 24px;border-radius:4px;transition:.25s;cursor:pointer;border:1px solid transparent;min-height:44px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d)}
.btn-ghost{border-color:var(--line-2);color:var(--navy);background:rgba(255,255,255,.72)}
.btn-ghost:hover{border-color:var(--navy);background:#fff}
.btn-cream{background:#fff;color:var(--navy);border-color:transparent}
.btn-cream:hover{background:var(--tint-2)}

/* header — nav left, logo centred, actions right, sitting over a light hero */
header{position:absolute;top:0;left:0;right:0;z-index:60}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;padding-block:18px}
/* logomark and wordmark sit inline, as in the reference layout */
/* A soft halo so the mark survives a future image with something dark directly
   behind it — the scrim handles the current frame, this handles the next one. */
.brand{display:flex;align-items:center;gap:14px;line-height:1;justify-self:center;position:relative}
.brand::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:132%;height:230%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse,rgba(255,255,255,.78),rgba(255,255,255,.42) 46%,transparent 72%)}
.brand .mark{width:clamp(34px,3.4vw,46px);height:auto;flex:none}
.brand .word{display:flex;flex-direction:column}
.brand b{font-family:var(--display);font-size:calc((clamp(21px,2.4vw,31px)) * var(--ts));font-weight:400;color:var(--navy);letter-spacing:.17em;text-transform:uppercase}
.brand span{font-size:calc((8.5px) * var(--ts));letter-spacing:.36em;text-transform:uppercase;color:var(--navy-d);margin-top:6px}
.menu{display:flex;gap:28px;font-size:calc((12.5px) * var(--ts));letter-spacing:.1em;text-transform:uppercase}
.menu a{color:var(--ink);transition:color .2s;padding-block:4px}
.menu a:hover{color:var(--navy)}
.navcta{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.navtel{font-size:calc((14px) * var(--ts));color:var(--ink);white-space:nowrap}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:rgba(255,255,255,.7);color:var(--navy);cursor:pointer}

/* hero — full-bleed photograph, copy over the open left side */
/* The hero must END at the fold, otherwise the marquee pinned to its bottom edge
   falls below the viewport and reads as a separate band under the image.
   The hero owns the whole viewport. svh was leaving a strip of the next section
   showing on a phone once the URL bar retracted, because svh is the SMALLEST
   viewport; dvh tracks the real one, with vh as the fallback. */
/* No max-height: the marquee is pinned to the hero's bottom edge, so the hero
   has to end exactly at the fold. A 920px cap left 520px of the next section
   showing on a 2K screen and 1240px on a 4K one. */
.hero{position:relative;height:100vh;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:var(--tint-2)}
@supports (height: 100dvh){ .hero{height:100dvh} }
.hero-bg{position:absolute;inset:0;z-index:-2}
/* The subject is centred in this frame, so the crop is too — offsetting it
   pushed her out of shot. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* The photograph is pale, so the scrim LIGHTENS rather than darkens — it lifts
   the left third toward white so navy type holds its contrast. */
/* Two scrims, each doing one job:
   1. left-to-right, lifting the copy side. This frame is already pale (measured
      luminance 201-214) so it only takes the edge off.
   2. top-down, so the navy logo and nav keep contrast when dark hair happens to
      fall behind the header. Recolouring the logo white would have solved it too,
      but at the cost of the brand mark's own colour. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.68) 10%, rgba(255,255,255,0) 23%),
  linear-gradient(100deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.46) 30%, rgba(255,255,255,.06) 58%, rgba(255,255,255,0) 76%)}
/* Two rows: the headline sits high-left, the italic note and buttons low-right —
   matching the reference, where the two blocks are diagonally opposed rather
   than stacked in one column. */
/* padding-bottom must clear the absolutely-positioned marquee (~68px) */
.hero-in{position:relative;flex:1;min-height:0;padding-top:clamp(96px,10vw,140px);padding-bottom:clamp(84px,8vw,104px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:clamp(18px,3vw,40px) 30px}
/* Measured against the photograph: her hair begins at 30-35% of the frame width
   (columns 0-25% hold luminance 164-181; by 35% the darkest pixels are 14).
   Capping the copy at 28% keeps every line clear of her forehead. */
.hero-copy{grid-column:1;grid-row:1;align-self:start;max-width:min(21vw,calc(330px * var(--ts)))}
/* Aboreto sets small for its em size, so it needs a larger value than a normal
   serif to reach the same optical scale as the reference. Three lines, tight. */
/* Three short lines so the block stays inside that 28% band without the type
   having to shrink to nothing. "MADE FOR" is the longest line. */
.hero h1{font-family:var(--display);font-size:calc((clamp(30px,3.8vw,54px)) * var(--ts));font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;margin:16px 0 0;color:var(--ink)}
/* The line breaks are authored, so nothing may re-flow them */
.hero h1 br{display:block}
/* The emphasis words carry the same job the gold does in the reference: they must
   separate from the base colour without going pale. --navy against --ink reads
   as a deliberate second voice; the light blue simply disappeared. */
.hero h1 em{font-style:normal;color:var(--navy)}
/* Wide enough that the two buttons sit on one line — at 46ch they wrapped. */
.hero-right{grid-column:2;grid-row:2;max-width:min(calc(560px * var(--ts)),100%);justify-self:end;align-self:end}
/* Frosted panel — the note sits over the busiest part of the frame, so it gets
   its own ground rather than relying on the photograph staying quiet there. */
.hero-note{
  font-family:var(--serif);font-style:italic;font-size:calc((clamp(17px,1.75vw,23px)) * var(--ts));
  line-height:1.55;color:var(--ink);max-width:46ch;
  padding:clamp(18px,1.9vw,26px) clamp(20px,2.1vw,30px);
  border-radius:14px;
  /* opaque enough to stand alone where backdrop-filter is unsupported */
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 44px rgba(22,38,46,.13), inset 0 1px 0 rgba(255,255,255,.7);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-note{
    background:rgba(255,255,255,.40);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
  }
}
.hero-cta{display:flex;gap:14px;flex-wrap:nowrap;margin-top:28px}
.hero-cta .btn{white-space:nowrap;padding-inline:clamp(16px,1.7vw,24px)}

/* credential marquee — overlays the foot of the hero, as in the reference */
/* No band — the credentials sit directly on the photograph. */
.trust{position:absolute;left:0;right:0;bottom:0;z-index:5;overflow:hidden}
.track{display:flex;width:max-content;animation:slide 44s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust:hover .track{animation-play-state:paused}
.tcell{display:flex;align-items:center;gap:clamp(22px,2.8vw,42px);padding:18px clamp(22px,2.8vw,42px) 18px 0;white-space:nowrap;font-family:var(--serif);font-size:calc((14px) * var(--ts));letter-spacing:.08em;color:var(--ink)}
/* the practice's own lotus replaces the reference's ornament */
.tcell::after{content:"";width:clamp(24px,2.4vw,34px);height:clamp(24px,2.4vw,34px);flex:none;
  background:url("assets/logomark.png") center/contain no-repeat;opacity:.9}
.figtag{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;font-size:calc((10px) * var(--ts));letter-spacing:.22em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:rgba(255,255,255,.8)}

section{padding:calc(clamp(56px,8vw,116px) * var(--ts)) 0}
.shead{max-width:62ch;margin-bottom:clamp(30px,4vw,54px)}
.shead h2{font-size:calc((clamp(30px,4.4vw,56px)) * var(--ts));margin:16px 0 18px}
.shead h2 i{font-style:italic;color:var(--navy)}
.center{margin-inline:auto;text-align:center}
.tinted{background:var(--tint);border-block:1px solid var(--line)}

/* pillars */
/* Areas of focus — carried by the cutout film rather than boxes. The video has
   no background of its own, so the section tint shows straight through it. */
/* The matte carries 131 transparent rows above her head — 16% of the frame — so
   the heading already has clearance built into the video. Without pulling the
   film up, that band reads as a hole in the page. */
.areasfilm{display:flex;justify-content:center;margin-top:calc(-0.10 * clamp(560px,86vh,1040px))}
#treatments .shead{margin-bottom:0}
#treatments .shead h2{margin-bottom:0}
/* the stage is sized by the video, so percentage-positioned hotspots track it */
.filmstage{position:relative;display:inline-block;line-height:0}
/* The subject is opaque right to the last row of the frame (measured: 224px of
   dress still solid at row 819 of 820), so the crop lands as a hard horizontal
   cut. Fading the bottom eighth to transparent dissolves her into the section
   instead. Kept off the stage itself so the hotspots stay fully opaque. */
/* Sizing and the bottom fade apply to whichever element is actually on screen:
   the canvas when the shader is compositing, the video when it is not. */
.filmstage video,.filmstage canvas{height:clamp(560px,86vh,1040px);width:auto;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.28) 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.28) 95%,transparent 100%)}
/* The poster occupies the same box as the canvas and fades out once the shader
   has a real frame, so the section is never an empty gap while the video loads. */
.filmstage{position:relative}
#areasPoster{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;transition:opacity .45s ease}
#areasPoster.gone{opacity:0}

/* the packed file is double height and must never be seen raw */
.filmstage canvas{display:none}
.filmstage.composited canvas{display:block}
/* Not display:none — iOS suspends decoding for a hidden video, which starves
   the texture and leaves the canvas blank. Kept in the layout, just invisible. */
.filmstage.composited video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* Each group is a label plus its treatment panel, sitting either side of her.
   Alternating sides keeps the panels from colliding down the middle. */
/* Tag on top, treatment panel directly beneath it. Stacking rather than sitting
   side by side keeps each group narrow, which is what lets the same composition
   survive down to phone widths. */
.hotspot{
  position:absolute;display:flex;flex-direction:column;gap:10px;line-height:1.6;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);
}
.hotspot.show{opacity:1;transform:none;pointer-events:auto}
/* each group hugs the edge nearest her, so the tag reads as pointing inward */
.hotspot.left{right:74%;align-items:flex-end}
.hotspot.right{left:74%;align-items:flex-start}

.tag{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  background:var(--accent);color:#fff;border-radius:4px;padding:12px 18px;
  font-family:var(--sans);font-size:calc((12px) * var(--ts));font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;position:relative;
  box-shadow:0 10px 26px rgba(22,38,46,.26);transition:background .2s;
}
.tag:hover{background:var(--accent-d);color:#fff}
.tag .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
/* connector reaching toward her, on whichever side she is */
.tag::after{content:"";position:absolute;top:50%;width:clamp(14px,1.8vw,30px);height:1px;background:var(--accent);opacity:.6}
.hotspot.left .tag::after{left:100%}
.hotspot.right .tag::after{right:100%}

/* frosted panel — same treatment as the hero note */
.glass{
  width:clamp(168px,15vw,210px);border-radius:12px;padding:14px 16px;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 16px 40px rgba(22,38,46,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
}
.glass h4{font-family:var(--serif);font-size:calc((17px) * var(--ts));color:var(--ink);margin-bottom:8px}
.glass ul{list-style:none;font-size:calc((12px) * var(--ts));color:var(--text)}
.glass li{padding:3px 0 3px 13px;position:relative}
.glass li::before{content:"";position:absolute;left:0;top:11px;width:4px;height:4px;border-radius:50%;background:var(--sky)}

/* Narrower screens keep the same composition — the tag stays pinned beside her
   with its panel underneath. Only the scale comes down. */
@media (max-width:1100px){
  /* Width-driven from here down. Sized by height it reached 773px on a 768px
     tablet and pushed the page sideways. */
  .filmstage video,.filmstage canvas{height:auto;width:min(76vw,520px)}
  .areasfilm{margin-top:calc(-0.114 * min(76vw,520px))}
  .glass{width:clamp(140px,20vw,190px);padding:12px 13px}
  .glass h4{font-size:calc((15px) * var(--ts))}
  .glass ul{font-size:calc((11px) * var(--ts))}
  .tag{padding:10px 13px;font-size:calc((11px) * var(--ts));letter-spacing:.08em}
  .tag::after{width:12px}
}
@media (max-width:760px){
  /* Sized by WIDTH here, not height — at a fixed height the frame grew wider
     than the phone and pushed the left-hand groups off screen. A WIDER frame
     also buys vertical room, which is what keeps the three groups from
     colliding once their panels sit underneath them. */
  .filmstage video,.filmstage canvas{height:auto;width:min(92vw,380px)}
  .hotspot{gap:6px}
  /* Measured off the matte: she never crosses 29.6% from the left or 70.3%
     from the right in any of the three bands. The panels are sized to live in
     that outer margin with ~10px of daylight, and hang 3% past the frame into
     the page gutter so they can stay legible at that width. */
  .hotspot.left{right:auto;left:-4%}
  .hotspot.right{left:auto;right:-4%}
  /* 9.5px was too small for what is actual content, not a label — these are
     the treatment names. Bumped to 11px, with the panel widened to match so the
     lines do not wrap any harder than before. */
  .glass{width:clamp(104px,28.5vw,160px);padding:10px 11px;border-radius:10px}
  .glass h4{font-size:calc((13px) * var(--ts));margin-bottom:5px}
  .glass ul{font-size:calc((11px) * var(--ts));line-height:1.45}
  .glass li{padding:2.5px 0 2.5px 10px}
  .glass li::before{top:9px;width:3px;height:3px}
  .tag{padding:8px 11px;font-size:calc((10px) * var(--ts));letter-spacing:.06em;gap:5px;border-radius:3px}
  .tag .dot{width:5px;height:5px}
  .tag::after{width:7px}
  .filmstage{margin-bottom:96px}
  /* width-driven here: height = width x 820/720, so 10% of it is width x 0.114 */
  .areasfilm{margin-top:calc(-0.114 * min(88vw,380px))}
}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pillar{border:1px solid var(--line);border-radius:14px;padding:30px 26px 34px;background:#fff;transition:.28s}
.pillar:hover{border-color:var(--sky);transform:translateY(-4px);box-shadow:0 14px 34px rgba(36,60,36,.12)}
.pillar .num{font-family:var(--serif);font-size:calc((13px) * var(--ts));color:var(--navy-deep);letter-spacing:.2em}
.pillar h3{font-size:calc((26px) * var(--ts));margin:16px 0 12px}
.pillar p{font-size:calc((13.5px) * var(--ts))}
.pillar ul{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:calc((12.5px) * var(--ts));color:var(--dim)}
.pillar li{padding:5px 0 5px 16px;position:relative}
.pillar li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--sky)}

/* section headings — a class rather than inline styles, so a section can
   restate them when it sits on a dark ground */
.sec-title{font-size:calc((clamp(30px,4.4vw,56px)) * var(--ts));margin:16px 0 18px}
.sec-title.sm{font-size:calc((clamp(28px,4vw,48px)) * var(--ts))}
.sec-title i{font-style:italic;color:var(--navy)}

/* ── Our Practice, on the brand gradient ───────────── */
/* The section carries the same navy as the booking block so the portrait — the
   only light object on it — becomes the thing you look at. */
/* The rose carries the depth; the navy wash over it keeps the brand colour
   dominant and the type legible. The photograph is dark on its own (mean
   luminance 27, brightest 80), so the wash can stay light enough to let the
   petals read rather than burying them. */
#about{
  background:
    linear-gradient(150deg, rgba(60,100,60,.58) 0%, rgba(36,60,36,.88) 62%, rgba(22,38,46,.94) 100%),
    url("assets/botanical.webp") center/cover no-repeat;
  color:rgba(255,255,255,.84);position:relative;overflow:hidden;
}
#about::after{content:"";position:absolute;right:-160px;top:-140px;width:560px;height:560px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 64%)}
#about .eyebrow{color:var(--sky-l)}
#about h2{color:#fff}
#about .sec-title i{color:var(--sky-l)}
#about .lede{color:rgba(255,255,255,.84)}
#about .creds li{border-bottom-color:rgba(255,255,255,.20);color:rgba(255,255,255,.88)}
#about .creds li b{color:var(--sky-l)}
/* credentials strip — part of Our Practice, not a band of its own */
.credstrip{margin-top:clamp(44px,6vw,88px);padding-top:clamp(28px,3.5vw,44px);border-top:1px solid rgba(255,255,255,.18);position:relative;z-index:1}
.credlabel{font-size:calc((11px) * var(--ts));font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sky-l);margin-bottom:clamp(20px,2.6vw,32px)}
.credlogos{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
/* Each mark arrives in its own colours; knocking them to a single white keeps
   the row reading as one set rather than four competing badges. */
.credlogos img{height:clamp(38px,4.4vw,62px);width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.58;transition:opacity .25s}
.credlogos img:hover{opacity:.92}

/* the portrait panel stays light so she lifts clear of the navy */
#about .panel{background:linear-gradient(155deg,#FFFFFF,var(--tint-2) 62%,var(--sky-l));border-color:rgba(255,255,255,.28);box-shadow:0 26px 60px rgba(11,20,48,.34)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.panel{aspect-ratio:1/1;border-radius:16px;border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(150deg,var(--tint-2),var(--sky-l))}
.panel img{width:100%;height:100%;object-fit:cover;object-position:top center}
.creds{list-style:none;margin-top:26px}
.creds li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:calc((14px) * var(--ts))}
.creds li b{color:var(--navy);font-weight:500;font-family:var(--serif);font-size:calc((16px) * var(--ts));flex:none;width:26px}

/* procedures */
.procs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:.28s}
.proc:hover{border-color:var(--sky);transform:translateY(-4px);box-shadow:0 14px 34px rgba(36,60,36,.12)}
.proc .art{aspect-ratio:16/11;background:linear-gradient(150deg,var(--tint-2),var(--sky-l));display:grid;place-items:center}
.proc .art img{width:42%;height:auto;object-fit:contain;opacity:.92}
.proc .body{padding:22px 24px 26px}
.proc h4{font-size:calc((22px) * var(--ts));margin-bottom:9px}
.proc p{font-size:calc((13px) * var(--ts));color:var(--dim)}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:900px;margin-inline:auto}
.member{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.member .art{aspect-ratio:3/3.4;background:linear-gradient(160deg,var(--tint-2),var(--sky-l));position:relative;overflow:hidden}
.member .art img{width:100%;height:100%;object-fit:cover;object-position:top center}
.member .body{padding:24px 26px 30px}
.member h4{font-size:calc((25px) * var(--ts))}
.member .role{font-size:calc((11px) * var(--ts));letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin:9px 0 14px}
.member p{font-size:calc((13.5px) * var(--ts))}

/* quote */
.quote{background:var(--tint);border-block:1px solid var(--line)}
.quote blockquote{max-width:940px;margin-inline:auto;text-align:center}
.quote p{font-family:var(--serif);font-size:calc((clamp(23px,3.2vw,40px)) * var(--ts));line-height:1.32;color:var(--ink);font-style:italic}
.quote cite{display:block;margin-top:26px;font-family:var(--sans);font-style:normal;font-size:calc((11px) * var(--ts));letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.stars{color:var(--navy);letter-spacing:.28em;font-size:calc((15px) * var(--ts));margin-bottom:22px}

/* booking — navy block; the one capability the current site does not have */
.booking{background:linear-gradient(150deg,var(--navy),var(--navy-d));border-radius:20px;padding:clamp(28px,4vw,54px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center;color:rgba(255,255,255,.82)}
.booking h2{color:#fff}
.booking h2 i{font-style:italic;color:var(--sky-l)}
.booking .eyebrow{color:var(--sky-l)}
.bform{display:grid;gap:13px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:calc((11px) * var(--ts));letter-spacing:.14em;text-transform:uppercase;color:var(--sky-l)}
.field input,.field select{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:9px;padding:13px 15px;color:#fff;font-family:var(--sans);font-size:calc((14px) * var(--ts));min-height:50px;outline:none;transition:border-color .2s;width:100%}
.field input:focus,.field select:focus{border-color:#fff}
.field input::placeholder{color:rgba(255,255,255,.5)}
.field select option{background:var(--navy-d);color:#fff}
.booking .btn-primary{background:#fff;color:var(--navy)}
.booking .btn-primary:hover{background:var(--sky-l)}
.slots{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.slot{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 15px;font-size:calc((12.5px) * var(--ts));color:rgba(255,255,255,.85);cursor:pointer;transition:.2s;background:none;font-family:var(--sans);min-height:40px}
.slot:hover{border-color:#fff;color:#fff}
.slot[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--navy)}
.bnote{font-size:calc((11.5px) * var(--ts));color:var(--sky-l);margin-top:4px}
.booking a{color:#fff;text-decoration:underline}

/* faq */
.faq{max-width:860px;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-family:var(--serif);font-size:calc((clamp(18px,2vw,24px)) * var(--ts));color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--navy);font-size:calc((24px) * var(--ts));font-family:var(--sans);font-weight:300;transition:transform .25s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 40px 26px 0;font-size:calc((14.5px) * var(--ts))}

/* cta band */
.band{text-align:center;background:var(--tint);border-block:1px solid var(--line)}
.band h2{font-size:calc((clamp(32px,5vw,64px)) * var(--ts));margin-bottom:20px}
.band h2 i{font-style:italic;color:var(--navy)}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.78);padding:clamp(46px,6vw,80px) 0 34px}
footer .brand{align-items:flex-start}
footer .brand b{color:#fff}
footer .brand span{color:var(--sky-l)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px}
.fgrid h5{font-size:calc((11px) * var(--ts));letter-spacing:.2em;text-transform:uppercase;color:var(--sky-l);margin-bottom:18px;font-family:var(--sans);font-weight:500}
.fgrid ul{list-style:none;font-size:calc((13.5px) * var(--ts))}
.fgrid li{padding:6px 0}
.fgrid a:hover{color:#fff}
.fbot{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:calc((12px) * var(--ts));color:rgba(255,255,255,.6)}

/* responsive */
@media (max-width:1000px){
  .split,.booking{grid-template-columns:1fr}
  /* One column means one column: .hero-right still carried grid-column:2 from
     the desktop rule, which conjured a second track and pushed .hero-in out to
     510px on a 375px screen. */
  .hero-in{grid-template-columns:1fr;gap:22px}
  .hero-copy,.hero-right{grid-column:1;min-width:0}
  .hero-right{grid-row:auto;justify-self:stretch;max-width:none}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .procs{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* Anything narrower than this gets the compact chrome. It used to be 760, which
   put an iPad in portrait (768) on the desktop side: the full menu, the phone
   number and the Book button all rendered, and .navcta ran 167px off-screen
   with no burger to fall back to. */
@media (max-width:900px){
  .menu,.navtel{display:none}
  .burger{display:grid;place-items:center}
  .nav{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
  .navcta .btn{display:none}
  .hero{min-height:auto}

  /* Show her. The frame is centred rather than pushed 78% across, and there is
     no wash over the whole photograph — a white vignette anchored to the top
     edge carries the header and the headline, and is gone by her lips.
     Measured on the centred crop: the photo runs 100-143 mean luminance under
     the copy (5th percentile 26-46). At the headline the vignette sits around
     .61-.72, which puts --ink at roughly 6.6:1 even against the darkest pixels
     there. */
  .hero-bg img{object-position:center}
  .hero::before{background:radial-gradient(125% 72% at 50% 0%,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.88) 20%,
    rgba(255,255,255,.72) 38%,
    rgba(255,255,255,.28) 62%,
    rgba(255,255,255,0) 82%)}
  /* the vignette carries the wordmark now, so its own halo is redundant */
  .brand::before{display:none}
  /* Just the mark and the name — the strapline is illegible at this size over a
     photograph, and it is already in the footer. */
  .brand .word span{display:none}
  .brand .mark{width:clamp(48px,13.5vw,60px)}
  .brand b{font-size:calc((clamp(25px,7vw,32px)) * var(--ts));letter-spacing:.13em}
  /* no outlines anywhere over the photograph */
  .burger{border:0;background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .hero-note{border:0;box-shadow:0 16px 40px rgba(22,38,46,.10)}

  /* Centred stack, as in the reference: eyebrow, headline, the note, then a
     single call to action. */
  .hero-in{text-align:center}
  .hero-copy{margin-inline:auto}
  .hero-right{justify-self:stretch}
  .hero-note{margin-inline:auto;text-align:center}
  /* .hero-cta is reused in two other sections, so the hero's own rules are
     scoped — only the hero drops to a single button. */
  .hero-cta{flex-wrap:wrap;gap:10px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero .hero-cta{display:flex;margin-top:18px}
  .hero .hero-cta .btn-cream{display:none}
  .hero-in{padding-top:clamp(104px,26vw,150px)}
  .hero h1{font-size:calc((clamp(34px,9.6vw,50px)) * var(--ts))}
  /* 21vw is 79px on a phone, which was breaking the headline one word per line */
  .hero-copy{max-width:none}
  .hero-note{max-width:none;font-size:calc((16px) * var(--ts));line-height:1.5}
  /* the two buttons need 346px side by side and have 335px — so they stack */
  .hero-cta{flex-wrap:wrap;gap:10px;margin-top:20px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}
@media (max-width:760px){
  .procs,.pillars,.team{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}.track{animation:none}}

/* ── Try-on, featured ──────────────────────────────
   Same card as the booking block so it reads as a peer of it, but carrying the
   rose rather than flat navy — this is the one place on the page that offers
   something to do rather than something to read. The whole card is the anchor,
   so it holds no button of its own. */
.tryoncard{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  border-radius:20px;padding:clamp(28px,4vw,54px);color:rgba(255,255,255,.84);
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;
  background:
    linear-gradient(150deg, rgba(60,100,60,.56) 0%, rgba(36,60,36,.88) 62%, rgba(22,38,46,.94) 100%),
    url("assets/botanical.webp") center/cover no-repeat;
}
.tryoncard::after{content:"";position:absolute;right:-140px;top:-130px;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 64%)}
.tryoncard:hover{transform:translateY(-3px);box-shadow:0 26px 64px rgba(22,38,46,.26)}
.tryoncard:focus-visible{outline:2px solid var(--sky-l);outline-offset:4px}
.tc-copy,.tc-side{position:relative;z-index:1}
.tryoncard .eyebrow{color:var(--sky-l)}
.tryoncard h2{color:#fff;margin-top:10px}
.tryoncard h2 i{font-style:italic;color:var(--sky-l)}
.tryoncard .lede{color:rgba(255,255,255,.82);margin-top:14px;max-width:52ch}

.tc-side{display:flex;flex-wrap:wrap;gap:8px;align-content:center}
.tc-pill{font-family:var(--sans);font-size:calc((10.5px) * var(--ts));font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;color:#fff;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tc-go{display:flex;align-items:center;gap:10px;width:100%;margin-top:16px;
  font-family:var(--sans);font-size:calc((11.5px) * var(--ts));font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.tc-go b{font-weight:400;font-size:calc((15px) * var(--ts));transition:transform .28s}
.tryoncard:hover .tc-go b{transform:translateX(5px)}

/* Declared here rather than in the shared breakpoint further up: this block is
   later in the file, so an earlier one-column rule would simply be overridden. */
@media (max-width:1000px){
  .tryoncard{grid-template-columns:1fr;gap:22px}
  .tryoncard .lede{max-width:none}
  .tc-side{align-content:start}
}
@media (max-width:760px){
  .tryoncard{padding:26px 22px}
  .tryoncard .lede{font-size:calc((14px) * var(--ts))}
  .tc-side{margin-top:4px}
  .tc-pill{font-size:calc((10.5px) * var(--ts));padding:8px 13px}
}

/* ── Motion ────────────────────────────────────────
   Two kinds only: the hero states itself on load, and everything below it
   arrives as you reach it. Deliberately short and small — a medical practice
   should feel composed, not animated at. */

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* The hero photograph breathes — in, out, in, out.
   At 20s it read as a one-way zoom: 4.5% spread over ten seconds each way is
   too slow for the turn to be perceived. At 10s the direction changes every
   five seconds, roughly the rhythm of a breath. The curve is near-sinusoidal so
   it settles at each end rather than snapping round.
   It only ever scales up, and the hero clips, so the frame can never uncover. */
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.hero-bg img{animation:breathe 10s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;transform-origin:center 42%}

/* Hero, on load — a strict order, not a flourish.
   The photograph arrives first, then the headline, then the glass note, then
   everything else. The sequence is gated on the image having actually decoded
   (script adds .ready), so on a slow connection the words never appear over an
   empty frame; a timeout releases it regardless if the image never loads. */
.hero-bg{opacity:0;transition:opacity .9s ease}
.hero.ready .hero-bg{opacity:1}

/* held back until the sequence starts */
.hero .eyebrow,.hero h1,.hero-note,.hero .hero-cta,
.hero .brand,.hero .navcta,.hero .menu,.hero .trust{opacity:0}

/* 1 — the headline, once the picture is in */
.hero.ready h1{animation:rise .85s cubic-bezier(.2,.8,.3,1) .5s both}
/* 2 — the glass */
.hero.ready .hero-note{animation:rise .85s cubic-bezier(.2,.8,.3,1) 1.15s both}
/* 3 — everything else, together */
.hero.ready .eyebrow{animation:rise .7s cubic-bezier(.2,.8,.3,1) 1.75s both}
.hero.ready .hero-cta{animation:rise .8s cubic-bezier(.2,.8,.3,1) 1.85s both}
.hero.ready .brand,
.hero.ready .navcta,
.hero.ready .menu{animation:fade .8s ease 1.8s both}
.hero.ready .trust{animation:fade .9s ease 2.05s both}


/* Everything below the fold, as it arrives. .reveal is set in the markup by
   script so that a browser with JS off shows the content rather than a blank
   page waiting for an observer that never runs. */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.8,.3,1),transform .75s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
/* children stagger, so a grid of cards resolves in sequence */
.reveal-group > *{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal-group.in > *{opacity:1;transform:none}
.reveal-group.in > *:nth-child(2){transition-delay:.08s}
.reveal-group.in > *:nth-child(3){transition-delay:.16s}
.reveal-group.in > *:nth-child(4){transition-delay:.24s}
.reveal-group.in > *:nth-child(5){transition-delay:.32s}
.reveal-group.in > *:nth-child(6){transition-delay:.40s}

/* Nobody who has asked for less motion should get any of the above. */
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero-note,.hero .hero-cta,
  .hero .brand,.hero .navcta,.hero .menu,.hero .trust,.hero-bg img{animation:none;opacity:1}
  .hero-bg{opacity:1;transition:none}
  .reveal,.reveal-group > *{opacity:1;transform:none;transition:none}
}

/* Large displays. Type capped at its clamp() maxima, so a 4K panel rendered the
   same pixel sizes as a 1440 laptop and read as tiny. The band widens with the
   type — scaling text inside a 1280px column would just shorten the lines. */
/* Reference is the 1440 laptop, where the headline is 54px = 3.75% of the
   viewport. Holding that proportion at 3840 needs 2.67x, so these steps climb
   toward it instead of stopping at a token bump. The band and the spacing scale
   with the type — enlarging text inside a fixed 1280px column just shortens the
   lines and makes the page look more cramped, not bigger. */
@media (min-width:1700px){ :root{--ts:1.20} }
@media (min-width:2000px){ :root{--ts:1.42} }
@media (min-width:2400px){ :root{--ts:1.70} }
@media (min-width:2900px){ :root{--ts:2.05} }
@media (min-width:3400px){ :root{--ts:2.45} }

/* Credential strip as text. The Billington build used society logos; here the
   affiliations are stated in words because only the ones published on the
   practice's own site can be verified. */
.credtext{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center}
.credtext span{position:relative;font-family:var(--serif);font-size:calc(15px * var(--ts));
  letter-spacing:.02em;color:rgba(255,255,255,.9);padding-left:18px}
.credtext span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--sand)}
@media (max-width:760px){ .credtext{gap:8px 20px} .credtext span{font-size:calc(13px * var(--ts))} }

/* A team card with no photograph yet. It keeps the card's proportions so the
   grid does not go lopsided while a headshot is outstanding. */
.member.nophoto .body{padding-top:clamp(26px,3vw,38px)}
.member.nophoto{background:linear-gradient(160deg,var(--tint),var(--tint-2));
  display:flex;flex-direction:column;justify-content:center}