/* sportsmed — Site Works rebuild, 11 Sep 2026.
   Brand recovered from the practice’s own site: Raleway (self-hosted, never
   fetched from Google — a font request would send every visitor’s IP to a third
   party from a medical practice’s page), their amber #feb62b, and their own
   logo file unchanged. The colour and the mark are theirs and are not ours to
   redesign; the layout and the typography are what this rebuild changes. */

@font-face{font-family:Raleway;src:url(fonts/raleway-1.woff2)format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Raleway;src:url(fonts/raleway-5.woff2)format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --amber:#feb62b;          /* theirs */
  /* Amber cannot carry text on a light ground: their #feb62b is 1.76:1 on white
     and the old #e09a12 was 2.39:1, against the 4.5 that body-size text needs.
     This is the darkest step that still reads as their colour and passes on all
     three light grounds -- white 5.24, sand 4.90, grey 4.89. The true brand amber
     is kept for dark bands, where it scores 10.23:1, and for fills and rules where
     no text sits on it. Measured, not eyeballed. */
  --amber-deep:#946200;
  --ink:#14171a;            /* near-black ground for the dark bands */
  --ink-2:#1e2328;
  --slate:#4a545e;
  --line:#e3e7ea;
  --paper:#fff;
  --paper-2:#f6f7f8;
  --sand:#faf7f1;           /* a warm neutral biased toward the amber, so it reads as chosen */
  --font:Raleway,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* TWO shells, not one. Prose wants ~66 characters whatever the monitor, but a
     photograph, a mosaic or a 32-portrait directory should use the glass. At
     2560 a single 1220px column left 670px of dead ground each side and the
     site read as a 1440px page sitting inside a larger screen. */
  --shell:1220px;       /* reading column */
  --shell-wide:1220px;  /* visual column -- widened at the breakpoints below */
  --gut:clamp(1.15rem,4vw,3rem);
  --reading:66ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Raleway is a fairly wide, fairly light face: at 17px/400 it reads thin and
   the page had no weight contrast, because 800 was doing everything from the
   home h1 down to a card title. Body goes up a step and gains weight; 800 is
   reserved for display. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.62;font-weight:450;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.shell--wide{max-width:var(--shell-wide)}
@media(min-width:1500px){:root{--shell-wide:1440px}}
@media(min-width:2000px){:root{--shell-wide:1660px}}

/* ── masthead ─────────────────────────────────────────────────────────── */
.top{background:var(--ink);color:#fff;font-size:.82rem}
.top .shell{display:flex;gap:1.4rem;justify-content:flex-end;align-items:center;padding-block:.5rem;flex-wrap:wrap}
.top a{color:#cfd6dc;text-decoration:none}
.top a:hover{color:var(--amber)}
.top strong{color:#fff}
.mast{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.mast .shell{display:flex;align-items:center;gap:1.5rem;padding-block:.85rem}
.mast img{height:38px;width:auto}
.nav{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink);padding-block:.4rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--amber)}
.call{background:var(--ink);color:#fff!important;padding:.62rem 1.15rem;border-radius:3px;font-weight:700;white-space:nowrap}
.call:hover{background:var(--amber);color:var(--ink)!important;border-bottom-color:transparent!important}
.burger{display:none;margin-left:auto;background:none;border:0;font:inherit;font-weight:700;cursor:pointer;padding:.5rem}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
       flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gut) 1rem}
  .nav a{padding-block:.8rem;border-bottom:1px solid var(--line)}
  .nav .call{text-align:center;margin-top:.8rem;border:0}
  .mast.open .nav{display:flex}
  .burger{display:block}
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
/* A DIRECTIONAL SCRIM, not a flat opacity knock-down.
   The hero photograph is their own building, and the left third of it is bright
   sky and white cladding with the word "sportsmed" on it — so white type laid
   over a uniformly dimmed image was both low-contrast and fighting their
   signage. A gradient that is dark where the words are and clear where they are
   not keeps the text legible on ANY photograph, instead of only on a dark one,
   and lets the building stay bright on the right where nothing is written. */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,12,14,.94) 0%,rgba(10,12,14,.86) 34%,rgba(10,12,14,.45) 62%,rgba(10,12,14,.25) 100%)}
