/* ==========================================================================
   York Road Dental Practice, New Barnet

   Direction: the practice's own record card. Their sign is navy on white, so
   the page is navy on a cool grey-green paper — not the warm cream a dental
   site defaults to. Content sits on white cards that lift off the ground,
   labelled in monospace like clinical documentation. The form is a clinical
   record; the writing inside it is warm. That tension is the practice.

   Signature: fifty-nine marks, one per Google review, filling in as you scroll.
   ========================================================================== */

:root{
  /* taken from the navy on their own forecourt sign */
  --ink:#16233C;
  --ink-2:#33456A;
  --ink-3:#4E5D7A;      /* 5.0:1 on paper-2, 5.5:1 on paper */

  --paper:#E9ECE6;   /* cool grey-green record card, not cream */
  --paper-2:#DFE3DC;
  --card:#FBFBF9;

  --nil:#6F9282;        /* eau de nil — fills and rules only (3:1 class) */
  --nil-ink:#4A6B5C;    /* the same green, dark enough to set text in (5.7:1) */
  --signal:#B94D33;     /* 4.9:1 on card — used twice on the whole page */

  --rule:rgba(22,35,60,.15);
  --rule-2:rgba(22,35,60,.08);
  --shadow:0 1px 2px rgba(22,35,60,.05),0 8px 24px -12px rgba(22,35,60,.16);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --gut:clamp(1.25rem,4.5vw,4.5rem);
  --sec-y:clamp(5.5rem,12vh,9.5rem);
  --maxw:78rem;

  --blur:7px;
  --lift:44px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}


/* ==========================================================================
   THE OPENING
   A panel that covers the page, draws the practice's own mark, then lifts.
   Every step is a CSS animation with a forwards fill, so it removes itself
   with no script involved: there is no failure mode where a visitor is left
   looking at a navy rectangle.
   ========================================================================== */
.intro{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);color:var(--paper);
  display:grid;place-content:center;justify-items:center;gap:1.25rem;
  animation:intro-lift .8s cubic-bezier(.76,0,.24,1) 1.25s forwards;
}
.intro-mark{
  width:64px;height:64px;display:grid;place-items:center;
  border:1px solid rgba(233,236,230,.28);
  animation:intro-mark-in .7s cubic-bezier(.22,1,.36,1) backwards;
}
.intro-mark svg{width:34px;height:34px}
.intro-mark svg path{
  stroke-dasharray:27;   /* the 7: 12 across + 14.4 down */
  animation:draw-mark .85s cubic-bezier(.22,1,.36,1) .1s backwards;
}
.intro-name{
  margin:0;max-width:none;text-align:center;
  font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;
  animation:intro-name-in .55s cubic-bezier(.22,1,.36,1) .28s backwards;
}
.intro-name em{
  display:block;font:400 .625rem/1.2 var(--mono);font-style:normal;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(233,236,230,.55);margin-top:.4rem;
}
.intro-rule{
  width:96px;height:1px;background:rgba(233,236,230,.25);position:relative;overflow:hidden;
}
.intro-rule::after{
  content:"";position:absolute;inset:0;background:var(--nil);
  transform-origin:left;animation:intro-fill 1.15s cubic-bezier(.4,0,.2,1) .1s backwards;
}
@keyframes intro-mark-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes intro-name-in{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes intro-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-lift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-101%,0);visibility:hidden;pointer-events:none}
}

/* an entrance is exactly the kind of motion to skip, and a repeat visit within
   the same session does not need introducing again */
.rm .intro,.seen-intro .intro,
html:not(.js) .intro{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* paper grain — stops the flat fields reading as screen-flat */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:40}
.topbar i{display:block;height:100%;background:var(--nil);transform-origin:left;transform:scaleX(var(--sp,0))}

