/* ---------------------------------------------------------------------------
   The Chelmer Clinic, campaign landing pages.

   Same system as the main site (see DIRECTION.md): Jost only, no serif except
   the mark, zero radius on structural elements, no shadows, pill buttons.

   One deliberate departure from DIRECTION.md, on the client's explicit
   instruction that visitors must click the call button immediately: the primary
   call to action is a SOLID pill, not an outline. Paid traffic gives a page one
   glance and an outline button loses it. It is solid bone on dark and solid
   green on light, both inside the palette. Nothing else on the page is filled,
   and this exception does not travel back to the main site.
--------------------------------------------------------------------------- */

/* Self-hosted rather than pulled from Google Fonts: it removes a third-party
   render-blocking request on a page whose whole job is to load fast, and the
   page no longer breaks if that host is slow or blocked. */
@font-face{font-family:Jost;src:url(/assets/fonts/Jost-300.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/Jost-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/Jost-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --green:#3e3b3b;
  --green-d:#2e2c2c;
  --green-l:#514d4d;
  --bone:#ede7db;
  --stone:#ede2d1;
  --white:#fff;
  --brass:#bbab96;
  --brass-d:#6a5e51;
  --ink:#3e3b3b;
  --ink-soft:#5f5a55;     /* 5.32:1 on --stone, so it clears the floor unaided now */
  /* Kept because markup still references it. Slightly darker again (5.55:1). */
  --ink-on-stone:#525a55;
  --on-dark:#ede7db;
  --on-dark-soft:#b3aba0;
  --line:#cfc4b0;
  --dock:64px;              /* height of the fixed call bar */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:Jost,ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400;font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                  /* the old pages overflowed sideways on a phone */
  padding-bottom:var(--dock);         /* keep the dock off the last line of copy */
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:300;letter-spacing:-.012em;margin:0;text-wrap:balance}
h2{font-size:clamp(27px,5.2vw,44px);line-height:1.14}
h3{font-size:clamp(19px,2.4vw,23px);line-height:1.24}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid currentColor;border-radius:100px;
  padding:15px 30px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:500;text-decoration:none;background:transparent;
  min-height:52px;                    /* comfortable thumb target */
  transition:background .35s cubic-bezier(.2,.7,.2,1),color .35s,border-color .35s;
}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn.solid{background:var(--bone);border-color:var(--bone);color:var(--green)}
.btn.solid:hover{background:var(--white);border-color:var(--white)}
.btn.ghost{color:var(--on-dark);border-color:rgba(237,231,219,.45)}
.btn.ghost:hover{background:var(--bone);border-color:var(--bone);color:var(--green)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- top bar ---------- */
.bar{position:absolute;top:0;left:0;right:0;z-index:20;padding:16px 0}
/* its own wash, so the bar reads the same whatever sits behind it */
.bar:before{content:"";position:absolute;left:0;right:0;top:0;height:150px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,22,22,.62) 0%,rgba(24,22,22,.26) 55%,rgba(24,22,22,0) 100%)}
.bar .wrap{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.bar img{width:112px;height:auto}
.bar .tel{color:var(--on-dark);text-decoration:none;font-size:13px;
  letter-spacing:.06em;display:inline-flex;align-items:center;gap:8px;
  padding:9px 0;white-space:nowrap;min-height:44px}
.bar .tel svg{width:15px;height:15px;fill:currentColor;flex:none}
@media(min-width:720px){.bar img{width:140px}.bar .tel{font-size:15px}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--green-d)}
.hero-media{position:absolute;inset:0}
/* Each page sets --hero-pos inline. See the note above `pages` in
   scripts/build-landing.mjs for how the values were arrived at. */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,center 38%);
  filter:saturate(.62) contrast(1.14) brightness(.7)}
