/* Clinic Grade Websites - site.css
   Sage palette. Pale sage ground, deep pine ink, muted jade accent.
   Figures and source lines are always set in the mono face. Do not set data in the serif. */

/* ---------- tokens ---------- */
:root{
  --ground:#F3F5F1;
  --surface:#FFFFFF;
  --tint:#E4EBE3;
  --ink:#16302A;
  --ink-soft:#43594F;
  --ink-faint:#526559;     /* 5.1:1 on the tint band, the tightest pairing on the site */
  --brand:#3E7A66;         /* fills and borders only */
  --brand-text:#2E6453;    /* any text under 24px */
  --brand-deep:#234E41;
  --line:#D3DDD5;
  --line-strong:#C2CFC6;
  --ok:#2F6B52;
  --focus:#2E6453;

  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --step--2:.78rem;      /* 12.5px: form labels, fine print and source lines all sit on this, so it must clear 12px */
  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.06rem);
  --step-1:clamp(1.15rem,1.08rem + .32vw,1.35rem);
  --step-2:clamp(1.45rem,1.28rem + .75vw,1.9rem);
  --step-3:clamp(1.9rem,1.55rem + 1.6vw,2.9rem);
  --step-4:clamp(2.2rem,1.65rem + 2.6vw,3.6rem);

  --gutter:clamp(1rem,4vw,3rem);
  --wrap:1150px;
  --radius:12px;
  --radius-sm:9px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* required: class-based display beats the browser default */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
p,ul,ol{margin:0}
a{color:var(--brand-text)}
a:hover{color:var(--brand-deep)}
button{font:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:var(--ground);padding:.65rem 1rem;border-radius:var(--radius-sm)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(2.4rem,6vw,4.4rem);border-bottom:1px solid var(--line)}
.section--surface{background:var(--surface)}
.section--tint{background:var(--tint)}
.section--ink{background:var(--ink);color:var(--ground);border-bottom:none}
.section--ink h2,.section--ink h3{color:var(--ground)}
.section--ink p{color:#C9D6CF}
.section--ink a{color:#E3EDE7}
.section--flush{padding-block:0}

.head{max-width:56ch}
.head h2{font-size:var(--step-3)}
.head p{margin-top:.9rem;color:var(--ink-soft);font-size:var(--step-1)}
.kicker{font-family:var(--f-mono);font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text);margin-bottom:.9rem}
.src{font-family:var(--f-mono);font-size:var(--step--2);color:var(--ink-faint);letter-spacing:.02em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-align:center;text-decoration:none;cursor:pointer;
  font-family:var(--f-body);font-weight:700;font-size:var(--step--1);
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  padding:.72rem 1.15rem;border-radius:var(--radius-sm);
}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--brand-text);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--tint);color:var(--brand-deep)}
.btn--lg{width:100%;font-size:var(--step-0);padding:.85rem 1.3rem}

/* ---------- header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
.brand__mark{width:26px;height:26px;flex:none}
.brand__word{font-family:var(--f-display);font-size:1.2rem;line-height:1}
.brand__word em{font-style:normal;color:var(--brand-text)}
.nav{display:flex;align-items:center;gap:1.25rem}
.nav a{font-size:var(--step--1);text-decoration:none;color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.nav .btn{color:#fff}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.45rem .7rem;color:var(--ink);cursor:pointer}

/* ---------- breadcrumb ---------- */
.crumb{font-size:var(--step--2);color:var(--ink-faint);padding-block:.75rem}
.crumb a{color:var(--ink-faint);text-decoration:none}
.crumb a:hover{color:var(--brand-text)}
.crumb span{margin-inline:.35rem}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--tint) 0%,var(--ground) 100%);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(1.75rem,4vw,3.25rem);align-items:center;padding-block:clamp(2rem,5vw,3.6rem)}
.hero__copy h1{font-size:var(--step-4);line-height:1.04}
.hero__copy .lede{margin-top:1rem;color:var(--ink-soft);font-size:var(--step-1);max-width:38ch}
.hero__points{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.55rem;font-size:var(--step--1);color:var(--ink-soft)}
.hero__points li{display:flex;gap:.55rem;align-items:flex-start}
.hero__points svg{flex:none;margin-top:.35em}
.pills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.pills span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.32rem .8rem;font-size:var(--step--1);color:var(--ink-soft)}
.hero__mobile-cta{display:none}