.hero .shell{position:relative;z-index:1;padding-block:clamp(4rem,11vw,8.5rem)}
@media(max-width:700px){
  /* On a phone the text spans the full width, so the scrim has to as well. */
  .hero::after{background:linear-gradient(180deg,rgba(10,12,14,.82) 0%,rgba(10,12,14,.9) 100%)}
}
.phead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,12,14,.92) 0%,rgba(10,12,14,.8) 45%,rgba(10,12,14,.42) 100%)}
.phead .shell{z-index:1}
.hero h1{font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 1.1rem;font-weight:800;max-width:17ch;text-wrap:balance}
.hero p.lede{font-size:clamp(1.02rem,2vw,1.2rem);max-width:52ch;color:#e4e9ed;margin:0 0 2rem}
.kicker{display:inline-block;color:var(--amber);font-weight:800;letter-spacing:.15em;text-transform:uppercase;font-size:.73rem;margin-bottom:1rem}
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:.85rem 1.5rem;border-radius:3px;font-size:.97rem}
.btn-a{background:var(--amber);color:var(--ink)}
.btn-a:hover{background:#fff}
/* .btn-b WAS WHITE ON ANYTHING, and 19 of its 20 uses are on a LIGHT band --
   so the secondary button has been invisible almost everywhere it appears,
   including "Explore our services" on the home page. Same defect as .proof
   earlier today and the same fix: the light ground is the DEFAULT, and the dark
   band overrides it, so the safe case is the one you get by accident.
   The contrast sweep passed it because an invisible button is still a button
   with a border -- it measures TEXT against its ground and this text is the
   same colour as its ground, which it reports, so it was there to be found. */
.btn-b{border:1.5px solid var(--ink);color:var(--ink)}
.btn-b:hover{border-color:var(--amber);color:var(--amber)}
.band--ink .btn-b,.hero .btn-b,.hero--split .btn-b,.band--charcoal .btn-b,
.callstrip .btn-b{border-color:rgba(255,255,255,.5);color:#fff}
.band--ink .btn-b:hover,.hero .btn-b:hover,.hero--split .btn-b:hover,
.band--charcoal .btn-b:hover,.callstrip .btn-b:hover{
  border-color:var(--amber);color:var(--amber)}

/* ── page header for inner pages ──────────────────────────────────────── */
.phead{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.phead img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.phead .shell{position:relative;padding-block:clamp(2.6rem,6vw,4.6rem)}
/* An inner page title was capped at 48px and stayed 48px at 2560, so it read as
   a section heading rather than as the name of the page. */
.phead h1{font-size:clamp(2.05rem,4.6vw,3.8rem);margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.02;max-width:22ch;text-wrap:balance}
.phead p{margin:.9rem 0 0;color:#dfe5ea;max-width:58ch}
.crumb{font-size:.8rem;color:#9fb0bd;margin-bottom:.7rem}
.crumb a{color:#9fb0bd;text-decoration:none}
.crumb a:hover{color:var(--amber)}

/* ── bands ────────────────────────────────────────────────────────────── */
.band{padding-block:clamp(3rem,7vw,5.5rem)}
.band--sand{background:var(--sand)}
.band--paper2{background:var(--paper-2)}
.band--ink{background:var(--ink);color:#fff}
.band--ink h2,.band--ink h3{color:#fff}
.band--ink p{color:#dbe2e8}
h2{font-size:clamp(1.62rem,3.3vw,2.7rem);line-height:1.1;margin:0 0 1rem;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h3{font-size:1.1rem;margin:0 0 .5rem;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.band p,.prose p{max-width:var(--reading)}
.eyebrow{color:var(--amber-deep);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.73rem;margin:0 0 .7rem}
.band--ink .eyebrow{color:var(--amber)}
.lead{font-size:1.16rem;line-height:1.55;color:var(--slate);max-width:58ch}
.band--ink .lead{color:#c9d3db}

/* ── split ────────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split img{border-radius:4px;width:100%;height:100%;max-height:460px;object-fit:cover}

/* ── cards ────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:1.1rem}
/* auto-FIT collapses the empty tracks in an incomplete last row and stretches
   whatever is left across the whole width -- so the single Psychology card
   became a 1,124px banner at 2560 and the lone seventh condition card sat
   alone at full width. auto-FILL keeps the empty tracks, so a remainder of one
   stays card-sized and aligns left. */
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.g4>*{max-width:300px}
@media(max-width:700px){
  /* Thirty-two full-width portraits is a very long page. Two up. */
  .g4{grid-template-columns:1fr 1fr;gap:.8rem}
  .g4>*{max-width:none}
}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;
      transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--amber);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .body{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.card p{font-size:.93rem;color:var(--slate);margin:0 0 1rem;max-width:none}
.card .go{margin-top:auto;font-weight:700;color:var(--amber-deep);text-decoration:none;font-size:.92rem}
.card a.blockmask{position:absolute;inset:0}
.card{position:relative}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}

/* practitioner cards — portrait, because a person is taller than they are wide */
.pcard img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;background:var(--paper-2)}
.pcard .body{padding:.95rem 1rem 1.1rem}
.pcard h3{font-size:1.02rem;margin-bottom:.2rem}
.pcard .role{font-size:.82rem;color:var(--amber-deep);font-weight:700;margin:0;max-width:none}
.initials{aspect-ratio:4/5;display:grid;place-items:center;background:var(--ink);color:var(--amber);font-weight:800;font-size:2.1rem;letter-spacing:.04em}

/* ── lists ────────────────────────────────────────────────────────────── */
.ticks{list-style:none;padding:0;margin:1.2rem 0 0;max-width:var(--reading)}
.ticks li{padding-left:1.7rem;position:relative;margin-bottom:.62rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;background:var(--amber);border-radius:1px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 0;padding:0;list-style:none}
.chips a{display:inline-block;text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:999px;
         padding:.42rem 1rem;font-size:.9rem;font-weight:600}
.chips a:hover{border-color:var(--amber);color:var(--amber-deep)}

/* ── contact / facts ──────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1.6rem;margin-top:1.6rem}
.fact h3{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-bottom:.45rem}
.fact p,.fact a{margin:0;font-size:1.04rem;color:#fff;text-decoration:none;max-width:none}
.fact a:hover{color:var(--amber)}
.big-call{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em;text-decoration:none;display:inline-block}
.big-call:hover{color:var(--amber)}

/* ── tables ───────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-top:1.4rem}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:420px}
th,td{text-align:left;padding:.72rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;background:var(--paper-2)}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{background:var(--ink);color:#aeb9c3;padding-block:3.2rem 2.4rem;font-size:.92rem}
footer h3{color:#fff;font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.8rem}
footer a{color:#aeb9c3;text-decoration:none}
footer a:hover{color:var(--amber)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.45rem}
.fbot{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-top:1.4rem;display:flex;
      justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem}
footer img{height:34px;margin-bottom:1rem}
.note{background:rgba(254,182,43,.1);border-left:3px solid var(--amber);padding:1rem 1.2rem;margin:1.6rem 0 0;max-width:var(--reading);font-size:.95rem}
.band--ink .note{background:rgba(254,182,43,.14)}
.prose h2{margin-top:2.4rem}
.prose h2:first-child{margin-top:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;z-index:99;background:#fff;padding:.6rem 1rem;border:2px solid var(--ink)}

/* Their Acknowledgement of Country, carried across from their own footer. Set at
   a readable measure rather than squeezed into a footer column: it is a
   statement, not a list item. */
.acknowledgement{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-top:1.6rem}
.acknowledgement p{max-width:78ch;margin:0;font-size:.9rem;line-height:1.7;color:#9aa6b1}

/* ══════════════════════════════════════════════════════════════════════════
   COMPOSITION — added 11 Sep 2026 after two outside design reviews.

   The brief was "clean, but a bit flat and not very exciting", and the
   measurement agreed: 24 pages shared ten furniture classes and averaged 5.7
   classes of their own, against 16.6-34.0 on the demo sites we benchmark
   against. Seven condition pages had exactly ONE class of their own. Every
   page was page-header, prose, card grid, the same dark call-to-action.

   Nothing below adds a colour or a typeface. It gives different kinds of page
   a different shape.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── split hero ────────────────────────────────────────────────────────────
   The photograph was their building at dusk under a 94% scrim so white type
   would read over it -- which is a picture darkened until there is no picture.
   On a phone the scrim went vertical and the hero became a black rectangle.
   Type sits on ink; the photograph sits beside it, undimmed, and bleeds off
   the right edge of the viewport. */
.hero--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero--split .hero-copy{padding:clamp(3rem,7vw,7rem) clamp(1.15rem,4vw,4rem) clamp(3rem,7vw,7rem) max(var(--gut),calc((100vw - var(--shell-wide))/2 + var(--gut)));display:flex;flex-direction:column;justify-content:center}
.hero--split .hero-pic{position:relative;min-height:clamp(320px,46vw,660px)}
.hero--split .hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero--split .hero-pic::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--amber);z-index:2}
.hero--split h1{font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:1.01;letter-spacing:-.028em;margin:0 0 1.1rem;font-weight:800;max-width:15ch;text-wrap:balance}
.hero--split p.lede{font-size:clamp(1.04rem,1.5vw,1.28rem);max-width:44ch;color:#e4e9ed;margin:0 0 2rem;line-height:1.5}
@media(max-width:860px){
  .hero--split{grid-template-columns:1fr}
  .hero--split .hero-pic{min-height:0;aspect-ratio:16/10;order:-1}
  .hero--split .hero-pic::before{left:0;right:0;top:auto;bottom:0;width:auto;height:4px}
  .hero--split .hero-copy{padding:2.4rem var(--gut) 2.8rem}
}

/* a row of facts under the hero, so the first screen carries something a
   patient can use rather than only a photograph */
.herofacts{background:var(--ink-2);color:#fff;border-top:1px solid rgba(255,255,255,.09)}
.herofacts ul{list-style:none;margin:0;padding:1.5rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem 2.4rem}
.herofacts li{display:flex;gap:.75rem;align-items:flex-start;font-size:.97rem;color:#d4dce3;line-height:1.42}
.herofacts li::before{content:"";flex:0 0 auto;width:.58rem;height:.58rem;margin-top:.42em;background:var(--amber);border-radius:1px}
.herofacts strong{color:#fff;font-weight:700}

/* ── the services mosaic ───────────────────────────────────────────────────
   Six identical rectangles told a reader nothing about where to start. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.mosaic>*{grid-column:span 2}
.mosaic .feature{grid-column:span 6;grid-row:span 2}
@media(min-width:900px){
  .mosaic .feature{grid-column:span 4;grid-row:span 2}
  .mosaic .wide{grid-column:span 2}
}
@media(max-width:899px){
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic>*{grid-column:span 1}
  .mosaic .feature{grid-column:span 2;grid-row:auto}
}
@media(max-width:560px){.mosaic{grid-template-columns:1fr}.mosaic .feature{grid-column:span 1}}
.feature{position:relative;display:flex;flex-direction:column;background:var(--ink);color:#fff;border:0;overflow:hidden;border-radius:4px;min-height:300px}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;opacity:.72}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,12,.95) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.12) 100%)}
.feature .body{position:relative;z-index:1;margin-top:auto;padding:1.6rem 1.6rem 1.7rem}
.feature h3{font-size:clamp(1.4rem,2.4vw,2rem);color:#fff;letter-spacing:-.02em;margin-bottom:.45rem}
.feature p{color:#dbe3ea;font-size:1rem;max-width:46ch}
.feature .go{color:var(--amber)}
.feature:hover{border-color:transparent;transform:none}
.feature:hover img{opacity:.82}

/* ── "where does it hurt" ──────────────────────────────────────────────────
   This was seven small pills floating in a white band -- the thinnest section
   on the home page, and the one a patient in pain actually came to use. */
.bodymap{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:.9rem;margin-top:1.9rem;padding:0;list-style:none}
.bodymap a{display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1.15rem 1.2rem 1.1rem;min-height:130px;transition:border-color .18s,background .18s,transform .18s}
.bodymap a:hover{border-color:var(--amber);transform:translateY(-2px)}
.bodymap .part{font-size:clamp(1.18rem,2vw,1.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.bodymap .who{font-size:.83rem;color:var(--slate);font-weight:500;line-height:1.35}
.band--ink .bodymap a{background:var(--ink-2);border-color:rgba(255,255,255,.14);color:#fff}
.band--ink .bodymap a:hover{border-color:var(--amber);background:#252b31}
.band--ink .bodymap .who{color:#b6c1cb}
@media(prefers-reduced-motion:reduce){.bodymap a{transition:none}.bodymap a:hover{transform:none}}

/* ── the hours band ────────────────────────────────────────────────────────
   THE ONE PLACE their true amber is a SURFACE rather than a rule or a label.
   It is the weekend injury clinic, the one time-critical thing on the site: a
   parent with a child’s Saturday fracture should not have to read a paragraph
   to find out whether anyone is open. Ink on their amber measures 10.2:1, so
   the text is ink -- white on that amber is 1.76:1 and unreadable. */
.hours{background:var(--amber);color:var(--ink)}
.hours .shell{padding-block:clamp(2.4rem,5vw,3.6rem)}
.hours .eyebrow{color:#5c3d00}
.hours h2{color:var(--ink);margin-bottom:.3rem}
.hours .lead{color:#3d2a00}
.hours dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1.3rem 2rem;margin:1.7rem 0 0}
.hours dt{font-weight:800;font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:#5c3d00;margin-bottom:.25rem}
.hours dd{margin:0;font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.hours .hours-call{display:inline-block;margin-top:1.8rem;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;padding:.9rem 1.6rem;border-radius:3px;font-size:1.05rem}
.hours .hours-call:hover{background:#000}
.hours .hours-act{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;margin:0}
.hours .hours-act .hours-call{margin-top:0}
.hours .hours-more{color:var(--ink);font-weight:700;font-size:1.02rem;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.hours .hours-more:hover{text-decoration-thickness:3px}
@media(max-width:460px){.hours .hours-act{gap:.9rem}.hours .hours-more{font-size:.97rem}}

/* ── practitioner directory ────────────────────────────────────────────────
   Thirty-two portraits in discipline order with no way to reach a discipline.
   A GP looking for a knee surgeon scrolled past thirteen physiotherapists. */
.dirnav{position:sticky;top:63px;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
/* THE SCROLLER IS RIGHT ON A PHONE AND WRONG ON A LAPTOP. Eight chips
   cannot fit across 390px; they fit in two rows at 1440 with room to
   spare, and scrolling them there cut “Strength & c” in half and put
   two disciplines off-screen with nothing to say so. */
.dirnav ul{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:.7rem 0;
  list-style:none}
@media(max-width:900px){.dirnav ul{flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:thin}}
.dirnav a{display:inline-block;white-space:nowrap;text-decoration:none;font-size:.88rem;font-weight:700;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:#fff}
.dirnav a:hover{border-color:var(--amber);color:var(--amber-deep)}
.dirnav .count{color:var(--slate);font-weight:500}
@media(max-width:900px){.dirnav{top:59px}}
.pgroup{scroll-margin-top:130px}
.pcard h3 a{text-decoration:none}
.pcard h3 a:hover{color:var(--amber-deep)}

/* ── a compact call strip ──────────────────────────────────────────────────
   The full dark "Speak to our team" band closed 23 of 24 pages. Keep it where
   it belongs -- home, contact -- and give inner pages something smaller, so
   the telephone stays one tap away without every page ending identically. */
.callstrip{background:var(--ink);color:#fff}
.callstrip .shell{display:flex;align-items:center;gap:1.2rem 2rem;flex-wrap:wrap;padding-block:1.7rem}
.callstrip p{margin:0;color:#c9d3db;font-size:1rem;max-width:44ch}
.callstrip strong{color:#fff;display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.callstrip a.num{margin-left:auto;font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.02em;color:var(--amber);text-decoration:none;white-space:nowrap}
.callstrip a.num:hover{color:#fff}
@media(max-width:640px){.callstrip a.num{margin-left:0}}

/* ── a wide photograph, used as a photograph ───────────────────────────────
   Every picture was either a background at 30% opacity or a 16:10 thumbnail. */
.figwide{margin:0}
.figwide img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:4px}
.figwide figcaption{margin-top:.7rem;font-size:.88rem;color:var(--slate);max-width:var(--reading)}
@media(max-width:700px){.figwide img{aspect-ratio:16/10}}

/* ── clinic locations ──────────────────────────────────────────────────── */
.locs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.1rem;margin-top:1.8rem;padding:0;list-style:none}
.locs li{border:1px solid var(--line);border-radius:4px;padding:1.25rem 1.3rem;background:#fff}
.locs h3{margin-bottom:.35rem;font-size:1.06rem}
.locgroup{margin-top:2.4rem}
.locgroup:first-of-type{margin-top:1.8rem}
.locgroup-h{display:flex;align-items:baseline;gap:.6rem;font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);padding-bottom:.6rem;border-bottom:1px solid var(--line);margin:0}
.locgroup-h span{font-weight:700;letter-spacing:0;color:var(--amber-deep);font-size:.9rem;text-transform:none}
.locgroup .locs{margin-top:1.1rem}
.locs li p{margin:0;font-size:.9rem;color:var(--slate);line-height:1.45}
/* The address is the thing a regional patient came for, so it reads first
   and in ink; their sentence about who consults there sits under it. */
.locs .loc-addr{margin:0 0 .5rem;color:var(--ink);font-size:.92rem}
.locs .loc-who{margin:0;font-size:.86rem;color:var(--slate);line-height:1.5}
.locs li{display:flex;flex-direction:column}
@media(max-width:560px){.locs{grid-template-columns:1fr}.locs li{padding:1rem 1.1rem}}
@media(max-width:560px){.locs{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:.7rem}
.locs li{padding:.85rem .9rem}.locs h3{font-size:.98rem}}
.locs p{margin:0;font-size:.93rem;color:var(--slate);max-width:none}
.band--ink .locs li{background:var(--ink-2);border-color:rgba(255,255,255,.14)}
.band--ink .locs p{color:#b6c1cb}
.band--ink .locs h3{color:#fff}

/* ── a pulled statement ────────────────────────────────────────────────── */
.pull{border-left:4px solid var(--amber);padding:.4rem 0 .4rem 1.5rem;margin:2.2rem 0;font-size:clamp(1.18rem,2.1vw,1.5rem);line-height:1.36;font-weight:600;letter-spacing:-.015em;max-width:34ch}
.band--ink .pull{color:#fff}

/* ── the telephone, permanently reachable on a phone ───────────────────────
   The number lived in a 22px strip that scrolled away, after which the sticky
   masthead carried a logo and the word Menu. Telephone is this site’s primary
   action and the only one a patient in pain wants. */
.mcall{display:none}
@media(max-width:900px){
  .top .shell span{display:none}
  .mcall{display:inline-flex;align-items:center;margin-left:auto;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;font-size:.92rem;padding:.62rem 1rem;border-radius:3px;min-height:44px;box-sizing:border-box}
  .mcall:hover{background:var(--amber);color:var(--ink)}
  .burger{margin-left:.5rem;min-height:44px}
}

/* A CARD KEEPS ITS OWN GROUND INSIDE A DARK BAND.
   Putting the practitioner grid on .band--ink made `.band--ink h3{color:#fff}`
   apply to headings sitting inside white cards, so every practitioner’s name
   on the orthopaedic surgeons and podiatry pages rendered white on white --
   measured at 1:1, on the flagship page, invisible rather than merely faint.
   The band recolours its OWN text; anything with a ground of its own keeps the
   colours that go with that ground. */
.band--ink .card h3,.band--ink .card h3 a,.band--ink .locs h3{color:var(--ink)}
.band--ink .card p{color:var(--slate)}
.band--ink .card .go{color:var(--amber-deep)}
/* the feature card is genuinely dark, so it opts back in */
.band--ink .card.feature h3,.band--ink .card.feature h3 a{color:#fff}
.band--ink .card.feature p{color:#dbe3ea}
.band--ink .card.feature .go{color:var(--amber)}

/* ── THE MASTHEAD IS INK, BECAUSE THEIR LOGO HAS A WHITE WORDMARK ──────────
   Their header logo sets "sportsmed" in WHITE -- on their own site the header
   is a transparent overlay on the hero photograph, so it reads. On our white
   masthead the wordmark disappeared completely and the practice’s own name was
   invisible: only the coloured icon showed.
   Their black stacked lockup exists, but it is a vertical mark and sits badly
   in a horizontal bar. Putting the bar on ink uses their logo exactly as it was
   drawn, keeps the top strip, masthead and hero as one dark mass, and is a more
   confident opening than a white bar. Nothing about their mark is altered. */
.mast{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.10)}
.mast .nav a{color:#fff}
.mast .nav a:hover,.mast .nav a[aria-current]{border-bottom-color:var(--amber);color:var(--amber)}
.mast .burger{color:#fff}
.mast .call{background:var(--amber);color:var(--ink)!important}
.mast .call:hover{background:#fff;color:var(--ink)!important}
.top{border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){
  .nav{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.12)}
  .nav a{border-bottom:1px solid rgba(255,255,255,.10)}
  .mcall{background:var(--amber);color:var(--ink)}
  .mcall:hover{background:#fff}
}

/* The facts row set `display:flex` on the <li>, which makes EVERY child a flex
   item -- so the bold label and the sentence after it became two columns, each
   squeezed to about twelve characters. The text is one span now, and the row
   takes fewer, wider columns. */
.herofacts ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.1rem 2.6rem}
.herofacts li{display:flex;gap:.7rem;align-items:baseline}
.herofacts li span{display:block}
.herofacts strong{display:block;margin-bottom:.1rem}

/* The tiles were 130px tall with `space-between`, so a two-line name and a
   one-line list left a band of empty card underneath. They size to content now,
   with a floor that keeps the row even. */
.bodymap a{min-height:0;gap:.7rem;padding:1.05rem 1.15rem 1.1rem}
.bodymap .who{margin-top:auto}
/* A split whose two columns are very different heights centres the short one and
   leaves a gap above and below it. Top-align, which reads as a designed column. */
.split{align-items:start}
.split img{align-self:stretch}

/* In a wide split the prose keeps its measure -- the extra width goes to the
   photograph, not to the line length. */
.shell--wide .split>div>p,.shell--wide .split>div>.lead{max-width:var(--reading)}
.shell--wide .split img{max-height:520px}

/* On a phone the hero photograph was 16:10 -- about 570px of an 844px screen --
   so the headline and the call button both began below the fold. The picture
   still leads (it is what makes the first screen theirs rather than a black
   rectangle), but it is a strip now, and the headline, the lede and the call
   button all land inside the first screen. */
@media(max-width:860px){
  .hero--split .hero-pic{aspect-ratio:auto;height:34vh;min-height:210px;max-height:300px}
  .hero--split h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
  .hero--split .hero-copy{padding-block:1.8rem 2.2rem}
  .hero--split p.lede{margin-bottom:1.5rem}
}

/* `.card .body{flex:1}` made the feature card’s caption fill the whole card, so
   the heading sat at the TOP -- over the lightest part of the scrim, which is
   exactly where white text should not be. The contrast sweep cannot see this:
   it resolves background COLOURS by walking the tree, and the ground here is a
   photograph. Put the caption back at the foot, where the gradient is 95% dark.
   Two checks, blind to opposite things -- the measurement, and looking. */
.feature .body{flex:0 0 auto;margin-top:auto}
.feature::after{background:linear-gradient(to top,rgba(8,10,12,.96) 0%,rgba(8,10,12,.88) 30%,rgba(8,10,12,.45) 62%,rgba(8,10,12,.15) 100%)}

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 2 — pages that have something of their own to say, saying it their
   own way. Each block below belongs to ONE page and is named for what it is,
   which is what separates a designed page from a filled-in template.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the company history ───────────────────────────────────────────────────
   Thirty years of dated entries, in their own words, which were sitting in a
   scroller at the foot of their About page. A practice that opened Australia’s
   first freestanding day surgery in 1990 should not have that buried. */
.hist{list-style:none;margin:2.6rem 0 0;padding:0;position:relative}
.hist::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:2px;background:rgba(254,182,43,.28)}
.hist-row{display:grid;grid-template-columns:7.5rem 1fr;gap:0 2rem;padding:0 0 2.2rem 0;position:relative}
.hist-row:last-child{padding-bottom:0}
.hist-year{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;color:var(--amber);
  padding-left:1.6rem;position:relative;line-height:1.1}
/* the dot sits ON the rule, so the years read as a spine rather than a column */
.hist-year::before{content:"";position:absolute;left:-5px;top:.45em;width:12px;height:12px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px var(--ink)}
.hist-body p{margin:0;color:#d6dee5;max-width:60ch}
@media(max-width:680px){
  .hist-row{grid-template-columns:1fr;gap:.5rem}
  .hist-body{padding-left:1.6rem}
  .hist-body p{max-width:none}
}

/* ── what is in the three gyms ─────────────────────────────────────────── */
.amen{list-style:none;margin:2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1.1rem}
.amen li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:3px;padding:1.1rem 1.2rem;font-size:.97rem;line-height:1.5;color:var(--slate)}

/* ── what the weekend clinic treats ────────────────────────────────────────
   Five things, set large. A parent scanning this page at 9am on a Saturday is
   looking for one word, not a paragraph. */
.treats{list-style:none;margin:2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:.9rem}
.treats li{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1.3rem 1.25rem;
  font-size:clamp(1.02rem,1.6vw,1.2rem);font-weight:700;letter-spacing:-.015em;line-height:1.25}

/* ── imaging, pathology and pharmacy on the same site ─────────────────────── */
.onsite{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.1rem}
.onsite li{padding:1.1rem 0 0;border-top:2px solid var(--amber);font-size:.97rem;line-height:1.5;color:var(--slate)}

/* ── their published gym prices ────────────────────────────────────────── */
.prices{max-width:24rem}
.prices td:last-child,.prices th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
@media(max-width:560px){
  /* two money figures stacked under each other are indistinguishable without
     their labels, so the labels come with them */
  .prices thead{position:absolute;left:-9999px}
  .prices tr{display:block;border-bottom:1px solid var(--line);padding:.5rem 0}
  .prices td{display:flex;justify-content:space-between;border:0;padding:.35rem 0}
  .prices td::before{content:attr(data-label);font-weight:700;color:var(--ink)}
  .prices td:last-child{text-align:right}
}

/* The timeline is the page’s spine, so it gets a little more room than a
   paragraph would and the year column is wide enough not to wrap. */
.hist-body p{max-width:66ch}
.hist-row{grid-template-columns:8rem 1fr}
@media(max-width:680px){.hist-row{grid-template-columns:1fr}}

/* ── find a practitioner ──────────────────────────────────────────────────
   Injected by script, so it never appears as a dead box on a page with no
   scripting. Sits in the sticky bar beside the discipline chips. */
.dirnav .shell{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.dirnav ul{flex:1 1 auto;min-width:0}
.dirfind{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;padding:.7rem 0}
.dirfind input{font:inherit;font-size:.92rem;padding:.5rem .85rem;border:1px solid var(--line);
  border-radius:999px;min-width:15rem;background:#fff;color:var(--ink)}
.dirfind input:focus-visible{border-color:var(--amber)}
.dirfind .dircount{font-size:.84rem;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.dirfind.none::after{content:"No one by that name — try a discipline above.";font-size:.86rem;color:var(--amber-deep);font-weight:600}
/* a label that is read aloud and never drawn */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:820px){
  .dirfind{width:100%;padding-top:0;padding-bottom:.7rem}
  .dirfind input{flex:1 1 auto;min-width:0}
}

/* ── conditions, grouped the way their surgeons are ───────────────────────── */
.cgroup{padding-block:clamp(1.6rem,3vw,2.4rem)}
.cgroup + .cgroup{padding-top:0}
.cgroup-h{font-size:clamp(1.05rem,1.7vw,1.25rem);font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--slate);margin:0 0 .2rem;padding-bottom:.9rem;
  border-bottom:1px solid var(--line)}
.cgroup .bodymap{margin-top:1.3rem}

/* ── a plain hours list, used on more than one page ───────────────────────── */
.hrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:1.2rem 2rem;margin:1.6rem 0 0}
.hrs dt{font-weight:800;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:.25rem}
.hrs dd{margin:0;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700;letter-spacing:-.01em}

/* ── heading against heading ───────────────────────────────────────────────
   h1 and h2 were both weight 800, so a page title and a section title carried
   the same voice and "Surgeons treating the knee" competed with "Knee". The
   display weight belongs to the page title alone. */
h2{font-weight:700}
.hero--split h1,.phead h1{font-weight:800}

/* ── the practitioner directory on a large monitor ─────────────────────────
   At 2560 the grid ran to six and seven columns, shrinking every face toward
   the 299px cap until a portrait stopped being a person. Five is the ceiling.
   And 5.5rem of padding above AND below each of six discipline groups is a lot
   of empty ground to scroll past; an authored section keeps the larger figure,
   a directory group does not. */
@media(min-width:1500px){
  .pgroup .g4{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.pgroup{padding-block:clamp(2rem,3.4vw,3rem)}

/* ── body-area tiles, two-up on a phone ───────────────────────────────────
   Seven full-width tiles is seven screens of scrolling to choose one joint. */
@media(max-width:560px){
  .bodymap{grid-template-columns:1fr 1fr;gap:.7rem}
  .bodymap a{min-height:0;padding:.95rem 1rem}
  .bodymap .part{font-size:1.05rem}
  .bodymap .who{display:none}   /* the surgeons’ names do not fit two-up */
}

/* ── a page header ON PAPER, for the condition pages ───────────────────────
   The joint is one word. Set large, on light, with a rule under it, it is the
   graphic — and it means the seven condition pages no longer open the way
   every other page on the site opens. */
.phead--paper{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.phead--paper::after{content:none}
.phead--paper .shell{padding-block:clamp(2.2rem,5vw,4rem)}
.phead--paper h1{font-size:clamp(2.8rem,8vw,6rem);max-width:12ch;letter-spacing:-.035em;line-height:.94}
.phead--paper p{color:var(--slate);max-width:54ch;font-size:1.1rem}
.phead--paper .crumb,.phead--paper .crumb a{color:var(--slate)}
.phead--paper .crumb a:hover{color:var(--amber-deep)}
/* an amber rule, the width of the word, sitting under it */
.phead--paper h1::after{content:"";display:block;width:3.2rem;height:5px;background:var(--amber);
  margin-top:1.1rem;border-radius:1px}

/* ── the sticky directory bar clears the masthead ──────────────────────────
   Measured on a phone: masthead 73.3px, bar stuck at a hard-coded 59px, so its
   top 14px sat behind it. The masthead now publishes its own height and the bar
   reads it; the fallback is only used before the script runs. */
.dirnav{top:var(--mast-h,63px)}
@media(max-width:900px){.dirnav{top:var(--mast-h,73px)}}

/* ── the phone header carried the same action twice ────────────────────────
   A 38px strip with the telephone number, directly above a 73px masthead with a
   Call button: 111px of the first screen spent saying the same thing. The strip
   goes; the labelled 44px Call button stays where a thumb is. */
@media(max-width:900px){
  .top{display:none}
  /* a tap target is 44px, and the chips were 39 */
  .dirnav a{min-height:44px;display:inline-flex;align-items:center}
  /* 13.12px for a practitioner’s discipline is too small to read at arm’s length */
  .pcard .role{font-size:.94rem}
  .pcard h3{font-size:1.04rem}
  /* only the discipline rail sticks; search and the rail together with the
     masthead took about a quarter of a 390x844 screen */
  .dirnav{position:static}
  .dirnav ul{position:sticky;top:var(--mast-h,73px);z-index:40;background:rgba(255,255,255,.97);
    padding-top:.7rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
}

/* ── who would treat you ───────────────────────────────────────────────────
   The surgeons for a body area were four amber square bullets. A face, linked
   to that clinician in the directory, is the most reassuring thing a condition
   page has. No photograph means initials — never a stand-in and never an
   upscale, because the sources are 299px. */
.whogrid{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(50%,120px),1fr));gap:1rem}
.whogrid a{display:block;text-decoration:none;color:inherit}
.whogrid img,.whogrid .initials{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:4px;background:var(--paper-2);margin-bottom:.55rem}
.whogrid .initials{font-size:1.5rem}
.whogrid .who-name{display:block;font-weight:700;font-size:.94rem;line-height:1.25}
.whogrid .who-role{display:block;font-size:.79rem;color:var(--slate);line-height:1.3;margin-top:.15rem}
.whogrid a:hover .who-name{color:var(--amber-deep)}
.whogrid a:hover img{filter:brightness(1.04)}

/* ── the proof points on the flagship page ─────────────────────────────────
   Robotic knee surgery, 4K imaging and the hospital on site were a clause each
   inside the fourth paragraph. They are the reason to choose this practice. */
.proof{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1.6rem}
.proof li{border-top:3px solid var(--amber);padding-top:1.1rem}
/* .proof WAS WHITE-ON-ANYTHING, and that is how it shipped at 1.07:1.
   It was written for a dark band and hard-coded #fff and #c3cdd6, so the first
   time it was used on a light one -- the "Why sportsmed" reasons on About --
   the heading measured 1.07:1 and the line under it 1.51:1 against a 4.5
   requirement. Unreadable, on the page a practice’s own argument lives on.
   CLAUDE.md already says to redefine the TOKENS inside the dark band rather
   than chase the elements, so anything added there later is correct without
   being remembered. The default is now the light-ground colour and the dark
   band overrides it, which makes the safe case the one you get by accident. */
.proof h3{color:var(--ink);font-size:1.12rem;margin-bottom:.4rem}
.proof p{color:var(--slate);font-size:.95rem;margin:0;max-width:none}
.band--ink .proof h3{color:#fff}
.band--ink .proof p{color:#c3cdd6}

/* The placeholder ground meant for a loading PHOTOGRAPH also landed on the
   INITIALS tile, so Dr Tom Gieroba’s "TG" became amber on light grey at 1.64:1
   on three condition pages. The initials tile is a dark plate and stays one —
   amber on ink measures 10.2. Fixing a colour for one job broke another that
   used the same rule, which this codebase has recorded before. */
.whogrid .initials{background:var(--ink);color:var(--amber)}

/* ══════════════════════════════════════════════════════════════════════════
   THE BODY MAP — the signature route into the clinical pages.
   One SVG: the figure, the joints, the leader lines and the labels are all in
   the document and all visible on arrival. No script runs. Hover and keyboard
   focus only EMPHASISE; they never reveal anything that was not already there.
   ══════════════════════════════════════════════════════════════════════════ */
/* ALL SIX LABELS IN THE FIRST SCREEN. At 1440 in a 900px viewport only
   three of the six were above the fold, on the page whose entire job is
   “start with the part that hurts”. An SVG scales, so capping the
   height costs nothing and buys the other three. */
.bmap{margin:1.6rem auto 0;max-width:980px}
@media(min-width:761px){
  .bmap{max-height:min(52vh,430px)}
  .bmap svg{max-height:min(52vh,430px)}
}
.bmap svg{width:100%;height:auto;display:block;overflow:visible}
/* THE FIGURE. A filled silhouette mirrored from one half-outline, stroked with
   its own colour so every joint rounds without a curve command. The old version
   was five polylines with a floating head, no neck, no hands and no feet. */
.bm-fig{stroke:#2b3238}
.bm-body{fill:#2b3238;stroke:#2b3238}
/* The dot is the target. A bare 9px circle did not read as something you press,
   so there is a ring you can see and a 26px hit area you can actually hit --
   well over the 24px minimum, and it matters most on a phone. */
.bm-hit{fill:transparent}
.bm-ring{fill:none;stroke:rgba(254,182,43,.45);stroke-width:2}
.bm-dot{fill:var(--amber)}
.bm-pt{cursor:pointer}
.bm-pt .bm-ring{transition:all .16s ease}
.bm-pt:hover .bm-ring,.bm-pt:focus-visible .bm-ring{stroke:var(--amber);r:19}
.bm-line{stroke:rgba(254,182,43,.42);stroke-width:2}
.bm-lab{fill:#fff;font-family:var(--font);font-weight:800;font-size:27px;letter-spacing:-.5px}
.bm-who{fill:#9fb0bd;font-family:var(--font);font-weight:600;font-size:16px}
.bm-pt{cursor:pointer}
.bm-pt .bm-dot,.bm-pt .bm-line,.bm-pt .bm-lab{transition:all .16s ease}
.bm-pt:hover .bm-dot,.bm-pt:focus-visible .bm-dot{r:14}
.bm-pt:hover .bm-line,.bm-pt:focus-visible .bm-line{stroke:var(--amber);stroke-width:3}
.bm-pt:hover .bm-lab,.bm-pt:focus-visible .bm-lab{fill:var(--amber)}
.bm-pt:hover .bm-who,.bm-pt:focus-visible .bm-who{fill:#dbe2e8}
.bm-pt:focus-visible{outline:none}
.bm-pt:focus-visible .bm-lab{text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.bm-pt *{transition:none}}
.bmap-note{text-align:center;color:#9fb0bd;margin:2.2rem auto 0;font-size:.95rem}

/* Below 760px six labels cannot be read around a figure. The figure stays as
   orientation, at a size that does not dominate, and the grouped list beneath
   is how a phone chooses — which is what it was already good at. */
@media(max-width:760px){
  .bmap{max-width:230px;margin-top:1.4rem}
  .bm-lab,.bm-who,.bm-line{display:none}
  .bm-dot{r:11}
  .bmap-note{margin-top:1.4rem}
}

/* ── the footer should close a thin page, not outweigh it ──────────────────
   At 390px the footer ran longer than the content on /conditions/ and
   /patient-information/. The two link lists go two-up, which halves it without
   hiding anything behind a control somebody has to find and tap. */
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr;gap:1.6rem}
  footer ul{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
  footer li{margin-bottom:.35rem}
  /* the contact column is not a list of links to scan -- keep it one column */
  .fgrid > div:last-child ul{grid-template-columns:1fr}
  .acknowledgement{margin-top:1.8rem;padding-top:1.2rem}
  .acknowledgement p{font-size:.84rem;line-height:1.6}
}

/* ── the two lists a referring GP came for ─────────────────────────────────
   Their own injuries and treatments, per joint. These were being thrown away
   because the capture stores each as one unpunctuated run of capitalised
   phrases, which reads to a prose filter exactly like a name dump. */
.clists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media(max-width:820px){.clists{grid-template-columns:1fr}}
.clists h2{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:1.1rem}
.clist{list-style:none;margin:0;padding:0;columns:1}
.clist li{padding:.55rem 0 .55rem 1.5rem;position:relative;border-bottom:1px solid var(--line);
  font-size:.97rem;line-height:1.45}
.clist li:last-child{border-bottom:0}
.clist li::before{content:"";position:absolute;left:0;top:1.05em;width:.5rem;height:2px;background:var(--amber)}
/* the things they DO get a solid mark; the things they SEE get a rule */
.clist--do li::before{height:.5rem;border-radius:1px;top:.85em}
.clist-note{grid-column:1/-1;margin:1.4rem 0 0;font-size:.9rem;color:var(--slate);max-width:60ch}

/* ── sideways, in one line ─────────────────────────────────────────────────
   This was a second full card field repeating every other joint, directly
   under the lists. A reader who picked the wrong joint needs a way across, not
   another band competing with the page they are on. */
.lateral{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline;margin:0;max-width:none;
  font-size:.95rem}
.lateral span{color:var(--slate);font-weight:700}
.lateral a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:1px}
.lateral a:hover{border-bottom-color:var(--amber);color:var(--amber-deep)}

/* ── [hidden] LOSES TO display:flex, AND THE SEARCH SAID SO ────────────────
   The practitioner filter sets the `hidden` attribute on a card, but `.card`
   declares `display:flex` — and an explicit display beats the [hidden]
   attribute’s default `display:none`. So searching "bolton" answered "1 of 32"
   while SEVEN surgeons stayed on screen: the count was right and the page
   disagreed with it, which is worse than either being wrong on its own.
   Found by an outside reviewer, not by the filter test I wrote — which counted
   the cards WITHOUT the attribute and never asked what was actually drawn. */
[hidden]{display:none!important}

/* ── the gym price table pushed a phone sideways ───────────────────────────
   `table{min-width:420px}` is right for a table that scrolls in its own
   container, and wrong for one that has been stacked into label/value rows: it
   forced 438px of content into a 350px column on /our-services/gym/ at 390px
   and 430px. The stacked form has no columns left to protect. */
@media(max-width:560px){
  .prices{min-width:0}
  .prices tr,.prices td{max-width:100%}
}

/* ── the flagship opening ──────────────────────────────────────────────────
   The home hero’s shape, for the one page that carries the practice’s whole
   argument. Type on ink at left, their theatre photograph undimmed at right —
   rather than a fifth variant of white words over a picture turned down to
   30%, which is what both reviewers kept naming as the house pattern. */
.flag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:#fff;overflow:hidden}
.flag-copy{padding:clamp(2.6rem,6vw,5.5rem) clamp(1.15rem,4vw,4rem) clamp(2.6rem,6vw,5.5rem)
  max(var(--gut),calc((100vw - var(--shell-wide))/2 + var(--gut)));display:flex;flex-direction:column;justify-content:center}
.flag-copy h1{font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.028em;margin:0 0 1rem;
  font-weight:800;max-width:14ch;text-wrap:balance}
.flag-copy .lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#e4e9ed;max-width:46ch;margin:0;line-height:1.5}
.flag-pic{position:relative;min-height:clamp(260px,34vw,520px)}
.flag-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flag-pic::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--amber);z-index:2}
/* the body areas they operate on, as links into the clinical route — so the
   flagship connects to the body map rather than sitting beside it */
.flag-links{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0}
.flag-links a{display:inline-block;text-decoration:none;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.42rem 1rem;font-size:.9rem;font-weight:600;color:#fff}
.flag-links a:hover{border-color:var(--amber);color:var(--amber)}
@media(max-width:860px){
  .flag{grid-template-columns:1fr}
  .flag-pic{min-height:0;aspect-ratio:16/10;order:-1}
  .flag-pic::before{left:0;right:0;top:auto;bottom:0;width:auto;height:4px}
  .flag-copy{padding:2.2rem var(--gut) 2.6rem}
}

/* the weekend clinic’s heading now lives in the amber band, so the band has to
   carry a breadcrumb and a page title without losing the hours as the loudest
   thing on it */
.hours .crumb,.hours .crumb a{color:#6b4a00}
.hours .crumb a:hover{color:var(--ink)}
.hours h1{font-size:clamp(2.2rem,5.5vw,3.6rem);letter-spacing:-.03em;line-height:1;margin:0 0 .4rem;
  font-weight:800;color:var(--ink)}
.hours dd{font-size:clamp(1.3rem,2.6vw,2rem)}

/* ── the questions they are asked most ─────────────────────────────────────
   Their own answers, recovered from inside the collapsed accordions on their
   site. Every one is visible: folding them away is exactly why our capture
   could not see them, and it is why a search engine and a screen reader would
   struggle too. */
.qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:1.6rem 2.6rem;margin-top:2rem}
.qa-item{border-top:2px solid var(--line);padding-top:1.1rem}
.qa-item h3{font-size:1.02rem;margin-bottom:.45rem;letter-spacing:-.005em}
.qa-item p{margin:0;font-size:.95rem;color:var(--slate);line-height:1.55;max-width:none}

/* ── the figure IS the conditions page ─────────────────────────────────────
   It was drawn, and then everything it had just said was repeated underneath
   as cards — so the drawing read as a caption to its own previous version.
   The heading lives in the band with it, and the grouped tiles below are for
   the phone, where the labels cannot be read around a figure. */
.bmap-band .crumb,.bmap-band .crumb a{color:#9fb0bd}
.bmap-band h1{font-size:clamp(2.2rem,5.4vw,4rem);letter-spacing:-.03em;line-height:1;margin:.2rem 0 .8rem;font-weight:800}
.bmap-band .lead{color:#c9d3db;max-width:46ch}
.bmap{max-width:none}
@media(min-width:761px){
  /* the list is the phone’s chooser; on a desktop the figure already said it */
  .cgroup{display:none}
}
@media(max-width:760px){
  .bmap-band h1{font-size:clamp(1.9rem,8vw,2.6rem)}
}

/* ── the chips read "Surgeons7" on a phone ─────────────────────────────────
   Caused by my own 44px tap-target fix: `display:inline-flex` makes each child
   a flex item and drops the whitespace text node between the label and its
   count, so the two ran together. A gap restores it without going back to a
   target a thumb misses. */
.dirnav a{gap:.4rem}

/* The practitioners page opens on paper now — the 32 real portraits are the
   photograph, and a consulting room at 30% opacity above them was competing
   with the thing the page exists to show. */
.phead--paper h1{max-width:16ch}

/* ── the services extracted from their own headings ───────────────────────
   Ten pages the rebuild never had. Each keeps the structure their page
   publishes — Women’s Health has Prenatal, Postnatal, Bowel, Bladder and Pain;
   Hydrotherapy has Lower Limb, Upper Limb and Spinal — so these are headed
   blocks rather than a photograph beside a paragraph. */
.svc-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:1.8rem 2.6rem;margin-top:.5rem}
.svc-block{border-top:3px solid var(--amber);padding-top:1.1rem}
.svc-block h2{font-size:1.1rem;margin-bottom:.5rem;letter-spacing:-.005em}
.svc-block p{margin:0;font-size:.95rem;color:var(--slate);line-height:1.55;max-width:none}
.svc-block p + p{margin-top:.7rem}
.svc-list{list-style:none;margin:.7rem 0 0;padding:0}
.svc-block .svc-list{font-size:.95rem}
.svc-list li{position:relative;padding-left:1.05rem;margin:0 0 .38rem;color:var(--slate);line-height:1.5}
.svc-list li:last-child{margin-bottom:0}
.svc-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.prose .svc-list{max-width:var(--reading,62ch);margin-top:.9rem}
.prose .svc-list li{font-size:1rem;margin-bottom:.45rem}

/* ── from their own page structure, via the database ─────────────────────
   Their service and condition pages carry headings and lists that the crawl
   capture flattened away. These are the four classes that arrived with them. */

/* An ORDERED list keeps its numbers. .svc-list sets list-style:none, which is
   right for a bullet list and wrong for their MAP page, where the seven
   milestone assessments are numbered and the order is the content. */
ol.svc-list{list-style:decimal;padding-left:1.4rem;counter-reset:none}
ol.svc-list li{padding-left:.35rem}
ol.svc-list li::before{content:none}
ol.svc-list li::marker{color:var(--amber);font-weight:600}

/* A nested list -- their dietitian page puts presentation topics inside one
   bullet of the consultancy list. */
.svc-sub{list-style:none;margin:.4rem 0 .1rem;padding:0}
.svc-sub li{position:relative;padding-left:.95rem;margin:0 0 .25rem;
  font-size:.93rem;color:var(--slate)}
.svc-sub li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:1px;background:var(--line-strong,var(--line))}

/* Their own section headings inside a service page body. */
.svc-h{font-size:clamp(1.15rem,1.9vw,1.42rem);margin:2.1rem 0 .2rem;line-height:1.25}
.prose .svc-h:first-child{margin-top:0}

/* The label on a group of injuries -- "Broken Bones and Injuries" against
   "Conditions". A patient who has just fallen off a bike is looking for the
   first of those, and one undifferentiated list throws that distinction away. */
.clist-h{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);margin:1.5rem 0 .15rem;font-weight:600}
.clist-h:first-child{margin-top:0}

/* A practitioner the practice’s own bio says has retired. Marked wherever the
   card appears, because they stay in the full directory and an unmarked card
   there says "available" just as loudly as a roster does. */
.role--retired{margin-top:.3rem;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--slate);font-weight:600}

/* ── finding a clinic ───────────────────────────────────────────────────
   Eighteen locations were a wall of identical boxes with truncated prose and
   nothing to click. These are compact, searchable, and every one goes to that
   clinic’s own page. Body text is set here rather than inherited: it was
   measuring 13.8-14.7px, which is too small for something a patient reads
   before driving somewhere. */
.mainsite{border:1px solid var(--line);border-left:3px solid var(--amber);
  padding:1.4rem 1.5rem;margin:1.6rem 0 2rem;background:var(--paper2,#fff)}
.mainsite h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:.2rem 0 .4rem}
.mainsite h3 a{text-decoration:none}
.mainsite .loc-act{margin-top:1rem}

.locfind-top{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;
  margin:0 0 1.1rem}
.locsearch{flex:1 1 15rem;max-width:22rem}
.locsearch input{width:100%;padding:.7rem .9rem;font:inherit;font-size:1rem;
  border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink)}
.locsearch input:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.locbar{display:flex;flex-wrap:wrap;gap:.5rem}
.locfilt{font:inherit;font-size:.88rem;padding:.5rem .85rem;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:2px;
  color:var(--slate)}
.locfilt span{opacity:.65;margin-left:.3rem}
.locfilt.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.locfilt:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.locount{margin:.2rem 0 1rem;font-size:.9rem;color:var(--slate)}

.locfind{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.loccard{border:1px solid var(--line);padding:1.15rem 1.25rem;background:#fff}
.loccard h3{font-size:1.06rem;margin:0 0 .3rem;line-height:1.3}
.loccard h3 a{text-decoration:none}
.loccard h3 a:hover{text-decoration:underline}
.loc-kind{margin:0 0 .5rem;font-size:.76rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate);font-weight:600}
.loccard .loc-addr{margin:0 0 .5rem;font-size:.95rem;line-height:1.5;color:var(--ink)}
.loc-meta{margin:0;font-size:.88rem;color:var(--slate)}
.loc-act{margin:.85rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.92rem}
.loc-act a{font-weight:600}
.loccard[hidden]{display:none}

/* ── one clinic’s own page ──────────────────────────────────────────────── */
.locfacts{margin:0;display:grid;gap:1rem}
.locfacts div{border-top:1px solid var(--line);padding-top:.8rem}
.locfacts dt{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);font-weight:600;margin-bottom:.25rem}
.locfacts dd{margin:0;font-size:1rem;line-height:1.55}
.loc-dirs{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
.loc-people{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.loc-people li{border-left:2px solid var(--line);padding-left:.8rem}
.loc-people a{font-weight:600;text-decoration:none}
.loc-people a:hover{text-decoration:underline}
.loc-role{display:block;font-size:.85rem;color:var(--slate)}
.loc-more{margin:1rem 0 0;font-size:.9rem;color:var(--slate)}

/* ── the systems our surgeons operate with ──────────────────────────────
   Six technologies whose descriptions were sitting unread in a title field.
   Three of them carry a first-in-the-state or first-in-the-country claim, so
   the card gives each one room rather than a bullet. */
.techlist{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.techcard{border-top:3px solid var(--amber);padding:1.1rem 0 0}
.techcard h3{font-size:1.1rem;margin:0 0 .5rem;line-height:1.3}
.techcard p{margin:0;font-size:.97rem;line-height:1.6;color:var(--slate);max-width:none}
.tech-more{margin:.8rem 0 0!important;font-size:.92rem;font-weight:600}

/* ── patient information: facts first, then a journey ────────────────────
   The page was 1,271 words, one picture and six stacked prose bands, with the
   only two sentences that change what a patient DOES buried mid-paragraph. */
.keyfacts{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.keyfacts li{display:flex;flex-direction:column;gap:.3rem}
.keyfacts strong{font-family:var(--display,var(--font));font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.1;letter-spacing:-.01em}
.keyfacts span{font-size:.97rem;line-height:1.55;color:var(--slate)}
.keyfacts a{font-weight:600;white-space:nowrap}

.pifig{margin:0}
.pifig img{width:100%;height:100%;max-height:26rem;object-fit:cover;display:block}
.pifig figcaption{margin-top:.6rem;font-size:.85rem;color:var(--slate)}

/* Four numbered steps instead of a fifth, sixth, seventh and eighth heading. */
.pisteps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.pistep{display:flex;gap:1rem;align-items:flex-start}
.pistep-n{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--amber);color:var(--ink);display:grid;place-items:center;
  font-weight:800;font-size:1rem;font-family:var(--display,var(--font))}
.pistep h3{font-size:1.08rem;margin:.2rem 0 .5rem;line-height:1.3}
.pistep p{margin:0 0 .6rem;font-size:.96rem;line-height:1.6;color:var(--slate);max-width:none}
.pistep p:last-child{margin-bottom:0}
.pistep .svc-list{margin-top:.5rem}

/* ── conditions, by body area ────────────────────────────────────────────
   The page showed the figure and nothing else on a desktop: 227 words, no
   pictures. Each card carries their own photograph where one genuinely shows
   that area, and their own counts, which is what the drawing cannot hold. */
.ccards{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.ccard{background:#fff;border:1px solid var(--line)}
.ccard a{display:block;text-decoration:none;color:inherit;height:100%}
.ccard img{width:100%;height:10.5rem;object-fit:cover;display:block}
.ccard-b{padding:1rem 1.1rem 1.2rem}
.ccard h3{font-size:1.12rem;margin:0 0 .35rem}
.ccard p{margin:0 0 .7rem;font-size:.9rem;color:var(--slate);line-height:1.5}
.ccard .go{font-size:.9rem;font-weight:600;color:var(--ink)}
.ccard a:hover .go{color:var(--amber)}
.ccard a:hover h3{text-decoration:underline}
/* No photograph is a deliberate state, not a broken one: the two areas whose
   images show something else get a typographic card with a brand rule. */
/* No photograph is a deliberate state. The plate fills exactly the space the
   image would have, so a row of cards keeps one shape instead of going ragged
   with a gap that reads as a picture that failed to load. */
.ccard-plate{height:10.5rem;display:grid;place-items:center;background:var(--ink);
  border-bottom:4px solid var(--amber)}
.ccard-plate span{font-family:var(--display,var(--font));font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.75rem);color:#fff;letter-spacing:-.01em;
  text-align:center;padding:0 1rem;line-height:1.15}
.ccard a{display:flex;flex-direction:column}
.ccard-b{display:flex;flex-direction:column;flex:1 1 auto}
.ccard .go{margin-top:auto}
/* The plate already carries the area name at size, so the heading below it is
   a visual repeat. It stays in the markup -- a card whose only name is inside
   an aria-hidden plate has no accessible name at all -- and is hidden from
   sight on those two cards only. */
.ccard--noimg .ccard-b h3{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Their careers paragraphs are four different things -- the workplace, the
   surgeons, where the vacancies are listed, student placements -- and as one
   column they read as another wall on a page that has several. */
.carelist{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.carelist li{border-top:3px solid var(--amber);padding-top:1rem}
.carelist p{margin:0;font-size:.97rem;line-height:1.6;color:var(--slate);max-width:none}

/* Their extended evening orthopaedic consultations, in the hours band. Ink on
   the brand amber measures 10.2:1; white on it is 1.76:1, which is why every
   word in this band is ink. */
.hours-later{max-width:60ch;margin:1.1rem 0 0;font-size:.95rem;line-height:1.55;
  padding-left:.9rem;border-left:2px solid rgba(0,0,0,.28)}
/* Their hydrotherapy timetable. A table that a phone has to scroll is fine;
   a table that pushes the whole PAGE sideways is not -- so it scrolls
   inside its own box, which is the rule the gym price table already uses. */
.svc-tablewrap{overflow-x:auto;margin-top:.9rem;-webkit-overflow-scrolling:touch}
.svc-table{border-collapse:collapse;width:100%;min-width:340px;font-size:.9rem}
.svc-table th{text-align:left;font-weight:800;color:var(--ink);border-bottom:2px solid var(--amber);padding:.5rem .7rem .45rem 0;white-space:nowrap}
.svc-table td{padding:.45rem .7rem .45rem 0;border-bottom:1px solid var(--line);color:var(--slate);vertical-align:top}
.svc-table tr:last-child td{border-bottom:0}
.svc-table td:first-child,.svc-table th:first-child{font-weight:700;color:var(--ink)}
.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.6rem;margin-top:1.4rem}
.newscard{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden}
.newscard .body{padding:1.5rem 1.6rem}
.newscard h3{font-size:1.18rem;line-height:1.3;margin:0 0 .6rem}
.newscard h3 a{color:var(--ink);text-decoration:none}
.newscard h3 a:hover{color:var(--amber-deep);text-decoration:underline}
.newscard p{margin:0;color:var(--slate);font-size:.95rem;line-height:1.55}
.newsdate{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 .5rem!important}
.newscard .more{display:inline-block;margin-top:1rem;font-weight:700;font-size:.92rem;color:var(--amber-deep);text-decoration:none}
.newscard .more:hover{text-decoration:underline}
@media(max-width:560px){.newscard .body{padding:1.2rem 1.25rem}.newscard h3{font-size:1.08rem}}
/* Technology: their section heading holds the left column and the prose the
   right, so the band is used rather than half-empty, and the measure stays. */
.techsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:2.2rem 3.4rem;align-items:start}
.techsec h2{margin:0;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.02em}
.techsec .prose{max-width:var(--reading,62ch)}
.techsec .prose p{margin:0 0 .9rem}
.techsec .prose p:last-child{margin-bottom:0}
@media(max-width:860px){.techsec{grid-template-columns:1fr;gap:1rem}}
.techfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.8rem;margin:0}
.techfigs figure{margin:0}
.techfigs img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--line);background:#fff}
.techfigs figcaption{margin-top:.7rem;font-size:.88rem;color:var(--slate);line-height:1.45}
/* The condition photograph. Wide and shallow so it reads as a band of the
   page rather than a portrait dropped into it, and capped in height so a
   square source cannot push the lists below the fold on a phone. */
.condfig{margin:0}
.condfig img{width:100%;height:auto;max-height:min(58vh,520px);object-fit:cover;object-position:50% 38%;display:block;border-radius:4px}
@media(max-width:560px){.condfig img{max-height:44vh}}
/* Partners. Their logos are all different shapes -- a portrait shield, a
   square, a wide wordmark -- so each sits in a fixed box and is contained
   rather than cropped: cropping another organisation’s mark is altering it. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.6rem;margin-top:1.6rem;align-items:start}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pcardx{border:1px solid var(--line);border-radius:4px;background:#fff;padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.plogo{height:84px;display:flex;align-items:center}
.plogo img{max-height:84px;max-width:170px;width:auto;height:auto;object-fit:contain}
.pcardx h3{font-size:1.04rem;margin:0 0 .5rem;line-height:1.3}
.pcardx .body p{margin:0;font-size:.92rem;color:var(--slate);line-height:1.55}
/* The affiliate marks are 50px tall at source and are never drawn larger. */
.afflogos{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem;list-style:none;margin:1.6rem 0 0;padding:0}
.afflogos img{height:50px;width:auto;max-width:100%;display:block}
@media(max-width:560px){.afflogos{gap:1.1rem 1.6rem}.plogo{height:66px}.plogo img{max-height:66px;max-width:140px}}
/* A practitioner’s own page: their photograph beside who they are, then
   their own headed blocks. The blocks are uneven -- one person has six,
   another two -- so they size to content rather than to each other. */
.prohead{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:2.4rem;align-items:center}
.prohead img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;display:block}
.prohead .initials{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:var(--amber);background:#14171a;border-radius:4px}
.prohead h1{margin:0 0 .4rem;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05}
/* THE PROFILE HEADER SITS ON PAPER, NOT ON INK. These were written as though
   it were a dark band -- true amber and a pale grey lead -- and their amber is
   1.76:1 on white, which is the ratio this site’s whole colour rule exists
   for. 306 failures across 89 pages, one per practitioner, all from two
   declarations. Amber on a light ground is always the darkened one. */
.prohead .role{color:var(--amber-deep);font-weight:700;margin:0 0 1rem;font-size:1.05rem}
.prohead .lead{color:var(--slate);max-width:58ch}
/* The profile body. It was auto-fit minmax(320px), which on the wide shell gave
   a 300-word biography a third of the row -- about 32 characters a line. A rail
   fixed the measure and bought a 450px hole beside it, which is this repo’s own
   half-empty-column defect. So: prose at a measure in the narrow shell, then
   the credentials across the full width of the next band. */
.profmain .profblock + .profblock{margin-top:1.8rem}
.profmain p{max-width:var(--reading)}
.profcreds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1.8rem 2.8rem;align-items:start}
.profcreds .profblock h2{font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid var(--line);border-top:3px solid var(--amber);
  padding:.7rem 0 .5rem;margin:0 0 .7rem}
.profcreds .svc-list{margin-top:0}
/* A thin profile keeps every word and simply renders fewer bands. There is no
   scaffolding left to shed, which is why there is no thin branch. */
.profthin{max-width:var(--reading)}
.profblock h2{font-size:1.05rem;margin:0 0 .6rem;padding-bottom:.5rem;border-bottom:2px solid var(--amber)}
.profblock p{margin:0;color:var(--slate);line-height:1.6;max-width:var(--reading,62ch)}
.profblock .svc-list{margin-top:.2rem}

/* A THIN PROFILE DOES NOT WEAR AN ARTICLE’S CLOTHES. Eighteen of the 89 carry
   under 80 words; a two-column article grid around one sentence is exactly what
   makes a template read as a template. Same blocks, one measured column. */
.profthin{max-width:var(--reading,62ch)}
.profthin .profblock + .profblock{margin-top:1.4rem}

/* What they treat -- their body areas, linked to the condition pages. */
.prolinks{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.prolinks a{display:inline-block;border:1px solid var(--line);background:#fff;
  padding:.55rem 1.05rem;text-decoration:none;font-weight:700;color:var(--ink);
  border-radius:999px;line-height:1.2}
.prolinks a:hover{border-color:var(--amber-deep);color:var(--amber-deep)}

/* Where they consult. The clinic photograph here is the honest second picture
   on the page -- the alternative was decorative filler, which is the
   picture-that-could-sit-anywhere defect this programme has already paid for. */
.proclinics{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.4rem}
.proclinic{border:1px solid var(--line);background:#fff;display:flex;
  flex-direction:column}
.proclinic img{width:100%;height:160px;object-fit:cover;display:block}
.proclinic > div{padding:1.05rem 1.2rem}
.proclinic h3{margin:0 0 .35rem;font-size:1.04rem;line-height:1.3}
.proclinic h3 a{color:inherit;text-decoration:none}
.proclinic h3 a:hover{color:var(--amber-deep);text-decoration:underline}
.proclinic p{margin:0 0 .4rem;font-size:.95rem;line-height:1.5;color:var(--slate)}
.proclinic .loc-kind{margin:0}
.loc-more{margin:1.3rem 0 0;color:var(--slate);max-width:var(--reading,62ch)}
.pcard h3 a{color:inherit;text-decoration:none}
.pcard h3 a:hover{color:var(--amber-deep);text-decoration:underline}
@media(max-width:760px){.prohead{grid-template-columns:1fr;gap:1.4rem}.prohead img,.prohead .initials{max-width:220px}}
/* The explainers a condition page offers. The word count is on purpose --
   these run 400 to 1,700 words and a reader deciding whether to start one
   is entitled to know that before they click. */
.explist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1rem;list-style:none;margin:1.6rem 0 0;padding:0}
.explist a{display:block;height:100%;padding:1.2rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:4px;text-decoration:none;border-left:3px solid var(--amber)}
.explist a:hover{border-left-color:var(--amber-deep);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.explist h3{margin:0 0 .4rem;font-size:1.02rem;line-height:1.35;color:var(--ink)}
.explist span{font-size:.82rem;color:var(--slate)}
/* A 1,700-word clinical piece needs a reading measure and room between
   its own headings, or it reads as a wall. */
/* THE COLUMN IS WIDER THAN THE MEASURE, AND THE MEASURE STAYS ON THE PROSE.
   Capping the whole article at 66ch capped the FIGURES at 66ch too, so their
   two-panel Figure 1 -- 302px + 302px -- could not fit side by side in a 594px
   box and stacked, and the column sat hard left with 660px of empty page beside
   it. Paragraphs keep the measure; the column is centred and gives a diagram
   room. */
.explainer{max-width:760px;margin-inline:auto}
.explainer p,.explainer li{max-width:var(--reading)}
.explainer h2{font-size:1.25rem;margin:2rem 0 .7rem;line-height:1.3}
.explainer h2:first-child{margin-top:0}
.explainer p{margin:0 0 1rem;line-height:1.7}
.explainer .svc-list{margin:0 0 1.2rem}

/* ── the clinical explainers ──────────────────────────────────────────────
   Their own diagrams, recovered from their database. A figure is centred and
   capped well under the measure: these are 227-449px originals and the build
   never scales an image up, so a full-width box would draw a postage stamp in
   a beige field -- the defect a phone screenshot already caught once on the
   practitioner cards. */
.expl-fig{margin:1.9rem 0;text-align:center}
.expl-fig img{max-width:100%;height:auto;display:inline-block;border:1px solid var(--line);
  background:#fff}
.expl-fig--pair{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;align-items:flex-end}
.expl-fig--pair img{flex:0 1 auto;max-width:min(100%,340px)}
.expl-fig figcaption{margin-top:.7rem;font-size:.9rem;color:var(--slate);
  max-width:var(--reading);margin-inline:auto;line-height:1.5}
/* A CITATION NUMBER IS NOT PART OF THE SENTENCE. Their <sup>6</sup> was being
   flattened into "...triple hop and agility. 6". */
.explainer sup{font-size:.7em;line-height:0;vertical-align:super;color:var(--amber-deep);
  font-weight:700;padding-left:.1em}
.explainer h2{margin:2.2rem 0 .7rem}
.explainer h2:first-child{margin-top:0}
.explainer ol.svc-list{font-size:.94rem;line-height:1.55}
.explainer ol.svc-list li{margin-bottom:.55rem}

/* The surgeon who wrote it, rather than a grey paragraph at the foot. */
.authorcard{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:1.8rem 2.2rem;align-items:start}
.authorcard img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  display:block}
.authorcard h2{margin:.2rem 0 .3rem;font-size:1.3rem}
.authorcard h2 a{color:inherit;text-decoration:none}
.authorcard h2 a:hover{color:var(--amber-deep);text-decoration:underline}
.authorcard .role{color:var(--amber-deep);font-weight:700;margin:0 0 .8rem;font-size:.98rem}
.authorcard p{max-width:var(--reading)}
/* A GRID ITEM WILL NOT SHRINK BELOW ITS OWN MIN-CONTENT, so one long URL
   in their citations made a 390px phone scroll sideways. */
.authorcard > *{min-width:0}
.authorcard p,.authorcard li,.explainer li{overflow-wrap:anywhere}
@media(max-width:700px){.authorcard{grid-template-columns:1fr}
  .authorcard img{max-width:180px}}

/* The body area a clinical article is about, in their own photograph. Capped
   in height because these are wide clinical frames and a 1,100px-tall opener
   pushes the first sentence off the screen. */
.expl-lead{margin:0}
.expl-lead img{width:100%;height:clamp(220px,26vw,380px);object-fit:cover;display:block;
  border-radius:4px}

/* The other articles on this joint. A diagram is a document scan, not a hero
   crop, so it is CONTAINED on white rather than covering its box -- an X-ray
   cropped to fill a card loses the joint the card is about. */
.explcards{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.6rem}
.explcard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.explcard img{width:100%;height:170px;object-fit:contain;background:#fff;display:block;
  border-bottom:1px solid var(--line);padding:.5rem}
.explcard .ccard-plate{height:170px;border-bottom:1px solid var(--line)}
.explcard > div{padding:1rem 1.15rem 1.2rem}
.explcard h3{margin:0 0 .4rem;font-size:1.04rem;line-height:1.3}
.explcard h3 a{color:inherit;text-decoration:none}
.explcard h3 a:hover{color:var(--amber-deep);text-decoration:underline}
.explcard p{margin:0 0 .6rem;font-size:.93rem;line-height:1.5;color:var(--slate)}
.explcard-w{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);font-weight:700}

/* ── the drop-down menus their site has and ours did not ──────────────────
   The top link still navigates; the caret opens the panel. Without scripting
   the panel stays hidden and the index page behind the top link lists the same
   pages, so nothing is unreachable. */
.navitem{display:inline-flex;align-items:center;gap:.15rem;position:relative}
/* THE CARET IS ON A DARK BAR. `color:inherit` took the page ink and drew
   rgb(20,23,26) on rgb(20,23,26) -- invisible on every closed panel, which is
   all of them until somebody clicks. Only the open state was ever legible,
   because that one sets amber. */
.mast .nav .navtog{background:none;border:0;color:#fff;cursor:pointer;
  padding:.4rem .25rem;display:inline-flex;align-items:center;line-height:0;opacity:.8}
.mast .nav .navtog:hover,.mast .nav .navtog:focus-visible,
.mast .nav .navtog[aria-expanded=true]{opacity:1;color:var(--amber)}
.navtog svg{transition:transform .15s ease}
.navtog[aria-expanded=true] svg{transform:rotate(180deg)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.navpanel{position:absolute;top:100%;left:-1rem;z-index:60;min-width:min(92vw,300px);
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--amber);
  box-shadow:0 18px 40px rgba(0,0,0,.16);padding:1.1rem 1.25rem 1.25rem}
.navpanel-in .eyebrow{margin:0 0 .7rem}
.navpanel ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
/* MASTHEAD SPECIFICITY, AND AN EXPLICIT COLOUR. `.mast .nav a{color:#fff}` is
   0,2,1 and `.navpanel li a` is 0,1,2, so every link in every panel inherited
   the white of the bar onto a white panel -- ratio 1.00, at every width, live.
   The panel is a light surface inside a dark bar: it does not get the bar’s
   colours, and it does not get them from a token either, because a token is
   what moved underneath this rule. */
.mast .nav .navpanel li a{display:block;padding:.42rem .45rem;text-decoration:none;
  color:#14171a;font-size:.93rem;font-weight:600;border-radius:3px;line-height:1.35;
  border-bottom:0}
.mast .nav .navpanel li a:hover,.mast .nav .navpanel li a:focus-visible{
  background:#f3f0ea;color:#946200;border-bottom-color:transparent}
.mast .nav .navpanel .eyebrow{color:#946200}
/* Nineteen services do not belong in one column. */
#nm-our-services{min-width:min(94vw,560px)}
#nm-our-services ul{grid-template-columns:1fr 1fr}
@media(max-width:900px){
  /* inside the burger menu the panel is part of the list, not a floating card */
  .navitem{width:100%;justify-content:space-between;flex-wrap:wrap}
  .navpanel{position:static;min-width:0;width:100%;box-shadow:none;border:0;
    border-top:1px solid var(--line);padding:.4rem 0 .8rem}
  #nm-our-services{min-width:0}
  #nm-our-services ul{grid-template-columns:1fr}
  .navpanel li a{padding:.5rem .2rem}
}

/* Their Quick Links, as a jump list -- the four places their own menu points
   into this page. */
.pijump{margin:0;display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;align-items:baseline;
  font-size:.94rem}
.pijump span{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--slate)}
.pijump a{font-weight:600}

/* The clinic hours beside a photograph of the desk you ring. A table on its own
   across a wide shell is a table with half a band of nothing next to it. */
.hrsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:2rem 3rem;align-items:start}
.hrsplit .pifig{margin:0}
.hrsplit .pifig img{width:100%;height:auto;border-radius:4px;display:block}
@media(max-width:820px){.hrsplit{grid-template-columns:1fr}}

/* Their opening hours, inside the clinic fact list. Four clinics publish them
   day by day and Blackwood is seven rows, so it needs to be a table rather than
   a paragraph -- the day and the time line up or a reader has to count. */
.lochrs{margin:.2rem 0 0;display:grid;gap:.25rem}
.lochrs > div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:.4rem 1rem;align-items:baseline}
.lochrs dt{font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:0;
  text-transform:none}
.lochrs dd{margin:0;font-size:.95rem;font-variant-numeric:tabular-nums}
@media(max-width:460px){.lochrs > div{grid-template-columns:1fr}
  .lochrs dd{margin-bottom:.3rem}}

/* ── site search ──────────────────────────────────────────────────────────
   In the masthead, which is the contrast sweep’s blind spot -- so every colour
   here is explicit and measured rather than inherited. The drop-down panels
   shipped white on white from exactly this bar. */
.sbtn{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px solid
  rgba(255,255,255,.28);color:#fff;font:inherit;font-size:.88rem;font-weight:700;
  cursor:pointer;padding:.42rem .85rem;border-radius:999px;line-height:1.2}
.sbtn:hover,.sbtn[aria-expanded=true]{border-color:var(--amber);color:var(--amber)}
.spanel{position:absolute;left:0;right:0;top:100%;z-index:70;background:#fff;
  border-top:3px solid var(--amber);border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.16);padding:1.2rem 0 1.4rem}
.spanel input{width:100%;font:inherit;font-size:1.05rem;padding:.8rem 1rem;
  border:1px solid var(--line);border-radius:3px;color:#14171a;background:#fff}
.spanel input:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.scount{margin:.7rem 0 0;font-size:.86rem;color:#4a5560;font-weight:600}
.sres{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.1rem;
  max-height:min(58vh,420px);overflow-y:auto}
.sres a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.6rem .6rem;text-decoration:none;border-radius:3px}
.sres a:hover,.sres a:focus-visible{background:#f3f0ea}
.sres-t{color:#14171a;font-weight:700;font-size:.98rem}
.sres-k{color:#5a6570;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;white-space:nowrap}
@media(max-width:900px){
  .sbtn-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sbtn{padding:.42rem .6rem}
}