/* THE TWO FACES ARE SHIPPED, NOT JUST NAMED.
   --font and --display named Nunito and Source Serif 4 and the build carried
   NO @font-face and no webfont link, so `document.fonts` held nothing and the
   stack fell straight through. Measured rather than assumed: the string
   "Partridge Handgloves 123" set in `Nunito, monospace` came out exactly as
   wide as `monospace` -- Nunito contributed nothing, because it is not a font
   any Windows or Mac ships. Every visitor without it installed was reading
   Segoe UI over Palatino Linotype.
   That matters twice over. Nunito is THEIRS, kept deliberately when the
   display face was substituted, and a brand typeface nobody sees is not kept.
   And a style guide naming it would have been a document about a website that
   does not exist.
   SELF-HOSTED, never fetched from Google: these pages promise a patient that
   nothing is loaded from a third party, and a font request carries the
   visitor's IP to whoever serves it. Latin subsets, variable weight, ~161KB
   for both, font-display:swap so text paints immediately in the fallback. */
@font-face{font-family:"Nunito";src:url("fonts/nunito-latin.woff2") format("woff2");
           font-weight:400 800;font-style:normal;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+2074,U+20AC,
                         U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin.woff2") format("woff2");
           font-weight:400 700;font-style:normal;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+2074,U+20AC,
                         U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* PartridgeGP — the rebuild.
   THEIR ORANGE IS A FILL, NOT A TEXT COLOUR. #f37021 came off their own home
   page and it is theirs; it measures 2.94:1 on white, which is fine behind
   dark text and unreadable as small text. So the brand has two tokens and the
   names say which is which: --brand fills, --brand-ink reads (6.34:1). Every
   comment apostrophe here is typographic — Tailwind’s parser tokenises strings
   before it strips comments, so one ASCII apostrophe in a comment opens a
   string that never closes and the whole stylesheet fails to build. */
/* THE PALETTE CAME OUT OF THEIR OWN LOGO, WHICH THE SITE HAD BEEN IGNORING.
   Their mark is a two-colour brushstroke ring: an orange-to-amber arc, a blue
   arc, and twenty-five orange flecks. The site used the orange and made
   everything else grey -- white, one grey, one near-black -- which measured as
   two background colours and one typeface across nine pages, and read, in the
   client's words, like "a generic AI website that someone has created in an
   hour". The blues and the sand below are sampled from that file. Nothing here
   is invented and nothing of theirs is replaced. */
:root{
  --brand:#f37021;            /* theirs — fills, rules, the hero wash */
  --brand-ink:#a83c06;        /* theirs, darkened until it is readable */
  --brand-wash:#fdf2e8;
  --deep:#2765AA;             /* the blue arc of their own mark */
  --deep-2:#1A3F73;           /* it, darkened, for grounds behind white text */
  --sky:#4FADDE;              /* the light end of the same arc */
  --sand:#DCC4AF;             /* the warm neutral their mark sits on */
  --ink:#1A2433;
  --ink-2:#4A5563;
  --paper:#F6EFE6;            /* warm ground, not white */
  --paper-2:#EDE3D4;
  --surface:#FFFDF9;          /* what a card sits on, just off the ground */
  --line:#D9CCBB;
  --ok:#1f6b3f;
  --ok-bg:#e8f3ec;
  --shut:#4f585f;              /* was #6c757d: 4.18:1 on its own chip, under the floor */
  --shut-bg:#ece4d9;
  --shell:1180px;
  --reading:66ch;
  /* TWO FACES, NOT ONE. Every heading and every paragraph on all nine pages
     was Nunito at 800 -- no pairing, no contrast, and the h1 was 50px on every
     single page. A display serif over their sans is the cheapest change with
     the largest effect, and it costs no download: both are named stacks that
     fall back to faces the machine already has. None of the banned faces
     appear -- Fraunces, Playfair Display, Inter, Space Grotesk, DM Serif
     Display and Poppins are what every machine-made page reaches for. */
  --font:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Source Serif 4","Palatino Linotype",Palatino,"Iowan Old Style",Georgia,serif;
  --sh:0 1px 2px rgba(26,36,51,.05),0 10px 30px -18px rgba(26,36,51,.26);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink)}
/* The display face carries the headings; weight 600 rather than 800, because
   a serif at 800 is a different and much heavier voice. h3 stays in the sans:
   it labels a card, it is not a heading anybody reads as one. */
h1,h2{font-family:var(--display);font-weight:600;line-height:1.08;
      letter-spacing:-.02em;text-wrap:balance}
h3{line-height:1.18;letter-spacing:-.01em;font-weight:800}
h1{font-size:clamp(2.3rem,1.4rem + 3vw,3.6rem)}
h2{font-size:clamp(1.55rem,1.15rem + 1.3vw,2.35rem)}
h3{font-size:1.1rem}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:22px}

.band .prose{max-width:var(--reading)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;
            padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px}

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:40;background:var(--surface);
      border-bottom:1px solid var(--line)}
.mastrow{display:flex;align-items:center;gap:26px;padding-block:14px}
.brand img{width:210px;height:auto}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;
       padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--brand)}
.nav a[aria-current]{border-bottom-color:var(--brand);color:var(--brand-ink)}
.mastdo{display:flex;gap:10px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
        border-radius:9px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:4px}

.btn{display:inline-block;background:var(--brand);color:#20262b;font-weight:800;
     text-decoration:none;padding:.66rem 1.15rem;border-radius:9px;font-size:.95rem;
     border:2px solid var(--brand);white-space:nowrap}
.btn:hover{background:#e0620f;border-color:#e0620f}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand);background:var(--brand-wash)}
.btn.big{padding:.85rem 1.5rem;font-size:1.03rem}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--brand-wash),var(--paper));
      border-bottom:1px solid var(--line)}
.heroin{padding-block:clamp(44px,7vw,86px);max-width:680px}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;
         font-weight:800;color:var(--brand-ink);margin-bottom:.7rem}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.28rem);color:var(--ink-2);
      margin-top:1rem;max-width:var(--reading)}
.herodo{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.7rem}

