:root{
  /* Billington brand.
     The two brand blues are #3A559C and #8398C8. The light one is a DECORATIVE
     tone — rules, dots, hover borders, gradients, and light text on navy. It has
     roughly 2.6:1 contrast on white, so it is never used for text on a light
     background. The darker steps below carry all type. */
  --navy:#3A559C; --sky:#8398C8; --white:#FFFFFF;
  --navy-d:#2C4179;   /* buttons pressed, secondary type */
  --navy-deep:#22376E; /* emphasis type that must out-weigh --navy */
  --sky-l:#C3D0E7;    /* on navy only */
  /* A saturated cousin of the brand navy, playing the part the reference's
     magenta plays: the one colour that only ever means "act here". Same hue
     family as #3A559C, pushed on saturation so it reads as a deliberate accent
     rather than a second navy. */
  --accent:#2B4FB0; --accent-d:#22409A;
  --ink:#16203C;
  --text:rgba(22,32,60,.74); --dim:rgba(22,32,60,.52); --faint:rgba(22,32,60,.28);
  --tint:#F3F6FC; --tint-2:#E8EEF9;
  --line:rgba(58,85,156,.16); --line-2:rgba(58,85,156,.32);
  /* Aboreto is an uppercase display face — it carries the wordmark and the hero
     headline only. Arapey handles running serif headings and the italic voice.
     Manrope at 200 is the extra-light UI/body weight. */
  --display:'Aboreto',Georgia,serif;
  --serif:'Arapey',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,80px);
}
*{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-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:1280px;margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--navy)}
.lede{font-size:clamp(15px,1.3vw,17px);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:11.5px;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:clamp(21px,2.4vw,31px);font-weight:400;color:var(--navy);letter-spacing:.17em;text-transform:uppercase}
.brand span{font-size:8.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--navy-d);margin-top:6px}
.menu{display:flex;gap:28px;font-size:12.5px;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:14px;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. */
.hero{position:relative;height:100vh;min-height:560px;max-height:920px;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,330px)}
/* 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:clamp(30px,3.8vw,54px);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(560px,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:clamp(17px,1.75vw,23px);
  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,32,60,.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:14px;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:10px;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:clamp(56px,8vw,116px) 0}
.shead{max-width:62ch;margin-bottom:clamp(30px,4vw,54px)}
.shead h2{font-size:clamp(30px,4.4vw,56px);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 packed file is double height and must never be seen raw */
.filmstage canvas{display:none}
.filmstage.composited canvas{display:block}
.filmstage.composited video{display: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:12px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;position:relative;
  box-shadow:0 10px 26px rgba(22,32,60,.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,32,60,.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:17px;color:var(--ink);margin-bottom:8px}
.glass ul{list-style:none;font-size:12px;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){
  .glass{width:clamp(140px,20vw,190px);padding:12px 13px}
  .glass h4{font-size:15px}
  .glass ul{font-size:11px}
  .tag{padding:10px 13px;font-size:11px;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:-3%}
  .hotspot.right{left:auto;right:-3%}
  .glass{width:clamp(96px,27.5vw,150px);padding:9px 10px;border-radius:10px}
  .glass h4{font-size:12.5px;margin-bottom:4px}
  .glass ul{font-size:9.5px;line-height:1.45}
  .glass li{padding:2px 0 2px 9px}
  .glass li::before{top:8px;width:3px;height:3px}
  .tag{padding:7px 10px;font-size:9px;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(58,85,156,.10)}
.pillar .num{font-family:var(--serif);font-size:13px;color:var(--navy-deep);letter-spacing:.2em}
.pillar h3{font-size:26px;margin:16px 0 12px}
.pillar p{font-size:13.5px}
.pillar ul{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;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:clamp(30px,4.4vw,56px);margin:16px 0 18px}
.sec-title.sm{font-size:clamp(28px,4vw,48px)}
.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(58,85,156,.58) 0%, rgba(34,55,110,.86) 62%, rgba(22,32,60,.92) 100%),
    url("assets/rose.png") 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:11px;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:14px}
.creds li b{color:var(--navy);font-weight:500;font-family:var(--serif);font-size:16px;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(58,85,156,.10)}
.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:22px;margin-bottom:9px}
.proc p{font-size:13px;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:25px}
.member .role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin:9px 0 14px}
.member p{font-size:13.5px}

/* 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:clamp(23px,3.2vw,40px);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:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.stars{color:var(--navy);letter-spacing:.28em;font-size:15px;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:11px;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:14px;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:12.5px;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:11.5px;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:clamp(18px,2vw,24px);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:24px;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:14.5px}

/* cta band */
.band{text-align:center;background:var(--tint);border-block:1px solid var(--line)}
.band h2{font-size:clamp(32px,5vw,64px);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:11px;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:13.5px}
.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:12px;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}
}
@media (max-width:760px){
  .menu,.navtel{display:none}
  .burger{display:grid;place-items:center}
  .nav{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
  /* a tall phone must still fill: the desktop cap would leave a gap */
  .hero{min-height:auto;max-height:none}
  /* 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:clamp(25px,7vw,32px);letter-spacing:.13em}
  /* The burger owns navigation here — the ghost button ran 94px off the edge.
     Hide the button only: the burger is a child of .navcta, so hiding the
     container takes the menu with it. */
  .navcta .btn{display:none}
  /* 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,32,60,.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:clamp(34px,9.6vw,50px)}
  /* 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:16px;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}
  .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(58,85,156,.56) 0%, rgba(34,55,110,.86) 62%, rgba(22,32,60,.92) 100%),
    url("assets/rose.png") 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,32,60,.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:10.5px;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:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.tc-go b{font-weight:400;font-size:15px;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:14px}
  .tc-side{margin-top:4px}
  .tc-pill{font-size:9.5px;padding:8px 12px}
}

/* ── 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. */

/* Hero, on load. Each line is offset from the last so the headline reads as
   being set rather than dropped in. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.hero .eyebrow{animation:rise .7s cubic-bezier(.2,.8,.3,1) both}
.hero h1{animation:rise .8s cubic-bezier(.2,.8,.3,1) .10s both}
.hero-note{animation:rise .8s cubic-bezier(.2,.8,.3,1) .26s both}
.hero .hero-cta{animation:rise .8s cubic-bezier(.2,.8,.3,1) .36s both}
.brand,.navcta,.menu{animation:fade .9s ease .05s both}
.trust{animation:fade 1s ease .5s 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,.brand,.navcta,.menu,.trust{animation:none}
  .reveal,.reveal-group > *{opacity:1;transform:none;transition:none}
}