/* ==========================================================================
   Eric St Physio — stylesheet
   Rebuilt to Rhi's review principles (Harby Studios, 2 Sep 2026):
   - Title Case headers / sentence case body
   - Hero image or texture behind EVERY page header (no plain headers)
   - Alternating section contrast, never two similar colours back to back
   - Two-column image + text blocks so no section is left half-empty
   - One icon style, one icon size
   - Bold numbers and stats
   IMAGE SLOTS: see IMAGE-SLOTS.md
   ========================================================================== */

:root{
  --navy:#1D4289;--navy-deep:#16346c;--ink:#2D2926;--grey:#707372;
  --teal:#008C95;--sky:#3EB1C8;--mint:#98DBCE;--paper:#f7f6f3;--white:#fff;
  --line:#e4e2dc;--shadow:0 10px 30px rgba(29,66,137,.08);

  /* Default faded texture used behind any header with no photo yet. */
  --hero-texture:
    repeating-linear-gradient(118deg, rgba(255,255,255,.055) 0 2px, transparent 2px 13px),
    radial-gradient(1100px 620px at 12% 12%, rgba(152,219,206,.60), transparent 60%),
    radial-gradient(900px 760px at 88% 92%, rgba(62,177,200,.52), transparent 62%),
    radial-gradient(620px 480px at 66% 2%,  rgba(255,255,255,.20), transparent 60%);

  /* Default texture used inside empty image panels. */
  --fig-texture:
    repeating-linear-gradient(118deg, rgba(29,66,137,.045) 0 2px, transparent 2px 13px),
    radial-gradient(460px 340px at 24% 22%, rgba(152,219,206,.75), transparent 66%),
    radial-gradient(420px 360px at 82% 84%, rgba(62,177,200,.48), transparent 66%),
    linear-gradient(145deg,#eef2f1,#dfe6e8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.15;font-weight:700;color:var(--navy);letter-spacing:-.01em}
a{color:var(--navy);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ---- buttons (Title Case labels) ---- */
.btn{display:inline-block;padding:14px 26px;border-radius:6px;font-weight:700;font-size:15px;transition:.18s ease;cursor:pointer;border:2px solid transparent}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}
.btn-light:hover{background:var(--mint);border-color:var(--mint);color:var(--navy-deep)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}

/* ---- header + nav ---- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;max-width:1200px;margin:0 auto;gap:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img.logo{height:46px;width:auto;display:block}
.wordmark{display:none;flex-direction:column;line-height:1.05}
.wordmark .n1{font-weight:700;font-size:19px;color:var(--navy);letter-spacing:-.02em}
.wordmark .n2{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700}
.nav{display:flex;gap:20px;align-items:center}
.nav a{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.nav a:hover{color:var(--navy)}
.nav a.active{color:var(--navy);border-bottom:2px solid var(--teal);padding-bottom:2px}
.topcta{display:flex;align-items:center;gap:16px}
.topcta .phone{font-weight:700;color:var(--navy);white-space:nowrap;font-size:15px}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.navtoggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}
@media(max-width:1040px){
  .nav{display:none;position:fixed;top:0;right:0;height:100vh;width:min(80vw,320px);background:#fff;flex-direction:column;align-items:flex-start;gap:6px;padding:80px 28px;box-shadow:-10px 0 40px rgba(0,0,0,.12);z-index:60}
  .nav.open{display:flex;animation:navIn .24s ease both}
  @keyframes navIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .nav a{font-size:17px;padding:8px 0}
  .navtoggle{display:block;z-index:70}
  .topcta .phone{display:none}
}
@media(max-width:520px){.wrap{padding:0 20px}.bar{padding:12px 20px}.brand img.logo{height:38px}}

/* ==========================================================================
   NAVY BLOCKS — hero headers and mid-page image-led bands.
   Every one carries a photo or a faded texture. Never a plain header.
   Set a photo with:  style="--hero-img:url('images/your-photo.jpg')"
   ========================================================================== */
.navyblock{
  --hero-img: var(--hero-texture);
  position:relative;overflow:hidden;color:#fff;
  background-color:var(--navy-deep);
  background-image:
    linear-gradient(160deg, rgba(22,52,108,.88) 0%, rgba(29,66,137,.74) 52%, rgba(36,80,153,.86) 100%),
    var(--hero-img);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.navyblock .wrap{position:relative;z-index:2}
.navyblock h1,.navyblock h2,.navyblock h3{color:#fff}
.navyblock p{color:rgba(255,255,255,.92)}
.navyblock .kicker{color:var(--mint)}

.hero.home .wrap{max-width:900px;padding:78px 28px 82px}
.hero.sub .wrap{max-width:860px;padding:62px 28px 58px}
.hero .eyebrow{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);font-weight:700;margin-bottom:18px}
.hero h1{margin-bottom:18px}
.hero.home h1{font-size:clamp(34px,5.2vw,54px)}
.hero.sub h1{font-size:clamp(30px,4.4vw,44px)}
.hero p.lead{font-size:clamp(16px,2.1vw,20px);max-width:660px;margin-bottom:28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .loc{margin-top:26px;font-size:14px;color:rgba(255,255,255,.82)}
.hero .loc strong{color:#fff}

.band{padding:70px 0}
.band .section-head{margin-bottom:38px}

/* ---- sections + contrast rhythm ---- */
section{padding:70px 0}
section.tight{padding:52px 0}
.sec-paper{background:var(--paper)}
.section-head{max-width:780px;margin-bottom:40px}
.section-head .kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:12px;display:block}
.section-head h2{font-size:clamp(25px,3.5vw,37px);margin-bottom:14px}
.section-head p{font-size:17px;color:var(--grey)}
.prose{max-width:760px}
.prose p{font-size:17px;margin-bottom:16px}
.prose strong{color:var(--navy)}

/* ==========================================================================
   MEDIA BLOCK — two columns so no text section sits in empty space.
   <div class="media"> image panel + text. Add .flip to put the image right.
   ========================================================================== */
.media{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.media.wide-text{grid-template-columns:1fr 1.25fr}
.media.flip .media-fig{order:2}
.media-txt p{font-size:17px;margin-bottom:16px}
.media-txt p:last-child{margin-bottom:0}
.media-txt strong{color:var(--navy)}
.media-fig{
  --fig-img: var(--fig-texture);
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background-image:var(--fig-img);background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.media-fig.is-placeholder:after{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--navy);opacity:.45
}
@media(max-width:860px){.media,.media.wide-text{grid-template-columns:1fr;gap:28px}.media.flip .media-fig{order:0}}

.quote{border-left:4px solid var(--mint);padding:22px 26px;background:var(--white);border-radius:8px;box-shadow:var(--shadow);margin-top:24px}
.quote p{font-size:18px;font-style:italic;color:var(--navy);margin-bottom:12px}
.quote .by{font-size:13px;color:var(--grey);font-weight:600}

/* ---- chips (Title Case labels) ---- */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{background:var(--white);border:1px solid var(--line);border-radius:30px;padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--ink)}
.chip:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:9px;vertical-align:middle}
.navyblock .chip{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff}
.navyblock .chip:before{background:var(--mint)}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:12px}
.card h3{font-size:22px;margin-bottom:12px}
.card p{font-size:15.5px;color:var(--grey);margin-bottom:18px;flex-grow:1}
.card p strong{color:var(--navy)}
.card a.more{font-weight:700;font-size:15px;color:var(--navy)}
.card a.more:after{content:" →"}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* ---- numbered approach ---- */
.approach{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.approach .item h3{font-size:18px;margin-bottom:10px}
.approach .item p{font-size:15px;color:var(--grey)}
.approach .num{display:block;font-size:15px;font-weight:700;color:var(--teal);letter-spacing:.1em;margin-bottom:6px}
.navyblock .approach .item p{color:rgba(255,255,255,.84)}
.navyblock .approach .num{color:var(--mint)}
@media(max-width:820px){.approach{grid-template-columns:1fr;gap:20px}}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.step .n{font-size:15px;font-weight:700;color:var(--teal);letter-spacing:.08em;margin-bottom:8px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--grey)}
.navyblock .step{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.navyblock .step .n{color:var(--mint)}
.navyblock .step p{color:rgba(255,255,255,.84)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---- tick lists: ONE icon style, ONE icon size, full stop on every point ---- */
.ticklist{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;max-width:900px}
.ticklist .f{display:flex;gap:14px;align-items:flex-start}
.ticklist .f .tick{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:2px;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1
}
.ticklist .f p{font-size:15.5px}
.ticklist .f strong{color:var(--navy)}
.navyblock .ticklist .f .tick{background:var(--mint);color:var(--navy-deep)}
.navyblock .ticklist .f p{color:rgba(255,255,255,.9)}
.navyblock .ticklist .f strong{color:#fff}
@media(max-width:700px){.ticklist{grid-template-columns:1fr}}

/* ---- team ---- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.member{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.member .photo{
  /* Every card is the same square frame. Head SIZE is set by how each photo is
     cropped, so each member gets two tuning dials, set inline on the .photo div:
       --photo-zoom : 1 = fill the frame. 1.25 = 25% closer (bigger head).
       --photo-y    : vertical anchor. 0% = top of photo, 50% = middle.
     Nudge these per person until every head is the same size and the eyeline
     sits on the same level across the row. */
  --fig-img: var(--fig-texture);
  --photo-zoom: 1;
  --photo-y: 18%;
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background-image:var(--fig-img);
  background-size:calc(100% * var(--photo-zoom)) auto;
  background-position:center var(--photo-y);
  background-repeat:no-repeat;
  background-color:var(--paper);
}
.member .photo .initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:40px;color:var(--navy);opacity:.42;letter-spacing:.04em}
.member .photo.has-photo .initials{display:none}
.member .body{padding:24px 26px 28px}
.member h3{font-size:19px;margin-bottom:4px}
.member .role{font-size:12.5px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.member p{font-size:14.5px;color:var(--grey)}
.member p strong{color:inherit}
@media(max-width:900px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.team{grid-template-columns:1fr}}

/* ---- CTA + contact ---- */
.ctaband{text-align:center}
.ctaband h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:14px}
.ctaband p{font-size:17px;margin-bottom:26px;max-width:580px;margin-left:auto;margin-right:auto}
.ctaband .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.contact h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:16px}
.contact p{font-size:17px;margin-bottom:26px}
.contact .info{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:30px}
.contact .info .row{margin-bottom:18px}
.contact .info .row:last-child{margin-bottom:0}
.contact .info .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);font-weight:700;margin-bottom:2px}
.contact .info .val{font-size:16px;color:#fff;font-weight:600}
.contact .info .val a{color:#fff}
@media(max-width:860px){.contact .grid{grid-template-columns:1fr;gap:32px}}

/* ---- footer ---- */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:48px 0;font-size:14.5px}
footer .grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px}
footer a{color:#fff}
footer a:hover{color:var(--mint)}
footer .fnav a{display:inline-block;margin-right:20px;margin-bottom:6px}
footer .ftag{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);font-weight:700;margin-top:8px}
footer .fine{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.52)}