/* ---------- quote card ---------- */
.quote-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.2rem,2.5vw,1.6rem);box-shadow:0 26px 52px -32px rgba(22,48,42,.45);min-width:0;
}
.quote-card h2{font-size:var(--step-2)}
.quote-card .sub{margin-top:.35rem;color:var(--ink-faint);font-size:var(--step--1)}
.field{display:grid;gap:.28rem;margin-top:.9rem;min-width:0}
.field label{font-size:var(--step--2);font-weight:700;color:var(--ink-soft);letter-spacing:.01em}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--step-0);color:var(--ink);background:#FAFBF9;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:.6rem .7rem;width:100%;min-width:0;
}
.field input::placeholder{color:var(--ink-faint)}
.field textarea{min-height:7rem;resize:vertical}
.quote-card .btn{margin-top:1.1rem}
.fine{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.2rem;font-size:var(--step--2);color:var(--ink-faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* recap strip and design chip on stage 2 */
.recap{background:var(--tint);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.75rem .9rem;font-size:var(--step--1);color:var(--ink-soft);margin-bottom:1.2rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.3rem .75rem;font-size:var(--step--2);color:var(--brand-text)}

/* radio cards on stage 2 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.6rem}
.cards label{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.85rem .9rem;cursor:pointer;display:grid;gap:.2rem}
.cards label:hover{border-color:var(--brand)}
.cards input{position:absolute;opacity:0;width:0;height:0}
.cards input:checked + .cards__body,.cards label:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cards b{font-size:var(--step-0)}
.cards small{color:var(--ink-faint);font-size:var(--step--2)}

/* ---------- evidence band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.1rem;min-width:0}
.stat b{display:block;font-family:var(--f-mono);font-weight:500;font-size:1.9rem;line-height:1.05;color:var(--brand-text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat p{margin-top:.5rem;font-size:var(--step--1);color:var(--ink-soft)}
.stat .src{display:block;margin-top:.45rem}

/* ---------- generic grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.15rem;min-width:0}
.card h3{font-size:var(--step-1)}
.card p{margin-top:.5rem;color:var(--ink-soft);font-size:var(--step--1)}
.card--dark{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.card--dark h3{color:var(--ground)}
.card--dark p{color:#C9D6CF}
.card--dark strong{color:var(--ground)}   /* global strong colour would render near-black on near-black */

/* rule rows */
.rows{border-top:1px solid var(--line-strong)}
.rows > div{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:.4rem 2rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.rows h3{font-size:var(--step-1)}
.rows p{color:var(--ink-soft);font-size:var(--step--1)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.25rem;display:grid;gap:.55rem;align-content:start;min-width:0}
.plan--featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.plan h3{font-size:var(--step-2)}
.plan .price{font-family:var(--f-mono);font-size:1.7rem;color:var(--brand-text);font-variant-numeric:tabular-nums}
.plan .price small{display:block;font-size:var(--step--2);color:var(--ink-faint);letter-spacing:.02em;margin-top:.2rem}
.plan ul{list-style:none;padding:0;display:grid;gap:.4rem;font-size:var(--step--1);color:var(--ink-soft)}
.plan ul li{display:flex;gap:.5rem;align-items:flex-start}
.plan ul svg{flex:none;margin-top:.35em}
.note{background:var(--tint);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:var(--step--1);color:var(--ink-soft);margin-top:1.5rem}

/* ---------- whatsapp, the secondary route ---------- */
/* The quote form is the primary action everywhere. This sits under it, deliberately a link
   rather than a button, so it reads as the alternative and not as a competing choice. */
.wa-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.8rem;
  font-family:var(--f-mono);font-size:var(--step--2);letter-spacing:.02em;
  color:var(--brand-text);text-decoration:none;border-bottom:1px solid transparent}
.wa-link svg{flex:none;opacity:.85}
.wa-link:hover{color:var(--brand-deep);border-bottom-color:currentColor}
.wa-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.section--ink .wa-link{color:#C9D6CF}
.section--ink .wa-link:hover{color:#fff}
.quote-card .wa-link{justify-content:center;width:100%}
.sticky-wa{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--brand-text);text-decoration:none}
.sticky-wa:hover{background:var(--tint);color:var(--brand-deep)}
.sticky-wa:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- definition lead ---------- */
/* The first thing on a money page states what the term means. It is what search engines
   lift as the snippet and what AI assistants quote when they answer the question. */
.defn{max-width:68ch;border-left:3px solid var(--brand);padding:.2rem 0 .2rem 1.1rem;margin:0 0 .4rem}
.defn p{font-size:var(--step-1);line-height:1.55;color:var(--ink)}
.defn p+p{margin-top:.7rem;font-size:var(--step-0);color:var(--ink-soft)}
.steps{counter-reset:st;display:grid;gap:1rem;margin-top:1.8rem}
.steps li{counter-increment:st;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.steps li h3{font-size:var(--step-1)}
.steps li h3::before{content:counter(st,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--step--2);color:var(--brand-text);display:block;margin-bottom:.3rem}
.steps li p{margin-top:.5rem;color:var(--ink-soft);font-size:var(--step--1);line-height:1.6}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- faqs ---------- */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:.95rem 0;font-family:var(--f-display);font-size:var(--step-1);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-text);font-family:var(--f-mono)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:1rem;color:var(--ink-soft);font-size:var(--step--1);max-width:70ch}

/* ---------- location extras ---------- */
.mapwrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:1.5rem;background:var(--surface)}
.mapwrap iframe{display:block;width:100%;height:320px;border:0}
.nearby{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.nearby a{background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.35rem .85rem;font-size:var(--step--1);text-decoration:none}

/* ---------- cta band ---------- */
.section--ink .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.25rem,4vw,3rem);align-items:center}
.section--ink h2{font-size:var(--step-3)}
.section--ink .btn{background:var(--brand);border-color:var(--brand);color:#fff}
.section--ink .btn:hover{background:#fff;border-color:#fff;color:var(--brand-deep)}

/* ---------- footer ---------- */
.site-footer{background:var(--surface);padding-block:clamp(2rem,4vw,3rem);font-size:var(--step--1);color:var(--ink-soft)}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.75rem}
.site-footer h3,.site-footer .foot-h{font-family:var(--f-mono);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.site-footer ul{list-style:none;padding:0;margin:.7rem 0 0;display:grid;gap:.4rem}
.site-footer a{text-decoration:none;color:var(--ink-soft)}
.site-footer a:hover{color:var(--brand-text)}
.legal{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:var(--step--2);color:var(--ink-faint);max-width:78ch}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{
  display:none;align-items:center;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surface);border-top:1px solid var(--line-strong);
  padding:.6rem var(--gutter);box-shadow:0 -10px 30px -22px rgba(22,48,42,.6);
}
.sticky-cta .btn{flex:1 1 auto;width:auto}
body:has(.sticky-cta) .site-footer{padding-bottom:5.5rem}   /* only reserve space where a bar exists */
.sticky-cta.is-hidden{display:none !important}

/* ---------- cookie bar ---------- */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:var(--ground);
  padding:1rem var(--gutter);
}
.cookie-bar .inner{max-width:var(--wrap);margin-inline:auto;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.cookie-bar p{font-size:var(--step--1);color:#C9D6CF;max-width:62ch}
.cookie-bar a{color:#E3EDE7}
.cookie-bar .acts{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-bar .btn{background:var(--brand);border-color:var(--brand);color:#fff}
.cookie-bar .btn--ghost{background:transparent;border-color:#4F6A5F;color:var(--ground)}

/* ---------- prose (guides, legal) ---------- */
.prose{max-width:68ch}
.prose h2{font-size:var(--step-2);margin-top:2.2rem}
.prose h3{font-size:var(--step-1);margin-top:1.6rem}
.prose p,.prose ul,.prose ol{margin-top:.9rem;color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:1.15rem}
.prose li{margin-top:.35rem}
.prose strong{color:var(--ink)}
.tablewrap{overflow-x:auto;margin-top:1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tablewrap table{border-collapse:collapse;width:100%;font-size:var(--step--1)}
.tablewrap th,.tablewrap td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line)}
.tablewrap th{font-family:var(--f-mono);font-size:var(--step--2);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.tablewrap td{font-variant-numeric:tabular-nums}
.tablewrap tr:last-child td{border-bottom:none}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .hero .wrap{grid-template-columns:1fr}
  .hero__mobile-cta{display:inline-block;margin-top:1.4rem}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.plans{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
  .rows > div{grid-template-columns:1fr}
  .section--ink .wrap{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:.25rem;background:var(--surface);border-bottom:1px solid var(--line);padding:.75rem var(--gutter);z-index:70}
  .nav.is-open a{padding:.5rem 0}
  .site-header .wrap{position:relative}
  .nav-toggle{display:inline-block}
  .sticky-cta{display:flex}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
}

/* ---------- concept design mockups ----------
   Six concepts, three across on wide screens. Every dimension inside a mockup is in
   cqw so it renders correctly at any column width. Text inside these renders very
   small by design and is exempt from the contrast audit, as documented in the README. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem);margin-top:2rem}
.shot{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.shot__frame{container-type:inline-size;display:block;width:100%}
.shot__body{padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.shot__body h3{font-size:var(--step-1)}
.shot__body p{color:var(--ink-soft);font-size:var(--step--1)}
.shot__body .btn{align-self:flex-start;margin-top:auto}

.m{display:block;font-size:4cqw;line-height:1.35}
.m__nav{display:flex;align-items:center;justify-content:space-between;padding:3cqw 4cqw;gap:2cqw}
.m__logo{font-weight:700;font-size:4.4cqw;letter-spacing:-.02em}
.m__links{display:flex;gap:2.6cqw;font-size:3cqw;opacity:.8}
.m__hero{padding:6cqw 4cqw 5cqw;display:grid;gap:2cqw}
.m__hero .m__h{margin:0;font-size:7.2cqw;line-height:1.05;font-weight:400}
.m__hero p{margin:0;font-size:3.4cqw;opacity:.78;max-width:34ch}
.m__cta{display:inline-block;justify-self:start;margin-top:1cqw;padding:2cqw 3.4cqw;font-size:3cqw;font-weight:700}
.m__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;padding:0 4cqw 5cqw}
.m__card{padding:3cqw;font-size:3cqw;line-height:1.3}
.m__foot{padding:3cqw 4cqw;font-size:2.6cqw;opacity:.75;display:flex;justify-content:space-between;gap:2cqw}

/* 1 Wren Orthopaedics - calm jade, geometric */
.m1{background:#F7FAF8;color:#12241D;font-family:"Familjen Grotesk",Arial,sans-serif}
.m1 .m__nav{border-bottom:1px solid #DCE7E1}
.m1 .m__logo{color:#0E6B52}
.m1 .m__cta{background:#0E6B52;color:#fff;border-radius:2px}
.m1 .m__card{background:#fff;border:1px solid #DCE7E1;border-radius:2px}
.m1 .m__foot{background:#0E6B52;color:#DCEDE6;opacity:1}

/* 2 Lumen Aesthetics - blush and gold, high-contrast serif */
.m2{background:#FBF6F3;color:#33231C;font-family:"Cormorant Garamond",Georgia,serif}
.m2 .m__links{font-family:"Karla",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:2.4cqw}
.m2 .m__logo{letter-spacing:.14em;text-transform:uppercase;font-size:3.6cqw;font-weight:400}
.m2 .m__hero .m__h{font-size:8.4cqw;font-style:italic}
.m2 .m__cta{background:#B4884E;color:#fff;border-radius:999px;font-family:"Karla",sans-serif}
.m2 .m__card{background:#fff;border:1px solid #EADFD6;border-radius:10px;font-family:"Karla",sans-serif}
.m2 .m__foot{background:#33231C;color:#E7D9CC;opacity:1;font-family:"Karla",sans-serif}

/* 3 Harborough ENT - navy and stone, traditional */
.m3{background:#F2F3F1;color:#16233A;font-family:"Lora",Georgia,serif}
.m3 .m__nav{background:#16233A;color:#E7ECF4}
.m3 .m__links{font-size:2.6cqw}
.m3 .m__hero .m__h{font-size:6.6cqw}
.m3 .m__cta{background:#16233A;color:#fff;border-radius:1px}
.m3 .m__card{background:#fff;border-left:3px solid #16233A}
.m3 .m__foot{background:#E4E7E3;opacity:1}

/* 4 Nova Skin Clinic - bright coral, rounded */
.m4{background:#FFF7F4;color:#2B1B18;font-family:"Outfit",Arial,sans-serif}
.m4 .m__logo{color:#E2553C;font-weight:800}
.m4 .m__hero .m__h{font-weight:700;font-size:7cqw;letter-spacing:-.03em}
.m4 .m__cta{background:#E2553C;color:#fff;border-radius:999px}
.m4 .m__card{background:#FFE9E2;border-radius:12px}
.m4 .m__foot{background:#2B1B18;color:#FFD9CE;opacity:1}

/* 5 Ashcroft Surgical - dark premium */
.m5{background:#12171B;color:#E8EDF1;font-family:"Sora",Arial,sans-serif}
.m5 .m__nav{border-bottom:1px solid #24313A}
.m5 .m__logo{color:#C9A227;font-weight:600}
.m5 .m__hero .m__h{font-weight:300;font-size:7cqw}
.m5 .m__cta{background:#C9A227;color:#12171B;border-radius:2px}
.m5 .m__card{background:#1A2229;border:1px solid #24313A;border-radius:4px}
.m5 .m__foot{background:#0C1013;opacity:1}

/* 6 Bright Lane GP - warm and friendly */
.m6{background:#FDFBF4;color:#25301F;font-family:"Bricolage Grotesque",Arial,sans-serif}
.m6 .m__logo{color:#4A7A3B;font-weight:700}
.m6 .m__hero .m__h{font-size:6.8cqw;font-weight:600;letter-spacing:-.02em}
.m6 .m__cta{background:#4A7A3B;color:#fff;border-radius:8px}
.m6 .m__card{background:#EFF3E6;border-radius:8px}
.m6 .m__foot{background:#25301F;color:#D8E3CD;opacity:1}

@media (max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.shots{grid-template-columns:1fr}}

/* ---------- reviews, plain text, no markup ---------- */
.review{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.2rem;display:grid;gap:.6rem;align-content:start;min-width:0}
.review h3{font-size:var(--step-1)}
.review p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.6}
.review footer{font-family:var(--f-mono);font-size:var(--step--2);color:var(--brand-text);letter-spacing:.02em}
.review footer span{display:block;color:var(--ink-faint)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--brand-text)}
.cards label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

.shot--wide{grid-column:1/-1}
.shot--wide .shot__body{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.shot--wide .shot__body .btn{margin-top:0}
@media (max-width:620px){.shot--wide .shot__body{flex-direction:column;align-items:flex-start}}

/* tick lists inside prose, and the location body two-up on desktop */
.ticks{list-style:none;padding:0;margin-top:.9rem;display:grid;gap:.55rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft)}
.ticks svg{flex:none;margin-top:.4em}
.locbody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.locbody .mapwrap{margin-top:0}
.locbody .prose{max-width:none}
@media (max-width:940px){.locbody{grid-template-columns:1fr}}

/* contextual cross-links at the foot of a location page */
.alsolinks{margin-top:1.6rem;border-top:1px solid var(--line-strong);padding-top:1.1rem}
.alsolinks h2{font-size:var(--step-1);margin-bottom:.6rem}
.alsolinks ul{list-style:none;padding:0;display:grid;gap:.4rem;font-size:var(--step--1)}