/* ==========================================================================
   Bellevue Endocrine Consultants — site stylesheet
   --------------------------------------------------------------------------
   This is the ONLY stylesheet for the whole website. Every page uses it.

   HOW TO CHANGE THE LOOK OF THE SITE
   The "Settings" block directly below controls colors, fonts and spacing
   everywhere. Change a value there once and it updates every page.
   You do not need to touch anything below the Settings block.

   AFTER CHANGING THIS FILE, RE-STAMP THE PAGES.
   Every page asks for this stylesheet as site.css?v=XXXXXXXX, where the code
   is taken from the contents of this file. Browsers keep a stylesheet for a
   long time and will not fetch it again unless that address changes, so if the
   code is not updated the site keeps showing yesterday's design to anyone who
   has already visited - which has happened once already. Regenerate it with:

     cd <the branch folder>
     V=$(md5 -q assets/css/site.css | cut -c1-8)
     sed -i '' -E "s|site\.css\?v=[^\"]*|site.css?v=$V|" *.html
     (the s||| form, not s///: a slash after the * would spell the two
     characters that end a CSS comment, and that once took the whole
     Settings block below out of action)

   Then check: grep -ho 'site\.css?v=[^\"]*' *.html | sort -u

   THE SCRIPT IS STAMPED THE SAME WAY, for the same reason. Only the
   <script src=...> tag carries the code — the file is also mentioned in
   the comment above it, and that mention must stay a plain file name:

     V=$(md5 -q assets/js/site.js | cut -c1-8)
     perl -pi -e 's{(<script src="assets/js/site\.js)(\?v=[^"]*)?}{$1?v='"$V"'}' *.html
   ========================================================================== */

/* ==========================================================================
   SETTINGS — safe to edit
   ========================================================================== */
:root {

  /* --- Greens ------------------------------------------------------------
     EVERY GREEN ON THE SITE COMES FROM THIS ONE LADDER, so changing a rung
     changes it everywhere at once.

     All six were rebuilt in August 2026 at Dr. Ahmadian's request, to sit on
     the same hue as the practice logo. The green was measured out of the logo
     file itself and is #a9bf55; --brand is now that colour exactly, and the
     darker rungs are the same hue carried down.

     How far each one could be lightened was decided by legibility, not taste.
     --brand-dark carries link text AND is the fill behind white button text,
     so it can only come up a little; --brand-deep had far more room, which is
     why the bar across the top of the page changed the most.

     IF YOU EVER RESTYLE THESE: keep the hue at 72 to stay with the logo, and
     do not lighten --brand-dark or --brand-deep any further — both are at the
     limit where white text on them is still legible.

     --brand       the logo's own green. Rules, hairlines and numerals only —
                   it is too light to use for text on a pale background.
     --brand-dark  darker green for buttons, links and small labels.
     --brand-press the even darker green when a button is hovered/clicked.
     --brand-deep  the bar across the very top of every page.
     --brand-deeper a shade below that, used only to give the dark green
                   bands a little depth from top to bottom. */
  --brand:        #a9bf55;
  --brand-num:    #889b3b;   /* large decorative numerals (passes 3:1) */
  --brand-dark:   #627029;
  --brand-press:  #525e22;
  --brand-deep:   #64732b;
  --brand-deeper: #48521e;

  /* --- Pale greens --------------------------------------------------------
     Tinted backgrounds. The old parchment colour was so close to the page
     colour that a shaded band was almost invisible and the whole site read
     as one flat sheet of cream. These are still quiet, but a band set in
     one of them now genuinely looks like a separate band.

     --wash   the faintest tint — long text sections
     --tint   the everyday shaded band
     --tint-2 one step deeper. Used for small shaded surfaces — the plinth
              behind an award badge, an insurance chip, a row you are
              pointing at. Ordinary dark text on it is fine; pale green
              link text is not, so links on it use --brand-press. */
  --wash:         #f7f8ee;
  --tint:         #eef1e0;
  --tint-2:       #e4e9d2;

  /* --- Paper and ink --- */
  --page:         #fdfcf7;   /* page background (warm ivory) */
  --panel:        #f1efe1;   /* parchment bands and highlighted rows */
  --line:         #e3ddcb;   /* hairline rules */
  --line-strong:  #d8d2c0;   /* heavier rules */
  --line-dot:     #b9b29c;   /* dotted leaders in hours lists */
  --ink:          #23201a;   /* main text */
  --ink-mid:      #3c382f;
  --ink-soft:     #55504a;   /* secondary text, captions */
  --ink-faint:    #716c5e;   /* small print on pale backgrounds */
  --footer-faint: #9c9686;   /* small print on the dark footer (5.4:1) */
  --footer-bg:    #26221a;

  /* --- Money and notices --------------------------------------------------
     Fees use a rust colour so a dollar amount can never be missed.
     Notice colours are for the out-of-office banner. */
  --fee:          #9a4a10;
  --fee-bg:       #faf3e6;
  --fee-edge:     #d3a06b;
  --notice-bg:    #faf4e4;
  --notice-line:  #b98029;
  --notice-ink:   #8a4d08;
  --notice-text:  #5c430f;
  /* The wording of the out-of-office banner is set in this red so a closure
     cannot be skimmed past. It is a deep brick rather than a signal red —
     a bright one would fight the olive and brass and read as an error
     message rather than as a notice. Measures 7.2:1 on the banner's cream,
     which clears the strictest contrast standard.
     TO GO BACK to the brown the rest of the banner uses, set .notice p in
     the "Notice banner" section below to var(--notice-text). */
  --notice-alert: #9b2226;

  /* --- Brass ---------------------------------------------------------------
     One warm accent, used sparingly. Green is the practice's colour, but on
     a dark green band a darker green cannot be seen — so the small rules,
     eyebrow labels and hairlines that sit on dark green are brass instead.
     It is the same warm family as the notice bar above, so nothing about it
     feels like a second brand colour.

     --brass       on pale backgrounds
     --brass-lit   on dark backgrounds (lighter, so it stays readable)
     --brass-soft  faint brass for rules and dividers */
  --brass:        #845e12;
  --brass-lit:    #debf7d;
  --brass-soft:   #e0c58c;

  /* --- On the wide green bands --------------------------------------------
     The feature bands are now as light as the bar at the top of the page, and
     at that lightness BRASS CANNOT BE READ ON THEM — it measures 2.9:1, which
     is under the bar even for a plain graphic, let alone for words. These two
     take its place on those bands only. Brass itself is untouched and still
     does its job everywhere else: the notice bar, the footer, the pale pages.

     There is no dimmer third tone here, on purpose. On a band this light every
     legible colour lands close to white, so the bands now carry two tones
     rather than three — white for the words, cream for the labels and links.

     IF THE BANDS ARE EVER TAKEN DARKER AGAIN, brass can come back and these
     two can go. */
  --on-deep-accent: #f9f3e7;   /* labels, cites, links — 4.7:1 on the band */
  --on-deep-soft:   #f3efe5;   /* second-rank lines    — 4.5:1 on the band */

  /* --- Shadows -------------------------------------------------------------
     Very soft and warm, never grey. Used only where something is meant to
     sit slightly above the page: the header once you scroll, a card you are
     pointing at, the back-to-top button. */
  --shadow-sm:    0 1px 2px rgba(55, 63, 24, .06), 0 2px 8px -4px rgba(55, 63, 24, .10);
  --shadow-md:    0 2px 4px rgba(55, 63, 24, .05), 0 12px 24px -12px rgba(55, 63, 24, .22);
  --shadow-lg:    0 4px 8px rgba(55, 63, 24, .05), 0 24px 44px -20px rgba(55, 63, 24, .30);

  /* --- Motion --------------------------------------------------------------
     One easing curve and two speeds for the whole site, so everything moves
     with the same character. The curve settles rather than stopping dead.
     Anyone whose device asks for reduced motion is opted out of all of it. */
  --ease:         cubic-bezier(.22, .61, .36, 1);
  --fast:         .18s;
  --slow:         .55s;

  /* --- Fonts --------------------------------------------------------------
     We deliberately use fonts already built into phones and computers, so
     nothing is downloaded and pages appear almost instantly.
     --font-head is the serif used for headings and important figures.
     --font is the sans-serif used for ordinary text. */
  --font-head: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono: ui-monospace,Menlo,Consolas,monospace;

  /* --- Sizing --- */
  --page-width: 1160px;  /* how wide content gets on large screens */
  --radius: 0;           /* square corners everywhere, by design */
  --caps: .2em;          /* letter-spacing for small-caps labels */

  /* --- The header that stays on screen ------------------------------------
     The bar holding the logo and the menu stays at the top of the window as
     you scroll, so the menu is always one tap away. --header-h is how tall
     the whole stuck block is: the olive hours strip PLUS the logo bar
     (the 150x55 logo plus the space above and below it).

     IF YOU CHANGE THE LOGO SIZE, or the padding on .masthead or .topbar,
     change this number to match. It is what keeps a heading from landing
     underneath the bar when someone jumps to a section from an "on this
     page" index. */
  --header-h: 5.8rem;    /* 93px: the logo bar on its own. This figure is
                            the one that applies when the script has NOT
                            run, and in that case the logo bar is the only
                            thing that stays on screen. When the script does
                            run it pins the hours strip as well and rewrites
                            this with the height of both together. */

  /* --- Screen sizes --------------------------------------------------------
     The layout changes shape at exactly FOUR widths, and every rule further
     down uses one of these four and nothing else:

       phone          up to 599px     one column, stacked, menu button
       small tablet   600 – 899px     two columns where it helps, menu button
                                      (folding phones open, iPad upright)
       tablet         900 – 1099px    full menu bar, most grids at full width
       desktop        1100px and up   the sticky "on this page" rail appears

     Stylesheets cannot read these numbers from a setting, so they are typed
     into each @media line. If you ever change one, search the file for it
     and change every copy. */
}

/* ==========================================================================
   THE PHOTOGRAPH OF DR. AHMADIAN — the one place it is tuned
   --------------------------------------------------------------------------
   One picture of her is used across the whole site: the opening screen of
   the home page and the introduction on the About page. The file itself is
   assets/img/dr-ahmadian-portrait.webp — to put a new photograph in, replace
   that file and change nothing else.

   The two settings below are everything a different photograph might need.

   --portrait-ratio  The shape of the space the picture sits in. It is set to
                     the shape of the current photograph, so nothing is cut
                     off it. A replacement of a different shape is trimmed to
                     fit this space rather than changing the layout.

   --portrait-focus  The point in the picture that is kept in view whenever it
                     has to be trimmed. The current photograph is a standing
                     one: her face sits about a third of the way across and
                     near the top, and her name is printed in the top corner.
                     Anchoring high and left keeps both her head and that
                     printed name whole at every shape the picture was tried
                     at — a plain centre crop takes the top of her head off.
                     For a new photograph, put the anchor a little above the
                     face rather than on it, and change this one line.
   ========================================================================== */
:root {
  --portrait-ratio: 540 / 580;
  --portrait-focus: 34% 8%;
}

/* ==========================================================================
   Everything below here is layout machinery. You should not need to edit it.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); }
a:hover { color: var(--brand-press); }

:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
/* On the dark surfaces — the green strip at the top, the dark feature bands
   and the footer — that green ring would vanish into the background, so the
   ring is white there. A keyboard user can always see where they are. */
.topbar :focus-visible, .section--deep :focus-visible, .footer :focus-visible { outline-color: #fff; }

/* --- Headings: serif, weight 500, never bolded display --- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .35em;
  line-height: 1.2;
}
h1 { font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3.25rem); line-height: 1.1; }
h1.display { font-size: clamp(2.1rem, 1rem + 4vw, 3.875rem); line-height: 1.06; }
h2 { font-size: clamp(1.5rem, 1rem + 1.9vw, 2.125rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }

/* Editorial italic — ledes, captions, pull quotes */
.lede {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
}


/* Small-caps label used above sections and beside components */
.label {
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--brand-dark);
}

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}


/* ==========================================================================
   SECTION BANDS
   --------------------------------------------------------------------------
   The page is built from full-width horizontal bands. Alternating their
   background is what gives a long page its rhythm and stops it reading as
   one endless sheet of cream.

   Add one of these classes to a <section> to change its background:

     (nothing)          ivory, the ordinary page colour
     .section--panel    parchment — the everyday shaded band
     .section--tint     pale sage — a little cooler and greener
     .section--wash     the faintest tint, for long stretches of reading
     .section--deep     dark green with pale text, for a band that should
                        stop the eye. Use it once or twice a page at most.

   .section--ruled adds a hairline along the top, for when two bands share
   the same background and would otherwise run together.
   ========================================================================== */
.section { padding-block: clamp(2.25rem, 4vw, 3.25rem); position: relative; }
.section--panel { background: var(--panel); }
.section--tint  { background: var(--tint); }
.section--wash  { background: var(--wash); }
.section--ruled { border-top: 1px solid var(--line); }

/* A shaded band gets a hairline top and bottom so its edges are crisp
   rather than fading into the band above and below it. */
.section--panel, .section--tint, .section--wash {
  border-block: 1px solid var(--line);
}

/* --- The dark band -------------------------------------------------------
   A soft top-to-bottom gradient rather than one flat colour, so it has a
   little depth. The brass hairline along the top edge is what keeps it from
   looking like a plain black box. */