/* ---------- masthead ---------- */
.masthead{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:clamp(1.1rem,2.6vh,1.75rem) var(--gut);
}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark-glyph{
  width:2rem;height:2rem;flex:none;border:1px solid var(--ink);
  display:grid;place-items:center;color:var(--ink);
  transition:background .4s ease,color .4s ease;
}
.mark-glyph svg{width:1.1rem;height:1.1rem}
.mark:hover .mark-glyph{background:var(--ink);color:var(--paper)}
.mark-txt{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  line-height:1.1;letter-spacing:-.015em;display:block;
}
.mark-txt em{
  display:block;font:400 .625rem/1.2 var(--mono);font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:.22rem;
}
.mast-right{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}
.mast-note{
  display:none;font:400 .625rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
@media (min-width:620px){.mast-note{display:block}}
.mast-link{
  display:none;font:400 .8125rem/1 var(--body);text-decoration:none;
  color:var(--ink-2);align-items:center;min-height:44px;
  border-bottom:1px solid transparent;
  transition:border-color .35s ease,color .35s ease;
}
@media (min-width:720px){.mast-link{display:inline-flex}}
.mast-link:hover{color:var(--ink);border-color:var(--ink)}
.mast-link[aria-current="page"]{color:var(--ink);border-color:var(--nil)}
.mast-tel{
  font:500 .8125rem/1 var(--mono);letter-spacing:.02em;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid var(--rule);
  transition:border-color .35s ease;
}
.mast-tel:hover{border-color:var(--ink)}

/* ---------- shared ---------- */
.sec{padding:var(--sec-y) var(--gut);max-width:calc(var(--maxw) + var(--gut)*2);margin-inline:auto}
.sec-head{margin-bottom:clamp(2.25rem,5vh,3.5rem)}
.tag{
  font:400 .6875rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.6rem;
}
.tag::before{content:"";width:1.5rem;height:1px;background:var(--nil);flex:none}
.tag-light{color:rgba(233,236,230,.6)}

.display{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.5rem,6.4vw,5rem);
  line-height:1.0;letter-spacing:-.035em;
  margin:0 0 clamp(1.35rem,3vh,2rem);max-width:14ch;
  text-wrap:balance;
}
.h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.08;letter-spacing:-.025em;
  margin:0 0 1.25rem;max-width:19ch;text-wrap:balance;
}
p{margin:0 0 1.15em;max-width:56ch}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:var(--ink-2);max-width:46ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:0 1.75rem;font:500 .875rem/1 var(--body);letter-spacing:.01em;
  border:1px solid var(--ink);
  transition:background .35s ease,color .35s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn-wide{margin-top:clamp(2rem,5vh,3rem)}