/* Image panel sitting inside a navy band */
.navyblock .media-fig{border-color:rgba(255,255,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.22)}
.navyblock .media-fig.is-placeholder:after{color:#fff;opacity:.6}
.navyblock .media-fig{--fig-img:
   repeating-linear-gradient(118deg, rgba(255,255,255,.06) 0 2px, transparent 2px 13px),
   radial-gradient(420px 320px at 26% 24%, rgba(152,219,206,.42), transparent 66%),
   radial-gradient(400px 340px at 80% 82%, rgba(62,177,200,.34), transparent 66%),
   linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05))}

/* Bold numbers and stats must stay legible on navy (rule 5 + rule 8 together). */
.navyblock strong,
.navyblock .media-txt strong,
.navyblock .prose strong,
.navyblock p strong{color:#fff}
.member{height:100%}

/* Team bios expand on click (Kate: "they can click on it and it drops down") */
.member details{margin-top:4px}
.member details summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--navy);padding:6px 0
}
.member details summary::-webkit-details-marker{display:none}
.member details summary:after{content:"\25BE";font-size:11px;transition:transform .18s ease}
.member details[open] summary:after{transform:rotate(180deg)}
.member details summary:hover{color:var(--teal)}
.member details p{margin-top:8px}

/* Second group heading on the team page (exercise physiology) */
.team + .section-head{margin-top:58px}