.section--deep {
  background: linear-gradient(170deg, var(--brand-deep) 0%, var(--brand-deeper) 100%);
  color: #f7f4ec;
  border-top: 2px solid var(--on-deep-accent);
}
.section--deep h1, .section--deep h2,
.section--deep h3, .section--deep h4 { color: #fff; }
.section--deep .label,
.section--deep .eyebrow { color: var(--on-deep-accent); }
.section--deep .lede { color: var(--on-deep-soft); }
.section--deep a { color: #fff; }
.section--deep a:hover { color: var(--on-deep-accent); }
.section--deep .link-caps {
  color: var(--on-deep-accent); border-bottom-color: var(--on-deep-accent);
}
.section--deep .link-caps:hover { color: #fff; border-bottom-color: var(--on-deep-accent); }

/* Anything that sets its own colour on a pale background has to be told
   again what to be on a dark one. */
.section--deep blockquote.pull { color: #fff; }
.section--deep blockquote.pull cite { color: var(--on-deep-accent); }
.section--deep .rows dt { color: var(--on-deep-soft); }
.section--deep .rows dd { color: #fff; }
.section--deep .rows div { border-bottom-color: rgba(236, 234, 221, .22); }
.section--deep .fact h2, .section--deep .fact h3 { color: var(--on-deep-accent); }
.section--deep hr { border-color: rgba(236, 234, 221, .25); }

/* A large opening quotation mark set in brass, sitting up and to the left of
   the words rather than behind them. It is decorative, drawn with a
   pseudo-element so no extra punctuation is added to the text a screen
   reader announces. */
.section--deep blockquote.pull { position: relative; padding-top: 2.4rem; }
.section--deep blockquote.pull::before {
  content: "\201C";
  position: absolute; left: -.06em; top: -.18em;
  font-family: var(--font-head);
  font-size: 5.5rem; line-height: 1;
  color: var(--on-deep-accent); opacity: .55;
  pointer-events: none;
}
@media (max-width: 599px) {
  .section--deep blockquote.pull { padding-top: 1.9rem; }
  .section--deep blockquote.pull::before { font-size: 4rem; }
}

/* --- Full-width bands ----------------------------------------------------
   Everything on the site normally sits inside .wrap, which keeps it within
   the page width and away from the screen edges. A .bleed section skips
   that: its contents run right out to both edges of the window. Used for
   the map on the Contact page.
   ========================================================================== */
.bleed { padding-block: 0; }
.bleed > * { width: 100%; }

/* 70ch measures out at roughly 73 characters per line — the top of the
   comfortable range, and a sensible ceiling for older readers. */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.9rem; }
.prose h3 { margin-top: 1.4rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }

/* --- The welcome band on the home page ------------------------------------
   Two columns from tablet width up: the practice's plaque on the left — the
   mark, the founding year and the motto on a framed card, the way a brass
   plate sits beside an office door — and the greeting and the practice
   facts on the right. The plaque is centred against the taller text column.
   On a telephone the plaque comes first and the two stack.
   The logo is shown at 250px, the enlargement limit for the only logo
   picture we have (171 pixels across; the seals' never-past-half-again
   rule applies to it too). To feature it larger, ask Dr. Ahmadian for the
   original logo art. */
.welcome-split { display: grid; gap: 2rem 4.5rem; align-items: start; }
.welcome-plaque {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 2rem 2.25rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.welcome-logo { display: block; width: 250px; height: auto; margin-bottom: 1.6rem; }
.welcome-plaque-rule { width: 56px; border-top: 1px solid var(--brass-soft); margin-bottom: 1.4rem; }
.welcome-plaque .label { color: var(--brass); margin-bottom: .8rem; }
.welcome-motto {
  font-family: var(--font-head); font-style: italic;
  font-size: 1.15rem; line-height: 1.5; color: var(--ink-mid);
  margin: 0; white-space: nowrap;   /* the motto reads as one line */
}
.welcome-intro h2 { max-width: 24ch; margin-bottom: .55em; }
.welcome-intro .lede { max-width: 48ch; margin-bottom: 1.4rem; }
.welcome-body { max-width: 60ch; }
@media (min-width: 900px) {
  .welcome-split { grid-template-columns: 440px minmax(0, 1fr); }
  .welcome-plaque { align-self: center; }
}
/* On a telephone the plaque leads the section, so it stays compact —
   tighter padding and a slightly smaller mark keep it to a card, not
   a screenful, before the greeting arrives. */
@media (max-width: 899px) {
  .welcome-plaque { padding: 1.4rem 1.25rem 1.3rem; }
  .welcome-logo { width: 210px; margin-bottom: 1rem; }
  .welcome-plaque-rule { margin-bottom: .9rem; }
  .welcome-plaque .label { margin-bottom: .45rem; }
  /* A phone is too narrow for the motto on one line at a readable size,
     so it wraps to two balanced lines there. */
  .welcome-motto { font-size: 1.15rem; white-space: normal; max-width: 24ch; text-wrap: pretty; }
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--brand-dark); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }
/* The back-to-top button hands keyboard focus to the page body; nothing
   should be drawn around the whole page when it does. */
#main:focus { outline: none; }

/* Hides a heading visually but keeps it for screen readers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Keeps a phrase whole when the line has to break. Used on the street
   address: in a wide column "1380 112th Ave NE, Ste. 205" reads as one line
   as it always has, and in a narrow one it breaks after the comma rather
   than in the middle of "Ave NE". Wrap each part that must stay together in
   <span class="nb"> and leave an ordinary space between them — that space is
   the only place the line is allowed to break. */
.nb { white-space: nowrap; }

/* ==========================================================================
   Buttons and text links — square, no rounded corners
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-block;
  font: inherit; font-weight: 600;
  padding: .85rem 1.6rem;
  border: 1px solid var(--brand-dark);
  /* The gradient runs DOWNWARDS from --brand-dark rather than starting above
     it. Its top edge is the lightest part of the button, and white lettering
     has to stay legible against that edge — so the lightest stop is capped at
     --brand-dark and every stop below is darker. Do not lighten these. */
  background: linear-gradient(170deg, var(--brand-dark) 0%, #586524 55%, #4f5b21 100%);
  color: #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--brand-press); border-color: var(--brand-press); color: #fff; }

/* A soft band of light sweeps across the button once when it is pointed at.
   It is drawn on top of the button and cannot be clicked, so it changes
   nothing about how the button behaves. */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
              transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(110%); transition: transform .65s var(--ease); }

.btn--outline {
  background: transparent; color: var(--brand-dark);
  box-shadow: none;
}
.btn--outline:hover { background: var(--brand-dark); color: #fff; }

/* On the dark band a sage button would disappear, so it is brass instead. */
.section--deep .btn {
  background: linear-gradient(170deg, #e7d1a1 0%, #e1c589 100%);
  border-color: #e7d1a1; color: #282e11;
}
.section--deep .btn:hover { background: #ebd9b2; border-color: #ebd9b2; color: #282e11; }
.section--deep .btn--outline {
  background: transparent; color: #fff; border-color: rgba(236, 234, 221, .5);
}
.section--deep .btn--outline:hover { background: #fff; color: var(--brand-deep); border-color: #fff; }

/* Small-caps text link with a trailing arrow */
.link-caps {
  display: inline-block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--brand-dark); text-decoration: none;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
}
.link-caps:hover { color: var(--brand-press); border-bottom-color: var(--brand-press); }

/* ==========================================================================
   Top utility bar, masthead and navigation
   ========================================================================== */
.topbar {
  /* This strip stays on screen with the logo bar beneath it, so the opening
     hours, the telephone number and the patient portal are readable from
     anywhere on the page rather than only at the very top.

     It sticks at the very top and the logo bar sticks directly underneath
     it, offset by exactly this strip's height. That offset cannot be typed
     in here: the strip is 42px on a mouse-driven wide screen but 49px on a
     phone, and taller again on any touch screen, because the links are given
     a bigger tap area. The script measures it and writes --topbar-h.

     THE STICKING IS SWITCHED ON BY THE SCRIPT, not here — see
     .has-sticky-strip below. If the script never runs there is no measured
     height, and rather than guess one, the strip simply scrolls away and the
     logo bar sticks to the very top, which is how the site behaved before
     this was added. Failing back to the old arrangement is safe; guessing a
     height and having the two bars overlap is not.

     Like the logo bar, this must NOT be wrapped in anything: a bar that
     sticks only stays put for as long as the box around it is on screen. */

  /* A gentle left-to-right gradient rather than one flat olive. It is barely
     perceptible on its own, but it stops the bar looking like a printed
     block and gives the top of every page a little life. The brass hairline
     underneath is the site's one warm accent, introduced immediately. */
  /* THE TOP STRIP IS THE LIGHTEST GREEN SURFACE ON THE SITE, and deliberately
     so — it is the band Dr. Ahmadian sees on every page, and it is the one
     that was asked to move closest to the logo. It can go this light because
     the only thing written on it is white, at 4.59:1 on the palest stop.
     The feature bands lower down CANNOT go this light: they carry brass and
     pale type as well as white, which is why they keep their own darker
     --brand-deep. Do not merge the two back together. */
  background: linear-gradient(100deg, #48521e 0%, #64732b 55%, #6d7c30 100%);
  /* Pure white, not the off-white used elsewhere: on the palest stop of the
     strip above, off-white measures 3.94:1 and white measures 4.59:1. */
  color: #fff;
  border-bottom: 1px solid rgba(222, 191, 125, .38);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
.topbar .wrap {
  display: flex; justify-content: space-between; gap: 1rem 1.5rem;
  flex-wrap: wrap; padding-block: .65rem;
  /* Centre the two halves against each other. Without this they stretch to
     the full height of the strip, and because the hours are laid out as a
     grid (see .ticker below) their line came to rest against the TOP of that
     stretched box while the portal link — which carries its own padding —
     sat in the middle. The result on a phone was hours pressed hard against
     the top edge of the screen with the portal link level below them. */
  align-items: center;
}
.topbar a {
  color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .14em;
  transition: color var(--fast) var(--ease);
}
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-links { display: flex; gap: 2rem; }

/* --- The opening hours in the strip ---------------------------------------
   By default every line of hours reads across as one sentence, separated by
   dots. That is what a wide screen shows, and it is also what someone sees
   if the script never runs, so nothing about the hours depends on it.

   On a telephone there is no room for that sentence — it took the strip to
   three lines — so the lines stack in one spot and take turns instead. The
   strip stays one line tall however many lines of hours there are.
   Anyone who has asked their device for reduced motion is left with the
   sentence, whole, rather than a line that changes underneath them.        */
.ticker-line { white-space: nowrap; }
.ticker-line + .ticker-line::before {
  content: "\00B7"; margin-inline: .5rem; color: rgba(255, 255, 255, .55);
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .ticker { display: grid; justify-items: end; align-content: center; }
  .ticker-line { grid-area: 1 / 1; transition: opacity var(--slow) var(--ease); }
  .ticker-line + .ticker-line::before { content: none; }
  /* Before the script has run, the first line is the one on show. */
  .ticker-line:not(:first-child) { opacity: 0; }
  /* Once it has, it says which. */
  .js-ticker .ticker-line { opacity: 0; }
  .js-ticker .ticker-line.is-current { opacity: 1; }
}

/* ONLY THE LOGO BAR STAYS ON SCREEN. The green hours strip above it scrolls
   away with the page — the hours are repeated in the footer, on the Patients
   page and on the Contact page, and on a phone that strip was costing a
   sixth of the screen for the whole visit. The telephone number stays
   reachable from the logo bar itself (see .masthead-call below).

   THE BAR IS NOT WRAPPED IN ANYTHING, AND MUST NOT BE. A bar that sticks
   can only stay on screen for as long as the box it sits inside is on
   screen. While these two bars were wrapped together in one short block,
   the logo bar reached the top of the window and then left again with the
   block — which looked exactly like sticking not working at all.

   z-index 50 keeps it above the page; the skip link (z-index 100) and the
   back-to-top button (60) still sit above it. */
.masthead {
  background: var(--page);
  border-bottom: 1px solid var(--line-strong);
  position: sticky;
  top: 0;
  z-index: 50;
  /* Once the page scrolls, a small script adds "is-stuck" to this bar and
     the shadow below fades in, so the header reads as floating above the
     page rather than being part of it. Only the shadow and the background
     change — nothing moves, nothing resizes — so the page cannot shift. */
  transition: box-shadow var(--slow) var(--ease),
              background-color var(--slow) var(--ease);
}
/* BOTH BARS STAY ON SCREEN. The script adds "has-sticky-strip" to the page
   once it has measured the olive strip, and only then do these two rules
   apply: the strip pins to the very top, and the logo bar comes to rest
   directly beneath it instead of at the top itself. Written as one pair so
   the two can never be switched on separately and overlap. */
.has-sticky-strip .topbar {
  position: sticky;
  top: 0;
  z-index: 51;              /* one above the logo bar, which rests below it */
}
.has-sticky-strip .masthead { top: var(--topbar-h, 0px); }

.masthead.is-stuck {
  background: rgba(253, 252, 247, .93);
  box-shadow: var(--shadow-md);
}
/* The frosted-glass blur is only worth its cost on a large screen; a phone
   redraws it on every scroll frame for no visible gain. */
@media (min-width: 900px) {
  @supports (backdrop-filter: blur(8px)) {
    .masthead.is-stuck { backdrop-filter: saturate(140%) blur(10px); }
  }
}

/* THE BAR IS SOLID ON A SMALL SCREEN. The faint see-through above is only
   ever meant to be seen through frosted glass; without the blur the words
   of the page climb straight through the bar as you scroll past them. */
@media (max-width: 899px) {
  .masthead.is-stuck { background: var(--page); }
}

/* A hairline of brand colour along the very bottom edge of the header,
   drawn as a gradient so it fades out at both ends instead of stopping
   abruptly. Decorative only. */
.masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
              transparent 0%, var(--brand) 22%, var(--brass-soft) 50%,
              var(--brand) 78%, transparent 100%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
.masthead.is-stuck::after { opacity: .9; }

/* Because the masthead is always on screen, a jump to an in-page section has
   to stop short of it, or the heading it jumped to lands hidden behind the
   bar. This one line does that for every jump target on the site — the
   section rail, the skip link, and any link ending in #something. */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.15rem;
}
.logo { display: block; flex: none; }   /* never squeezed by the menu beside it */
.logo img { width: 150px; height: 55px; }

/* The telephone button in the logo bar. Shown only on screens with the menu
   button, where the hours strip (and the number in it) has scrolled away. */
.masthead-call {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-left: auto;
  color: var(--brand-dark);
  border: 1px solid var(--line-strong);
  text-decoration: none;
}
.masthead-call svg { width: 20px; height: 20px; display: block; }
.masthead-call:hover { background: var(--tint); color: var(--brand-press); }
/* The telephone number and portal link also head the opened menu, so they
   are still one tap away once the hours strip has scrolled off. Hidden on a
   wide screen, where the strip is visible anyway. */
.nav-extra { display: none; }

.nav-toggle {
  display: none; font: inherit; font-weight: 700;
  font-size: .8rem; letter-spacing: var(--caps); text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); padding: .6rem 1rem; cursor: pointer;
  min-height: 44px;                      /* a comfortable thumb target */
}

.nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .25rem 0;
  font-size: .78rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--ink-mid); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--brand-dark); }
.nav a[aria-current="page"] { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* Between 900 and 1099px the full menu bar is shown but there is not quite
   room for eight spaced-out items beside the logo, so the items sit closer
   together. Above 1100px they spread back out. */
@media (min-width: 900px) and (max-width: 1099px) {
  .nav ul { gap: 1.1rem; }
  .nav a { letter-spacing: .08em; }
}

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .masthead-call { display: flex; }
  .nav-extra { display: block; }
  .nav-extra a { font-size: 1rem; letter-spacing: .02em; text-transform: none; }
  .nav-extra a strong { font-weight: 700; }
  .nav { display: none; width: 100%; border-top: 1px solid var(--line); }
  /* The menu opens inside a bar that is stuck to the top of the window. On a
     short screen — a phone held sideways — the list of pages is taller than
     the space left below the bar, so it scrolls inside itself instead of
     running off the bottom of the screen where it could not be reached. */
  .nav[data-open="true"] {
    display: block;
    max-height: calc(100vh - var(--header-h) - 1rem);
    max-height: calc(100dvh - var(--header-h) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a {
    padding: .85rem 0; border-bottom: 1px solid var(--line);
    font-size: .95rem; letter-spacing: .1em;
  }
  .masthead .wrap { flex-wrap: wrap; padding-block: .8rem; }
  .topbar { font-size: .75rem; }
  /* The remaining link in the hours strip becomes a proper thumb target. */
  .topbar a { display: inline-block; padding: .45rem 0; }

  /* THE TELEPHONE NUMBER COMES OUT OF THE HOURS STRIP HERE. At this width
     the logo bar carries a telephone button, which does the same job in
     less room and stays on screen the whole way down the page — so
     printing the number again directly above it is saying it twice.
     It stays in the strip on a wide screen, where there is no button.
     TO PUT IT BACK, delete these three lines. */
  .topbar-links a[href^="tel:"] { display: none; }
}

/* Spelling the hours out in full ("8:00 AM – 2:30 PM" rather than "8:00")
   makes this line long enough to wrap onto a second row on a phone, which
   costs a surprising amount of the first screen. Closing the letter-spacing
   up brings it back to one line without shrinking the type to the point of
   being hard to read. */
@media (max-width: 599px) {
  /* Never smaller than about 12.5px. The strip used to be set at 10.9px,
     which is hard reading for anyone who needs their glasses. */
  .topbar { font-size: .78rem; letter-spacing: .04em; }
  .topbar a { letter-spacing: .04em; }
  /* The portal and the hours sit side by side on one line. On the very
     narrowest telephones there is not room for both, and they take a line
     each rather than running off the edge of the screen.

     No padding above and below. The strip stays on screen for the whole
     visit now, so its height is charged to every page rather than only to
     the top of one, and this padding was buying nothing: the portal link
     already carries its own generous padding, which sets the height of the
     strip and gives a thumb something to aim at. Taking it out drops the
     strip from 49px to 39px and makes the whole of it tappable. */
  .topbar .wrap { gap: 0 .75rem; padding-block: 0; }

  /* The hours drop the extra space between letters that the rest of the
     strip carries. On a telephone those few pixels a character are the
     difference between the strip being one line and two, and the wording
     beside them keeps the spacing, so the strip still reads as one piece. */
  /* Set at the same size AND the same weight as the portal link beside it,
     so the two halves of the strip read as one line rather than as a heading
     with a caption under it. The extra space between letters is the one
     thing the hours do not share: those few pixels a character are the
     difference between the strip being one line and two, and the wording
     beside them keeps the spacing, so the strip still reads as one piece. */
  .ticker { letter-spacing: 0; font-weight: 600; }
  .topbar-links { gap: 1.5rem; flex: none; }
  .ticker { min-width: 0; }
  /* A smaller logo on a phone keeps the stuck bar to about 64px. */
  .logo img { width: 120px; height: 44px; }
  .masthead .wrap { padding-block: .6rem; gap: .6rem; }
}

/* ==========================================================================
   Notice banner — the out-of-office message
   ========================================================================== */
.notice { background: var(--notice-bg); border-block: 1px solid var(--notice-line); }
.notice .wrap {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding-block: .85rem;
}
.notice .label { color: var(--notice-ink); flex: none; }
.notice .rule { color: var(--notice-line); flex: none; }
.notice p {
  margin: 0; font-family: var(--font-head); font-style: italic;
  font-size: 1.1rem; color: var(--notice-alert);
}
@media (max-width: 599px) {
  .notice .wrap { flex-direction: column; gap: .3rem; }
  .notice .rule { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* The hero sits on a soft wash rather than plain ivory: a pale sage glow
   behind the photograph, fading to the page colour on the left where the
   words are. It is a background, not a decoration — nothing here competes
   with the headline for attention. */
.hero {
  position: relative;
  background:
    radial-gradient(115% 85% at 88% 8%, var(--tint) 0%, rgba(238, 241, 224, 0) 62%),
    linear-gradient(178deg, var(--wash) 0%, var(--page) 78%);
  border-bottom: 1px solid var(--line);
}
.hero .wrap { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); position: relative; }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
/* Two columns as soon as there is room for a modest photograph beside the
   words (600px); the photograph gets its full share from 900px. Below 600px
   the photograph sits under the words. */
@media (min-width: 600px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }

/* The eyebrow gets a short brass dash in front of it — a small printed-
   letterhead gesture that introduces the accent colour straight away. */
.hero .eyebrow {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.1rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase; color: var(--brand-dark);
}
.hero .eyebrow::before {
  content: ""; flex: none;
  width: 2.25rem; height: 2px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brand) 100%);
}

/* The closing phrase of the headline is set in the brand green so the
   sentence has a colour in it. The words are unchanged — this is only
   how they are drawn. */
.hero h1 .accent { color: var(--brand-dark); font-style: italic; }

/* A rule that fades out towards the right rather than stopping dead. */
.hero-rule {
  border: 0; height: 1px; margin: 2rem 0 1.75rem;
  background: linear-gradient(90deg,
              var(--brand) 0%, var(--brass-soft) 26%,
              var(--line-strong) 55%, transparent 100%);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
/* The photograph already carries her name, title and practice name printed
   across the top corner, so it needs no caption underneath — that would just
   say the same thing twice. It is sized generously so the printed text stays
   legible.

   The shape and the focal point come from the two settings at the top of this
   file, so the picture holds its framing at every width the layout uses and a
   replacement photograph needs no work here. */
.portrait {
  width: 100%; max-width: 520px; margin-inline: auto; display: block;
  aspect-ratio: var(--portrait-ratio);
  object-fit: cover;
  object-position: var(--portrait-focus);
}
/* On a phone the photograph stops short of full width, so the opening band
   stays close to one screen tall. */
@media (max-width: 599px) {
  .portrait, .portrait-frame { max-width: min(520px, 72vw); }
}

/* --- The frame around a photograph ---------------------------------------
   A block of sage sits behind the picture, offset down and to the right, so
   the photograph has something to stand on instead of floating in white
   space. A thin brass rule runs along the top edge. Both are drawn behind
   the picture and take up no space of their own, so nothing on the page
   moves because of them. */
.portrait-frame {
  position: relative;
  width: 100%; max-width: 520px;
  margin-inline: auto;
  isolation: isolate;
}
.portrait-frame::before {
  content: "";
  position: absolute; z-index: -1;
  left: 1.35rem; top: 1.35rem; right: -1.35rem; bottom: -1.35rem;
  background: var(--tint-2);
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
}
.portrait-frame::after {
  content: "";
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brand) 100%);
}
.portrait-frame .portrait {
  position: relative; z-index: 0;
  box-shadow: var(--shadow-md);
}

/* On a narrow screen the offset block would push the picture off the edge
   of the window, so it tucks in behind instead. */
@media (max-width: 899px) {
  .portrait-frame::before { left: .75rem; top: .75rem; right: -.75rem; bottom: -.75rem; }
}

/* The full-length portrait on the About page exists only at 540px wide, and
   it has her name printed across the top, so it is capped at its native
   width — enlarging it past that would blur the lettering. */
.portrait--full { max-width: 480px; }
.portrait-frame--full { max-width: 480px; }

/* On a phone the About page leads with her photograph: you see who she is
   before reading her background. On wider screens the two sit side by side
   again, text on the left. */
@media (max-width: 599px) {
  .intro .portrait,
  .intro .portrait-frame { order: -1; margin-bottom: .5rem; }
}

/* ==========================================================================
   Credentials band — the practice's main trust signal, directly under the
   hero. Deliberately given room: large badges, generous padding, its own
   ruled band. Understated in colour, but unmissable in scale.
   ========================================================================== */
.credband {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--page) 0%, var(--wash) 100%);
}
.credband .wrap { padding-block: clamp(2rem, 4vw, 3rem); }
.credband > .wrap > .label { display: block; margin-bottom: 1.25rem; }

.creds {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
}
.creds--three { grid-template-columns: repeat(3, 1fr); }

/* Each credential is a card rather than a column divided off by a hairline.
   The sage rule along the top is what carries the colour; the card itself
   is only a shade away from the page, so three of them side by side still
   read as calm. Badge sits above the text so each card gets its full width
   and long certification names wrap naturally. */
.creds figure {
  display: flex; flex-direction: column; gap: 1rem; margin: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              border-top-color var(--fast) var(--ease);
}
.creds figure:hover,
.creds figure:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--brass);
}