.btn-quiet{
  display:inline-flex;align-items:center;min-height:52px;
  font:400 .875rem/1 var(--body);text-decoration:none;color:var(--ink-2);
  border-bottom:1px solid var(--rule);transition:border-color .35s ease,color .35s ease;
}
.btn-quiet:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- 01 opening ---------- */
.open{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  padding:clamp(7.5rem,16vh,11rem) var(--gut) clamp(4rem,9vh,7rem);
  max-width:calc(var(--maxw) + var(--gut)*2);margin-inline:auto;
  align-items:center;
}
@media (min-width:940px){
  .open{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:clamp(3rem,6vw,6rem);min-height:100svh}
}
.open-inner{padding-top:clamp(6.5rem,13vh,9rem);padding-bottom:clamp(3rem,7vh,5rem)}
@media (min-width:940px){.open-inner{min-height:auto}}
.facts{
  display:grid;gap:0;margin:clamp(1.75rem,4vh,2.5rem) 0 0;
  border-top:1px solid var(--rule);
}
@media (min-width:520px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts div{padding:.95rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:520px){
  .facts div{border-bottom:none;padding-right:1rem}
  .facts div + div{border-left:1px solid var(--rule);padding-left:1.25rem}
}
.facts dt{font:400 .625rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{
  margin:.5rem 0 0;font-family:var(--display);font-weight:600;
  font-size:1.375rem;letter-spacing:-.02em;line-height:1;
}
.facts dd span{font:400 .75rem/1 var(--body);letter-spacing:0;color:var(--ink-3);margin-left:.35rem}
.open-act{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:clamp(1.75rem,4vh,2.5rem)}

.open-img{margin:0;position:relative;background:var(--paper-2)}
.open-img img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 38%}
@media (min-width:940px){.open-img img{aspect-ratio:4/5}}
.open-img figcaption{
  position:absolute;left:0;bottom:0;
  font:400 .625rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:.6rem .85rem;
}

/* ---------- 02 the sign ---------- */
.sec-sign{background:var(--paper-2);max-width:none;padding-inline:0}
.sec-sign-in{
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
  max-width:calc(var(--maxw) + var(--gut)*2);margin-inline:auto;
  padding-inline:var(--gut);
}
@media (min-width:940px){
  .sec-sign-in{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
}
.sec-sign .lit{color:var(--ink-2);max-width:44ch}

/* white surfaces that lift off the paper — this is where depth comes from */
.card{
  background:var(--card);border:1px solid var(--rule-2);
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.2vw,2.25rem);
}
.sign-card{margin:0}
.sign-card .card{text-align:center;max-width:26rem}
.card-head{
  font-family:var(--display);font-weight:700;font-size:1.125rem;
  line-height:1.15;letter-spacing:-.01em;margin:0 0 1.25rem;max-width:none;
}
.card-head em{
  display:block;font:400 .625rem/1.2 var(--mono);font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:.35rem;
}
.card-list{
  list-style:none;margin:0;padding:1.25rem 0 0;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.6rem;
}
.card-list li{font:400 .75rem/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.card-list .hit{color:var(--signal);font-weight:500}
.card-strap{
  margin:1.25rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);
  font:italic 400 .8125rem/1.4 var(--body);color:var(--ink-3);max-width:none;
}
.sign-card figcaption{
  margin-top:1.25rem;font-size:.875rem;color:var(--ink-3);max-width:34rem;line-height:1.55;
}
.sign-card figcaption em{font-style:italic;color:var(--ink)}

/* words light as the reading line reaches them */
.lit{color:var(--ink-2)}
.js .lit .w{opacity:calc(.18 + .82 * var(--w,0))}
html:not(.js) .lit .w,.rm .lit .w{opacity:1}

/* ---------- 03 treatment cards ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule-2)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards .card{box-shadow:none;border:none;display:flex;flex-direction:column}
.c-ix{font:500 .6875rem/1 var(--mono);letter-spacing:.14em;color:var(--nil-ink);margin:0 0 1.1rem}
.cards h3{
  font-family:var(--display);font-weight:600;font-size:1.125rem;
  line-height:1.2;letter-spacing:-.015em;margin:0 0 .6rem;
}
.cards p:not(.c-ix):not(.band-fee){font-size:.9375rem;color:var(--ink-3);line-height:1.55;margin:0}
.hit-card .c-ix{color:var(--signal)}

/* statutory figures: tabular so the column lines up down the grid */
.bands .card{gap:0}
.band-fee{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  margin:0 0 .75rem;color:var(--ink);
}
.hit-card .band-fee{color:var(--signal)}
.bands h3{margin-bottom:.55rem}

/* ---------- 04 the practice ---------- */
.sec-practice{display:grid;gap:clamp(2rem,4.5vw,4rem);align-items:center}
@media (min-width:940px){.sec-practice{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.wide-img{margin:0;background:var(--paper-2)}
.wide-img img{width:100%;height:auto;aspect-ratio:1400/787;object-fit:cover}  /* matches the files exactly, so no reflow when they land */
.practice-txt p:not(.tag){color:var(--ink-3);max-width:42ch}

/* ---------- 05 signature: fifty-nine marks ---------- */
.sec-score{background:var(--ink);color:var(--paper);max-width:none;padding:0}
.pin-track{position:relative;height:340vh}
@media (max-width:759px){.pin-track{height:270vh}}
.pin-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3.5rem,8vh,6rem) var(--gut);
}
.pin-inner{
  max-width:var(--maxw);width:100%;margin-inline:auto;
  display:grid;gap:clamp(2rem,4vw,3.5rem);
}
@media (min-width:940px){
  .pin-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(2.5rem,5vw,5rem);align-items:center}
}
.score-side{min-width:0}

.score{display:flex;align-items:flex-end;flex-wrap:wrap;gap:clamp(1rem,3vw,2.5rem);margin:0 0 clamp(1.5rem,3.5vh,2.25rem)}
.score p{margin:0;max-width:none}
.score-n,.score-r{
  font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.85;
  display:flex;align-items:baseline;gap:.6rem;
}
.score-n{font-size:clamp(3.5rem,11vw,8rem)}
.score-r{font-size:clamp(2rem,5.5vw,4rem);color:var(--paper)}
.score-n em,.score-r em{
  font:400 .625rem/1 var(--mono);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(233,236,230,.5);
}
/* Normally an anti-pattern at display size, but this figure animates in
   place: proportional digits would shift the layout on every tick. */
.score-n span{font-variant-numeric:tabular-nums}