.hero-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(24,22,22,.66) 0%,rgba(24,22,22,.46) 34%,rgba(24,22,22,.96) 100%)}
.hero-in{position:relative;z-index:2;color:var(--on-dark);padding:0 0 46px;width:100%}
.hero h1{font-size:clamp(34px,7.4vw,64px);line-height:1.04;letter-spacing:-.026em;
  margin:0 0 18px;max-width:17ch}
.hero .sub{font-size:clamp(15px,1.9vw,18.5px);line-height:1.65;
  color:var(--on-dark-soft);max-width:46ch;margin:0 0 26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:11px}
.hero .note{margin:22px 0 0;font-size:13px;color:var(--on-dark-soft);letter-spacing:.02em}
@media(min-width:900px){.hero-in{padding-bottom:74px}}

/* ---------- call-back form ----------
   Only on pages that already had one. The call buttons stay the primary path,
   so this sits below the hero and is deliberately short: two fields, because
   the handler on the server only reads two. Zero radius and no shadow, like
   everything else; the submit button reuses .btn.solid. */
.callback{background:var(--green);color:var(--on-dark);padding:34px 0}
.callback h2{font-size:clamp(22px,3.4vw,29px);margin:0 0 8px}
.callback .cb-sub{margin:0 0 20px;color:var(--on-dark-soft);font-size:15px;max-width:52ch}
.callback form{margin:0}
/* Honeypots. Off-screen rather than display:none, which some bots skip. */
.callback input[aria-hidden="true"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cb-row{display:grid;gap:12px}
.callback label{display:block}
.callback label span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-soft);margin:0 0 7px}
.callback input[type=text],.callback input[type=tel]{width:100%;box-sizing:border-box;height:52px;
  padding:0 15px;font:inherit;font-size:16px;color:var(--on-dark);
  /* .5 alpha, not .3: a field border is a UI boundary and needs 3:1 against the
     fill. .3 measured 2.00, .5 measures 3.36. */
  background:rgba(255,255,255,.05);border:1px solid rgba(237,231,219,.5);border-radius:0}
/* Full opacity. Faded to .75 the placeholder measured 3.75 against the fill. */
.callback input::placeholder{color:var(--on-dark-soft);opacity:1}
.callback input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.callback button{height:52px;justify-content:center;cursor:pointer;font-family:inherit}
.callback .cb-note{margin:16px 0 0;font-size:13px;color:var(--on-dark-soft)}
/* Consent. The label wraps the box and the words, so the whole line is the
   target: a 15px checkbox on its own is well under the 44px minimum, and the
   one control a visitor must deliberately tick is a poor place to make them
   aim. The box keeps its own size; the label supplies the reach. */
.callback .consent{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;
  padding:13px 0;cursor:pointer;min-height:44px;box-sizing:border-box}
.callback .consent input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;
  accent-color:var(--brass);cursor:pointer}
/* Overrides the uppercase field-label styling: this is a sentence to read,
   not a caption above an input. */
.callback .consent span{display:block;font-size:13.5px;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--on-dark-soft);margin:0;font-weight:400}
.callback .consent a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}
.callback .consent input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.callback .cb-go{margin:15px 0 0;width:100%}

@media(min-width:760px){
  /* Four fields in two rows of two. The button used to sit in this grid as a
     fifth cell; it now follows the consent control, because a submit button
     above the consent it depends on reads as though the consent is optional. */
  .cb-row{grid-template-columns:1fr 1fr;align-items:end;gap:14px}
  .callback .cb-go{width:auto;min-width:236px}
}

/* ---------- reasons ---------- */
.why{background:var(--bone);border-bottom:1px solid var(--line);padding:40px 0}
.why ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.why li{padding:16px 0 16px 26px;position:relative;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.6}
.why li:first-child{border-top:0}
.why li:before{content:"";position:absolute;left:0;top:27px;width:12px;height:1px;
  background:var(--brass-d)}
.why b{font-weight:500}
@media(min-width:820px){
  .why ul{grid-template-columns:1fr 1fr;column-gap:52px}
  .why li:nth-child(2){border-top:0}
}