/* The badge box reserves more height than the badge uses, so the enlarged
   state grows upward into space that is already its own. Nothing overlaps
   the section label or the hero above, and no z-index games are needed. */
.creds .badge { height: 128px; display: flex; align-items: flex-end; justify-content: center; }
.creds .badge img {
  width: auto; max-height: 96px;
  cursor: zoom-in;
  transform-origin: center bottom;
  transition: transform .2s ease;
}

/* Hover (or keyboard focus) nudges the seal larger. This is only a hint that
   it can be opened — clicking it is what shows it at a readable size, in the
   window described further down this file. The nudge stays small so it fits
   inside the height the badge box has already reserved for it, and so the
   page never shifts. */
.creds figure:hover .badge img,
.creds figure:focus-within .badge img { transform: scale(1.22); }

/* ==========================================================================
   THE ENLARGED-PICTURE WINDOW
   --------------------------------------------------------------------------
   Clicking an award seal or the certificate opens it here at a size you can
   actually read. All four open at the same height, so a seal and the
   certificate look like parts of one set rather than four odd sizes.

   The one exception is built into the rule below: a picture is never blown up
   more than about half again beyond the size it was actually saved at, or it
   would go soft. The ABIM seal is the smallest original we have, so it stops
   a little short of the others. Blurring it to match would be worse.
   ========================================================================== */
.lightbox {
  border: 0; padding: 0;
  max-width: min(92vw, 780px);
  max-height: 92vh;
  max-height: 92dvh;
  background: var(--page);
  border-top: 3px solid var(--brass);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.lightbox::backdrop { background: rgba(28, 26, 18, .72); }

.lightbox figure { margin: 0; padding: 1.75rem 1.75rem 1.5rem; }
.lightbox img {
  display: block; margin-inline: auto;
  height: min(62vh, 520px);
  height: min(62dvh, 520px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.lightbox figcaption {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-head); font-size: 1.05rem; line-height: 1.5;
  color: var(--ink-soft); text-align: center;
}
/* The caption is copied straight out of the wording under the seal, so it
   arrives with the same pieces: a name, a description, and a source line. */
.lightbox figcaption strong {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-head); font-weight: 500;
  font-size: 1.4rem; color: var(--ink); line-height: 1.2;
}
.lightbox figcaption .label {
  display: block; margin-bottom: .45rem; color: var(--brass);
}
.lightbox figcaption .by {
  display: block; margin-top: .4rem;
  font-family: var(--font); font-size: .82rem; color: var(--ink-faint);
}

.lightbox form { margin: 0; }
.lightbox-close {
  position: absolute; top: 0; right: 0;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1.6rem; line-height: 1;
  background: transparent; border: 0; color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.lightbox-close:hover { background: var(--tint); color: var(--ink); }

/* The seals and the certificate advertise that they can be opened. */
a.zoom { display: block; cursor: zoom-in; }
.certificate a.zoom { cursor: zoom-in; }

@media (max-width: 599px) {
  .lightbox figure { padding: 1.25rem 1.25rem 1.1rem; }
  .lightbox img { height: min(56vh, 420px); height: min(56dvh, 420px); }
  .lightbox figcaption { font-size: .95rem; }
}

/* The window fades in rather than appearing all at once. */
@keyframes lightbox-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.lightbox[open] { animation: lightbox-in .22s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
}

/* ==========================================================================
   Tenure headline — the practice's longevity, given its own row above the
   certifications so it reads as a statement rather than a fourth badge.
   ========================================================================== */
.tenure {
  position: relative;
  display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 1.75rem);
  flex-wrap: nowrap;                     /* the sentence never drops under the figure */
  justify-content: center;               /* centred over the three cards below */
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 0;
}
/* A rule that rises out of nothing at both ends, sage with a touch of brass
   at its centre — symmetric, to sit under the centred line above it. */
.tenure::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
              transparent 0%, var(--line-strong) 22%,
              var(--brand) 42%, var(--brass) 50%, var(--brand) 58%,
              var(--line-strong) 78%, transparent 100%);
}
/* On a small telephone the sentence wraps to several lines beside the big
   figure, and a centred pair reads ragged — it goes back to the left there,
   the same choice the other branch makes. */
@media (max-width: 599px) {
  .tenure { justify-content: flex-start; }
}
.tenure-num {
  flex: none;
  font-family: var(--font-head);
  font-size: clamp(3.25rem, 7vw, 4.75rem);
  line-height: .82;
  color: var(--brand-num);
  font-variant-numeric: lining-nums;
}
/* The figure is filled with a sage-to-brass gradient rather than one flat
   colour. Browsers that cannot do this simply show the sage above, which is
   why the plain colour is set first and never removed. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .tenure-num {
    background: linear-gradient(145deg, var(--brand-num) 0%, var(--brand-dark) 45%, var(--brass) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.tenure-num .plus { font-size: .55em; vertical-align: super; margin-left: .04em; }
.tenure-text { margin: 0; min-width: 0; }
.tenure-text strong {
  display: block;
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: var(--ink); line-height: 1.2;
}
.tenure-text span {
  display: block; margin-top: .3rem;
  font-size: .95rem; color: var(--ink-soft);
}
@media (max-width: 599px) {
  .tenure { gap: .75rem; }
  .tenure-num { font-size: 2.75rem; }
}

/* Centred to match the seal above it. The narrow layout further down lays
   the card on its side — seal beside wording — and puts the text back to
   the left, where centring would look ragged. */
.creds figcaption { font-size: 1rem; line-height: 1.45; color: var(--ink-soft); text-align: center; }
.creds figcaption strong {
  display: block; margin-bottom: .2rem;
  font-family: var(--font-head); font-weight: 500;
  font-size: 1.35rem; color: var(--ink);
}
.creds figcaption .by {
  display: block; margin-top: .35rem;
  font-size: .82rem; color: var(--ink-faint);
}

@media (max-width: 899px) {
  /* Below 900px each card lies down: seal on the left, wording on the right,
     one under the other. Three cards in a row would be too narrow here, and
     two-and-one leaves an orphan. The seal's panel is a FIXED width, so the
     three cards line up whatever the shape of the seal inside. */
  .creds, .creds--three { grid-template-columns: 1fr; gap: 1rem; }
  .creds figure {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0;
    padding: 0; align-items: center;
  }
  .creds .badge {
    height: 100%; min-height: 8.5rem; padding: 1rem;
    border-right: 1px solid var(--line);
    align-self: stretch; justify-content: center; align-items: center;
  }
  .creds figcaption { padding: 1rem 1.25rem 1rem 1.1rem; text-align: left; }
  .creds figcaption strong { font-size: 1.3rem; }
  /* No hover on touch devices — the badge is simply shown larger instead. */
  .creds figure:hover, .creds figure:focus-within { transform: none; box-shadow: none; }
  .creds figure:hover .badge img,
  .creds figure:focus-within .badge img { transform: none; filter: none; }
  .creds .badge { height: auto; flex: none; }
  .creds .badge img { max-height: 84px; cursor: auto; }
}

/* ==========================================================================
   A framed certificate or award document
   --------------------------------------------------------------------------
   For an award that is a full printed certificate rather than a small seal.
   It is shown at a size you can actually read, matted on a tinted ground the
   way a framed document is, with the wording repeated underneath so nothing
   depends on being able to see the picture.
   ========================================================================== */
.certificate {
  margin: 2.5rem 0 0;
  display: grid; gap: 1.5rem; align-items: center;
  /* On a phone this is one column and the picture fills it. The two-column
     arrangement below only starts once there is room for it. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding: 1.75rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
}
@media (min-width: 600px) {
  /* The picture takes a share of the width rather than a fixed 400px, so the
     wording beside it always has room on a small tablet. */
  .certificate { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 2rem; }
}
@media (min-width: 900px) {
  .certificate { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 2.5rem; }
}
/* The wording beside it stops at a comfortable reading measure rather than
   running the full width of the panel. */
.certificate figcaption { max-width: 44ch; }

/* The compact version, used on the home page where the certificate sits
   under the three credential cards and should not out-shout them. */