.marks{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(.35rem,.9vw,.75rem);width:100%;max-width:44rem;margin:0;
}
@media (max-width:520px){.marks{grid-template-columns:repeat(10,1fr);max-width:22rem}}
.marks i{
  display:block;aspect-ratio:1;background:var(--nil);
  opacity:calc(.09 + .91 * var(--w,0));
  transform:scale(calc(.55 + .45 * var(--w,0)));
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.score-note{
  font-size:.9375rem;color:rgba(233,236,230,.62);max-width:44ch;line-height:1.6;
  border-left:1px solid rgba(233,236,230,.2);padding-left:1.15rem;
}
.score-note em{font-style:normal;color:var(--paper)}

.pin-meter{
  position:absolute;left:var(--gut);bottom:clamp(1.75rem,5vh,3rem);
  width:clamp(3rem,10vw,6rem);height:1px;background:rgba(233,236,230,.22);
}
.pin-meter i{display:block;height:100%;background:var(--nil);transform-origin:left;transform:scaleX(var(--pin,0))}

.quotes-wrap{max-width:calc(var(--maxw) + var(--gut)*2)}
.quotes{display:grid;gap:clamp(1.5rem,3.5vw,2.5rem);
  border-top:1px solid rgba(233,236,230,.16);padding-top:clamp(2rem,5vh,3rem)}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quotes blockquote{margin:0}
.quotes p{font-size:1rem;line-height:1.55;color:rgba(233,236,230,.88);margin:0 0 .9rem;max-width:none}
.quotes cite{font:400 .625rem/1 var(--mono);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(233,236,230,.58)}  /* 5.3:1 on navy */

/* ---------- 06 visit ---------- */
.visit{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:760px){.visit{grid-template-columns:repeat(3,1fr)}}
.visit-card{display:flex;flex-direction:column}
.c-lbl{font:400 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.1rem}
.v-addr{font-family:var(--display);font-weight:600;font-size:1.1875rem;line-height:1.35;
  letter-spacing:-.015em;margin:0 0 1.1rem}
.lnk{font-size:.875rem;text-decoration:none;border-bottom:1px solid var(--rule);
  display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;
  transition:border-color .35s ease}
.lnk:hover{border-color:var(--ink)}
.hours{border-collapse:collapse;width:100%;font:400 .875rem/1 var(--mono)}
.hours td{padding:.6rem 0;border-bottom:1px solid var(--rule-2)}
.hours tr:last-child td{border-bottom:none}
.hours td:first-child{color:var(--ink-3)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours-note{margin:.9rem 0 0;font-size:.8125rem;color:var(--ink-3);max-width:none}
.v-tel{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.025em;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  align-self:flex-start;margin-bottom:.75rem}
.v-fine{font-size:.875rem;color:var(--ink-3);line-height:1.55;margin:0}
.v-urgent{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--rule-2);
  display:flex;flex-direction:column;max-width:none}
.v-urgent span{font:400 .625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.v-urgent a{font-family:var(--display);font-weight:600;font-size:1.1875rem;letter-spacing:-.02em;
  color:var(--signal);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;align-self:flex-start}

/* ---------- the callback request ----------
   The site argues that these patients do not want to phone, so the page must
   not end on a phone number alone. */
.sec-ask{background:var(--paper-2);max-width:none;padding-inline:0}
.ask-wrap{
  display:grid;gap:clamp(2rem,4.5vw,4rem);align-items:start;
  max-width:calc(var(--maxw) + var(--gut)*2);margin-inline:auto;
  padding-inline:var(--gut);
}
@media (min-width:940px){.ask-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.ask-intro p:not(.tag){color:var(--ink-2);max-width:40ch}
.ask-note{
  margin-top:1.1rem;padding-left:1rem;border-left:1px solid var(--rule);
  font-size:.875rem;color:var(--ink-3);
}

.ask-form{
  background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.2vw,2.5rem);
}
.ask-row{display:grid;gap:1rem}
@media (min-width:560px){.ask-row{grid-template-columns:1fr 1fr;gap:1.25rem}}
.fld{margin:0 0 1.25rem;max-width:none}
.fld label{
  display:block;margin-bottom:.45rem;
  font:400 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.fld label span{text-transform:none;letter-spacing:.02em;opacity:.75}
.fld input,.fld textarea{
  width:100%;font:400 1rem/1.5 var(--body);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);
  padding:.85rem .9rem;min-height:52px;border-radius:0;
  transition:border-color .3s ease,background .3s ease;
}
.fld textarea{min-height:auto;resize:vertical}
.fld input:focus,.fld textarea:focus{
  outline:none;border-color:var(--ink);background:var(--card);
  box-shadow:0 0 0 3px rgba(111,146,130,.28);
}
.fld input[aria-invalid="true"]{border-color:var(--signal)}
.fld-err{display:block;margin-top:.4rem;font-size:.8125rem;color:var(--signal);min-height:1em}

.fld-check{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 1.5rem;max-width:none}
.fld-check input{
  flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--ink);cursor:pointer;
}
.fld-check label{font-size:.9375rem;line-height:1.45;color:var(--ink-2);cursor:pointer}

/* a field only a bot fills in */
.ask-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ask-form .btn{width:100%}
@media (min-width:560px){.ask-form .btn{width:auto;min-width:14rem}}
.ask-form .btn:disabled{opacity:.55;cursor:default}
.ask-msg{margin:1rem 0 0;font-size:.9375rem;line-height:1.55;max-width:46ch}
.ask-msg.is-good{color:var(--nil-ink)}
.ask-msg.is-bad{color:var(--signal)}
.ask-fine{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--rule-2);
  font-size:.8125rem;color:var(--ink-3);max-width:none}