/* ---------- section shell ---------- */
.sec{padding:56px 0}
.sec .lead{color:var(--ink-soft);max-width:56ch;margin-top:14px}
@media(min-width:900px){.sec{padding:88px 0}}

/* ---------- doctors ---------- */
.docs{display:grid;grid-template-columns:1fr;gap:2px;margin-top:34px}
.doc{background:var(--bone)}
.doc .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.doc .shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.doc .txt{padding:26px 24px 30px}
.doc .role{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass-d);font-weight:500;margin:4px 0 12px}
.doc ul{margin:0;padding:0;list-style:none}
.doc li{font-size:14.5px;color:var(--ink-soft);padding:3px 0 3px 16px;position:relative;
  line-height:1.55}
.doc li:before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;
  background:var(--brass)}
@media(min-width:820px){
  .docs{grid-template-columns:1fr 1fr}
  .doc .shot{aspect-ratio:1/1}
}

/* ---------- the room ---------- */
/* The sign is a ~2.2:1 panorama. The frame must stay WIDER than that at every
   size, so the crop falls top and bottom and the lettering is never cut. A 4:3
   mobile frame trimmed the sides and left "CHELMER CLINIC". */
.room figure{margin:0;position:relative;aspect-ratio:21/8;overflow:hidden;
  background:var(--green-d)}
.room img{width:100%;height:100%;object-fit:cover}
.room figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 22px;
  color:var(--on-dark);font-size:15px;line-height:1.6;
  background:linear-gradient(to top,rgba(24,22,22,.9),rgba(24,22,22,0))}

/* ---------- treatments ---------- */
.list{margin-top:28px;border-top:1px solid var(--line)}
.list div{padding:20px 0;border-bottom:1px solid var(--line)}
.list h3{font-size:19px;margin-bottom:4px}
.list p{color:var(--ink-soft);font-size:15px;margin:0}

/* ---------- what happens at the appointment ---------- */
.inc{background:var(--stone);padding:56px 0}
.inc .steps{margin:28px 0 0;padding:0;list-style:none;
  display:grid;gap:1px;background:var(--line)}
.inc .steps li{background:var(--stone);padding:22px 0}
.inc .steps h3{margin-bottom:5px}
.inc .steps p{color:var(--ink-on-stone);font-size:15px;margin:0}
@media(min-width:900px){.inc{padding:88px 0}}

/* ---------- reviews ---------- */
.revs{background:var(--green);color:var(--on-dark);padding:56px 0}
.revs h2{color:var(--on-dark)}
.revs .grid{display:grid;grid-template-columns:1fr;gap:1px;
  background:rgba(237,231,219,.16);margin-top:30px}
.revs blockquote{margin:0;background:var(--green);padding:26px 22px}
.revs blockquote p{font-size:15.5px;line-height:1.62;color:var(--on-dark);margin:0 0 14px}
.revs cite{font-style:normal;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass);font-weight:500}
.revs .src{margin:26px 0 0;font-size:13px;color:var(--on-dark-soft)}
.revs .src a{color:var(--brass);display:inline-flex;align-items:center;
  min-height:44px;text-decoration:none;border-bottom:1px solid rgba(187,171,150,.4)}
.revs .src a:hover{border-color:var(--brass)}
@media(min-width:820px){.revs .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.revs{padding:88px 0}}