.certificate--compact { margin-top: 1.25rem; padding: 1.25rem; }
@media (min-width: 600px) {
  .certificate--compact { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 2rem; }
}
.certificate img {
  width: 100%; height: auto;
  max-width: 420px;
  max-width: min(420px, 72vw);           /* a phone does not need it full width */
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.certificate:hover img { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.certificate a { display: block; }
.certificate figcaption {
  font-family: var(--font-head); font-size: 1.15rem; line-height: 1.5;
  color: var(--ink-mid);
}
.certificate figcaption .label { display: block; margin-bottom: .5rem; color: var(--brass); }
.certificate figcaption strong {
  display: block; margin-bottom: .5rem;
  font-family: var(--font-head); font-weight: 500;
  font-size: 1.45rem; color: var(--ink); line-height: 1.2;
}
.certificate .cert-note {
  display: block; margin-top: .9rem;
  font-family: var(--font); font-size: .82rem; color: var(--ink-faint);
}
/* Fingers, not cursors, on a phone — there is nothing to click through to
   that the picture is not already showing at a readable size. */
@media (hover: none) {
  .certificate .cert-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .certificate:hover img { transform: none; }
}

/* ==========================================================================
   Definition rows with dotted leaders (office hours, phone, fax)
   ========================================================================== */
.rows { margin: 0; }
.rows div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem;
  padding: .45rem 0; border-bottom: 1px dotted var(--line-dot);
}
.rows div:last-child { border-bottom: 0; }
.rows dt { color: var(--ink-soft); }
.rows dd {
  margin: 0 0 0 auto;
  font-family: var(--font-head); font-size: 1.05rem; color: var(--ink);
  /* Keep a time range on one line. Without this the value breaks after every
     word and stacks vertically when the column is narrow. If the pair cannot
     fit side by side the row wraps as a whole instead. */
  white-space: nowrap;
}

.facts {
  display: grid; gap: 0;
  /* Sized to what each column actually holds rather than equal thirds —
     equal thirds left the telephone marooned in half a column of nothing. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.facts > .fact { padding-left: 2.5rem; padding-right: 2.5rem; border-left: 1px solid var(--line); }
.facts > .fact:first-child { padding-left: 0; border-left: 0; }
.facts > .fact:last-child { padding-right: 0; }
/* Keep the dotted leaders from stretching into a wide, sparse run. */
.facts .rows { max-width: 21rem; }
@media (max-width: 899px) {
  .facts { grid-template-columns: 1fr; }
  .facts .rows { max-width: none; }
  .facts > .fact {
    padding: 1.75rem 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1.75rem;
  }
  .facts > .fact:last-child { padding-right: 0; }
  .facts > .fact:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
}
/* single-column variant (contact page sidebar) keeps simple stacking */
.facts--stack { grid-template-columns: 1fr; }
.facts--stack .rows { max-width: none; }
.facts--stack > .fact {
  padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1.5rem;
}
.facts--stack > .fact:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.fact h2, .fact h3 {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font); font-size: .75rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: .8rem;
}

/* ==========================================================================
   ICONS
   --------------------------------------------------------------------------
   Small line drawings — a clock beside the office hours, a pin beside the
   address, and so on. They are drawn directly inside the page as <svg>, not
   loaded from anywhere, so there is nothing to download and nothing that can
   expire. (The old site used a Font Awesome account belonging to the
   previous developer; these cannot stop working the same way.)

   Every icon is decorative. The word beside it always says the same thing,
   so each one carries aria-hidden="true" and screen readers skip it.

   TO CHANGE AN ICON: the shapes live in the page files, marked with a
   comment. Their size and colour are set here.
   ========================================================================== */
.ico {
  flex: none;
  width: 1.15em; height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}
.ico--lg { width: 1.6em; height: 1.6em; }

/* An icon set inside a small tinted square, used where it needs to read as
   a marker rather than as part of the wording. */
.ico-chip {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--tint-2);
  border: 1px solid var(--line);
  color: var(--brand-dark);
  transition: background-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.ico-chip .ico { width: 1.15rem; height: 1.15rem; }

/* The chip sits on the same line as the heading it belongs to, to the left of
   the words, rather than on a line of its own above them. Stacked, it cost a
   whole row of height in each card for no more meaning — and the headings on
   the Contact page have always carried their icons inline like this, so the
   two now match. Sized a little smaller here than when it stood alone, so it
   sits with the type rather than towering over it. */
h2 > .ico-chip, h3 > .ico-chip {
  width: 1.9rem; height: 1.9rem;
  margin-right: .6rem;
  vertical-align: -.42rem;   /* optically centred against the cap height */
}
h2 > .ico-chip .ico, h3 > .ico-chip .ico { width: 1rem; height: 1rem; }

.duo > div:hover .ico-chip,
.routing div:hover .ico-chip {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
}

/* On the dark band the icons pick up the brass accent instead of sage. */
.section--deep .ico { color: var(--on-deep-accent); }
.section--deep .ico-chip {
  background: rgba(249, 243, 231, .16);
  border-color: rgba(249, 243, 231, .42);
  color: var(--on-deep-accent);
}
/* --- "All times Pacific" -------------------------------------------------
   The practice is in Washington and also sees patients in California by
   telehealth. Both are on Pacific time, but a telehealth patient travelling,
   or anyone reading from elsewhere, should not have to guess. It is set
   small and faint because it is a footnote, not a fact anyone came for.

   NOTE ON WORDING: this says "Pacific", not "PST". Pacific Standard Time
   only applies from November to March — for the rest of the year the clocks
   here are on Pacific Daylight Time, so a site that says "PST" all year is
   wrong for about eight months of it. "Pacific" is correct in both. */
.tz {
  margin: .7rem 0 0;
  font-size: .78rem; letter-spacing: .06em;
  color: var(--ink-faint);
}
.footer .tz {
  margin-top: .65rem;
  color: var(--footer-faint);
  font-size: .75rem;
}
.section--deep .tz { color: var(--on-deep-soft); }

.fact .big { font-family: var(--font-head); font-size: 1.5rem; margin: 0; }
.fact .big a { text-decoration: none; }
.fact .sub { margin: .35rem 0 0; color: var(--ink-soft); }
.fact .sub span { color: var(--ink); }

/* ==========================================================================
   "The essentials" — at-a-glance strip at the top of policy pages
   ========================================================================== */
.essentials {
  background: var(--tint);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  padding: 1.5rem 1.75rem;
  margin-block: 1.5rem;
}
.essentials > .label { display: block; margin-bottom: 1.1rem; }
.essentials-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.essentials-grid > div { padding: 0 1.75rem; border-left: 1px solid var(--line-strong); }
.essentials-grid > div:first-child { padding-left: 0; border-left: 0; }
.essentials dt { font-size: .82rem; color: var(--ink-soft); margin-bottom: .3rem; }
.essentials dd {
  margin: 0; font-family: var(--font-head); font-size: 1.35rem; color: var(--ink);
}
.essentials > .label { color: var(--brass); }
.essentials .money { color: var(--fee); }
@media (max-width: 599px) {
  .essentials-grid > div {
    padding: .8rem 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .essentials-grid > div:first-child { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   SECTION RAIL — the "on this page" index
   --------------------------------------------------------------------------
   A sticky index that travels down the page with the reader. Every section is
   named at all times — nothing is hidden behind a hover, which matters for an
   older audience — and the section currently on screen is marked by a tall
   sage tick and darker, heavier type. Each row is a real link, so you can
   jump straight to any section.

   Below 1100px it collapses to a plain list at the top of the page.
   ========================================================================== */
/* Below 1100px the index is a row of small buttons that wraps as needed —
   every section still named, each a comfortable tap, and the row is only a
   line or two tall instead of a list down the page. */
.onpage ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.onpage li { border-bottom: 0; }
.onpage a {
  display: flex; gap: .6rem; align-items: center;
  min-height: 44px; padding: .5rem .9rem; text-decoration: none;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--page); border: 1px solid var(--line);
}
.onpage a:hover { color: var(--brand-dark); }
.onpage .num { font-family: var(--font-mono); color: var(--brand-dark); font-weight: 400; }
.onpage .rail-tick { display: none; }

@media (min-width: 1100px) {
  /* Parks below the sticky masthead, never underneath it. */
  .onpage { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
  .onpage > .label { display: block; margin-bottom: .9rem; }

  /* the hairline every tick sits against */
  .onpage ol {
    position: relative;
    display: flex; flex-direction: column; gap: .1rem;
    padding-left: 1rem;
  }
  .onpage a { min-height: 0; padding: .45rem 0; background: none; border: 0; }
  .onpage ol::before {
    content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
    width: 1px; background: var(--line-strong);
  }
  .onpage li { border-bottom: 0; }

  .onpage a {
    position: relative;
    align-items: center; gap: .7rem;
    padding: .45rem 0;
    font-size: .74rem; letter-spacing: .08em;
    color: var(--ink-faint);
    transition: color .3s ease;
  }
  .onpage .num { display: none; }

  /* tick sits on the hairline, to the left of the name */
  .onpage .rail-tick {
    display: block; flex: none;
    position: absolute; left: -1rem;
    width: 3px; height: 9px;
    background: var(--line-dot);
    transition: height .3s ease, background-color .3s ease, width .3s ease;
  }

  .onpage a:hover { color: var(--brand-dark); }
  .onpage a:hover .rail-tick { height: 16px; background: var(--brand); }

  /* the section you are currently reading */
  .onpage a[aria-current="true"] {
    color: var(--brand-dark);
    font-weight: 700;
  }
  .onpage a[aria-current="true"] .rail-tick {
    height: 26px; width: 3px; background: var(--brand-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onpage a, .onpage .rail-tick { transition: none; }
}

/* ==========================================================================
   Numbered sections — hanging serif numerals
   ========================================================================== */
.numsec {
  position: relative;
  display: grid; gap: 1rem;
  padding-block: 2rem;
  padding-inline: 1rem;
  margin-inline: -1rem;
  border-top: 1px solid var(--line);
  transition: background-color var(--fast) var(--ease);
}
@media (min-width: 600px) { .numsec { grid-template-columns: 3.25rem 1fr; gap: 1.5rem; } }

/* Pointing at a row tints it and grows a sage bar up its left edge. It is
   only an acknowledgement that the cursor is there — these rows are not
   links and nothing happens when you click them. */
.numsec::before {
  content: "";
  position: absolute; left: 0; top: -1px; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brass) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--slow) var(--ease);
}
.numsec:hover { background: var(--wash); }
.numsec:hover::before { transform: scaleY(1); }

/* --- The same rows laid out as a grid of cards ---------------------------
   Used for "Conditions we treat" on the home page. Six items in a single
   file made for a long scroll past very short paragraphs; in two or three
   columns the whole list is takeable in at a glance.
   ------------------------------------------------------------------------ */
.numgrid {
  display: grid; gap: 1.25rem;
  /* min(100%, …) keeps a card from ever being wider than the screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: 1.25rem;
}
.numgrid .numsec {
  margin-inline: 0;
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              border-top-color var(--fast) var(--ease);
}
.numgrid .numsec:hover {
  background: var(--page);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--brass);
}
/* The growing left bar belongs to the single-file list, not to a card. */
.numgrid .numsec::before { display: none; }
.numgrid .numsec h3 { margin-bottom: .25rem; }
.numgrid .numsec p { margin-bottom: 0; }

/* ON A PHONE THE NUMERAL AND THE TITLE SHARE THE TOP LINE. Stacked, the two
   digits took a whole row of each card, and with six cards one under the
   other that was six rows of mostly empty card. The inner box is dissolved
   (display: contents) so the title can sit beside the numeral, while the
   sentence beneath keeps the full width of the card. The numeral is set
   smaller here so it reads as a marker beside the title rather than towering
   over it. Above 600px the numeral goes back to its own column on the left.
   Added 1 September 2026 at Stephen's request. */
@media (max-width: 599px) {
  .numgrid .numsec {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .8rem; row-gap: .45rem;
    align-items: baseline;
  }
  .numgrid .numsec > div { display: contents; }
  .numgrid .numsec > .num { grid-column: 1; grid-row: 1; font-size: 1.9rem; }
  .numgrid .numsec > div > h3 { grid-column: 2; grid-row: 1; margin: 0; }
  /* The description sits under a hairline, a step smaller and a shade softer
     than body text, so the card reads as a titled entry — numeral and title
     as the heading, the conditions as the note beneath — rather than as a
     heading followed by a paragraph of the same weight. Upright, not italic:
     this site keeps italic serif for ledes and for other people's words. */
  .numgrid .numsec > div > p {
    grid-column: 1 / -1;
    margin-top: .15rem; padding-top: .6rem;
    border-top: 1px solid var(--line);
    font-size: .95rem; line-height: 1.55; color: var(--ink-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .numgrid .numsec:hover { transform: none; }
}

.numsec > .num {
  font-family: var(--font-head); font-size: 2.5rem; line-height: 1;
  color: var(--brand-num); font-variant-numeric: lining-nums;
  transition: color var(--fast) var(--ease);
}
.numsec:hover > .num { color: var(--brass); }
.numsec h2 { margin-top: -.4rem; }

/* Two-column layout for page body + sidebar nav */
.with-aside { display: grid; gap: 2.5rem; }
@media (min-width: 1100px) {
  /* Article first, index second — the eye lands on text, not on the index. */
  .with-aside { grid-template-columns: minmax(0, 1fr) 200px; gap: 3rem; }
  .with-aside > .onpage { order: 2; }
}

/* ==========================================================================
   Fee notice — every dollar amount on the site
   ========================================================================== */
.fee-notice {
  display: grid; gap: 1.25rem; align-items: start;
  background: var(--fee-bg); border-top: 3px solid var(--fee);
  padding: 1.5rem 1.75rem; margin-block: 1.75rem;
}
@media (min-width: 600px) { .fee-notice { grid-template-columns: auto 1fr; gap: 2rem; } }
.fee-notice .figure {
  font-family: var(--font-head); font-size: 2.75rem; line-height: 1;
  color: var(--fee); white-space: nowrap;
}
.fee-notice .label { color: var(--fee); display: block; margin-bottom: .4rem; }
.fee-notice p { margin: 0; color: var(--ink-mid); }

/* ==========================================================================
   Checklist — printed-form squares
   ========================================================================== */
.checklist { list-style: none; margin: 1rem 0; padding: 0; }
.checklist li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.checklist li::before {
  content: ""; flex: none; margin-top: .3rem;
  width: 15px; height: 15px;
  border: 1.5px solid var(--brand); background: var(--page);
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.checklist li:hover::before { background: var(--brand); border-color: var(--brand-dark); }

/* ==========================================================================
   Numbered steps — hanging serif numerals, key step highlighted
   ========================================================================== */
.steps { list-style: none; counter-reset: step; margin: 1rem 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  /* NOT display:grid — that would turn every word and <strong> inside the
     step into its own grid cell and break the sentence apart. Normal flow
     with an absolutely-positioned numeral keeps the text running as text. */
  padding: .7rem .9rem .7rem 3rem;
}
.steps li::before {
  content: counter(step) ".";
  position: absolute; left: .6rem; top: .55rem;
  font-family: var(--font-head); font-size: 1.35rem; color: var(--brand-dark);
}
.steps li.key {
  background: var(--tint);
  border-left: 3px solid var(--brand);
}
.steps li.key::before { left: .9rem; color: var(--brass); }

/* Inline code token (the practice room code) */
.token {
  font-family: var(--font-mono); font-size: .95rem;
  background: var(--page); border: 1px solid var(--line-strong);
  padding: .2rem .55rem;
  /* If a long code wraps, each line keeps its own border rather than
     leaving one stretched box with text spilling out of it. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 599px) {
  /* On a phone the room code gets its own line so it is easy to read
     and to copy, instead of wrapping mid-phrase inside the sentence. */
  .steps .token { display: block; margin-top: .45rem; width: fit-content; }
}
.roomcode {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: 1.25rem 0; margin-block: 1.75rem;
}
.roomcode .label { display: block; margin-bottom: .3rem; }
.roomcode .note { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .7rem; }
.roomcode .token { font-size: 1.05rem; }

/* ==========================================================================
   Timeline — lead times, serif figure + italic unit
   ========================================================================== */
.timeline {
  display: grid; gap: 0; margin-block: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.timeline > div { padding: 0 1.5rem; border-left: 1px solid var(--line-strong); }
.timeline > div:first-child { padding-left: 0; border-left: 0; }
.timeline .figure { font-family: var(--font-head); font-size: 1.9rem; line-height: 1.1; }
.timeline .unit { font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.timeline .label { display: block; margin: .4rem 0 .5rem; }
.timeline p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.timeline .strict .label { color: var(--fee); }
.timeline .strict .figure { color: var(--fee); }
@media (max-width: 599px) {
  .timeline > div {
    padding: 1rem 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .timeline > div:first-child { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   Download list (forms) and link clusters (resources)
   ========================================================================== */
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list li { border-bottom: 1px solid var(--line); }
.dl-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1rem .75rem; text-decoration: none; color: var(--ink); font-weight: 600;
  border-left: 3px solid transparent;
  transition: color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              border-left-color var(--fast) var(--ease);
}
.dl-list a:hover {
  color: var(--brand-dark);
  background: var(--wash);
  border-left-color: var(--brand);
}
.dl-list .type {
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .06em; color: var(--ink-faint); white-space: nowrap;
}

.cluster { margin-bottom: 2.5rem; }
.cluster h2, .cluster h3 {
  border-bottom: 2px solid var(--brand);
  padding-bottom: .5rem;
}
.cluster ul { list-style: none; margin: 0; padding: 0; }
.cluster li { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.cluster a { font-weight: 600; }
.cluster p { margin: .2rem 0 0; font-size: .92rem; color: var(--ink-soft); }

/* ==========================================================================
   Data tables — horizontal rules only, scroll sideways on small screens
   ========================================================================== */
.data-table { overflow-x: auto; margin-block: 1.5rem; }

/* A grid item refuses to be narrower than its widest contents unless it is
   told it may shrink. Without this, the wide comparison table on the insulin
   pump page stretches its column — and with it the whole page — well past the
   width of a phone screen, and the page ends up scrolling sideways.
   min-width: 0 lets the column shrink to the screen; the table then scrolls
   sideways inside its own box, which is what .data-table is for. */
.with-aside > *, .numsec > * { min-width: 0; }
.data-table table { border-collapse: collapse; width: 100%; min-width: 640px; }
.data-table caption {
  text-align: left; font-family: var(--font-head); font-size: 1.3rem;
  padding-bottom: .75rem;
}
.data-table th, .data-table td {
  text-align: left; vertical-align: top;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.data-table thead th {
  border-bottom: 2px solid var(--brand);
  background: var(--tint);
  font-family: var(--font); font-size: .75rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase; color: var(--brand-dark);
}
/* EVERY CELL IS PADDED ON BOTH SIDES. The first column used to sit flush
   against the left edge so it lined up exactly with the words above the
   table, but that put the heading row's wording hard against the edge of
   its tinted band and left the row headings touching the hairline beside
   them. A shade of inset on the first column costs a few pixels of that
   alignment and buys every cell room to breathe.
   TO WIDEN OR TIGHTEN THE WHOLE TABLE, change the two numbers in the
   padding above; this line only trims the outermost edge. */
.data-table th:first-child, .data-table td:first-child { padding-left: .95rem; }
.data-table tbody th { font-weight: 600; color: var(--ink); }
.data-table tbody tr { transition: background-color var(--fast) var(--ease); }
.data-table tbody tr:hover { background: var(--wash); }

/* ==========================================================================
   Page head band on interior pages
   ========================================================================== */
/* The band every interior page opens with. It sits on the same soft wash as
   the home page hero so the two feel like one site, and carries a sage-to-
   brass rule along its bottom edge. */
.page-head {
  position: relative;
  background:
    radial-gradient(90% 120% at 92% 0%, var(--tint) 0%, rgba(238, 241, 224, 0) 66%),
    linear-gradient(178deg, var(--wash) 0%, var(--page) 88%);
  border-bottom: 1px solid var(--line);
}
.page-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg,
              var(--brand) 0%, var(--brass) 30%, transparent 72%);
}
.page-head .wrap { padding-block: clamp(2rem, 3.4vw, 2.85rem); }

/* Same brass dash that introduces the home page headline. */
.page-head .eyebrow {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: .9rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase; color: var(--brand-dark);
}
.page-head .eyebrow::before {
  content: ""; flex: none;
  width: 2.25rem; height: 2px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brand) 100%);
}
.page-head h1 { margin-bottom: .5rem; }

/* The page heading settles in when the page opens, like the home page one. */
.page-head .eyebrow { animation: settle-in .55s var(--ease) .04s both; }
.page-head .lede    { animation: settle-in .55s var(--ease) .16s both; }
@media (prefers-reduced-motion: reduce) {
  .page-head .eyebrow, .page-head .lede { animation: none; }
}

/* ==========================================================================
   Closing band — the "accepting new patients" block at the foot of a page
   ========================================================================== */
.cta .wrap { padding-block: clamp(.5rem, 1.5vw, 1.25rem); }
.cta .eyebrow {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: .9rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--on-deep-accent);
}
.cta .eyebrow::before {
  content: ""; flex: none; width: 2.25rem; height: 2px;
  background: linear-gradient(90deg, var(--on-deep-accent) 0%, var(--brand) 100%);
}
.cta h2 { max-width: 22ch; margin-bottom: .6rem; }
.cta .lede { max-width: 52ch; margin-bottom: 1.75rem; }

/* Her credentials, in one line at the foot of the closing band on every page.
   These are the things she has earned, so they are set to be read rather than
   tucked away: the three names in near-white, what each one is in a quieter
   tone beside it, and brass dots between them. The dots are hidden from
   screen readers, which announce the line as one continuous sentence.

   TO CHANGE THE WORDING: it appears in all eight pages carrying the closing
   band, and should agree with the credentials on the home and About pages. */
/* HER CREDENTIALS, one to a line.
   --------------------------------------------------------------------------
   Set as a list rather than a sentence, because that is what they are: three
   separate standings, not one running remark. One to a line means none can
   ever be broken in half by a line ending — an earlier version ran them
   together and the wrap fell between "ECNU" and "certified".

   Each opens with a brass rule the width of a thumbnail. It is the same
   gesture as the rule under the eyebrow at the top of the band, so the two
   ends of the band answer each other. */
.cta-creds {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--on-deep-soft);
}
/* The rule hangs in the margin rather than sitting in the line, so the words
   run on unbroken beside it.

   NOT a flex row, which is what this was first written as. Making the item a
   flex container turns its own contents into flex items — the name in bold
   became one item and the words after it another, and the two wrapped in
   separate narrow columns, which read as gibberish on a telephone. Kept as
   ordinary text with the rule positioned beside it, the sentence stays a
   sentence. */
.cta-creds li {
  position: relative;
  padding-left: 1.95rem;
}
.cta-creds li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 1.15rem; height: 2px;
  background: var(--brass);
}
.cta-creds strong {
  color: #f6f3e8;
  font-weight: 600;
  letter-spacing: .01em;
}

/* A list reads left, even inside a band whose heading and sentence are
   centred: the three rules line up under one another and the eye runs down
   them. The block itself is centred, so it still sits under the middle of
   the band rather than against its left edge. */
.cta-creds {
  text-align: left;
  width: fit-content;
  margin-inline: auto;
}

/* The button follows the credentials on a telephone, so it needs its own
   space above. On a wide screen the buttons move out to their own column and
   this is overridden. */
.cta .hero-actions { margin-top: 1.6rem; }

/* TWO COLUMNS ON A WIDE SCREEN: the wording on the left, the two things to
   do about it on the right.
   --------------------------------------------------------------------------
   This arrangement was here before, went away for a while, and has come
   back — the history is worth a sentence, because it explains the shape.

   It exists so the band is filled across its width rather than trailing off
   into empty space. That holds while the right-hand column has enough in it
   to answer the wording beside it. For a while it did not: the telephone
   button had been taken out, and one small button could not hold up a column
   on its own, so the band was centred instead. With both buttons back the
   column carries its weight again, and two columns beat a centred stack —
   the wording reads as a paragraph rather than as a poster, and the buttons
   sit together where the eye ends up.

   The rows are declared up front so the buttons can span all four of them.
   "1 / span 4", not "1 / -1": -1 counts against rows declared in advance,
   and these are created as the items land, so -1 resolves back to line 1 and
   the buttons land in the first row instead of beside all four. */
@media (min-width: 900px) {
  .cta .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    text-align: left;
  }
  .cta .eyebrow { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .cta h2       { grid-column: 1; grid-row: 2; margin-inline: 0; }
  .cta .lede    { grid-column: 1; grid-row: 3; margin-inline: 0; margin-bottom: 0; }
  .cta-creds    { grid-column: 1; grid-row: 4; margin-inline: 0; width: auto; }

  .cta .hero-actions {
    grid-column: 2;
    grid-row: 1 / span 4;
    flex-direction: column; align-items: stretch;
    gap: .9rem;
    margin-top: 0;          /* the column has its own alignment */
  }
  .cta .hero-actions .btn { text-align: center; white-space: nowrap; }
}

/* ==========================================================================
   Pull quote
   ========================================================================== */
blockquote.pull {
  margin: 0; font-family: var(--font-head); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.4; color: var(--ink);
}
blockquote.pull cite {
  display: block; margin-top: .9rem;
  font-family: var(--font); font-style: normal; font-size: .8rem;
  letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-faint);
}

/* ==========================================================================
   Simple two-column card row (portal / pay bill)
   ========================================================================== */
.duo { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .duo { grid-template-columns: 1fr 1fr; } }

/* Two cards rather than two columns separated by a rule. Each has a coloured
   rule along the top — sage for the portal, rust for the one about money,
   matching the colour every dollar amount on the site is already set in. */
.duo > div {
  padding: 1.75rem 1.75rem 2rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-dark);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.duo > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.duo > div + div { border-top-color: var(--fee); }
.duo h2 { margin-bottom: .6rem; }

/* --- Insurance list -------------------------------------------------------
   Each plan is a small tile rather than a line with a rule under it. Set in
   a grid so the tiles line up in columns instead of ending wherever the
   name happens to stop.

   TO UPDATE THE LIST: the names live on the home page, not here. */
.plans {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.plans li {
  font-family: var(--font-head); font-size: 1.1rem; color: var(--ink);
  padding: .8rem 1rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  transition: border-left-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.plans li:hover {
  border-left-color: var(--brass);
  background: var(--wash);
  transform: translateX(2px);
}

/* --- Accepted insurance, as bubbles (home page) --------------------------
   The plan names used to be one italic sentence. To find out whether a plan
   was on it you had to read the whole line, which is the opposite of what
   somebody scanning for their own insurer wants. Each name now sits in its
   own bubble, so the eye can jump between them and stop at the right one.

   This is the short list on the home page. The Billing page carries the full
   list as .plans — larger tiles with a tick against each. Two treatments on
   purpose: this one is a glance, that one is the reference.

   The bubbles are not links and do not respond to the cursor, because there
   is nowhere for them to go. They are labels.

   TO MAKE THEM FULLY ROUND: change --pill-radius below to 999px. It reads the
   site's standard corner instead, because nothing else on this site is fully
   round — see --radius in the settings at the top of this file. */
.pills {
  --pill-radius: var(--radius);
  list-style: none;
  /* A row of boxes needs a little more air under a heading than a line of
     text did — the borders sit closer to the eye than letters do. */
  margin: .5rem 0 1.5rem;
  padding: 0;
  display: flex; flex-wrap: wrap;
  gap: .6rem;
}
.pills li {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink);
  padding: .55rem 1.1rem;
  background: var(--page);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill-radius);
  box-shadow: var(--shadow-sm);
}

/* On a phone the bubbles get a little tighter so more than one fits a line. */
@media (max-width: 599px) {
  .pills { gap: .45rem; }
  .pills li { font-size: 1.05rem; padding: .5rem .9rem; }
}

/* Contact routing table */
.routing { margin: 0; }
/* The routing blocks are short — a label and a line of text each — so on a
   wide screen they run side by side across the whole band rather than down a
   single narrow column with the rest of the width left empty beside them.

   auto-fit is doing the deciding: as many columns as fit at 17rem or wider,
   which is three across the contact page, two in the narrower column on the
   patients page, and one on a phone. Nothing has to be told how many blocks
   there are. The max-width undoes the reading measure inherited from .prose,
   which is meant for running text and is what was holding these in. */
.routing {
  max-width: none;
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  /* Every block in the row is drawn to the height of the tallest one, so the
     boxes and the green bars down their left edges all finish on the same
     line. Left to themselves they end wherever their sentence happens to
     stop, which reads as three loose cards rather than one set. */
  align-items: stretch;
}
.routing div {
  padding: 1rem 1rem 1rem 1.1rem;
  margin-bottom: 0;
  background: var(--page);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  transition: border-left-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.routing div:hover { border-left-color: var(--brass); box-shadow: var(--shadow-sm); }

.routing dt {
  display: flex; align-items: center; gap: .55rem;
  /* These labels were set in the mid olive at 12px with wide letter-spacing,
     which measured 5.2:1 against the card while the sentence directly beneath
     them measured 11.4:1 — the heading was half the strength of the text it
     introduces, so it read as washed out. Set in the deep green at a heavier
     weight it comes to about 10.7:1 and leads the block properly. */
  font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-deep);
  /* A rule under the label. width:fit-content is what keeps it to the width
     of the words rather than running the whole way across the block. */
  width: fit-content;
  max-width: 100%;
  padding-bottom: .34rem;
  border-bottom: 1px solid var(--brand-dark);
  margin-bottom: .6rem;
}
.routing dd { margin: 0; color: var(--ink-mid); }

/* ==========================================================================
   THE MAP
   --------------------------------------------------------------------------
   The map runs the full width of the window, edge to edge, as its own band
   underneath the address and hours. A map boxed into half a column is too
   small to orient yourself with; at full width you can actually see where
   the office sits relative to the roads around it.

   TO CHANGE THE ADDRESS SHOWN: the map lives on contact.html and is loaded
   by a web address that has the street address written into it in plain
   words. Edit the address in that link and the map moves. There is nothing
   else to configure and no account involved.
   ========================================================================== */
.map-band {
  position: relative;
  border-block: 1px solid var(--line-strong);
  background: var(--tint);
}
/* A brass hairline along the top, matching the other bands on the site. */
.map-band::before {
  content: "";
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg,
              var(--brand) 0%, var(--brass) 45%, var(--brand) 100%);
}
.map-band iframe {
  display: block; width: 100%; border: 0;
  /* Tall enough to be useful, but never more than about half the window on
     a laptop, so the page below it is still discoverable. */
  height: clamp(300px, 46vh, 500px);
  /* The embed is a little brighter than the rest of the site; taking a few
     percent of the saturation out settles it into the page. It returns to
     full colour when you interact with it. */
  filter: saturate(.88) contrast(1.02);
  transition: filter var(--slow) var(--ease);
}
.map-band:hover iframe, .map-band:focus-within iframe { filter: none; }


/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: linear-gradient(180deg, #2f2a20 0%, var(--footer-bg) 100%);
  color: #d9d5cb;
  border-top: 3px solid var(--brass);
}
.footer .wrap { padding-block: 3rem 1.5rem; }
.footer a {
  color: #fff;
  transition: color var(--fast) var(--ease);
}
.footer a:hover { color: var(--brass-lit); }
.footer h2, .footer h3 {
  font-family: var(--font); color: var(--brass-lit);
  font-size: .75rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase; margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .35rem; }
.footer li a { display: inline-block; padding: .3rem 0; }   /* thumb-sized rows */
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
/* On a phone the two short link lists share a row, which takes about a
   screen's worth of scrolling out of the foot of every page. */
@media (max-width: 599px) {
  /* One two-column grid the whole way down, so every band of the footer
     lines up on the same two columns instead of each section bringing its
     own arrangement. The name spans the top; the address and telephone
     numbers take the left column with the hours beside them on the right —
     the numbers are two short lines, and the empty half-column that used to
     hang under them is exactly where the hours fit; then the two link lists.
     The left column is a little wider than the right because a telephone
     number is wider than a time.

     The first block's own wrapper is dissolved (display: contents) so the
     name and the two paragraphs inside it can sit on this grid directly —
     the footer markup is repeated on every page, so the pages themselves
     stay untouched. */
  .footer-grid {
    /* The left column gets a small edge: "Phone 425-289-0374" is the
       widest line either column holds, and at an even split it broke after
       "Phone" while the fax line beside it fitted whole. The times on the
       right are narrower and never needed the difference. */
    grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
    /* The hours run taller than the address and the numbers beside them.
       The third row is the flexible one, so the leftover height gathers
       below the telephone numbers at the foot of the left column — without
       this the grid splits the slack between the rows and opens a gulf
       between the address and the numbers. */
    grid-template-rows: auto auto 1fr;
    gap: 1.35rem 1.5rem;
  }
  .footer-grid > :nth-child(1) { display: contents; }
  /* On a phone the name takes two lines; the loose paragraph line-height it
     inherits pulls them apart, so it gets a heading's spacing instead. */
  .footer-name { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; line-height: 1.3; }
  .footer-grid > :nth-child(1) > p { grid-column: 1; margin-bottom: 0; align-self: start; }
  .footer-grid > :nth-child(2) { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
  /* The number never breaks in the middle: the line wraps before it instead. */
  .footer a[href^="tel:"] { white-space: nowrap; }

  /* Stacked into one narrow column the footer ran to over 1000px — a lot of
     scrolling past very little. The air between things is reduced; the type
     size is not, and neither is the padding on the links, which is what a
     thumb aims at. (These rules have to live HERE, after the rules they are
     tightening. Written earlier in the file they lost to them: same
     specificity, and the later rule wins.) */
  .footer h3 { margin-bottom: .6rem; }
  .footer p { margin-bottom: .6rem; }
  .footer-name { margin-bottom: .4rem; }
  .footer li { margin-bottom: 0; }   /* the link's own padding is the tap area */
  /* In the half-width column a day and its times no longer fit side by
     side, so each pair stacks: the day, then the times beneath it, the
     dotted rule still separating the pairs. The dd's margin-left: auto was
     what pushed the time to the right edge; with the pair stacked it would
     push the time line right on its own, so it goes. */
  .footer .rows div { display: block; padding-block: .35rem; }
  /* The site-wide rule keeps a time range on one line, which in this
     half-width column pushed "8:00 AM - 3:00 PM" past the edge of the
     screen. A size down it fits; on the very narrowest screens it may
     break after the dash, which reads fine - two clean halves. */
  .footer .rows dd { margin-left: 0; white-space: normal; font-size: 1rem; }
  .footer-base { margin-top: 1.5rem; }
  /* Room under the last line for the back-to-top button, which floats over
     the page and comes to rest here. The button is 48px tall and sits 1rem
     (16px) above the foot, so it occupies the band from 16px to 64px up from
     the bottom of the page; this reserves 76px, which clears it with a little
     air to spare. It used to reserve 52px — 12px short — which is why the
     button used to hide itself near the footer rather than simply sitting in
     the space kept for it. If the button's size or its 1rem offset changes in
     the .to-top rule further down, change this number to match. */
  .footer-base { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}
.footer-name { font-family: var(--font-head); font-size: 1.25rem; color: #fff; margin-bottom: .6rem; }
/* The hours list on the dark ground. */
.footer .rows { max-width: 18rem; }
.footer .rows div { border-bottom-color: rgba(255, 255, 255, .18); padding: .35rem 0; }
.footer .rows dt { color: #b9b4a6; }
.footer .rows dd { color: #fff; font-size: 1rem; }
.footer-base {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .85rem; color: var(--footer-faint);
}
.footer-base a { color: #d9d5cb; }
.footer-base p { margin: 0; }

/* On anything wider than a phone the back-to-top button floats over the
   bottom right corner, where the last line of the small print would
   otherwise run underneath it. Holding the text 4.5rem clear of the right
   edge keeps them apart. It is the text that is inset, not the box, so the
   rule above the copyright still runs the full width; and because the line
   is set left, nothing about this is visible — it simply wraps a little
   earlier on the rare width where it wraps at all.

   The phone case is handled differently, by the padding-bottom further up:
   there the button sits below the text rather than beside it. */
@media (min-width: 600px) {
  .footer-base p { padding-right: 4.5rem; }
}

/* ==========================================================================
   REVIEWS (About)
   --------------------------------------------------------------------------
   Three short quotations side by side on a wide screen, stacked on a phone.

   Set in the same editorial italic as the ledes and the pull quote, because
   that is the voice this site uses for somebody's words rather than its own.
   Each opens with a brass quotation mark drawn large and set in the margin,
   so the eye can see at a glance that these are quotations and not the
   practice describing itself.
   ========================================================================== */
.reviews {
  display: grid;
  gap: 1.75rem;
  margin-top: 1.75rem;
}
/* Two to a row, not three. These quotations are people's own sentences and
   run four or five lines each; in three narrow columns they became tall
   ribbons of italic. Two wider columns give the wording room to sit, and an
   even number of quotations fills both rows. */
@media (min-width: 800px) {
  .reviews { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }

  /* An odd number of quotations would leave the last one alone against the
     left edge, reading as a mistake. Centred on its own row it reads as the
     end of a list. :last-child:nth-child(odd) is true only when the count
     itself is odd, so this switches itself on and off as reviews are added. */
  .reviews blockquote:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 1.5rem);
  }
}

.reviews blockquote {
  position: relative;
  margin: 0;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.reviews blockquote::before {
  content: "\201C";                 /* an opening double quote */
  position: absolute; top: .35rem; left: -.1rem;
  font-family: var(--font-head);
  font-size: 3.1rem; line-height: 1;
  color: var(--brass);
  pointer-events: none;
}
.reviews blockquote p {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.12rem; line-height: 1.5;
  color: var(--ink-mid);
  margin: 0 0 .9rem;
}
.reviews cite {
  font-family: var(--font);
  font-style: normal;
  font-size: .72rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--ink-faint);
}

.reviews-more { margin-top: 1.9rem; }

/* --- One review, headlined on the home page ------------------------------
   The About page prints the reviews as a set of equal cards. The home page
   prints one, and it is set in a card of the same build as the credential
   cards above it and the portal cards below: page-coloured, a hairline all
   round and a sage rule along the top. On the tinted band it then reads as
   a thing lifted out and shown, rather than words floating on a wash.

   IT IS HELD SHORT ON PURPOSE. An earlier version ran the quotation at
   34 characters a line, which turned three sentences into six lines and a
   band half a screen deep — a visitor on the way to the portal had to
   scroll past all of it. The card is 46rem, which sets this quotation in
   about three lines, and the band's own padding is tighter than the
   standard section.

   The stars sit above the wording and the source below it, so the shape
   reads as a review before a word of it has been read.                   */
.say-band { padding-block: clamp(1.6rem, 3vw, 2.4rem); }

/* The band's label, the same way the Welcome and Credentials bands
   announce themselves. */
.say-label { display: block; text-align: center; margin-bottom: 1rem; }

.say {
  margin: 0 auto;
  max-width: 46rem;
  padding: 1.5rem 2rem 1.6rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  text-align: center;
}
.say-rating { margin: 0 0 .8rem; line-height: 0; }
.say .review-stars { gap: 3px; }
.say .review-stars svg { width: 17px; height: 17px; }

.say-words {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 .85rem;
  text-wrap: pretty;
}
.say cite {
  font-family: var(--font);
  font-style: normal;
  font-size: .72rem; font-weight: 700;
  letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--ink-faint);
}

/* On a telephone the card keeps its shape but gives back the side padding,
   which is the difference between three lines and five. */
@media (max-width: 600px) {
  .say { padding: 1.35rem 1.25rem 1.45rem; }
}

.say-more { margin-top: 1.1rem; text-align: center; }

/* ==========================================================================
   AN ILLUSTRATION BESIDE A SECTION
   --------------------------------------------------------------------------
   Used once, on Services, for the thyroid drawing carried over from the
   previous site. Two things about it are deliberate:

   It is FRAMED rather than placed straight on the page. The drawing is
   bright blue and red, and this site is ivory, sage and brass; a hairline
   and a plinth of the site's own colour hold it as something being shown
   rather than something the page is made of.

   It is HELD TO 260px on a wide screen. Larger and the blue starts to
   compete with the words for attention, which is the wrong way round on a
   page whose job is explaining what happens at an appointment.
   ========================================================================== */
.with-illus { display: grid; gap: 1.75rem; }

@media (min-width: 900px) {
  .with-illus {
    grid-template-columns: 1fr 260px;
    gap: 2.5rem;
    align-items: start;
  }
}

.illus { margin: 0; }
.illus img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);   /* the same corner every other picture has */
  background: var(--panel);
}
.illus figcaption {
  margin-top: .6rem;
  font-size: .85rem; line-height: 1.45;
  color: var(--ink-faint);
}

/* On a phone the drawing follows the words rather than leading them, and is
   kept small enough that it never pushes the next section off the screen. */
@media (max-width: 899px) {
  .illus { max-width: 320px; }
}

/* ==========================================================================
   THE GOOGLE REVIEW BUTTON
   --------------------------------------------------------------------------
   Sits just above the small print. It is pale, unlike every other button on
   the site, for a practical reason rather than a decorative one: the Google
   wordmark inside it is drawn in Google's own four colours, which are made
   for a light background. On the dark green of the footer the blue letters
   in particular would be hard to read.

   TO MAKE IT BIGGER OR SMALLER: change the padding and the font-size on
   .review-btn. The wordmark keeps its own height, set further down.
   ========================================================================== */
.footer-cta { margin-top: 2.25rem; }

/* Written as `.footer .review-btn` rather than `.review-btn` on purpose:
   `.footer a` a few rules above sets every footer link white, and a plain
   class on its own would lose to it — which left the words on this pale
   button white-on-ivory, i.e. invisible. Naming the footer as well outranks
   it properly. Keep both parts if you move this rule. */
.footer .review-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem;
  background: var(--page);
  border: 1px solid #cfc9b6;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 600; font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease,
              transform .15s ease;
}
.footer .review-btn:hover {
  background: #fff;
  border-color: var(--brand);
  color: var(--ink);
  transform: translateY(-1px);
}
.footer .review-btn:focus-visible { outline: 3px solid var(--brass-lit); outline-offset: 3px; }

/* The five stars are drawn in the page rather than fetched. They are the
   amber Google itself uses, so the button reads as a review invitation at a
   glance rather than as one more link. */
.review-stars { display: inline-flex; gap: 1px; color: #f5b400; flex: none; }
.review-stars svg { width: 15px; height: 15px; display: block; }

.review-words { white-space: nowrap; }

/* The height is fixed and the width follows it, so the wordmark can never be
   stretched out of shape. */
.review-google { height: 21px; width: auto; display: block; flex: none; }

/* On a phone the button runs the full width of the footer column, with its
   contents centred. Left to its natural width it sat against the left edge
   with a wide empty space beside it, which read as though it had been left
   there by accident rather than placed. Full width also gives a thumb the
   whole line to aim at. */
@media (max-width: 599px) {
  .footer .review-btn {
    display: flex; width: 100%;
    justify-content: center;
  }
}

/* On the narrowest phones the three parts wrap onto a second line rather
   than any of them being dropped. An earlier version hid the words below
   380px, which left "***** Google" with nothing saying what the button was
   for — on exactly the screens most patients use. */
@media (max-width: 400px) {
  .footer .review-btn {
    flex-wrap: wrap;
    padding: .65rem .95rem; gap: .4rem .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Deliberately restrained. A medical practice should feel calm and steady,
   so nothing slides, bounces or zooms. Elements settle in with a short fade
   and a few pixels of upward drift — enough to feel considered, not enough
   to notice as "an animation".

   Three rules keep it safe:
   1. Anything that reveals on scroll starts fully visible, and is only
      hidden by JavaScript once we know the browser can reveal it again.
      If the script fails, every word on the page is still readable.
   2. Only opacity and transform are animated. Both are handled by the GPU
      and neither causes the page to re-lay-out, so scrolling stays smooth
      and the layout never shifts.
   3. A visitor who has asked their device to reduce motion sees none of it.
   ========================================================================== */

/* --- Interactive feedback ------------------------------------------------ */
.btn {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.link-caps { transition: color .18s ease, border-color .18s ease; }

/* Nav underline grows from the left rather than blinking on */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--brand-dark); }
.nav a:hover { border-bottom-color: transparent; }

/* Download rows and resource links ease on hover */
.dl-list a, .cluster a, .onpage a { transition: color .18s ease; }
.dl-list a { padding-left: 0; transition: color .18s ease, padding-left .18s ease; }
.dl-list a:hover { padding-left: .4rem; }

/* Portraits lift very slightly when pointed at */
.portrait { transition: transform .35s ease; }
.portrait:hover { transform: translateY(-3px); }

/* --- Scroll reveal ------------------------------------------------------- */
/* The class below is added by a small script only when the browser supports
   IntersectionObserver. Without it, content simply stays visible. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

/* Direction. Most things rise into place; these come in from the side or
   grow very slightly instead, so a long page does not repeat one gesture
   over and over. Written on the element as data-reveal="left".            */
.js-reveal [data-reveal="left"]  { transform: translateX(-22px); }
.js-reveal [data-reveal="right"] { transform: translateX(22px); }
.js-reveal [data-reveal="scale"] { transform: scale(.97); }
.js-reveal [data-reveal="fade"]  { transform: none; }
.js-reveal [data-reveal].is-visible { transform: none; }

/* Successive items in a group follow one another by a beat. The position in
   the group is set on the element as style="--i:2" where it is needed; the
   nth-child rules below cover the ordinary case of plain siblings. */
.js-reveal [data-reveal].is-visible { transition-delay: calc(var(--i, 0) * .07s); }
.js-reveal [data-reveal].is-visible:nth-child(2) { transition-delay: .06s; }
.js-reveal [data-reveal].is-visible:nth-child(3) { transition-delay: .12s; }
.js-reveal [data-reveal].is-visible:nth-child(4) { transition-delay: .18s; }
.js-reveal [data-reveal].is-visible:nth-child(5) { transition-delay: .24s; }
.js-reveal [data-reveal].is-visible:nth-child(6) { transition-delay: .30s; }

/* --- The hero settles in when the page opens ----------------------------- */
/* This runs on load rather than on scroll, so the first thing a visitor sees
   arrives rather than simply being there.

   The headline and the photograph are deliberately NOT animated. They are
   the largest things on the screen, and browsers measure how quickly a page
   becomes useful by timing exactly those. Fading them in would make the
   page score as slower than it is. Everything around them moves instead,
   which reads the same and costs nothing. */
@keyframes settle-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero .eyebrow,
.hero .lede,
.hero-rule,
.hero-actions {
  animation: settle-in .6s var(--ease) both;
}
.hero .eyebrow   { animation-delay: .05s; }
.hero .lede      { animation-delay: .16s; }
.hero-rule       { animation-delay: .24s; }
.hero-actions    { animation-delay: .32s; }

/* The block behind the photograph slides out from under it. */
@keyframes plinth-in {
  from { opacity: 0; transform: translate(-14px, -14px); }
  to   { opacity: 1; transform: none; }
}
.portrait-frame::before { animation: plinth-in .8s var(--ease) .25s both; }
.portrait-frame::after  { animation: settle-in .6s var(--ease) .45s both; }

/* --- Anyone who asked for less motion gets none of it -------------------- */
/* This block is the site's single opt-out. Anything animated anywhere above
   must be switched off here as well — if you add motion, add it here too. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal],
  .js-reveal [data-reveal="left"],
  .js-reveal [data-reveal="right"],
  .js-reveal [data-reveal="scale"] { opacity: 1; transform: none; }
  .js-reveal [data-reveal].is-visible { transition: none; transition-delay: 0s; }

  .hero .eyebrow, .hero .lede, .hero-rule, .hero-actions,
  .portrait-frame::before, .portrait-frame::after { animation: none; }

  .btn:hover, .portrait:hover { transform: none; }
  .btn::after, .btn:hover::after { display: none; }
  .nav a::after { transition: none; }
  .dl-list a:hover { padding-left: 0; }
  .creds figure:hover, .creds figure:focus-within,
  .duo > div:hover, .plans li:hover { transform: none; }
  .numsec::before { transition: none; }
  .map-band iframe { transition: none; }
  .masthead, .masthead::after { transition: none; }
  .creds figure:hover .badge img,
  .creds figure:focus-within .badge img { transform: none; }
}

/* ==========================================================================
   BACK TO TOP (every screen size)
   --------------------------------------------------------------------------
   Appears once the visitor is half a screen down, so it is never in the way
   when it isn't useful. Square and sage, like every other control on the
   site.

   Sizing is 48px — comfortably above the 44px minimum for a touch target —
   and it sits clear of the iPhone home indicator via env(safe-area-inset).
   It is a real <button>, so it is reachable by keyboard and announced by
   screen readers; hidden from both when off-screen.

   It used to be shown on phones only. The pages are long on a wide screen
   too, so it now appears at every size; nothing about how it behaves
   changes with the width.
   ========================================================================== */
.to-top {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;

  width: 48px; height: 48px;
  display: flex;
  align-items: center; justify-content: center;

  background: var(--brand-dark);
  border: 1px solid var(--brand-press);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(43, 39, 31, .55);

  /* Hidden state: fully transparent, nudged down, and not clickable. */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.to-top svg { width: 18px; height: 18px; display: block; }

.to-top.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.to-top:active { background: var(--brand-press); transform: translateY(1px); }
.to-top:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* The button stays visible all the way to the foot of the page. The room it
   needs at the very bottom is reserved by .footer-base above, so it never
   comes to rest on top of the small print. */

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01ms, visibility 0s; transform: none; }
  .to-top.is-shown { transform: none; }
}

/* Never on paper. The printing block near the end of this file says the same
   thing, and this repeats it here on purpose: while the button was shown on
   phones only it was already absent from a printed page, because paper is
   wider than 599px. Now that it is shown at every width, that accident no
   longer protects it, and the rule that does needs to sit beside the button
   rather than several hundred lines away. */
@media print {
  .to-top { display: none; }
}

/* ==========================================================================
   TWO-COLUMN FLOW
   --------------------------------------------------------------------------
   Long runs of text set in one narrow column leave a wide empty gutter beside
   them. Flowing that text into two columns uses the whole width while keeping
   each line a comfortable length — the same reason newspapers and printed
   terms are set in columns rather than one wide measure.

   Reading order is unaffected: text fills the first column top to bottom,
   then continues in the second, which is how a screen reader and a keyboard
   traverse it too.
   ========================================================================== */
@media (min-width: 900px) {
  .cols-2 {
    column-count: 2;
    column-gap: 3.5rem;
    max-width: none;          /* override the single-column reading measure */
  }
  /* never split a paragraph, list or callout down the middle */
  .cols-2 > * { break-inside: avoid; }
  /* never leave a heading stranded at the foot of a column */
  .cols-2 h2, .cols-2 h3 { break-after: avoid; margin-top: 1.4rem; }
  .cols-2 > :first-child { margin-top: 0; }
}

/* Download list: ten forms in one tall column meant a lot of scrolling
   past empty space. Two columns halves the height. */
@media (min-width: 900px) {
  .dl-list {
    columns: 2; column-gap: 3rem; max-width: none;
  }
  .dl-list li { break-inside: avoid; }
}

/* Resource clusters flow into two columns, each group kept whole. */
@media (min-width: 900px) {
  .clusters { column-count: 2; column-gap: 3.5rem; }
  .clusters .cluster { break-inside: avoid; }

  /* The gap between one group and the next is set as PADDING here, not as the
     margin used everywhere else, and that difference is deliberate.

     When a group moves to the top of the second column, Safari keeps the
     margin that sat above it and Chrome throws it away. The result is that in
     Safari the second column started 40px lower than the first, so the first
     heading in each column — "Patient education" and "Thyroid" — did not line
     up. Padding belongs to the group above it, stays at the foot of the first
     column, and cannot be carried across the break, so both browsers now
     start each column at the same height. The gap looks identical. */
  .clusters .cluster { margin-bottom: 0; padding-bottom: 2.5rem; }
}

/* On a desktop-width screen there is room for a THIRD column, and the six
   groups pack into it almost exactly evenly. This is the whole reason the
   page is no longer a long scroll: the links came down from about 1770px
   of height to about 960px, and not one line of it moved closer together —
   the spacing inside a group is untouched.

   The group headings step down to 1.5rem here. At the full-width heading
   size "Hormones & bone health" wrapped onto two lines in a column this
   wide, which both cost height and looked accidental. */
@media (min-width: 1100px) {
  .clusters { column-count: 3; column-gap: 2.5rem; }
  .clusters .cluster h2, .clusters .cluster h3 { font-size: 1.5rem; }
}

/* --- The groups fold away on a small screen -------------------------------
   Below 900px — the same width at which the menu becomes a button — the six
   groups stack in one column and the page becomes a very long scroll. Each
   group is a <details>, so on those screens its links fold behind its
   heading and the page opens as a short index of the six subjects.

   The page ships them OPEN, so if the script never runs every link is simply
   on the page as it always was. The script closes them on a small screen and
   opens them again above it — see "resource groups fold away" in site.js.

   Above 900px the heading is not a control at all: no arrow, and the summary
   cannot be clicked shut. */
.cluster > summary { list-style: none; }
.cluster > summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
  .cluster > summary { pointer-events: none; }
}
@media (max-width: 899px) {
  /* The whole heading is the control, so it is padded out to a comfortable
     finger's height rather than left at the height of the words. */
  .cluster > summary {
    position: relative; cursor: pointer;
    padding: .4rem 2.25rem .1rem 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* The arrow is drawn rather than typed, so it inherits the green and turns
     to point up when the group is open. */
  .cluster > summary::after {
    content: ""; position: absolute; right: .5rem; top: .95rem;
    width: .55rem; height: .55rem;
    border-right: 2px solid var(--brand-dark);
    border-bottom: 2px solid var(--brand-dark);
    transform: rotate(45deg);
    transition: transform var(--fast) var(--ease);
  }
  .cluster[open] > summary::after { transform: rotate(-135deg); }
  .cluster > summary:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .cluster > summary::after { transition: none; }
}

/* ==========================================================================
   THE CONTACT FORM (contact.html)
   --------------------------------------------------------------------------
   Boxes are full width, square-shouldered like the cards, and drawn in the
   same hairline as everything else. Focus is shown with the brand green
   outline the rest of the site uses, so a keyboard user always knows where
   they are. Two boxes sit side by side on a wide screen (name and phone)
   and stack on a phone.
   ========================================================================== */
.form p { margin: 0 0 1.1rem; }
.form label {
  display: block;
  margin-bottom: .35rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-mid);
}
.form .optional { font-weight: 400; color: var(--ink-faint); }
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea {
  display: block;
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.form textarea { resize: vertical; min-height: 8rem; }
.form input:hover, .form textarea:hover { border-color: var(--line-dot); }
.form input:focus-visible, .form textarea:focus-visible {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(107,123,45,.18);
  outline: none;
}
.form ::placeholder { color: var(--ink-faint); opacity: 1; }

/* Name and phone share a line on wide screens. */
.form-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* The "no medical information" tick-box and its wording. */
.form-check { display: flex; gap: .6rem; align-items: flex-start; }
.form-check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--brand-dark); }
@media (max-width: 899px) {
  .form-check input { width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
}
.form-check label { margin: 0; font-weight: 400; color: var(--ink-mid); }

/* The robot-catching box: never shown, never tabbed to. */
.form .botcheck { display: none; }

/* The hCaptcha puzzle is drawn by Web3Forms; leave room for it. */
.form .h-captcha { margin: 0 0 1.25rem; min-height: 78px; overflow-x: auto; }

/* ==========================================================================
   THE CONTACT PAGE: FORM BESIDE THE PRACTICE DETAILS
   --------------------------------------------------------------------------
   The form and the address/telephone/hours block used to sit one above the
   other, which made the page twice as long as it needed to be. On a screen
   wide enough for it they now share a line: two thirds for the form, one
   third for the details, which run down the side as a single column.

   Below 861px there is not enough width for two readable columns, so they
   stack — the form first, since that is the point of the page. That figure
   matches the width at which .facts stops sitting in a row and stacks of its
   own accord; keeping the two in step is what stops the details column being
   stacked and full-width at the same time, which made the page longer rather
   than shorter in that range.

   TO CHANGE THE SPLIT, edit the two numbers in grid-template-columns below.
   "2fr 1fr" is two thirds and one third; "1fr 1fr" would be halves.
   ========================================================================== */
.contact-split { display: grid; gap: 2rem; }

/* Stacked, the practice details come FIRST: on a phone the visitor most
   often wants the number or directions, and the form was pushing those a
   long way down the page. */
@media (max-width: 899px) {
  .contact-split__aside { order: -1; }
}

@media (min-width: 900px) {
  .contact-split {
    grid-template-columns: 2fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  /* A hairline between the two, so the details read as a companion column
     rather than as something that fell off the end of the form. */
  .contact-split__aside {
    padding-left: 3.5rem;
    border-left: 1px solid var(--line);
    margin-left: -.5rem;
  }
}

/* The form fills its column. Left to itself it would stop at the 70ch
   measure meant for running text and leave the column half empty. */
.contact-split__form .prose,
.contact-split__form .form { max-width: none; }

/* ==========================================================================
   TIGHTER ON A PHONE
   --------------------------------------------------------------------------
   The spacing above is set for a wide screen, where generous margins are what
   make a page look considered rather than crowded. On a phone that same air
   is just scrolling: the reader spends it travelling between things instead
   of reading them.

   So on phones (narrower than 600px) every structural gap is pulled in — the
   space above and below each band, the gutters at the sides, the gaps in the
   card grids, and the air under a heading. Nothing changes size and no type
   gets smaller; only the empty space closes up. A page comes out roughly a
   fifth shorter.

   TO GIVE THE AIR BACK, raise the numbers here — or delete this whole block,
   and the phone layout returns to the same spacing as the desktop one.
   ========================================================================== */
@media (max-width: 599px) {

  /* Side gutters. The single biggest gain in usable width. */
  .wrap { padding-inline: 1.15rem; }

  /* ------------------------------------------------------------------
     THE STUCK HEADER HAS TO EARN ITS KEEP. It is on screen the whole
     time now, so on a phone every pixel of it is a pixel of reading
     taken away permanently. Pulled in here from 154px to about 115px —
     roughly an eighth of the screen rather than a fifth — without
     dropping anything out of it.
     ------------------------------------------------------------------ */
  /* The logo bar on its own, about 64px here — the figure that applies when
     the script has not run. The script measures the real heights, including
     the hours strip once it pins it. */
  :root { --header-h: 4rem; }

  /* The space above and below each band — the main driver of page length. */
  .section { padding-block: 1.5rem; }
  .hero .wrap { padding-block: 2rem; }
  .page-head .wrap { padding-block: 2rem; }
  .credband .wrap { padding-block: 1.35rem; }
  .cta .wrap { padding-block: .5rem; }
  .footer .wrap { padding-block: 2rem 1.25rem; }

  /* Air under a heading and between paragraphs. */
  h1, h2, h3, h4 { margin-bottom: .28em; }
  p { margin-bottom: .8rem; }
  .prose h2 { margin-top: 1.25rem; }
  .prose h3 { margin-top: 1rem; }
  .prose li { margin-bottom: .3rem; }

  /* The gaps inside grids and stacks of cards. */
  .hero-grid { gap: 1.5rem; }
  .hero-actions { gap: .85rem; }
  .with-aside { gap: 1.5rem; }
  .footer-grid { gap: 1.5rem; }
  .duo { gap: 1rem; }
  .numsec { gap: .85rem; }

  /* The rule-and-space under the tenure line on the About page. */
  .tenure { padding-bottom: 1.15rem; margin-bottom: 1.15rem; }

  /* ------------------------------------------------------------------
     THE CARDS. This is where a phone page actually gets its length: a
     column of cards, each carrying its own ring of padding, one under
     the other. Trimming the padding and closing the gaps between them
     is worth far more than anything the bands above can give back.
     ------------------------------------------------------------------ */
  /* The numbered block appears two ways: as a card inside .numgrid on the
     home page, and on its own as a full row on the service pages. The
     standalone one is the taller of the two and repeats five or six times
     down a page, so it is the single biggest saving on this site. */
  .numsec { padding-block: 1.1rem; gap: .5rem; }
  .numgrid { gap: .75rem; margin-top: .85rem; }
  .numgrid .numsec { padding: .95rem 1.05rem 1.05rem; }

  /* Numbered instruction lists. */
  .steps { margin-block: .7rem; }
  .steps li { padding: .45rem .8rem .45rem 2.6rem; }

  /* Blocks that carry their own ring of padding. */
  .certificate { margin-top: 1.25rem; padding: 1rem; gap: .9rem; }
  .essentials { padding-block: 1rem; }
  .onpage { margin-bottom: 1rem; }

  .plans { gap: .45rem; margin-bottom: 1.15rem; }
  .plans li { padding: .55rem .8rem; }

  .routing { gap: .45rem; }
  .routing div { padding: .8rem .85rem .8rem .9rem; }

  .creds { gap: .65rem; }
  .certificate--compact { margin-top: .85rem; padding: .85rem; }

  .cluster { margin-bottom: 1.5rem; }
  .cluster li { padding: .6rem 0; }
  .dl-list a { padding-block: .6rem; }

  /* The main button on the opening band and the form's send button run the
     full width of a phone, where a thumb expects to find them. */
  .hero-actions .btn, .form .btn { width: 100%; text-align: center; }
  .hero-actions { gap: 1rem; }
}

/* ==========================================================================
   SMALL HELPERS — the few one-off adjustments pages used to carry inline
   --------------------------------------------------------------------------
   Each of these used to be a style="" written into a page. Keeping them here
   means a phone, a tablet and a desktop all get the same adjustment, and a
   change is made once rather than in the page.
   ========================================================================== */
.page-head .lede { max-width: 56ch; }
.page-head__actions { margin: 1.4rem 0 0; }
.creds--spaced { margin-top: 2rem; }

/* On the About page, the paragraph under the certifications heading runs
   the full width of the band rather than the usual reading measure, at
   Stephen's request. The heading itself stays on the left like the rest
   of the page. */
.certsec .prose { max-width: none; }
.prose--wide { max-width: none; }
.measure { max-width: 62ch; }
.dl-list--spaced { margin-top: 2rem; }
.more { margin-top: 2rem; }
.wrap--spaced { margin-top: 2.5rem; }
.facts--spaced { margin-top: 1.75rem; }
.note { font-size: .9rem; color: var(--ink-soft); }
.note--intro { max-width: 70ch; font-size: 1rem; margin-bottom: 2.5rem; }
.span-all { column-span: all; }
/* The first numbered section on a page has no rule above it — the band above
   already separates it from what came before, and a line there would read as
   a second separator immediately after the first.

   It KEEPS its padding, though. Removing the padding as well used to pull the
   first heading up tight under whatever sat above it — on Patients, hard
   against the foot of the essentials panel — so the first block was visibly
   more cramped than the four below it, which each have a clear 2rem. The
   line is what is not wanted here, not the breathing room. */
.with-aside > article > .numsec:first-of-type,
.with-aside > div > .numsec:first-of-type { border-top: 0; }
@media (max-width: 599px) {
  .creds--spaced { margin-top: 1.25rem; }
  .dl-list--spaced, .more { margin-top: 1.25rem; }
  .wrap--spaced { margin-top: 1.5rem; }
  .facts--spaced { margin-top: 1.25rem; }
  .hero .eyebrow, .page-head .eyebrow, .cta .eyebrow { letter-spacing: .1em; font-size: .77rem; }
  .hero .eyebrow::before, .page-head .eyebrow::before, .cta .eyebrow::before { display: none; }
}
/* Beside a photograph on a small tablet the headline has a narrow column, so
   it is held a little smaller there than the general rule would make it. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero h1.display { font-size: clamp(2.2rem, 1rem + 3.4vw, 3rem); }
  .hero .eyebrow { letter-spacing: .1em; font-size: .77rem; }
  .hero .eyebrow::before { display: none; }
}

/* ==========================================================================
   TOUCH SCREENS
   --------------------------------------------------------------------------
   A finger cannot hover. On a touch screen the lifts and slides that
   acknowledge a pointer would stick in place after a tap, so they are
   switched off by whether the device can hover — not by how wide it is.
   ========================================================================== */
@media (hover: none) {
  .creds figure:hover, .creds figure:focus-within,
  .numgrid .numsec:hover, .duo > div:hover,
  .plans li:hover, .routing div:hover,
  .btn:hover, .portrait:hover,
  .certificate:hover img { transform: none; }
  .creds figure:hover .badge img,
  .creds figure:focus-within .badge img { transform: none; }
  .dl-list a:hover { padding-left: .75rem; }
  .numsec:hover { background: transparent; }
  .numsec:hover::before { transform: scaleY(0); }
}

/* Links set in running text are comfortable to tap on any small screen or
   touch screen. Padding on an inline link enlarges what a finger can hit
   without moving the words around it. */
@media (max-width: 899px), (hover: none) {
  .prose a, .cluster a, .footer a, .fact a, .duo a, .routing a, .plans-note a,
  .contact-split__aside a { padding-block: .5rem; }
  .link-caps { padding-top: .6rem; }
  .footer li a { padding-block: .45rem; }
  .topbar a { padding-block: .55rem; }
}

/* Sideways-scrolling tables keep their row headings in view and show a soft
   fade on the right edge as a hint that there is more. */
.data-table { position: relative; }
.data-table tbody th, .data-table thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--page);
  padding-right: 1.2rem;
  box-shadow: 1px 0 0 var(--line);
}
.data-table thead th:first-child { background: var(--tint); }


/* ==========================================================================
   TIGHTER ON A TELEPHONE — the blocks of facts
   --------------------------------------------------------------------------
   The office hours, telephone and address are set out as blocks of facts —
   beside the contact form, and under "Appointments & hours" on the
   Patients page. Side by side on a wide screen the spacing between them reads as
   generous. Stacked into one narrow column it became a lot of scrolling
   past very little.

   What is reduced is the air BETWEEN things: the gap between one block and
   the next, the space under a heading, the padding inside a row of hours.
   Nothing here changes the type size, and nothing here touches a link — a
   line that is quicker to scroll past is no use if it is harder to press.

   THIS BLOCK SITS AT THE END OF THE FILE ON PURPOSE. It has to come after
   the rules it tightens; written earlier it simply lost to them, being no
   more specific and read first.
   ========================================================================== */
@media (max-width: 599px) {
  /* Stacked, each block is separated from the one above by a hairline with
     1.75rem of space on both sides of it AND the grid's own gap on top —
     about 44px of nothing between one fact and the next. The hairline is
     doing the separating; the space either side of it only has to be enough
     to belong to it. The grid gap goes entirely, since the margin already
     provides the room. */
  .facts { gap: 0; }
  .facts > .fact { padding-top: .9rem; margin-top: .9rem; }
  .facts > .fact:first-child { padding-top: 0; margin-top: 0; }

  .fact h2, .fact h3 { margin-bottom: .5rem; }
  .fact p { margin-bottom: .5rem; }
  .fact p:last-child { margin-bottom: 0; }
  .fact .big { line-height: 1.25; }
  .fact .tz, .tz { margin-top: .5rem; }
  /* Rows of hours, here and in the footer. Nobody taps these, so the padding
     is only a matter of legibility. */
  .rows div { padding-block: .25rem; }
}

/* ==========================================================================
   TWO BLOCKS OF FACTS TO A ROW ON A PHONE
   --------------------------------------------------------------------------
   The office hours, the telephone number and the address were stacked one
   under the other, each using the full width of the screen for a few short
   lines and leaving most of that width empty. Together they ran to about
   460px — half a screen of scrolling past three small things.

   Only the hours actually need the width: they are a list of pairs with a
   dotted leader running between them, and squeezed into half a screen each
   pair breaks onto two lines. The telephone number and the address are both
   narrow enough to sit side by side, so they do — with a hairline between
   them, the same one that separates a wide screen's three columns, turned on
   its side.

   The order on the page is unchanged: the address and telephone share the
   first row and the hours take a full row beneath them. (The home page once
   carried a block of facts of its own; it came off the page in August 2026,
   so this now applies to the Contact page only.)

   BELOW 360px THE PAIR GOES BACK TO ONE COLUMN. Half of a very small screen
   is not enough for "Bellevue, WA 98004" or "Fax 425-453-5150" to stay on
   one line, and a column of broken lines is worse than a longer page. The
   rules below simply do not apply there, and the single-column stacking that
   is already in the file takes over untouched.

   THIS BLOCK HAS TO SIT AFTER THE RULES IT REARRANGES — the one-column rule
   at "max-width: 899px" and the phone tightening further up. Written earlier
   in the file it would lose to them: same specificity, later one wins.

   TO GO BACK TO ONE COLUMN EVERYWHERE, delete this whole block.
   ========================================================================== */
@media (min-width: 360px) and (max-width: 899px) {

  /* Even halves. The hairline between them is drawn INSIDE the gap by the
     pseudo-element below rather than by a border with padding beside it, so
     it costs the columns nothing: every pixel that is not the 1.4rem gap is
     type. At 375px that leaves each column about 158px, which is just enough
     for the longest line either of them holds ("Bellevue, WA 98004" at 156px
     and "Fax 425-453-5150" at 145px). If either line gets longer, raise the
     360px floor above rather than shrinking the type. */
  .facts--stack { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }

  /* ADDRESS (1) and TELEPHONE (2) share the top row, HOURS (3)
     runs the full width beneath them. */
  .facts--stack > .fact:nth-child(1) { grid-column: 1; }
  .facts--stack > .fact:nth-child(2) { grid-column: 2; }
  .facts--stack > .fact:nth-child(3) { grid-column: 1 / -1; }

  /* The hairline between the two that share a row, drawn down the middle of
     the gap so the two columns of type sit an equal distance from it. */
  .facts--stack > .fact:nth-child(2) { position: relative; }
  .facts--stack > .fact:nth-child(2)::before {
    content: ""; position: absolute; left: -.7rem; top: 0; bottom: 0;
    width: 1px; background: var(--line);
  }

  /* Both halves of a pair begin a row of the grid, so both would otherwise
     draw the full-width hairline that separates one block from the block
     above. On the Contact page the pair is the FIRST thing in the aside and
     has nothing above it to be separated from, so neither half draws one —
     matching the existing rule for the first block in a stack. */
  .facts--stack > .fact:nth-child(2) {
    border-top: 0; padding-top: 0; margin-top: 0;
  }
}



/* ==========================================================================
   MENUS THAT HANG OFF A WORD IN THE BAR
   --------------------------------------------------------------------------
   Services and Patients each carry a short menu. Every row but the pump page
   jumps straight to a section of the page the word already points at, so a
   visitor can go to "Prescription refills" from anywhere on the site instead
   of landing on Patients and hunting down the page. The rows are the same
   ones listed down the side of those pages.

   TWO DIFFERENT THINGS AT TWO WIDTHS. On a wide screen the menu is a panel
   that hangs below the bar: it opens when the pointer rests on the word, or
   when the keyboard reaches it, or when the chevron beside it is pressed —
   three ways in, so a wide touch screen is not left out. On a phone there is
   no panel and nothing to hover with: the rows fold open underneath the word
   inside the list the Menu button opens, and the chevron is the way in.

   A MENU OPENS BY ITSELF ON A PHONE when the page being looked at is inside
   it — Patients opens on the Patients page, Services opens on both Services
   and the pump page. That is what data-branch on the <li> means. Pressing
   the chevron writes data-open="false" and closes it again, which is why the
   rule below is written as :not([data-open="false"]) rather than simply
   asking whether data-open is missing.

   TO ADD A ROW, add an <li> to the .nav-sub list in the header of every
   page. A row that begins a new group takes class="nav-sub-group", which
   draws a hairline above it. TO HANG A MENU OFF A DIFFERENT WORD, copy the
   .has-sub markup onto that <li>; nothing here is specific to either word.
   ========================================================================== */

/* How far the panel sits below the word on a wide screen. This is the logo
   bar's own bottom padding, so the panel comes to rest exactly on the
   hairline at the foot of the bar rather than floating inside it.
   IF YOU CHANGE .masthead .wrap padding-block, change this to match. */
:root { --nav-sub-drop: 1.15rem; }

.nav-sub-head { display: flex; align-items: center; }

/* The chevron. Deliberately quiet on a wide screen — a hint that there is
   more here, not a button competing with the word beside it. On a phone it
   is the only way in, so it grows into a proper thumb target further down. */
.nav-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 1.4rem; height: 1.4rem; padding: 0;
  font: inherit; color: var(--ink-faint);
  background: transparent; border: 0; border-radius: var(--radius);
  cursor: pointer;
}
.nav-sub-toggle svg {
  width: 9px; height: 9px; display: block;
  transition: transform var(--fast) var(--ease);
}
.nav-sub-toggle:hover { color: var(--brand-dark); }

/* The word on a page that lives inside its menu — the pump page under
   Services — is tinted like the current page but without the underline, so
   the bar shows where you are without claiming you are on Services itself. */
.nav a[data-trail] { color: var(--brand-dark); }

/* A hairline above a row that begins a new group: it separates the page
   itself from the sections within it, and those from a page of its own. */
.nav .nav-sub-group { border-top: 1px solid var(--line); }

@media (min-width: 900px) {
  /* THE LIST IS STRETCHED TO THE FULL HEIGHT OF THE LOGO BAR. The menu is
     centred against the logo beside it, which is taller than a line of
     words, so the bottom of the word "Services" sits well above the bottom
     of the bar. Stretching the rows to fill the bar means a panel can hang
     off the bottom of the bar itself and always comes to rest on the
     hairline at its foot, whatever height the logo is set to. The words
     stay exactly where they were: each row centres its own link.
     The two phone-only rows are left alone — they are hidden here. */
  .nav { align-self: stretch; }
  .nav > ul { height: 100%; align-items: stretch; }
  .nav > ul > li:not(.nav-extra) { display: flex; align-items: center; }

  .nav .has-sub { position: relative; }
  .nav .nav-sub-head { gap: .1rem; height: 100%; }

  .nav .has-sub:hover .nav-sub-toggle svg,
  .nav .has-sub:focus-within .nav-sub-toggle svg,
  .nav .has-sub[data-open="true"] .nav-sub-toggle svg { transform: rotate(180deg); }

  /* An invisible strip bridging the gap between the word and the panel, so
     the pointer can travel down into the panel without crossing bare page
     and closing it on the way. */
  .nav .has-sub::after {
    content: ""; position: absolute;
    top: 100%; left: 0; right: 0; height: var(--nav-sub-drop);
  }

  .nav .has-sub .nav-sub {
    position: absolute; top: 100%; margin-top: var(--nav-sub-drop);
    /* Pulled left by the panel's own padding so the wording inside lines up
       with the word in the bar above it. */
    left: -1.1rem;
    display: block; min-width: 15.5rem;
    padding: .35rem 0;
    background: var(--page);
    border: 1px solid var(--line);
    border-top: 2px solid var(--brand);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-.3rem);
    transition: opacity var(--fast) var(--ease),
                transform var(--fast) var(--ease),
                visibility var(--fast) var(--ease);
    z-index: 5;
  }
  .nav .has-sub:hover > .nav-sub,
  .nav .has-sub:focus-within > .nav-sub,
  .nav .has-sub[data-open="true"] > .nav-sub {
    opacity: 1; visibility: visible; transform: none;
  }

  /* Inside the panel the rows are read down a list, not scanned across a
     bar, so they drop the tracked capitals. */
  .nav .nav-sub a {
    padding: .55rem 1.1rem;
    font-size: .84rem; font-weight: 600;
    letter-spacing: .01em; text-transform: none;
    color: var(--ink-mid); border-bottom: 0;
    white-space: nowrap;
  }
  .nav .nav-sub a::after { display: none; }
  .nav .nav-sub a:hover { background: var(--wash); color: var(--brand-dark); }
  .nav .nav-sub a[aria-current="page"] {
    background: var(--tint); color: var(--brand-dark);
  }
  /* The hairline is drawn on the row, so it needs a little air around it. */
  .nav .nav-sub-group { margin-top: .35rem; padding-top: .35rem; }
}

@media (max-width: 899px) {
  /* The word and its chevron share a row; the rows underneath fold out
     below them. The hairline that separates one entry from the next moves
     from the link to the row, so it runs the full width of the menu
     rather than stopping short of the chevron. */
  .nav-sub-head { border-bottom: 1px solid var(--line); }
  .nav-sub-head > a { flex: 1 1 auto; border-bottom: 0; }
  .nav-sub-toggle {
    width: 3.25rem; align-self: stretch; height: auto;
    color: var(--ink-mid);
  }
  .nav-sub-toggle svg { width: 12px; height: 12px; }
  .nav .has-sub[data-open="true"] .nav-sub-toggle svg,
  .nav .has-sub[data-branch]:not([data-open="false"]) .nav-sub-toggle svg {
    transform: rotate(180deg);
  }

  .nav .has-sub .nav-sub { display: none; padding: 0; }
  .nav .has-sub[data-open="true"] .nav-sub,
  .nav .has-sub[data-branch]:not([data-open="false"]) .nav-sub { display: block; }

  /* Indented and quieter than the words above them, and set on the soft
     wash so the fold-out reads as one block rather than more menu. */
  .nav .nav-sub { background: var(--wash); }
  .nav .nav-sub a {
    padding: .7rem 0 .7rem 1.5rem;
    font-size: .85rem; font-weight: 600;
    letter-spacing: .04em; text-transform: none;
    color: var(--ink-soft);
  }
  .nav .nav-sub a[aria-current="page"] { color: var(--brand-dark); }
  /* Inside a fold-out every row already has a hairline under it, so the
     group divider would be a second line in the same place. */
  .nav .nav-sub-group { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav .has-sub .nav-sub,
  .nav-sub-toggle svg { transition: none; }
}