/* ---- footer: subscribe block + legal line ---- */
.fsub{max-width:330px}
.fsub-h{font-weight:700;color:#fff;font-size:15px;margin-bottom:6px}
.fsub p{font-size:13.5px;line-height:1.5;margin-bottom:12px}
.subform{display:flex;flex-direction:column;gap:8px}
.subform input{
  width:100%;padding:11px 13px;border-radius:6px;font:inherit;font-size:14.5px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff
}
.subform input::placeholder{color:rgba(255,255,255,.55)}
.subform input:focus{outline:2px solid var(--mint);outline-offset:1px;background:rgba(255,255,255,.14)}
.subform .btn{align-self:flex-start;padding:11px 22px;font-size:14.5px;cursor:pointer}
.fsub-fine{font-size:12px;color:rgba(255,255,255,.55);margin-top:10px}
.fsub-fine a{color:rgba(255,255,255,.8);text-decoration:underline}
.hp{position:absolute;left:-9999px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){.fsub{max-width:100%}}

/* ---- contact form + socials ---- */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.cform .full{grid-column:1 / -1}
.cform input,.cform textarea{
  width:100%;padding:12px 14px;border-radius:6px;font:inherit;font-size:15px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff
}
.cform textarea{min-height:120px;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.55)}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--mint);outline-offset:1px;background:rgba(255,255,255,.14)}
.cform .btn{justify-self:start}
.cform .consent{grid-column:1 / -1;font-size:12.5px;color:rgba(255,255,255,.62)}
.cform .consent a{color:#fff;text-decoration:underline}
@media(max-width:620px){.cform{grid-template-columns:1fr}}

.socials{display:flex;gap:12px;margin-top:18px}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);transition:.18s ease
}
.socials a:hover{background:#fff}
.socials svg{width:19px;height:19px;fill:#fff;transition:.18s ease}
.socials a:hover svg{fill:var(--navy)}

/* ---- long-form legal pages ---- */
.legal{max-width:760px}
.legal h2{font-size:22px;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16px;color:var(--ink);margin-bottom:12px}
.legal ul{padding-left:22px}
.legal li{margin-bottom:7px}
.legal .updated{font-size:13.5px;color:var(--grey);margin-bottom:28px}
.legal .todo{background:#FFF6E0;border-left:4px solid #E8A33D;padding:12px 16px;border-radius:5px;font-size:14.5px}

/* ---- contact page map ---- */
.mapwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);line-height:0}
.mapwrap iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(18%)}
@media(max-width:620px){.mapwrap iframe{height:320px}}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.cdetails .row{margin-bottom:20px}
.cdetails .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:3px}
.cdetails .val{font-size:16.5px;font-weight:600;color:var(--ink)}
.cdetails .val a{color:var(--navy)}
.cdetails .socials a{border-color:var(--line);background:var(--paper)}
.cdetails .socials svg{fill:var(--navy)}
.cdetails .socials a:hover{background:var(--navy)}
.cdetails .socials a:hover svg{fill:#fff}
/* form on a light background */
.cform.light input,.cform.light textarea{border:1px solid var(--line);background:#fff;color:var(--ink)}
.cform.light input::placeholder,.cform.light textarea::placeholder{color:#9b9b98}
.cform.light input:focus,.cform.light textarea:focus{outline:2px solid var(--teal);background:#fff}
.cform.light .consent{color:var(--grey)}
.cform.light .consent a{color:var(--navy)}

/* Footer in three columns once there is room for them. */
@media(min-width:861px){
  footer .grid{display:grid;grid-template-columns:1.15fr 1fr 1.05fr;gap:40px;align-items:start}
  footer .fnav a{display:block;margin-right:0}
}

/* ==========================================================================
   FOOTER — brand navy rather than near-black, stepped darker than the CTA
   band above it so the two navy blocks read as layers, not a repeat.
   ========================================================================== */
footer{
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(62,177,200,.10), transparent 62%),
    linear-gradient(180deg, #12294f 0%, #0d1f3d 100%);
  color:rgba(255,255,255,.74);
  border-top:1px solid rgba(152,219,206,.28);
}
footer a{color:rgba(255,255,255,.92)}
footer a:hover{color:var(--mint)}
footer .fnav a{font-weight:600}
footer .ftag{color:var(--mint)}
footer .fine{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
.fsub-h{color:#fff}
.subform input{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.subform .btn-light{background:var(--mint);border-color:var(--mint);color:var(--navy-deep)}
.subform .btn-light:hover{background:#fff;border-color:#fff;color:var(--navy-deep)}

/* optional labelled fields on the contact form */
.cform .lbl-sm{font-size:12.5px;font-weight:700;color:var(--grey);letter-spacing:.02em;align-self:end;margin-bottom:-4px}
.cform .lbl-sm span{font-weight:400;opacity:.75}
.cform select{
  width:100%;padding:12px 14px;border-radius:6px;font:inherit;font-size:15px;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer
}
.cform select:focus{outline:2px solid var(--teal);outline-offset:1px}
.cform input[type="date"]{color:var(--ink)}
.cform .field{display:flex;flex-direction:column;gap:6px}
.cform .field .lbl-sm{align-self:start;margin-bottom:0}

/* opening hours table on the contact page */
.hours{border-collapse:collapse;margin-top:4px}
.hours th,.hours td{text-align:left;padding:3px 0;font-size:15.5px;vertical-align:top}
.hours th{font-weight:600;color:var(--ink);padding-right:22px;white-space:nowrap}
.hours td{font-weight:600;color:var(--navy);white-space:nowrap}

/* practice name above the home page headline */
.hero .brandline{
  font-size:clamp(30px,5vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.05;
  color:#fff;margin-bottom:14px
}
.hero.home h1{font-size:clamp(25px,3.4vw,34px);font-weight:600;color:rgba(255,255,255,.95)}

/* bold figures that should stay body colour rather than navy */
.plain-strong strong{color:inherit}