/* ---------- closing call ---------- */
.end{background:var(--bone);text-align:center;padding:58px 0 64px}
.end h2{margin-bottom:14px}
.end p{color:var(--ink-soft);max-width:46ch;margin:0 auto 26px}
.end .row{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.end .btn.solid{background:var(--green);border-color:var(--green);color:var(--bone)}
.end .btn.solid:hover{background:var(--green-l);border-color:var(--green-l)}
.end .btn.line{color:var(--green);border-color:var(--green)}
.end .btn.line:hover{background:var(--green);color:var(--bone)}
.end .where{margin:28px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.7}

/* ---------- footer ---------- */
.foot{background:var(--green-d);color:var(--on-dark-soft);padding:32px 0;font-size:13px}
.foot img{width:150px;height:auto;margin-bottom:16px}
.foot p{margin:0 0 8px;line-height:1.7}
.foot a{color:var(--on-dark-soft);display:inline-block;padding:11px 0;min-height:44px}
.foot .fine{margin-top:18px;padding-top:16px;font-size:12px;
  border-top:1px solid rgba(237,231,219,.14)}

/* ---------- fixed call bar ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
  grid-template-columns:1fr 1fr;height:var(--dock);
  border-top:1px solid rgba(237,231,219,.16)}
.dock a{display:flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:500}
.dock svg{width:17px;height:17px;fill:currentColor;flex:none}
.dock .call{background:var(--bone);color:var(--green)}
.dock .wa{background:var(--green);color:var(--on-dark)}
@supports(padding:env(safe-area-inset-bottom)){
  .dock{height:calc(var(--dock) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- proof, mid-page CTA and FAQ ---------- */
/* One line of the clinic's own figures, directly under the hero buttons: the
   visitor gets a reason to believe before the first scroll. */
.hero-in .proof{margin:14px 0 0;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);font-weight:500;line-height:1.7}

.mid{background:var(--bone);padding:44px 0;text-align:center}
.mid h2{font-size:clamp(21px,3.4vw,29px);margin:0 0 10px}
.mid p{margin:0 auto 20px;max-width:52ch;color:var(--ink-soft);line-height:1.7}
.mid .row{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

.faq{padding:52px 0;background:var(--white)}
.faq h2{font-size:clamp(21px,3.4vw,29px);margin:0 0 18px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;
  padding:16px 34px 16px 0;font-size:16px;line-height:1.5;color:var(--ink);
  min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:50%;
  transform:translateY(-50%);font-size:20px;font-weight:300;color:var(--brass-d)}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:0;padding:0 0 18px;max-width:66ch;
  color:var(--ink-soft);line-height:1.75}

/* The Google rating badge. Renders only when the clinic's real score and
   count are filled in (see googleRating in scripts/build-landing.mjs). */
.hero-in .rating{display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  padding:9px 14px;min-height:44px;border:1px solid rgba(237,231,219,.32);
  border-radius:999px;text-decoration:none;color:var(--on-dark);
  font-size:13px;letter-spacing:.04em}
.hero-in .rating .stars{color:#f5b400;font-size:16px;line-height:1}
.hero-in .rating b{font-weight:500}
.hero-in .rating:hover{border-color:var(--brass)}

/* Treatment and call-time selects, matching the text inputs exactly so the
   four fields read as one control group. */
.callback select{width:100%;box-sizing:border-box;height:52px;padding:0 15px;
  font:inherit;font-size:16px;color:var(--on-dark);appearance:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(237,231,219,.5);border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-dark-soft) 50%),
    linear-gradient(135deg,var(--on-dark-soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 24px,calc(100% - 14px) 24px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.callback select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.callback select option{color:#1c1a1a;background:#fff}

/* The credentials, next to the form rather than buried further down: this is
   the moment someone decides whether to hand over their number. */
.cb-creds{margin:22px 0 0;padding:20px 0 0;list-style:none;
  border-top:1px solid rgba(237,231,219,.18);display:grid;gap:5px}
.cb-creds li{position:relative;padding-left:17px;font-size:13px;line-height:1.6;
  color:var(--on-dark-soft)}
.cb-creds li:before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;
  background:var(--brass)}
.cb-who{margin:14px 0 0;font-size:13px;color:var(--brass)}

@media(min-width:760px){
  /* Four fields plus the button: two rows rather than one long line. */
  .cb-row{grid-template-columns:1fr 1fr;align-items:end}
  .callback button{grid-column:1/-1;justify-self:start;padding-left:44px;padding-right:44px}
}