/* ── bands ────────────────────────────────────────────────────────────── */
.band{padding-block:clamp(38px,5vw,66px)}
.band:nth-of-type(even){background:var(--paper-2)}
.sub{color:var(--ink-2);margin-top:.4rem;max-width:var(--reading)}
/* THE PAGE HEADER CARRIES THEIR OWN MARK, LARGE AND NEARLY INVISIBLE.
   Both outside reviewers drew their own version of the PartridgeGP ring and
   used it at scale as a page motif, and it was the single thing on their
   mock-ups that read as belonging to this practice rather than to a template.
   Theirs were approximations -- plain concentric arcs. They did not need to
   be: the real mark is genuine vector artwork inside their own logo.svg, two
   brushstroke arcs and twenty-five flecks, and site-src/mark.svg is that
   artwork with the wordmark removed and nothing else changed. No trace, no
   redraw, no recomputed coordinate.
   It sits at 9% behind the heading, bleeding off the right edge -- at full
   strength it competes with the words, and a logo repeated loudly on every
   page is letterhead rather than design. */
.phead{background:var(--paper-2);border-bottom:1px solid var(--line);
       padding-block:clamp(32px,4.5vw,58px);
       position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;top:50%;right:-5%;
  width:min(430px,46vw);aspect-ratio:1;transform:translateY(-50%);
  /* Relative to THE STYLESHEET, which is served from /assets/ -- not to the
     page. "assets/brand/mark.svg" would resolve to /assets/assets/... and
     fail silently, leaving a header that looks merely plain. */
  background:url("brand/mark.svg") no-repeat center/contain;
  opacity:.09;pointer-events:none}
.phead > .shell{position:relative;z-index:1}
@media (max-width:760px){ .phead::after{right:-18%;opacity:.07} }
.prose{max-width:var(--reading)}
.prose h2{margin:2rem 0 .6rem}
.prose p{margin-bottom:.9rem}
.prose ul{margin:0 0 1.1rem 1.1rem}
.prose li{margin-bottom:.35rem}
.more{font-weight:800;text-decoration:none}
.more:hover{text-decoration:underline}

.facts{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:14px;
      padding:24px;box-shadow:var(--sh)}
.fact h2{font-size:1.15rem}
.fact p{color:var(--ink-2);margin-top:.6rem;font-size:.96rem}

.hrs{margin-top:.7rem;font-size:.95rem}
.hrs div{display:flex;justify-content:space-between;gap:14px;padding:.34rem 0;
         border-bottom:1px dashed var(--line)}
.hrs div:last-child{border-bottom:0}
.hrs dt{color:var(--ink-2)}
/* A time never breaks in the middle ("8:30am –" over "5:00pm" in the footer). Where a
   day and its time do not fit one line -- the rail card is 190px wide at 768 -- the
   time drops beneath the day, whole and right-aligned, instead of spilling the card. */
.hrs div{flex-wrap:wrap}
.hrs dd{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;margin-left:auto}

/* ── people ───────────────────────────────────────────────────────────── */
.people{display:grid;gap:20px;margin-top:1.6rem;
        grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.person{background:var(--paper);border:1px solid var(--line);border-radius:14px;
        overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}
.person>img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--paper-2)}
.pbody{padding:18px 20px 22px}
.pbody h3{margin-bottom:.2rem}
.quals{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
       color:var(--ink-2);font-weight:800}
.pbody p+p{margin-top:.55rem}
.pbody p:not(.quals):not(.chip){font-size:.94rem;color:var(--ink-2)}

/* ── the cards are the same size until you open one ───────────────────────
   Restoring the full biographies made this grid ragged: the home page's four
   cards measure 559px each, and these ran 450 to 1035, because a grid row is
   as tall as its tallest card and one doctor's profile is four times another's.
   The first paragraph is clamped to three lines, which is what makes a closed
   card a predictable height; the rest is behind the disclosure.
   :has() is what unclamps the lead paragraph when the drawer opens -- the
   clamp is on a PREVIOUS sibling of the <details>, which no other selector can
   reach. */
.person .pbio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
              overflow:hidden}
.person:has(.pmore[open]) .pbio{-webkit-line-clamp:unset;overflow:visible}
/* The control sits on the BOTTOM of the card, not under the paragraph. A grid
   row makes every card the same height, but it cannot align what is inside
   them: Dr Seow's qualifications run to two lines and Dr Omond's new-patients
   note to three, so "Read profile" landed at three different heights across one
   row of equal-height cards. That reads as raggedness even though the boxes
   match, which is the thing being fixed here. */
.person .pbody{display:flex;flex-direction:column;flex:1 1 auto}
.pmore{margin-top:auto;padding-top:.6rem}
.pmore>summary{list-style:none;cursor:pointer;display:inline-block;
               font-size:.88rem;font-weight:800;color:var(--brand-ink)}
.pmore>summary::-webkit-details-marker{display:none}
.pmore>summary:hover{text-decoration:underline}
.pmore>summary .mc,.pmore[open]>summary .mo{display:none}
.pmore[open]>summary .mc{display:inline}
.pmore>p{margin-top:.55rem}
/* A card that opens is a card you can act on, so it has to look like one --
   the same hover and focus treatment the home page cards carry. */
.person:has(.pmore) {transition:border-color .15s}
.person:has(.pmore:hover),.person:has(.pmore>summary:focus-visible){border-color:var(--brand)}
.chip{display:inline-block;font-size:.78rem;font-weight:800;padding:.25rem .6rem;
      border-radius:999px;margin:.55rem 0 .2rem}
.chip.yes{background:var(--ok-bg);color:var(--ok)}
.chip.no{background:var(--shut-bg);color:var(--shut)}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--deep-2);color:#DCE8F3;margin-top:auto;padding-top:46px}
.foot h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
         color:#fff;margin-bottom:.7rem}