.ask-fine a{color:var(--ink);text-underline-offset:3px}

/* ---------- the thank-you page ---------- */
.booked{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,14vh,9rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2);margin-inline:auto;
}

/* ---------- footer: uncovered like a curtain ----------
   .curtain is a clip window sitting in normal flow. The footer inside it is
   fixed to the viewport, so as the page scrolls away the window grows and the
   footer is revealed from underneath rather than scrolling up into place. */
.curtain{
  position:relative;height:100svh;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.foot{
  position:fixed;bottom:0;left:0;width:100%;height:100svh;
  background:var(--ink);color:var(--paper);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.5rem,4vh,3rem) var(--gut);
}

/* the practice name, oversized, as ground rather than content */
.foot-giant{
  position:absolute;left:50%;bottom:-2vh;transform:translateX(-50%);
  margin:0;max-width:none;white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:700;font-size:19vw;line-height:.75;
  letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(233,236,230,.14);
}

.foot-rule{
  position:relative;overflow:hidden;margin-inline:calc(var(--gut) * -1);
  border-block:1px solid rgba(233,236,230,.14);padding-block:.7rem;
}
.foot-run{
  display:flex;width:max-content;gap:1.5rem;align-items:center;
  font:400 .6875rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(233,236,230,.55);
  animation:footrun 38s linear infinite;
}
.foot-run i{color:var(--nil);font-style:normal;font-size:.5rem}
@keyframes footrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.foot-mid{position:relative;z-index:2;margin-block:auto;max-width:var(--maxw);width:100%;margin-inline:auto}
.foot-ask{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem,4vw,2.75rem);line-height:1.05;letter-spacing:-.03em;
  margin:0 0 .6rem;max-width:16ch;
}
.foot-tel{
  display:inline-block;text-decoration:none;
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.4rem,8.5vw,6rem);line-height:1;letter-spacing:-.045em;
  color:var(--paper);margin:0 0 1rem;
  transition:color .4s ease;
}
.foot-tel:hover{color:var(--nil)}
.foot-sub{font-size:.9375rem;color:rgba(233,236,230,.62);max-width:46ch;margin:0 0 1.75rem;line-height:1.6}
.foot-links{display:flex;flex-wrap:wrap;gap:.6rem}
.foot-links a{
  display:inline-flex;align-items:center;min-height:46px;padding:0 1.15rem;
  border:1px solid rgba(233,236,230,.2);border-radius:999px;
  font:400 .8125rem/1 var(--body);text-decoration:none;color:rgba(233,236,230,.82);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.foot-links a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.foot-links .foot-urgent{color:var(--nil);border-color:rgba(111,146,130,.45)}
.foot-links .foot-urgent:hover{background:var(--nil);color:var(--ink);border-color:var(--nil)}

.foot-bottom{
  position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;max-width:var(--maxw);width:100%;margin-inline:auto;
}
.foot-name{font-family:var(--display);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.02em;margin:0 0 .3rem;max-width:none}
.foot-meta{font:400 .6875rem/1.6 var(--mono);letter-spacing:.05em;
  color:rgba(233,236,230,.62);margin:0;max-width:none}
.to-top{
  flex:none;width:52px;height:52px;border-radius:999px;
  border:1px solid rgba(233,236,230,.24);color:var(--paper);
  display:grid;place-items:center;text-decoration:none;
  transition:background .35s ease,color .35s ease;
}
.to-top svg{width:1.2rem;height:1.2rem;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.to-top:hover{background:var(--paper);color:var(--ink)}
.to-top:hover svg{transform:translateY(-3px)}
.foot-note{
  position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:1.25rem auto 0;
  padding-top:1rem;border-top:1px solid rgba(233,236,230,.14);
  font-size:.6875rem;line-height:1.6;color:rgba(233,236,230,.5);
}

/* a fixed panel that does not move with the page is disorienting when the
   reader has asked for less movement, so it becomes an ordinary block */
@media (max-width:759px){
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .foot-giant{font-size:26vw}
}

/* ==========================================================================
   MOTION — all scroll-linked, all reversible. Nothing is triggered.
   ========================================================================== */
.js [data-fx]{
  --p:0;
  opacity:calc(.12 + .88 * var(--p));
  filter:blur(calc((1 - var(--p)) * var(--blur)));
  transform:translate3d(0,calc((1 - var(--p)) * var(--lift)),0);
}
.js [data-fx].live{will-change:opacity,filter,transform}

/* the wipe owns its element's entrance, so the generic resolve stands down */
.js [data-wipe]{
  opacity:1;filter:none;transform:none;
  clip-path:inset(0 0 calc((1 - var(--wipe,0)) * 100%) 0);
}
html:not(.js) [data-wipe],.rm [data-wipe]{clip-path:none}

.js [data-par] img{
  transform:translate3d(0,calc((var(--q,.5) - .5) * -30px),0) scale(calc(1.08 - .04 * var(--p,0)));
}

@media (max-width:759px){
  :root{--blur:4px;--lift:28px}
  .js [data-par] img{transform:scale(1.02)}
}

html:not(.js) [data-fx]{opacity:1!important;filter:none!important;transform:none!important}
/* blur is the tiring part, not the travel */
.rm [data-fx]{filter:none!important}
/* Reduced motion removes what moves on its own or moves the ground under you:
   parallax, blur, the running marquee. Anything the reader drives with their
   own scroll stays — it is predictable and stops when they stop. */
.rm [data-par] img,html:not(.js) [data-par] img{transform:none!important}
html:not(.js) .marks i{opacity:1;transform:none}
html:not(.js) .pin-track{height:auto}
html:not(.js) .pin-stage{position:static;height:auto;padding-block:var(--sec-y)}
html:not(.js) .pin-meter{display:none}


/* ==========================================================================
   PER-SECTION MOTION

   Each section gets its own mechanism rather than more of the same reveal.
   Transform and opacity only, all driven by scroll position, all reversible,
   all of it stands down under reduced motion.
   ========================================================================== */

/* ---------- the opening, on arrival ----------
   Scroll motion cannot help the first screen: it is already there when the
   page loads. So the opening introduces itself once — the lines arrive in
   reading order, the photograph settles out of a slight over-scale — and then
   hands over to the scroll. It runs for a second and never again. */
@keyframes intro-rise{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes intro-settle{
  from{opacity:0;transform:scale(1.07)}
  to{opacity:1;transform:scale(1)}
}
.js .open-txt > *{
  animation:intro-rise .85s cubic-bezier(.22,1,.36,1) backwards;
}
.js .open-txt > *:nth-child(1){animation-delay:.12s}
.js .open-txt > *:nth-child(2){animation-delay:.20s}   /* headline: see the enamel rule */
.js .open-txt > *:nth-child(3){animation-delay:.30s}
.js .open-txt > *:nth-child(4){animation-delay:.40s}
.js .open-txt > *:nth-child(5){animation-delay:.50s}
.js .open-img{animation:intro-settle 1.1s cubic-bezier(.22,1,.36,1) .18s backwards}
.js .masthead{animation:intro-rise .7s ease-out .05s backwards}

/* it is an entrance, which is exactly the kind of movement to skip */
.rm .open-txt > *,.rm .open-img,.rm .masthead{animation:none}
@media (prefers-reduced-motion:reduce){
  .open-txt > *,.open-img,.masthead{animation:none!important}
}


/* Enamel is the only thing in this trade that catches light like that: a soft
   band travelling across a polished surface. The headline gets it once, on
   arrival. Guarded, because without background-clip the text would be
   transparent and there would be no headline at all. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .js .open .display{
    /* a fixed hex, not color-mix: if that function were unsupported the whole
       gradient would be dropped and this text is transparent by design, so the
       headline would simply vanish. No dependency, no failure mode. */
    background-image:linear-gradient(100deg,
      var(--ink) 0 42%,
      #5D7C86 50%,
      var(--ink) 58% 100%);
    background-size:280% 100%;
    background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:intro-rise .85s cubic-bezier(.22,1,.36,1) .20s backwards,
              enamel 1.9s cubic-bezier(.4,0,.2,1) .45s backwards;
  }
  @keyframes enamel{
    from{background-position:135% 0}
    to{background-position:0 0}
  }
}

/* the practice's own bow window, drawn rather than placed */
.js .mark-glyph svg path{
  stroke-dasharray:27;   /* the 7: 12 across + 14.4 down */
  animation:draw-mark 1.1s cubic-bezier(.22,1,.36,1) .35s backwards;
}
@keyframes draw-mark{
  from{stroke-dashoffset:27}
  to{stroke-dashoffset:0}
}

.rm .open .display,.rm .mark-glyph svg path{animation:none}
@media (prefers-reduced-motion:reduce){
  .open .display{animation:none!important}
  .mark-glyph svg path{animation:none!important;stroke-dasharray:none}
}

/* 01 — two layers, not five.
   Moving each line at its own rate made the block come apart while it was
   still being read: the heading outran the sentence under it and the whole
   thing stopped being one message. The text now travels as a single unit and
   the photograph goes the other way. That is enough to read as depth, and it
   leaves the words legible the entire time. */
.js .open-txt{transform:translate3d(0,calc(var(--e,0) * -120px),0)}
.js .open-img{transform:translate3d(0,calc(var(--e,0) * 70px),0)}
.js .open-img img{
  transform:translate3d(0,calc((var(--q,.5) - .5) * -30px),0)
            scale(calc(1.03 + var(--e,0) * .12 - .03 * var(--p,0)));
}

/* the rule beside every eyebrow draws itself */
.js .tag[data-fx]::before{transform:scaleX(var(--p,1));transform-origin:left}

/* ---------- 03 — the horizontal rail ----------
   The section is pinned and the row travels across it, so scrolling down moves
   the page sideways. Dark ground so the cards actually read as objects, and
   each card is weighted by how near the middle it is, which is what makes the
   travel visible at all. */
.sec-rail{background:var(--ink);color:var(--paper);max-width:none;padding:0}
.rail-track{height:225vh}
@media (max-width:759px){.rail-track{height:300vh}}
.rail-stage{justify-content:center;gap:clamp(1.75rem,5vh,3rem);padding-inline:0;overflow:hidden}
.rail-head{
  padding-inline:var(--gut);max-width:calc(var(--maxw) + var(--gut)*2);
  width:100%;margin-inline:auto;
}
.rail-head .tag{color:rgba(233,236,230,.6)}
.rail-head .h2{margin-bottom:1.5rem;color:var(--paper)}
.rail-meter{width:clamp(4rem,14vw,9rem);height:2px;background:rgba(233,236,230,.22)}
.rail-meter i{display:block;height:100%;background:var(--nil);
  transform-origin:left;transform:scaleX(var(--pin,0))}

.rail-cards{
  list-style:none;margin:0;padding-inline:var(--gut);
  display:flex;align-items:stretch;gap:clamp(1rem,2vw,1.75rem);
  width:max-content;will-change:transform;
}
.rail-card{
  --f:1;
  flex:none;width:min(80vw,23rem);
  /* the section is dark and sets a light colour; a light card must undo that
     or its own text disappears into it */
  background:var(--card);color:var(--ink);border:none;border-radius:2px;
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;
  /* the card being read sits forward; the rest are on their way past */
  opacity:calc(.34 + .66 * var(--f));
  transform:scale(calc(.86 + .14 * var(--f)));
  transform-origin:50% 50%;
  box-shadow:0 24px 60px -28px rgba(0,0,0,calc(.15 + .5 * var(--f)));
}
.rail-card .c-ix{
  /* the number tops the card; on a phone it sits right above the title */
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.5rem,5vw,3.75rem);line-height:.9;letter-spacing:-.04em;
  color:var(--ink);opacity:.16;margin:0 0 auto;
}
.hit-card.rail-card .c-ix{
  /* the number tops the card; on a phone it sits right above the title */color:var(--signal);opacity:.85}