.foot a{color:#FFD9BC}
.foot .btn{color:#20262b}
.footgrid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
          padding-bottom:34px}
.footlogo{width:180px;background:#fff;padding:10px 12px;border-radius:10px}
.mission{margin-top:.9rem;font-size:.93rem;color:#A9C2DA;max-width:34ch}
.foot p{font-size:.94rem;margin-bottom:.45rem}
.foot .hrs div{border-bottom-color:#2E5484}
.foot .hrs dt{color:#A9C2DA}
.foot .hrs dd{color:#fff}
.tel{font-weight:800;font-size:1.05rem}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
      border-top:1px solid #2E5484;padding-block:18px;font-size:.82rem;color:#93AFC9}

@media (max-width:900px){
  .burger{display:block}
  .nav{display:none;order:5;width:100%;flex-direction:column;gap:0;margin-left:0}
  .nav.open{display:flex}
  .nav a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .mastrow{flex-wrap:wrap}
  .mastdo{margin-left:auto}
  .brand img{width:172px}
}
@media (max-width:520px){
  .mastdo .ghost{display:none}    /* the phone number is in the footer and the hero */
  .fbot{flex-direction:column;gap:6px}
}

/* ── the hero photograph ──────────────────────────────────────────────────
   A LOCAL PHOTOGRAPH, NOT A STOCK CLINIC. It is Glenelg beach, three minutes
   from their door, chosen off a contact sheet rather than a filename — the
   other candidates were a promenade with nothing in it and a tram shot with a
   pole through the middle. The text sits in its own panel rather than over the
   picture: a wash dark enough to carry white type turns a beach into mud, and
   this practice's brand is warmth. Empty alt on purpose — it is decoration
   beside a heading that already says where they are. */
.hero.haspic{position:relative;overflow:hidden;background:var(--brand-wash)}
.herobg{position:absolute;inset:0;z-index:0}
.herobg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* THE WASH HAS TO COVER THE WHOLE TEXT COLUMN, NOT MOST OF IT.
   First version went opaque to 42% and faded to nothing by 100%, while the text
   ran to 73% of the viewport at 1440px — so the ends of the lede lines sat on
   open water at 1.03:1. Visible in a screenshot and confirmed by sampling the
   PIXELS under the text, which is the only way to measure this: the ground is a
   gradient over a photograph, and a CSS contrast walk cannot resolve that. It
   is the documented blind spot, and a hero over a picture is exactly where it
   bites.
   The column is narrowed and the wash holds until past the end of it. */
.hero.haspic::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 58%,
                             rgba(255,255,255,.90) 70%,rgba(255,255,255,.25) 88%,
                             rgba(255,255,255,0) 100%)}
.hero.haspic .heroin{position:relative;z-index:2}
@media (max-width:860px){
  .hero.haspic::after{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,
                              rgba(255,255,255,.93) 62%,rgba(255,255,255,.78) 100%)}
  .herobg img{object-position:center 62%}
}

.tablewrap{overflow-x:auto}
.credits{border-collapse:collapse;width:100%;font-size:.9rem;margin-top:1rem}
.credits th,.credits td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);
                        vertical-align:top}
.credits th{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}

/* ── services ─────────────────────────────────────────────────────────────
   Twelve cards rather than 1,300 words in a column. Their words, their order;
   what changes is that a reader looking for travel vaccinations does not have
   to read about compensable injuries to reach them. */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.jump a{font-size:.86rem;font-weight:700;text-decoration:none;color:var(--ink);
        background:var(--paper);border:1px solid var(--line);border-radius:999px;
        padding:.36rem .8rem}
.jump a:hover{border-color:var(--brand);background:var(--brand-wash);color:var(--brand-ink)}
.svcgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 26px;
     box-shadow:var(--sh);scroll-margin-top:96px}
.svc h3{font-size:1.18rem;margin-bottom:.5rem}
.svc h3::after{content:"";display:block;width:34px;height:3px;border-radius:2px;
               background:var(--brand);margin-top:.6rem}
.svc p{font-size:.95rem;color:var(--ink-2);margin-top:.7rem}
.svc .slead{font-weight:700;color:var(--ink)}
.ticks{list-style:none;margin:.9rem 0 0;display:grid;gap:.3rem}
.ticks li{font-size:.92rem;color:var(--ink-2);padding-left:1.3rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
                  border-radius:50%;background:var(--brand)}

/* ── data tables (the fee table) ──────────────────────────────────────────
   Their fee table is the most-read thing on a practice website and it lived in
   a third-party Divi module storing one COLUMN per shortcode. Below 560px it
   stacks into label/value rows: two money figures under each other are
   indistinguishable without their column heading, and the rebate is the number
   people came for. */
.data{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.96rem}
.data th,.data td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.data thead th{background:var(--brand-wash);font-size:.78rem;text-transform:uppercase;
               letter-spacing:.07em;color:var(--brand-ink)}
.data td{font-variant-numeric:tabular-nums}
.data tbody tr:nth-child(even){background:var(--paper-2)}
@media (max-width:560px){
  .data thead{position:absolute;left:-9999px}
  .data tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:12px}
  .data td{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line)}
  .data td:last-child{border-bottom:0}
  .data td::before{content:attr(data-label);font-weight:800;color:var(--ink-2)}
  .data td:first-child{background:var(--brand-wash);border-radius:9px 9px 0 0}
}

/* ── home: the faces of the doctors taking patients ───────────────────────
   The previous version said "8 of our 16 GPs are taking new patients" in a box.
   Eight photographs answers the same question and the next one with it — who
   you would actually be seeing. Their portraits are the best asset this practice
   has and none of them were on the home page. */
.bandhead{display:flex;gap:20px;align-items:end;justify-content:space-between;flex-wrap:wrap}
.bandhead .sub{margin-top:.5rem}
.taking{background:var(--brand-wash)}
.faces{display:grid;gap:16px;margin-top:1.7rem;
       grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.face{text-decoration:none;color:var(--ink);display:block;text-align:center}
.face img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;
          background:var(--paper);border:1px solid var(--line)}
.face span{display:block;margin-top:.55rem;font-size:.87rem;font-weight:700;line-height:1.3}
.face:hover img{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.face:hover span{color:var(--brand-ink)}

.band.alt{background:var(--paper-2)}
.jump.big a{font-size:.95rem;padding:.5rem 1rem}

/* A DARK BAND, so the page has more than one ground. Tokens are redefined on it
   rather than colours chased element by element — that way anything added to it
   later is legible without anyone remembering to check. */
.band.dark{background:var(--ink);color:#e4e9e8}
.band.dark h2{color:#fff}
.band.dark a:not(.btn){color:#ffd0ae}
.band.dark .hrs dt{color:#b9c3c1}
.band.dark .hrs dd{color:#fff}
.band.dark .hrs div{border-bottom-color:#39423f}
.band.dark .note{font-size:.9rem;color:#b9c3c1;margin-top:1rem}
.band.dark .addr{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.9rem}
.band.dark .btn.ghost{color:#fff;border-color:#4a5450}
.band.dark .btn.ghost:hover{background:#2c3431;border-color:var(--brand)}
.twoup{display:grid;gap:38px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ticks.light li{color:#c8d1cf}
.ticks.light li::before{background:var(--brand)}
.onm{margin-left:8px}
.person{scroll-margin-top:96px}


/* PartridgeGP — the richer layer, in the spirit of the Kingfisher demo the
   practice picked out of the seven.

   BORROWED: the shape. A thin utility bar; a split hero with a photograph and a
   floating status card; a row of four answer cards; a band of four large
   figures; services as cards with icon tiles; practitioner cards; a closing
   call to action over a photograph.

   NOT BORROWED: Kingfisher’s deep green, its terracotta, and Fraunces. This is
   PartridgeGP’s orange, PartridgeGP’s logo and PartridgeGP’s Nunito. Fraunces
   is on this programme’s banned list because it makes every site that uses it
   look like the same machine made it, which is the opposite of what a practice
   is paying for. A cream ground and generous rounding do most of the work that
   Kingfisher’s serif was doing.

   Every comment apostrophe here is typographic. A lone ASCII one opens a string
   in a CSS tokeniser that never closes. */

:root{
  --cream:#fdf8f4;             /* the warm ground the whole page sits on */
  --radius:18px;
  --radius-sm:12px;
}
body{background:var(--cream)}
.band{background:transparent}
.band.alt{background:var(--paper)}
.band:nth-of-type(even){background:transparent}
.eyebrow{display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);flex:none}

/* ── utility bar ──────────────────────────────────────────────────────── */
/* The blue from their own mark, rather than a near-black. It is the first
   band of colour on the page and it sets the palette before anything else
   loads. */
.util{background:var(--deep);color:#E7F3FA;font-size:.83rem;font-weight:600}
.utilrow{display:flex;align-items:center;gap:18px;padding-block:8px;flex-wrap:wrap}
/* #BBD9EF measured 4.05:1 on their blue -- under the 4.5 floor for 13px
   text, on every page of the site, introduced by the palette change
   itself. #D6E9F6 is 4.77:1. */
.uopen{color:#D6E9F6}
.uphone{margin-left:auto;color:#FFD9BC;font-weight:800;text-decoration:none}
.uphone:hover{text-decoration:underline}
@media (max-width:720px){ .uaddr,.uopen{display:none} .uphone{margin-left:0} }

/* ── hero: headline left, photograph right ────────────────────────────── */
.hero{background:transparent;border-bottom:0;padding-block:clamp(30px,4.5vw,64px)}
.herogrid{display:grid;gap:clamp(28px,4vw,56px);align-items:center;
          grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.heroin{max-width:none;padding-block:0}
.hero h1{font-size:clamp(2.1rem,1.2rem + 3vw,3.4rem)}
.hticks{list-style:none;margin:1.6rem 0 0;display:grid;gap:.45rem}
.hticks li{font-size:.94rem;color:var(--ink-2);padding-left:1.6rem;position:relative}
.hticks li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-wash)}
.herofig{position:relative}
@media (max-width:900px){ .herofig{margin-top:6px} }
.herofig img{border-radius:var(--radius);box-shadow:var(--sh);width:100%;
             aspect-ratio:4/3;object-fit:cover}
.statuscard{position:absolute;left:-14px;bottom:-22px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;
  box-shadow:0 10px 34px -14px rgba(20,30,25,.4);min-width:255px}
.slab{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;
      color:var(--brand-ink);margin-bottom:.3rem}
.hrs.mini{font-size:.84rem;margin-top:.2rem}
.hrs.mini div{padding:.2rem 0}
@media (max-width:900px){
  .herogrid{grid-template-columns:1fr}
  /* THE PHOTOGRAPH USED TO BE ORDERED FIRST HERE, AND IT COST THE PAGE ITS OWN
     HEADLINE. Measured at 390px: picture at 141px, hours card at 426px, the
     practice's name for itself at 657px, and the one control a patient opens
     this site to press -- Book an appointment -- at 922px, below an 844px
     fold. A visitor met two things that answer questions they had not asked
     yet before meeting the sentence that says who this is.
     The arrival check could not have caught it: it counts how MUCH is visible,
     never whether the thing worth pressing is among it. */
  .statuscard{position:static;margin-top:14px;min-width:0}
}

/* ── four answers ─────────────────────────────────────────────────────── */
.fourup{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.qcard{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--sh)}
.qcard h3{font-size:1.04rem}
.qcard p{font-size:.92rem;color:var(--ink-2);margin:.5rem 0 .8rem}
.qcard .more{font-size:.88rem;color:var(--brand-ink);font-weight:800}
.qcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.qcard{transition:transform .15s,border-color .15s}

/* ── the figures band ─────────────────────────────────────────────────── */
.figures{background:var(--deep-2);color:#DCE8F3;padding-block:clamp(30px,4vw,52px)}
.figrow{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.figrow div{display:flex;flex-direction:column;gap:.25rem}
.figrow b{font-size:clamp(2.1rem,1.4rem + 2.2vw,3rem);line-height:1;color:#fff;
          font-weight:800;font-variant-numeric:tabular-nums}
.figrow span{font-size:.88rem;color:#A9C2DA;max-width:22ch}

/* ── services as cards with an icon tile ──────────────────────────────── */
.scards{display:grid;gap:20px;margin-top:1.7rem;
        grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.scard{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--sh);
  transition:transform .15s,border-color .15s}
.scard:hover{border-color:var(--brand);transform:translateY(-2px)}
/* The plate is theirs and stays. The glyph inside it is drawn per service --
   see ICONS in build.py. The stroke is their DEEP BLUE because white on this
   orange measures 2.94:1, under the 3:1 floor for a non-text graphic; the
   blue is 3.57:1. */
.sicon{display:flex;align-items:center;justify-content:center;
       width:44px;height:44px;border-radius:12px;background:var(--brand);
       color:var(--deep-2);margin-bottom:1rem;flex-shrink:0}
.sicon svg{display:block}
.scard h3{font-size:1.1rem}
.scard p{font-size:.93rem;color:var(--ink-2);margin:.55rem 0 .9rem}
.scard .more{font-size:.88rem;font-weight:800;color:var(--brand-ink)}
.bandmore{margin-top:1.8rem}

/* ── practitioner cards ───────────────────────────────────────────────── */
.pcards{display:grid;gap:20px;margin-top:1.7rem;
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* It is an <a> now, so it has to LOOK and BEHAVE like one -- the same hover
   and focus treatment the other card types carry, or a card that navigates
   still reads as an inert box. */
.pcard{display:block;text-decoration:none;color:inherit;
       background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
       overflow:hidden;box-shadow:var(--sh);transition:transform .15s,border-color .15s}
.pcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.pcard>img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--paper-2)}
.pcbody{padding:18px 20px 22px}
.prole{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;
       color:var(--brand-ink);margin-top:.15rem}
.pbio{font-size:.9rem;color:var(--ink-2);margin:.6rem 0 .8rem}
.pcards .more{font-size:.88rem;font-weight:800;color:var(--brand-ink)}
.pcards .chip{margin:.55rem 0 0}

/* ── the closing section ──────────────────────────────────────────────────
   It used to be background:var(--ink) -- the SAME token the footer uses -- with
   their reception photograph washed out behind it at 32% opacity. Stacked on
   the footer that produced one dark mass with no boundary, and the photograph
   was unreadable, so the words appeared to float over a busy frame.
   A light band with a real contained photograph fixes both: the eye gets a
   boundary before the footer, and the picture is worth looking at. */
.close{background:var(--paper-2);border-top:1px solid var(--line);
       padding-block:clamp(48px,6vw,84px)}
.closegrid{display:grid;gap:clamp(26px,4vw,54px);align-items:center;
           grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
.closein h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem)}
.closein .lede{max-width:46ch}
.closefig{margin:0}
.closefig img{width:100%;aspect-ratio:16/11;object-fit:cover;
              border-radius:var(--radius);box-shadow:var(--sh)}
@media (max-width:900px){
  .closegrid{grid-template-columns:1fr}
  /* The words first here too, for the same reason as the hero. */
  .closefig{order:2}
  .closefig img{aspect-ratio:16/10}
}

/* ── contact ──────────────────────────────────────────────────────────── */
.contactgrid{display:grid;gap:38px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
             align-items:start}
.cinfo .addr{font-size:1.2rem;font-weight:800}
.cinfo .muted{color:var(--ink-2)}
.cinfo .small{font-size:.88rem}
.cinfo h2{font-size:1.2rem}
.cinfo h2.mt{margin-top:2.2rem}
.cinfo .ticks{margin-top:.9rem}
.cinfo p{margin-top:.7rem}
.cfig{margin:0}
.cfig img{border-radius:var(--radius);box-shadow:var(--sh);width:100%}
.cfig figcaption{font-size:.86rem;color:var(--ink-2);margin-top:.7rem}
@media (max-width:820px){ .contactgrid{grid-template-columns:1fr} }

.urgent{display:grid;gap:18px;margin-top:1.4rem;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ucard{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brand);
       border-radius:var(--radius-sm);padding:20px 22px}
.ucard.bad{border-left-color:#b3261e}
.ucard h3{font-size:1.02rem}
.ucard p{font-size:.95rem;color:var(--ink-2);margin-top:.5rem}
.ucard b{color:var(--ink);font-size:1.05rem}

/* ── accreditation ────────────────────────────────────────────────────── */
.acbox{background:var(--brand-wash);border:1px solid var(--line);border-left:4px solid var(--brand);
       border-radius:var(--radius-sm);padding:22px 24px;margin:1.2rem 0 1rem}
.acstat{font-size:1.15rem;font-weight:800;color:var(--brand-ink);margin-bottom:.6rem}
.acbox p{margin-bottom:.7rem}
.acbox .btn{margin-top:.3rem}
.prose .muted{color:var(--ink-2)}
.prose .small{font-size:.88rem}

/* The accreditation mark. It sits on a light ground because the AGPAL lockup is
   navy on transparent; never on the brand orange, which would fight it. */
.acbox{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.acmark{width:min(340px,100%);height:auto;flex:none}
.acbox>div{flex:1 1 260px}
.footmark{display:inline-block;margin-top:1.1rem;background:#fff;padding:10px 14px;
          border-radius:10px;line-height:0}
.footmark img{width:170px;height:auto}

/* Seven nav items at 1440 need the row to hold one line. Measured, not guessed:
   the labels total ~430px at this size and the masthead has ~520px between the
   logo and the buttons once the gaps are tightened. */
.nav{gap:17px}
.nav a{white-space:nowrap;font-size:.92rem}
.mastrow{gap:18px}
@media (max-width:1180px){ .nav{gap:13px} .nav a{font-size:.88rem} }

/* ── touch targets on a phone ─────────────────────────────────────────────
   THE TELEPHONE NUMBER IS THE MOST-TAPPED THING ON A PRACTICE SITE and it was a
   22px target at 390px — in the info bar, in the footer, and inline in the
   contact copy. The guideline is 44px, and a missed tap on a phone number is a
   patient who gives up.
   The hit area grows and the layout does not move: vertical padding with an
   equal negative margin leaves every line box exactly where it was, so a number
   inside a sentence still sits on its line. Measured after, not assumed. */
@media (max-width:520px){
  a[href^="tel:"],
  .foot .footgrid a,
  .fbot a{
    display:inline-block;
    padding-block:11px;
    margin-block:-11px;
  }
  /* The utility bar is only 38px tall, so padding alone cannot reach 44 there.
     It gets the height instead, which also stops the number crowding the edge. */
  .utilrow{padding-block:11px}
  .uphone{padding-block:6px}
}

/* The menu button is a real control and was 34px. It is the only way to reach
   any other page on a phone, so it gets the full 44. */
.burger{min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center;
        flex-direction:column}
@media (max-width:900px){ .burger{display:flex} }

/* The service chips and any inline link in the contact column are controls a
   finger has to hit. 36px and 19px at 390; 44 now, by the same
   padding-plus-negative-margin trick so nothing moves. */
@media (max-width:520px){
  .jump a{padding-block:.62rem}
  .cinfo p a{display:inline-block;padding-block:12px;margin-block:-12px}
}

/* ── the masthead on a phone ──────────────────────────────────────────────
   It was taking TWO rows: logo and burger on the first, "Book online" wrapping
   underneath. 138px of masthead before any content, on every page. The burger
   had margin-left:auto, which pushed everything after it onto the next line.
   One row now — logo, then the booking button and the burger together on the
   right — which is ~50px of the screen back on the page a patient opens. */
@media (max-width:900px){
  .brand{margin-right:auto}
  .burger{margin-left:0;order:4}
  .mastdo{order:3;margin-left:0}
  .mastrow{gap:12px;padding-block:10px}
}
@media (max-width:400px){
  /* MEASURED, NOT GUESSED. At 360 the row came to 372px against a 360 viewport
     and the burger wrapped onto a second line: logo 146 + button 114 + burger 44
     + two 12px gaps + 44px of shell padding. Twelve pixels over. The logo and
     the side padding give it back, and 360 is a real phone — an iPhone SE and
     most older Androids — not an edge case. */
  .shell{padding-inline:14px}
  .brand img{width:132px}
  .mastdo .btn{padding:.6rem .8rem;font-size:.86rem}
  .mastrow{gap:10px}
}

/* ── very wide screens ────────────────────────────────────────────────────
   1180px centred in 2560 leaves 690px of nothing either side. That is not a
   fault — it is what the demo the practice chose does, and a line of prose must
   not be 2000px wide — but the page does look marooned on the monitors this
   team actually uses. The SHELL grows a little; the reading measure does not,
   because --reading caps prose separately. Grids and the hero get the room,
   paragraphs stay at 66 characters. */
@media (min-width:1500px){ :root{--shell:1420px} }
@media (min-width:1800px){
  :root{--shell:1560px}
  .hero h1{font-size:3.6rem}
  .figrow b{font-size:3.2rem}
}
@media (min-width:2200px){
  :root{--shell:1680px}
  .hero h1{font-size:3.9rem}
}
/* 1360 was the first attempt and it was too timid: measured at 2560 it still
   left 600px of nothing down each side, which is the finding it was written to
   answer. The ladder above runs to 1680, and a paragraph is unaffected because
   --reading caps prose independently -- measured at 2560, a body line is 61
   characters with the shell at 1680. */

/* A service the practice names but has never described. It sits under the
   cards as a line rather than as an empty box -- see build_services(). */
.alsohere{margin-top:1.8rem;padding:16px 20px;background:var(--paper-2);
          border:1px solid var(--line);border-radius:var(--radius-sm);
          font-size:.95rem;color:var(--ink-2);max-width:var(--reading)}
.alsohere b{color:var(--ink)}

/* ── where the practice is ────────────────────────────────────────────────
   A photograph with a card over its left third. The card carries a solid
   ground rather than a text shadow: white type straight onto a bright beach is
   unreadable at the top of the frame and fine at the bottom, which is the kind
   of contrast failure that depends on the photograph and so cannot be measured
   once and trusted.

   IT USED TO BE FULL BLEED, AND IT WAS THE ONLY THING ON THE PAGE THAT WAS.
   JD, 15 Sep 2026: "it runs the full width of the page where every other
   section has a margin". Measured rather than argued: every section on the home
   page is a full-width ground around an 1180 shell, and every picture sits
   INSIDE that shell -- the hero at 527px and the closing photograph at 527px,
   both with an 18px radius. This one was 1440px with square corners. So it did
   not read as a deliberate full-bleed device, it read as the one element that
   missed the margin.
   The second half of the fix is the ground above and below. Full bleed put the
   photograph edge-to-edge directly against the dark figures band beneath it,
   and the two stacked into a single heavy slab -- the same complaint JD made
   about the closing section blending into the footer, in a different place on
   the same page. */
.place{position:relative;isolation:isolate;padding-block:clamp(22px,3vw,46px)}
.place > picture{display:block;max-width:var(--shell);margin-inline:auto;
                 padding-inline:22px;box-sizing:border-box}
.place > picture img{width:100%;height:clamp(300px,38vw,460px);object-fit:cover;
                     object-position:center 58%;display:block;
                     border-radius:var(--radius)}
.place > .shell{position:absolute;inset:clamp(22px,3vw,46px) 0;
                display:flex;align-items:center}
.placecard{background:var(--deep);color:#fff;padding:26px 30px;border-radius:var(--radius);
           max-width:405px;box-shadow:0 18px 44px -18px rgba(12,24,40,.55)}
.placecard h2{color:#fff;font-size:clamp(1.35rem,1.05rem + 1vw,1.95rem);margin-bottom:.5rem}
.placecard p{color:#D9E8F5;font-size:.96rem}
.placecard .eyebrow{color:#FFD9BC}
.placecard .eyebrow::before{background:var(--brand)}
/* On a phone it goes back to edge-to-edge with the card sitting under it: there
   is no margin to be consistent WITH at 390px, and a rounded photograph inset
   from both edges on a narrow screen is a stamp in a field. */
@media (max-width:760px){
  .place{padding-block:0}
  .place > .shell{position:static;padding-inline:0}
  .placecard{max-width:none;border-radius:0;margin-top:-1px}
  .place > picture{padding-inline:0}
  .place > picture img{height:250px;border-radius:0}
}

/* ── the page body: prose, and a rail beside it ───────────────────────────
   Six of nine pages were a heading and one column of text running down the
   left of an 1180px shell, with the right half of every screen empty. That is
   the flatness, and it is structural rather than a matter of colour: no
   palette fixes a page with one thing on it.
   Prose keeps its reading measure -- widening it would make the page worse,
   not richer -- and the rail carries what somebody on THAT page needs next.
   Each page names its own cards, so the shape is consistent and the contents
   are not. */
.pagebody{display:grid;gap:clamp(26px,3.4vw,54px);align-items:start;
          grid-template-columns:minmax(0,1fr) minmax(0,310px)}
.pagebody > .prose{max-width:var(--reading)}
.rail{display:grid;gap:14px;position:sticky;top:90px}
.rcard{background:var(--surface);border:1px solid var(--line);
       border-radius:var(--radius-sm);padding:18px 20px}
.rcard h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
          color:var(--brand-ink);font-weight:800;margin-bottom:.5rem}
.rcard p{font-size:.94rem;color:var(--ink-2)}
.rcard .more{display:inline-block;margin-top:.7rem;font-size:.9rem;color:var(--brand-ink)}
/* A LINK IN THE RAIL IS A THING A THUMB HAS TO HIT. At 390px these measured
   24px -- the text height and nothing else -- on five pages. The rail was
   added an hour ago, so this is a defect the change introduced rather than one
   it uncovered: every new interactive element starts below the floor unless it
   is given room. Padding, with a negative margin so the card's spacing is
   unchanged. */
@media (max-width:520px){
  .rcard .more{padding-block:10px;margin-top:.35rem}
  .rcard .tel{display:inline-block;padding-block:9px;margin-block:-9px}
}
.rcard .hrs{margin-top:0}
.rcard .hrs div{padding:.28rem 0;font-size:.88rem}
.rcard.accent{background:var(--brand-wash);border-color:#F0CDAE}
.rcard.good{background:var(--ok-bg);border-color:#BFDCCB}
.rcard.good h3{color:var(--ok)}
.rcard.figure{background:var(--deep);border-color:var(--deep)}
.rcard.figure h3{color:#FFD9BC}
.rcard.figure p{color:#DCE8F3}
.bignum{display:block;font-family:var(--display);font-size:2.9rem;line-height:1;
        color:#fff;font-variant-numeric:tabular-nums;margin-bottom:.35rem;font-weight:600}
@media (max-width:900px){
  .pagebody{grid-template-columns:1fr}
  /* On a phone the rail is the useful half, so it leads rather than being
     buried under 1,300 words of policy. */
  .rail{position:static;order:-1;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

/* ── how a page ends ──────────────────────────────────────────────────────
   Pages stopped dead at the last paragraph and dropped straight into the
   footer. One band, in their sand, so the end of the page is a decision
   rather than the point where the text ran out. */
.closer{background:var(--paper-2);border-top:1px solid var(--line);
        padding-block:clamp(34px,4.5vw,60px)}
.closerin{display:flex;align-items:center;justify-content:space-between;
          gap:26px;flex-wrap:wrap}
.closerin h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem)}
.closerin p{color:var(--ink-2);margin-top:.4rem;max-width:46ch}
.closerin .herodo{margin:0;flex-shrink:0}

/* ── a page header carrying one of their photographs ──────────────────────
   The picture sits BESIDE the heading, not behind it. White type over a
   photograph fails contrast wherever the frame happens to be bright, and
   that failure moves with the image rather than with a token, so it cannot
   be measured once and trusted. */
.pheadgrid{display:grid;gap:clamp(22px,3.5vw,44px);align-items:center;
           grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.pheadfig{margin:0}
.pheadfig img{width:100%;aspect-ratio:16/10;object-fit:cover;
              border-radius:var(--radius);box-shadow:var(--sh)}
@media (max-width:820px){
  .pheadgrid{grid-template-columns:1fr}
  /* Words first, as everywhere else on this site. */
  .pheadfig{order:2}
}

/* ── the card grids on a very wide screen ─────────────────────────────────
   At 2560 the six service cards fell 5 + 1: five across and one orphan on a
   line of its own. auto-fill keeps adding columns as the shell grows, so a
   grid of six becomes whatever fits rather than whatever reads. The shell is
   right to grow -- bands and photographs use it -- but a small fixed set of
   cards needs its own ceiling. Three columns for six services, four for four
   practitioners. */
@media (min-width:1500px){
  .scards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px}
  .pcards{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1400px}
  .fourup{max-width:1400px}
}

/* A HEADING HAS TO MEET THE TEXT UNDER IT. Every .prose h2 carried 2rem of
   top margin including the first, so Fees and About opened with a blank band
   under the page header. */
.band .prose > h2:first-child{margin-top:0}

/* Two number treatments on one site. The figures band was Nunito 800 while
   the fee in the rail was the display serif -- four numbers in the sans and
   one in the serif is the site not having decided. */
.figrow b{font-family:var(--display);font-weight:600}

/* Motion is a preference. The card lift and the hover transitions come off
   for anyone who has asked for that. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .qcard:hover,.scard:hover,.pcard:hover{transform:none}
}

/* ── The booking page ───────────────────────────────────────────────────────
   It leads with the tool rather than a header band: with the usual .phead the
   panel started 740px down an 844px phone, so the patient arrived at a heading
   and had to scroll to reach what they came for.

   But a bare heading on the paper ground and then HotDoc's own dark bar reads
   as something dumped on the page, which is what it looked like. The site Sam
   pointed at puts the same panel inside a designed page; so does this. The
   panel sits on a white card with the practice's own rule and radius, the band
   above it carries their wash so the page still opens on something, and the
   nested scroll is given a visible edge instead of appearing out of nowhere. */
.bookband{background:var(--brand-wash);border-bottom:1px solid var(--line);
  padding:2.25rem 0 1.5rem}
.bookband h1{margin:0 0 .35rem}
/* Sam Tay, 12 Oct 2026: both routes. A button straight to HotDoc, and a pointer down
   to the panel in the page. The arrow moves because he asked for the page to show
   where to go; it stops for anyone who has asked for less motion (the rule above). */
.bookband .bookways{margin-top:1.1rem}
.scrollcue .arr{display:inline-block;margin-left:.4rem;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-1px)}50%{transform:translateY(5px)}}
#availability{scroll-margin-top:1rem}
.bookband .lede{margin:0;max-width:52ch}
.bookwrap{background:var(--paper);padding:1.5rem 0 2.5rem}
.bookpanel{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:.75rem;box-shadow:0 1px 2px rgba(26,36,51,.05)}
.bookpanel h2{margin:.25rem .5rem .5rem}
.bookpanel .bpslot{border-radius:10px;overflow:hidden}
.bookpanel .bpslot iframe{display:block;width:100%;border:0;background:#fff}
.bpnote{margin:.75rem .5rem 0}
@media (max-width:700px){
  .bookband{padding:1.5rem 0 1.1rem}
  .bookpanel{padding:.4rem;border-radius:12px}
  .bpnote{margin:.6rem .25rem 0}
}

/* ── "ADHD? -> Book now PartridgeGP Plus", at the very top ─────────────────
   Sam Tay, 1 Oct 2026: "at the very top we would like to have a 'Book now
   PartridgeGP Plus' with as animated arrow pointing towards that stating
   'ADHD?'". The arrow moves, and stops for anyone who has asked for less
   motion. The pill is their orange with the same dark ink the buttons use;
   white on that orange measures 2.94:1 and is not used anywhere here. */
.plusprompt{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  color:#fff;font-weight:800;white-space:nowrap}
.plusprompt .parr{display:inline-block;color:#FFD9BC;animation:nudge 1.4s ease-in-out infinite}
.plusprompt .pgo{background:var(--brand);color:#20262b;border-radius:999px;
  padding:.16rem .75rem;transition:background-color .15s}
.plusprompt:hover .pgo,.plusprompt:focus-visible .pgo{background:#ff9150}
@keyframes nudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(4px)}}
/* With the prompt in the row there is no room for all four between 720 and
   1100px, and a wrapped utility bar is two bars. The opening line goes first:
   it is in the footer and on the home page, and the address is how somebody
   checks they have the right practice. */
@media (max-width:1100px){ .uopen{display:none} }
@media (max-width:720px){
  .utilrow{gap:10px 14px;justify-content:space-between}
  .uphone{margin-left:auto}
}
/* ON A PHONE THE PROMPT AND THE NUMBER DO NOT FIT ON ONE LINE, and wrapped they made
   a 98px bar above the masthead on every page. The number becomes the word
   "Call" -- still a telephone link, still 44px to hit, and its label reads the
   number out. Scoped to rows that carry the prompt, so the PartridgeGP Plus
   page keeps the number in full. */
.ucall{display:none}
@media (max-width:520px){
  .plusprompt{min-height:44px}
  .utilrow:has(.plusprompt) .unum{display:none}
  .utilrow:has(.plusprompt) .ucall{display:inline}
}
@media (max-width:400px){
  .plusprompt{font-size:.76rem;gap:.4rem}
  .plusprompt .pgo{padding-inline:.6rem}
}

/* ── buttons answer the pointer ───────────────────────────────────────────
   The practice asked for the booking buttons to feel alive under the cursor
   (the example they gave lifts and highlights the one you are on). A small
   lift and a shadow; nothing moves for anyone who has asked for less motion. */
.btn{transition:transform .15s,background-color .15s,border-color .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(26,36,51,.55)}
.btn:active{transform:translateY(0);box-shadow:none}

/* ── each service books where the practice said ───────────────────────────
   The buttons sit at the foot of the card whatever the length of the list
   above them, so a row of cards has its buttons on one line. */
.svc{display:flex;flex-direction:column}
.svc .sbooks{margin-top:auto;padding-top:1.2rem}
.svc .sbook + .sbook{margin-top:.9rem}
.svc .sbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  color:var(--brand-ink);margin:0 0 .45rem}
.svc .sbtns{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.btn.sm{padding:.42rem .82rem;font-size:.86rem;border-radius:8px}
.svc .snote{font-size:.86rem;margin:.55rem 0 0}
/* A telephone number in the after-hours list is the size of the line it is on, and
   never breaks across two lines: "1300 659" on one and "467" on the next is a number
   somebody misdials. */
.svc .ticks a{font-weight:700}
.svc .ticks a.tel{font-size:inherit;white-space:nowrap}
@media (max-width:520px){ .btn.sm{padding-block:.66rem} }

/* ── practice updates ─────────────────────────────────────────────────────
   The practice's own posts, published as part of the page. Four across on a
   desk, two on a tablet, and on a phone a row that slides sideways inside its
   own box -- four square pictures stacked would be two thousand pixels of
   scrolling for something a patient glances at. */
.updates{padding-block:clamp(38px,5vw,66px);background:var(--paper-2);
  border-block:1px solid var(--line)}
.nposts{display:grid;gap:20px;margin-top:1.7rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.npost{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--sh);transition:transform .15s,border-color .15s}
.npost:hover{border-color:var(--brand);transform:translateY(-2px)}
.npost > img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--paper-2)}
.npbody{display:flex;flex-direction:column;flex:1;padding:16px 18px 20px}
.npdate{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  color:var(--brand-ink)}
.npost h3{font-size:1.04rem;margin-top:.4rem}
.npcap{font-size:.9rem;line-height:1.5;color:var(--ink-2);margin:.5rem 0 .9rem}
.npost .more{margin-top:auto;padding-top:.5rem;font-size:.86rem;font-weight:800;white-space:nowrap;color:var(--brand-ink)}
@media (max-width:1100px){ .nposts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){
  .nposts{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-22px;padding-inline:22px;scroll-padding-inline:22px;padding-bottom:12px}
  .npost{flex:0 0 78%;scroll-snap-align:start}
}
@media (max-width:400px){
  .nposts{margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px}
}

/* ── frequently asked questions ───────────────────────────────────────── */
.faq{display:grid;gap:18px;margin-top:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.faqi{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;box-shadow:var(--sh)}
.faqi h3{font-size:1.08rem}
.faqi p{font-size:.95rem;color:var(--ink-2);margin-top:.6rem;max-width:var(--reading)}
@media (max-width:820px){ .faq{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .btn:hover,.npost:hover{transform:none}
  .plusprompt .parr{animation:none}
}