.rail-card h3{
  font-family:var(--display);font-weight:600;font-size:1.375rem;
  line-height:1.15;letter-spacing:-.02em;margin:1.75rem 0 .7rem;
}
.rail-card p:not(.c-ix){font-size:.9375rem;color:var(--ink-3);line-height:1.55;margin:0}

/* On a phone the opening is stacked, not side by side, so fading the text as
   it leaves only makes the thing you are reading harder to read. Keep a little
   travel, drop the fade, and let the photograph do the moving. */
@media (max-width:939px){
  /* stacked on a phone, so the text must not drift away from the photograph */
  .js .open-txt{transform:translate3d(0,calc(var(--e,0) * -55px),0)}
  .js .open-img{transform:none}
  .js .open-img img{transform:scale(calc(1.02 + var(--e,0) * .10))}
}
}

/* the pinned rail floats in the middle of a tall phone screen unless the card
   is allowed to take up the room */
@media (max-width:759px){
  .rail-stage{gap:1.25rem;padding-block:clamp(2rem,5vh,3rem)}
  .rail-card .c-ix{margin-bottom:1.25rem}
  .rail-card h3{margin-top:0}
  .rail-card{min-height:0;width:min(76vw,20rem)}
  .rail-head .h2{margin-bottom:1.1rem}
}

/* 04 — the wide photographs pan inside their frame as you pass */
.wide-img img{aspect-ratio:21/10}
.js [data-pan] img{object-position:center calc(24% + var(--q,.5) * 46%)}

/* 07 — the page must not trail off. The last section arrives in two pieces
   from two directions: the copy slides in from the side while the form rises
   and settles up out of a shrink. */
/* must out-specify the generic .js [data-fx] rule further down, or that one
   wins on source order and pins the transform back to vertical */
.js .ask-intro[data-fx]{transform:translate3d(calc((1 - var(--p)) * -120px),0,0)}
.js .ask-form[data-fx]{
  transform:translate3d(calc((1 - var(--p)) * 120px),calc((1 - var(--p)) * 60px),0)
            scale(calc(.88 + .12 * var(--p)));
  transform-origin:50% 100%;
}

/* 06 — the visit cards drop in from above and land, one after another,
   instead of rising like everything else. */
.js .visit-card[data-fx]{
  transform:translate3d(0,calc((var(--p) - 1) * 130px),0)
            rotate(calc((1 - var(--p)) * -1.4deg));
  transform-origin:50% 0;
}

/* ---------- stand down ----------
   Only the self-running and the ground-moving. The rail still travels, the
   cards still fall, the sections still hold: the reader is driving all of it. */
.rm .open-img img,html:not(.js) .open-img img{transform:none!important}
html:not(.js) .open .display,html:not(.js) .open .lede,html:not(.js) .open .facts,
html:not(.js) .open .open-act,html:not(.js) .open .tag,html:not(.js) .ask-intro,
html:not(.js) .ask-form{transform:none!important;opacity:1!important}
.rm .ask-form[data-fx]{transform:translate3d(0,calc((1 - var(--p)) * 40px),0)}
.rm [data-pan] img,html:not(.js) [data-pan] img{object-position:center 40%}
.rm .foot-run,html:not(.js) .foot-run{animation:none}
.rm .scrollcue i::after{animation:none;transform:scaleX(1)}
html:not(.js) .open-txt,html:not(.js) .open-img{transform:none!important;opacity:1!important}
html:not(.js) .visit-card{transform:none!important}
html:not(.js) .rail-track{height:auto}
html:not(.js) .rail-stage{position:static;height:auto;padding-block:var(--sec-y)}
html:not(.js) .rail-cards{transform:none!important;width:auto;flex-wrap:wrap}
html:not(.js) .rail-card{width:min(100%,22rem);opacity:1;transform:none}
html:not(.js) .rail-meter,html:not(.js) .curtain{height:auto}
html:not(.js) .curtain{clip-path:none}
html:not(.js) .foot{position:static;height:auto;padding-block:clamp(3rem,8vh,5rem)}
html:not(.js) .foot-giant{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-fx]{filter:none!important}
  [data-par] img{transform:none!important}
  [data-pan] img{object-position:center 40%}
  .open-img img{transform:none!important}
  .foot-run{animation:none}
  .scrollcue i::after{animation:none;transform:scaleX(1)}
}

a:focus-visible,button:focus-visible{outline:2px solid var(--nil);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}