/*
Theme Name: Spring Oriental
Theme URI: https://springorientalmedicine.com
Author: Empirical Edge
Description: Custom classic theme for Spring Oriental Medicine — evidence-informed acupuncture and Chinese herbal medicine, Park Ridge & Roscoe Village, Chicago. Built from the approved pixel-final static home page, on Bootstrap 5. No page builder, no plugin dependencies.
Version: 2.14.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spring-oriental
*/

/* ==========================================================================
   Fonts — self-hosted, font-display:block (no Google Fonts request)
   ========================================================================== */
@font-face{font-family:Lato;src:url(assets/fonts/lato-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Lato;src:url(assets/fonts/lato-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Cormorant Garamond';src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Cormorant Garamond';src:url(assets/fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:block}

/* ==========================================================================
   Design tokens
   Accessibility rule: --orange (#D97706) fails WCAG AA as text. It is used
   ONLY for non-text accents — nav underline, arrows, rules, bullets, social
   icons, stars. Never as a text colour or a button background.
   ========================================================================== */
:root{--green:#2E6F40;--green-dk:#245831;--cream:#F7F3E9;--brown:#6B4F3A;--orange:#D97706;--char:#2B2B2B;--muted:#5A5A56;--line:rgba(43,43,43,.14)}

/* Bootstrap overrides — Bootstrap loads first, this file wins. */
:root{--bs-body-font-family:Lato,sans-serif;--bs-body-font-size:16px;--bs-body-line-height:1.6;--bs-body-color:#2B2B2B;--bs-body-bg:#F7F3E9;--bs-link-color:#2E6F40;--bs-link-hover-color:#245831}

*{box-sizing:border-box}
body{margin:0;font-family:Lato,sans-serif;color:var(--char);font-size:16px;line-height:1.6;background:var(--cream);-webkit-font-smoothing:antialiased}
/* Sections run full-bleed; a Bootstrap .container holds the content.
   overflow-x must be `clip`, not `hidden`: `hidden` makes this element a
   scroll container, which silently disables position:sticky on the header
   inside it. `clip` gives the same overflow guard without that side effect. */
.site{width:100%;overflow-x:clip}

/* Container locked to 1200px with 15px side padding, giving a 1170px
   content column. (The original static build used 64px padding for a
   1072px column — this is a deliberate change requested on issue #1.) */
.container{max-width:1200px;padding-left:15px;padding-right:15px}
p{margin:0}
h1,h2,h3,.d{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;margin:0;line-height:1.12;letter-spacing:-.005em}
img{display:block;max-width:100%;height:auto}
.sec{padding:58px 0}
.eb{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:50px;line-height:1.1;letter-spacing:-.006em;color:var(--green);margin:0;text-transform:none}
.mut{color:var(--muted)}
.hr{height:1px;background:var(--line)}

/* Buttons. line-height is pinned because Bootstrap's .btn sets 1.5 and the
   approved design inherited the body's 1.6. */
.btn{font-weight:700;font-size:15px;line-height:1.6;border-radius:4px;padding:17px 34px;display:inline-block;transition:all .25s ease;white-space:nowrap;text-decoration:none;border:0}
.bg{background:var(--green);color:var(--cream)}
.bg:hover{background:var(--green-dk);color:var(--cream);transform:translateY(-2px)}
.bo{border:1px solid var(--brown);color:var(--brown);background:transparent}
.bo:hover{background:var(--brown);color:var(--cream)}
.bw{background:#fff;color:var(--char)}
.bw:hover{background:#F1E7DC;color:var(--char);transform:translateY(-2px)}
.bl{border:1px solid rgba(255,255,255,.6);color:#fff;background:transparent}
.bl:hover{background:rgba(255,255,255,.14);color:#fff}
.arrow{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-.12em;transition:transform .28s ease}
.lnk{color:var(--green);display:inline-flex;align-items:center;gap:8px;font-size:16px;text-decoration:none;transition:color .25s ease}
.lnk:hover{color:var(--orange)}
.lnk:hover .arrow{transform:translateX(5px)}
.lnk.rev{color:var(--cream)}
.lnk.rev:hover{color:#E8D9B8}

/* Gutters matched to the approved design, per section. */
.g-hero{--bs-gutter-x:48px;--bs-gutter-y:32px}
.g-pract{--bs-gutter-x:70px;--bs-gutter-y:36px}
.g-treat{--bs-gutter-x:26px;--bs-gutter-y:26px}
.g-services{--bs-gutter-x:40px;--bs-gutter-y:34px}
.g-library{--bs-gutter-x:30px;--bs-gutter-y:30px}
.g-footer{--bs-gutter-x:36px;--bs-gutter-y:32px}
/* Intro band on an inner page — photograph beside the opening copy.
   Declared here with the others, and NOT further down beside the band styles:
   the cap below has the same specificity, so a later declaration would win and
   silently re-break the phone layout. */
.g-intro{--bs-gutter-x:56px;--bs-gutter-y:32px}
/* Sub-section boxes inside a band (issue #14). Same rule as `.g-intro` above:
   declared here, with the other gutters and above the cap, never below it. */
.g-boxes{--bs-gutter-x:30px;--bs-gutter-y:30px}

/*
 * Gutter cap — fixes content being clipped at tablet and mobile widths.
 *
 * Bootstrap gives a row `margin-inline: -(gutter/2)` and gives each column a
 * matching inner padding, so the column content lands back on the container's
 * edge. That only balances when the container's side padding equals half the
 * gutter. This container is pinned at 15px while the gutters above go up to
 * 70px, so `.g-pract` escaped its container by 35 - 15 = 20px on each side.
 *
 * On a wide screen the centred container has slack to spare and it never
 * shows. Once the viewport is narrow enough that the container fills it, the
 * overflow lands outside the window and `.site{overflow-x:clip}` cuts it off
 * silently — no scrollbar, just missing text. Measured at 716x406: the
 * "Meet Dr. Ali Zhang" heading, three service cards and the footer blurb all
 * ran past the right edge.
 *
 * 1269.98px = the 1200px container plus the 35px of slack the widest gutter
 * needs on each side. Below that, capping the gutter at 30px makes
 * gutter/2 exactly equal the 15px padding, so rows sit flush inside the
 * container. Columns stack below 992px anyway, so the horizontal gutter is
 * invisible for most of this range and the approved desktop spacing above
 * 1270px is untouched. Vertical gutters are deliberately left alone.
 */
@media (max-width:1269.98px){
  .g-hero,.g-pract,.g-treat,.g-services,.g-library,.g-footer,.g-intro,.g-boxes{--bs-gutter-x:30px}
}

/* Visible focus for keyboard users — the static file had none. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.band a:focus-visible,.cta a:focus-visible,.ft a:focus-visible{outline-color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);color:var(--cream);padding:12px 20px;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

/* ==========================================================================
   Header
   The green utility bar was removed on issue #11. `.site-top` remains as the
   sticky wrapper — it now holds the header alone, which is simpler than the
   two-element arrangement it replaced.
   ========================================================================== */
.site-top{position:sticky;top:0;z-index:60}
/* Sticky header. z-index sits above the dropdown panels (40) so they still
   open over the page, and above the section bands. The background must be
   opaque or page content shows through once it detaches. */
.hd{background:var(--cream);border-bottom:1px solid rgba(43,43,43,.12);transition:box-shadow .25s ease}
.hd.is-stuck{box-shadow:0 6px 20px rgba(43,43,43,.10)}
.hd .container{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:10px;padding-bottom:10px;position:relative;transition:padding .25s ease}
/* 170px, down from 210px on issue #14. */
.hd .logo{flex:0 0 auto;width:170px;transition:width .25s ease;text-decoration:none;display:block}
.hd .logo img{width:100%;height:auto;transition:width .25s ease}
/* Tagline under the wordmark. Kept small and muted so it reads as a
   descriptor rather than competing with the logo itself; 9px was specified on
   issue #14. It is a descriptor rather than body copy, so it is exempt from the
   14px floor the rest of the type keeps. */
.logo-tagline{display:block;margin-top:4px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:opacity .25s ease}
/* The menu and the call/book pair, one flex row on desktop and the dropdown
   panel below lg — see the media query near the end of this file. */
.hd-panel{display:flex;align-items:center;gap:26px;flex:0 1 auto;min-width:0}
/* Phone + Book Now, which took the utility bar's place. */
.hd-cta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.hd-phone{display:inline-flex;align-items:center;gap:7px;color:var(--char);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;transition:color .25s ease}
.hd-phone svg{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}
.hd-phone:hover{color:var(--green)}
/* The client asked for "a green box with white text" specifically, so this one
   button uses pure white rather than the theme's cream-on-green default. */
.hd-book{padding:12px 24px;font-size:14px;color:#fff}
.hd-book:hover{color:#fff}
/* Condensed state once the header detaches from the top of the page. */
/* Stuck state: the shadow only (14/09/2026).
   The logo keeps its size and the tagline stays visible, at the client's
   request. Nothing about the header's size changes when it sticks — the
   earlier version shrank it from 124px to 71px, which moved all the content
   below it and caused the "shaking" the client reported. */
.nav{display:flex;align-items:center;flex-wrap:nowrap;gap:22px;font-size:17px;flex:0 1 auto;padding-left:0;margin-bottom:0}
.nv{position:relative;padding-bottom:5px;white-space:nowrap;color:var(--char);text-decoration:none;display:inline-flex;align-items:center;gap:5px;font-weight:700}
.nv:hover{color:var(--green)}
.nv .cv{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .25s ease}
.nv:hover .cv{transform:rotate(180deg)}
.nv:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);transition:width .28s ease}
/* Underline marks the current page only — hover is signalled by colour. */
.nv.on:after{width:100%}

/* dropdown submenus */
.ddwrap{position:relative}
.dd{position:absolute;top:100%;left:-16px;margin-top:15px;min-width:264px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);box-shadow:0 14px 34px rgba(43,43,43,.14);padding:8px 0;z-index:40;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;list-style:none;margin-left:0;margin-right:0}
.ddwrap:hover > .dd,.dd.open{opacity:1;visibility:visible;transform:translateY(0)}
.dd:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.ddl{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--char);text-decoration:none;padding:11px 20px;transition:background .18s ease,color .18s ease;white-space:nowrap}
.ddl:hover{background:var(--cream);color:var(--green)}
.ddl .rc{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;flex:0 0 auto;opacity:.55}
.ddsep{height:1px;background:var(--line);margin:8px 20px}
/*
 * The dropdown row for the page you are on (issue #14).
 *
 * Green and bold, on the same cream the hover state uses, plus a rule down the
 * leading edge — colour alone is a weak signal on a row that already turns
 * green on hover, and it leaves anyone who cannot separate the two greens with
 * nothing. The bar is what makes it readable without the pointer.
 *
 * Placed after `.ddl:hover` so hovering a different row still reads as hover
 * while the current row keeps its marker.
 */
.ddl.on{background:var(--cream);color:var(--green);font-weight:700;box-shadow:inset 3px 0 0 var(--orange)}
.ddall{color:var(--green);font-weight:700;font-size:13.5px}
.ddall:hover{color:var(--orange)}
.sub{position:relative}
.sub > .fly{position:absolute;top:-11px;left:100%;margin-left:1px;min-width:274px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);box-shadow:0 14px 34px rgba(43,43,43,.14);padding:8px 0;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;list-style:none}
.sub:hover > .fly,.fly.open{opacity:1;visibility:visible;transform:translateX(0)}
.sub:hover > .ddl{background:var(--cream);color:var(--green)}
.flyh{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brown);padding:8px 20px 10px;margin:0}

/* Nav menus render as <ul>. Strip list chrome only — .dd and .fly keep the
   padding declared above, so do not add `padding:0` to a broader selector. */
.nav ul{list-style:none}
.nav-list{margin:0;padding:0}
.nav-list li{margin:0}
.nav > .nav-list{display:flex;align-items:center;gap:26px}
.nav-list > li{position:relative;display:flex;align-items:center}
.nav-toggle{display:none}
.flyh-item{padding:0}

/* Toggle buttons sit invisibly over the chevrons: identical visually to the
   static build, but focusable, clickable on touch, and ARIA-labelled. */
.nvt,.fly-toggle{position:absolute;background:none;border:0;padding:0;margin:0;cursor:pointer;z-index:2;color:inherit}
.nvt{right:0;top:50%;transform:translateY(-50%);width:20px;height:26px}
.fly-toggle{right:0;top:0;bottom:0;width:46px}

/* ==========================================================================
   Home sections
   ========================================================================== */
.hero{padding:40px 0 46px}
.hero h1{font-size:46px;color:var(--green);margin-bottom:24px}
.hero .subline{font-size:20px;color:var(--brown);margin-bottom:18px;line-height:1.35}
.hero .lede{font-size:17px;margin-bottom:32px;line-height:1.6}
.hero .hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.arch{border-radius:230px 230px 8px 8px;overflow:hidden}
.arch img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero .arch{height:560px}

.band{background:var(--green);color:var(--cream);text-align:center;padding:64px 0}
.band .band-inner{max-width:840px;margin:0 auto}
.band h2{font-size:34px;margin-bottom:26px}
.band p{font-size:17px;color:#DCE8DF;margin-bottom:12px;line-height:1.6}
.band p.eb{font-size:50px;color:var(--cream);line-height:1.12;margin-bottom:18px}
.band p:last-of-type{margin-bottom:34px}

.pract{background:#fff}
.pwrap{position:relative;padding:24px 0 24px 24px}
.pwrap .plate{position:absolute;left:0;top:0;bottom:0;width:74%;background:#EFE7DC;border-radius:210px 210px 8px 8px;z-index:0}
.pwrap .arch{position:relative;z-index:1;height:470px}
.pquote{font-size:29px;font-style:italic;color:var(--brown);line-height:1.4;margin:18px 0 24px}
.pract .credential{color:var(--muted);font-size:15px;letter-spacing:.04em;margin-top:12px}
.pract .pbody{color:var(--muted);font-size:16px;margin-bottom:12px}
.pract .pbody:last-of-type{margin-bottom:22px}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:36px}
.head h2{font-size:34px;color:var(--brown)}
.head .intro{color:var(--muted);font-size:17px;max-width:100%;margin-top:16px}
.nvb{width:52px;height:52px;border-radius:50%;border:1px solid rgba(46,111,64,.4);background:transparent;color:var(--green);display:flex;align-items:center;justify-content:center;transition:all .25s ease;cursor:pointer;flex:0 0 auto}
.nvb:hover{background:var(--green);color:var(--cream)}
.nvb[disabled]{opacity:.35;cursor:default}
.nvb[disabled]:hover{background:transparent;color:var(--green)}
.carousel-nav{display:flex;gap:14px;padding-bottom:6px;flex:0 0 auto}
.dots{display:flex;gap:10px;align-items:center}
.dt{width:34px;height:3px;background:rgba(43,43,43,.2);border:none;padding:0;transition:all .3s ease;cursor:pointer}
.dt.on{width:52px;background:var(--green)}
/* Owl generates its own .owl-dot markup into the .dots container. Owl's
   default theme stylesheet is not loaded, so the dash pagination from the
   design is defined here. The inner <span> Owl adds is hidden — the dash is
   the dot element itself. */
.dots .owl-dot{width:34px;height:3px;background:rgba(43,43,43,.2);border:none;padding:0;margin:0;display:block;font-size:0;line-height:0;transition:all .3s ease;cursor:pointer;border-radius:0}
.dots .owl-dot span{display:none}
.dots .owl-dot.active{width:52px;background:var(--green)}
.dots .owl-dot:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.carousel-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;flex-wrap:wrap}

/* Owl carousel — the theme supplies its own arrows and dots (nav/dots are
   disabled in the Owl config), so only the stage needs adjusting. */
/* Equal card heights: the stage is a flex row, but each .owl-item is still a
   block, so a short card's .tcard had nothing to fill. Making the item a flex
   container lets height:100% resolve against the tallest card in the row. */
.owl-carousel .owl-stage{display:flex;align-items:stretch}
.owl-carousel .owl-item{display:flex}
.owl-carousel .owl-item > *{width:100%}
.owl-carousel .tcard{height:100%}
.tcard{background:#fff;border-radius:8px;padding:30px 28px;min-height:408px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid transparent}
/*
 * The Testimonial page's grid (issue #14). The cards fill their column and
 * match heights per row, and `min-height` gives way to the content — a fixed
 * 408px is a sensible floor in a carousel where every slide is the same size,
 * and just dead space under a two-line review in a grid.
 */
.tgrid .tcard{height:100%;min-height:0}
.tgrid{--bs-gutter-y:26px}
/* Item hover effects removed on request (issue #1): no lift, no zoom, no border. */
.stars{color:var(--orange);font-size:14px;letter-spacing:3px}
/* Unfilled remainder of the 5-star scale — same muted tone as the carousel dots. */
.stars .star-off{color:rgba(43,43,43,.2)}
.tq{font-size:18px;font-style:italic;line-height:1.45;color:var(--char);margin-top:16px}
.trev{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.tav{width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover}
/* Owl's stylesheet sets `.owl-carousel .owl-item img{width:100%}` (0,0,2,1),
   which outranks `.tav` (0,0,1,0) and stretches the avatar to its container
   — zero-wide in the off-screen clones. This wins the specificity contest. */
.owl-carousel .owl-item img.tav{width:44px;height:44px;max-width:44px;object-fit:cover}
/* Monogram fallback when a reviewer supplied no photo (e.g. Himaly Shinglot). */
.tav-mono{display:flex;align-items:center;justify-content:center;background:#EFE7DC;color:var(--brown);font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:600;letter-spacing:.02em}
.tname{font-size:15px;font-weight:700;color:var(--char)}

.sec-intro{margin-bottom:40px}
.sec-intro h2{font-size:34px;color:var(--brown)}
.sec-intro .intro{color:var(--muted);font-size:17px;max-width:760px;margin-top:16px}
.sec-intro .eb{margin-bottom:14px}

.ccard{background:var(--cream);border-radius:8px;padding:34px 32px;display:flex;flex-direction:column;height:100%;border:1px solid transparent}
.ccard h3{font-size:29px;color:var(--green);margin-bottom:12px}
.ccard .desc{font-size:15px;color:var(--muted);margin-bottom:18px}
.ccard ul{margin:0 0 auto;padding:0;list-style:none;font-size:15px}
.ccard .lnk{margin-top:24px;font-size:15px}
.ccard li{padding:8px 0 8px 18px;position:relative;border-top:1px solid var(--line)}
.ccard li a{color:inherit;text-decoration:none;transition:color .2s ease}
.ccard li a:hover{color:var(--green)}
.ccard li:before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* On a white section the cream card needs a hairline to read as a card. */
.pract-bg .ccard,.bg-white .ccard{border-color:var(--line)}

.svc{text-decoration:none;color:inherit;display:block;text-align:center}
/* Circles capped at two thirds of the column and centred (issue #11). At full
   column width they dominated the section, and on a phone — where the column
   is the whole screen — a single service tile filled the viewport. The cap is
   a max-width rather than a fixed size, so they still shrink with the grid. */
.circ{width:100%;max-width:67%;margin-left:auto;margin-right:auto;aspect-ratio:1/1;border-radius:50%;overflow:hidden;position:relative;background:#E7E1D0}
.circ img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1);margin: 0 !important;}
/* Our Services: item hover re-added on request (issue #1, round 4). */
.svc:hover img{transform:scale(1.12)}
.svc:hover .sl{color:var(--green)}
.sl{font-size:23px;margin-top:14px;min-height:58px;transition:color .25s ease}
.circ.more{background:var(--green);display:flex;align-items:center;justify-content:center;color:var(--cream)}

/* No background of its own — the template gives it the next band tone, so the
   article grid continues the alternation rather than cutting across it (#14).
   The cards are cream, so on a cream band they take the white side instead. */
/*
 * The home page's Health Library section is white.
 *
 * `.lib{background:#fff}` used to do this unconditionally, and removing it on
 * issue #14 so the Health Library *page's* article grid could take a band tone
 * took the home page's white with it — the two share the class, and only the
 * page's copy carries a tone. Excluding anything with an `eband-` tone gives the
 * home section its white back without the page inheriting a fixed colour again.
 */
.lib:not([class*="eband-"]){background:#fff}
.lib.eband-cream .lcard{background:#fff}
/* The section that introduces the articles, sitting with them rather than in
   the run of bands above (issue #14). Its own padding is stripped because the
   surrounding .sec already provides it. */
.lib .lib-intro{padding:0 0 34px;max-width:none}
.lib .lib-intro > :first-child{margin-top:0}
.lcard{display:flex;flex-direction:column;height:100%;background:var(--cream);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .28s ease,box-shadow .28s ease}
/* Health Library: hover re-added WITHOUT a border change (issue #1, round 4). */
.lcard:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(43,43,43,.08);color:inherit}
.lcard:hover .lthumb img{transform:scale(1.06)}
.lcard:hover .arrow{transform:translateX(5px)}
.lthumb{aspect-ratio:25/16;overflow:hidden;background:#E7E1D0}
.lthumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.lbody{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.lcat{font-family:Lato,sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--brown);text-transform:uppercase;margin-bottom:10px}
.lcard h3{font-size:25px;color:var(--char);margin-bottom:10px}
.lex{font-size:15px;margin-bottom:16px}
.lcard .lnk{margin-top:auto}
.lib-more{margin-top:34px;text-align:center}

.cta{background:var(--brown);padding:70px 0}
.cta h2{font-size:50px;color:#fff;margin-bottom:18px;max-width:760px}
.cta p{font-size:17px;color:#fff;opacity:.9;max-width:760px;line-height:1.6;margin-bottom:12px}
.cta p:last-of-type{margin-bottom:32px}
.cta-btns{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

.ft{background:var(--char);color:#9C9A92;padding:52px 0 34px;font-size:15px}
.ft ul{list-style:none;margin:0;padding:0;line-height:1.95}
.ft h4{color:var(--cream);margin:0 0 14px;font-family:Lato;font-size:15px;font-weight:700}
/* .fl is applied by hand; wp_nav_menu() anchors get the same treatment. */
.fl,.ft ul a{color:#9C9A92;text-decoration:none;transition:color .25s ease}
.fl:hover,.ft ul a:hover{color:var(--cream)}
/* The email is one unbroken 31-character token. Last round it was allowed to
   wrap, which stopped the overflow but split the address across two lines.
   It is meant to read as one line, so the column is widened below instead and
   the address is pinned. Everything else in the footer may still wrap. */
.ft a{overflow-wrap:normal}
.ft a[href^="mailto:"]{white-space:nowrap}
.ft .brand-logo-link{display:inline-block}
.ft .loc-map{display:inline-block}
.so{color:var(--orange);display:inline-block;transition:transform .25s ease}
.so:hover{transform:translateY(-3px);color:#fff}
.ft .brand-logo{width:182px;margin-bottom:24px}
.ft .brand-blurb{line-height:1.8;max-width:250px}
.ft .socials{margin-top:24px;display:flex;gap:20px}
.ft .loc{line-height:1.9;margin-bottom:16px}
.ft .loc strong{color:var(--cream);font-weight:400}
.ft .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* Tablet: the five footer columns are 3/2/3/2/2 of twelve, so the contact
   column — which carries the email — was only 169px wide while the address
   needs 223px. Three equal columns give it ~306px, enough for one line. */
@media (min-width:992px) and (max-width:1199.98px){
  .ft .g-footer > [class*="col-"]{flex:0 0 33.3333%;max-width:33.3333%}
}

/* ==========================================================================
   Interior pages — inherits the home type scale
   ========================================================================== */
.page-hero{padding:52px 0 10px}
.page-hero .eb{margin-bottom:14px}
.page-hero h1{font-size:46px;color:var(--green)}
.page-hero .lede{font-size:17px;color:var(--muted);max-width:760px;margin-top:16px}

/* --------------------------------------------------------------------------
   Inner page title banner
   Only applies with .has-bg, which som_page_hero_class() adds when a banner
   image actually resolves. Without one the plain cream band above is used
   unchanged, so a page with no image never renders a broken banner.
   -------------------------------------------------------------------------- */
.page-hero.has-bg{position:relative;padding:0;min-height:290px;display:flex;align-items:center;overflow:hidden;background:var(--green)}
.page-hero.has-bg > .container{position:relative;z-index:2;padding-top:34px;padding-bottom:34px}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center center}
/* The tint carries the text contrast. It is weighted to the left so the title
   sits on the near-opaque end while the right stays readable as a photograph —
   the same treatment as the reference. Measured against #fff: the title area
   clears WCAG AA comfortably. */
.page-hero-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,88,49,.94) 0%,rgba(36,88,49,.90) 42%,rgba(36,88,49,.78) 78%,rgba(36,88,49,.72) 100%)}
.page-hero.has-bg h1{color:#fff}
.page-hero.has-bg .eb{color:var(--cream)}
.page-hero.has-bg .eb a{color:inherit}
.page-hero.has-bg .lede{color:rgba(255,255,255,.92)}
.page-hero.has-bg .lnk{color:var(--cream)}
.page-hero.has-bg .lnk:hover{color:#fff}
/* --------------------------------------------------------------------------
   Inner page bands (issue #11)
   Content is stored as one document and split at each <h2> on output, so each
   section becomes a full-bleed band with the copy inside the 1200px container.
   -------------------------------------------------------------------------- */
.eband{padding:52px 0}
.eband-white{background:#fff}
.eband-cream{background:var(--cream)}
.eband-intro{background:#fff;padding-top:46px}
.eband + .eband{border-top:0}
/* Copy runs the full container width on request (issue #11, round 15). That is
   about 1170px, roughly 150 characters a line — wider than the 75-90 usually
   considered comfortable. Set a max-width here if it needs pulling back. */
.eband .entry{padding:0;max-width:none}
.eband .entry > :first-child{margin-top:0}
.eband .entry h2:first-child{margin-top:0}
/* `.g-intro`'s gutter is declared up with the other gutter classes, above the
   cap — see the note there. */
/* Credential and role, sitting under the intro like the home page's
   practitioner block rather than being section headings of their own. */
.eband .credential{font-weight:700;color:var(--char);margin-bottom:18px}
.eband .credential span{display:block;font-weight:400;color:var(--muted);font-size:15px;margin-top:2px}
/* Every band that carries an image lays out as copy beside figure. The side
   alternates via Bootstrap's order-lg-* on the columns, so the copy stays
   first in the markup and the reading order is identical on every band. */
/* Centred in its column. The figure caps at 420px inside a column that is wider
   than that, and `margin:0` put the whole of the slack on one side — flush to
   the outer edge on a left-hand band, flush to the copy on a right-hand one, so
   the two sides of the alternation were not mirror images of each other. */
.eband .entry-figure{float:none;width:100%;max-width:420px;margin:0 auto}
/*
 * 470px tall, matching the home page's About portrait (`.pwrap .arch`).
 *
 * A 4/5 ratio on a 420px column came out 525px, noticeably taller than the
 * home page's, so the same photograph read as two different shapes on the two
 * pages. A fixed height is what the home page uses and is what makes them
 * agree.
 *
 * Only above the drawer breakpoint. Below it the column goes full width and a
 * fixed height stops tracking it — the frame turns wide-landscape while the
 * source photographs are tall portraits, `object-fit:cover` zooms in hard, and
 * the subject is cropped out. That was the round-10 defect, and the mobile rule
 * further down puts the ratio back for exactly that reason. Do not move this
 * below that media query.
 */
.eband .entry-figure .arch{height:470px;border-radius:210px 210px 8px 8px}
/* An image-bearing band's copy is no longer full container width, so the
   1170px note above applies only to the text-only bands. */
.eband .row .entry{max-width:none}
.eband-intro .entry-figure{float:none;width:100%;max-width:420px;margin:0 auto}
.eband-intro .entry-figure .arch{height:470px;border-radius:210px 210px 8px 8px;margin: 0 auto;}
/*
 * Crop these from the top, as the home page's portrait does.
 *
 * `.entry-figure img` further down sets `center center`, and it beats the
 * `.arch img{object-position:center top}` the home page gets — so the two pages
 * cropped the same photograph differently even before this change.
 *
 * Pinning the height makes that matter. The taller the column, the more a fixed
 * 470px frame has to crop: at a 525px-wide column it discards 190px of a
 * portrait, and centred that is 95px off the top — the head, which is the defect
 * fixed at the file level earlier in this issue. Cropping from the top keeps
 * every one of these subjects intact whatever width the column ends up.
 */
.eband .entry-figure .arch img,
.eband-intro .entry-figure .arch img{object-position:center top}

/*
 * Sub-section boxes (issue #14).
 *
 * A band's <h3> sub-sections become a grid of boxes instead of one long column
 * of prose. `align-items:stretch` is Bootstrap's default and is what makes the
 * boxes in a row match height; the flex column plus `margin-top:auto` on a
 * trailing list keeps their headings aligned even when the copy under them runs
 * to different lengths.
 */
.eband .g-boxes{align-items:stretch}
.eband .sbox{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 26px}
.eband-white .sbox{background:var(--cream)}
.eband .sbox > :first-child{margin-top:0}
.eband .sbox > :last-child{margin-bottom:0}
/* The boxes carry the size contrast now, so a heading inside one does not need
   to shout at the 27px it uses when it heads a full-width section. */
.eband .sbox h3{font-size:21px;margin:0 0 10px}
.eband .sbox p:last-child,.eband .sbox ul:last-child{margin-bottom:0}
.eband .sbox ul{padding-left:20px}

/*
 * A list of short items set in two columns.
 *
 * `columns: 2 240px` is "at most two columns, each at least 240px wide", so the
 * browser drops back to one column whenever the container cannot give both
 * columns that much — beside a photograph on a tablet, or anywhere on a phone.
 * That is the whole reason the shorthand is used rather than a bare
 * `columns: 2` plus a breakpoint: the same list renders full width on one page
 * and in a 7-of-12 column on another, and one media query cannot be right for
 * both.
 *
 * `columns` rather than a grid of <li>s keeps the markup a plain <ul>, so a
 * screen reader still announces one list of n items. break-inside stops an item
 * being split across the column boundary.
 */
.entry ul.cols-2{columns:2 240px;column-gap:40px}
.entry ul.cols-2 li{break-inside:avoid}

/* ==========================================================================
   Contact form (issue #14) — no plugin, so the fields are styled here
   ========================================================================== */
/*
 * These rules cover the theme's own form AND Contact Form 7's (issue #14).
 *
 * CF7 renders unstyled controls — a 2px grey border, square corners, and an
 * input sized by its `size` attribute rather than its column, which is what the
 * form looked like before these selectors were widened. It also wraps every
 * control in `<span class="wpcf7-form-control-wrap">`, and a span is inline, so
 * `width:100%` on the input alone does nothing until the wrapper is a block.
 */
.g-form{--bs-gutter-x:24px;--bs-gutter-y:18px}
.wpcf7-form-control-wrap{display:block}
.cform label,.wpcf7-form label{display:block;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--char)}
.cform .req,.wpcf7-form .req{color:var(--green)}
.cform .opt,.wpcf7-form .opt{font-weight:400;color:var(--muted)}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form textarea,
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{
  width:100%;font-family:inherit;font-size:16px;line-height:1.5;color:var(--char);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px;transition:border-color .2s ease}
/* 16px, not smaller: iOS Safari zooms the whole page in when a focused field's
   text is under 16px, which then leaves the layout scrolled sideways. */
.cform textarea,.wpcf7-form textarea{resize:vertical;min-height:140px}
.cform input:focus,.cform textarea:focus,
.wpcf7-form input:focus,.wpcf7-form textarea:focus{border-color:var(--green);outline-offset:1px}
.cform button,.wpcf7-form input[type=submit]{margin-top:4px;cursor:pointer}
.cform .form-req,.wpcf7-form .form-req{font-size:14px;color:var(--muted);margin-bottom:12px}

/*
 * CF7's own messages, given the same treatment as the theme's notes.
 *
 * Its validation text is `.wpcf7-not-valid-tip` under the field, and its
 * response line is `.wpcf7-response-output` — a bare bordered box by default,
 * in colours from nowhere in this palette.
 */
.wpcf7-not-valid-tip{color:#8a4b00;font-size:14px;margin-top:6px}
.wpcf7-form input.wpcf7-not-valid,.wpcf7-form textarea.wpcf7-not-valid{border-color:rgba(217,119,6,.7)}
.wpcf7-response-output{border-radius:8px;padding:14px 18px!important;margin:20px 0 0!important;
  border:1px solid rgba(217,119,6,.4)!important;background:rgba(217,119,6,.10);color:#8a4b00}
.wpcf7-form.sent .wpcf7-response-output{border-color:rgba(46,111,64,.35)!important;
  background:rgba(46,111,64,.10);color:var(--green-dk)}
/* CF7 shows the spinner inline next to the button while a submission is in
   flight; without a margin it sits hard against it. */
.wpcf7-spinner{margin-left:12px}
/* The honeypot. Positioned off-screen rather than display:none — some bots skip
   hidden inputs, and this one needs to look fillable to them. */
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{border-radius:8px;padding:14px 18px;margin:0 0 20px}
.form-note ul{margin:8px 0 0;padding-left:20px}
.form-ok{background:rgba(46,111,64,.10);border:1px solid rgba(46,111,64,.35);color:var(--green-dk)}
.form-bad{background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.4);color:#8a4b00}

.entry{padding:34px 0 58px;max-width:860px}
.entry h2{font-size:34px;color:var(--brown);margin:34px 0 14px}
.entry h3{font-size:27px;color:var(--green);margin:26px 0 12px}
.entry p{margin-bottom:16px}
.entry ul,.entry ol{margin:0 0 18px;padding-left:22px}
.entry li{margin-bottom:8px}
.entry a{color:var(--green)}
/* In-content links had a colour and no hover state at all, so nothing responded
   to the pointer — reported against the contact page's phone and email, but true
   of every link in a page body.
   The thickness change matters as much as the colour: most of these links are
   already underlined at rest, so green to dark-green on its own is a shift
   between two similar greens that is easy to miss and impossible to rely on for
   anyone who cannot separate them. Orange would be the obvious accent and is
   barred here — it fails WCAG AA as text, see the token block at the top. */
.entry a{transition:color .2s ease}
.entry a:hover{color:var(--green-dk);text-decoration:underline;text-decoration-thickness:2px}
.entry a.btn:hover{text-decoration:none}
/*
 * Buttons inside the article keep their own colours.
 *
 * `.entry a` is (0,0,1,1) and beats `.bg` at (0,0,1,0), so a `.btn.bg` in the
 * body rendered green text on a green box — contrast 1.00:1, a completely
 * blank button, which is what was reported on issue #11. Any new button
 * variant needs adding here too, or it will inherit the link colour and
 * disappear the same way.
 */
.entry .btn.bg{color:var(--cream)}
.entry .btn.bg:hover{color:var(--cream)}
.entry .btn.bo{color:var(--brown)}
.entry .btn.bo:hover{color:var(--cream)}
.entry .btn.bw{color:var(--char)}
.entry .btn.bw:hover{color:var(--char)}
.entry .btn.bl{color:#fff}
.entry .btn.bl:hover{color:#fff}
.entry img{border-radius:8px;margin:20px 0}
.entry blockquote{border-left:3px solid var(--orange);margin:24px 0;padding:4px 0 4px 22px;font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-style:italic;color:var(--brown)}

/* --------------------------------------------------------------------------
   Core page content (issue #11)
   -------------------------------------------------------------------------- */
/* The page photograph, in the same arch shape the home page uses for Dr Zhang.
   Floated so the opening copy wraps beside it; the .entry column is 860px, so
   a 300px figure still leaves a comfortable measure. */
.entry-figure{float:right;width:300px;margin:0 0 24px 34px;shape-outside:inset(0 round 150px 150px 8px 8px)}
.entry-figure .arch{aspect-ratio:4/5;border-radius:150px 150px 8px 8px}
.entry-figure img{width:100%;height:100%;object-fit:cover;object-position:center center}
.entry .lede{font-size:20px;color:var(--brown);font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;line-height:1.25;margin-bottom:22px}
.entry .lead-in{margin-bottom:6px}
.entry .term-list{color:var(--char);margin-bottom:18px}
.entry .addr{line-height:1.7}
/* Opening hours as a two-column definition list without the markup weight. */
.entry ul.hours{list-style:none;padding-left:0;margin:0 0 18px}
.entry ul.hours li{display:flex;gap:14px;margin-bottom:4px}
.entry ul.hours span{flex:0 0 110px;font-weight:700}
/* Fee table. Wrapped so a narrow screen scrolls the table rather than the page. */
.table-wrap{overflow-x:auto;margin:0 0 22px}
.entry table.fees{width:100%;border-collapse:collapse;font-size:16px;min-width:420px}
.entry table.fees th{text-align:left;font-family:Lato,sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
.entry table.fees td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.entry table.fees td:last-child,.entry table.fees th:last-child{text-align:right;padding-right:0;white-space:nowrap}
/* In-copy calls to action. */
/* Flex rather than inline-block with a right margin: the margin left a stray
   gap after the last button, and once the buttons wrapped on a phone they sat at
   their own content widths — a wide Schedule button above a narrow Call Us,
   which is what the iPhone SE screenshot showed. */
.entry-cta{margin:8px 0 22px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:575.98px){
  /* Stacked and equal width, so the pair reads as one control group. */
  .entry-cta{flex-direction:column;align-items:stretch}
  .entry-cta .btn{width:100%;text-align:center}
}

/*
 * Related services cards inside an article (issue #14).
 *
 * Two fixes, both caused by the row living inside `.entry`:
 *
 *   `.entry a{color:var(--green)}` already painted the title green, so the
 *   `.svc:hover .sl{color:var(--green)}` hover changed nothing — the cards look
 *   interactive on the home page, where they are not inside `.entry`, and dead
 *   here. The title takes the body colour at rest so the green hover reads.
 *
 *   Four cards at col-lg-4 is three per row, so the fourth wrapped onto a line
 *   of its own. col-lg-3 fits all four, with the circle and title stepped down
 *   so the narrower column does not crowd them.
 */
.entry .svc-related .sl{color:var(--char)}
.entry .svc-related .svc:hover .sl{color:var(--green)}
/*
 * No underline on a card (issue #14). `.entry a:hover` underlines in-content
 * links, which is right for a phone number in a paragraph and wrong for a
 * photograph with a caption — it drew a line under the title and made the card
 * behave unlike the identical one on the home page, which is outside `.entry`
 * and so never picked the rule up. The home effect is the title turning green
 * and the image scaling, and that is now what happens here too.
 */
.entry .svc-related .svc:hover{text-decoration:none}
.entry .svc-related .svc:hover .sl{text-decoration:none}
.entry .svc-related .circ{max-width:78%}
/* Six cards sit in the same col-lg-4 the home page uses, so their circles take
   the home page's proportion too; the four-up rows keep the wider 78% that
   fills their narrower column. */
.entry .svc-related.svc-six .circ{max-width:67%}
.entry .svc-related .sl{font-size:20px;min-height:0;margin-top:12px}
.entry .svc-related{--bs-gutter-x:24px;--bs-gutter-y:26px}
.entry-link{margin-bottom:18px}
.entry .arw{display:inline-block;transition:transform .28s ease}
.entry .lnk:hover .arw{transform:translateX(5px)}

@media (max-width:767.98px){
  /* Floating a 300px figure inside a 360px column leaves no measure at all,
     so it goes full width above the copy instead. */
  .entry-figure{float:none;width:100%;max-width:300px;margin:0 auto 24px;shape-outside:none}
  /* Below lg the columns stack, and order-lg-* no longer applies — so the
     image would land under its copy on every band. Ordering the figure first
     puts the picture above the text it belongs to, which is the reading order
     the alternation is trying to give on a wide screen. */
  .eband .row > .col-lg-5{order:1}
  .eband .row > .col-lg-7{order:2}
  .eband .entry-figure{margin:0 auto 24px}
  .entry .lede{font-size:23px}
  .entry ul.hours li{flex-direction:column;gap:0;margin-bottom:10px}
  .entry ul.hours span{flex:none}
}
.pagination{display:flex;gap:10px;padding:0 0 58px;flex-wrap:wrap}
.pagination .page-numbers{padding:10px 16px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--char)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.nf{padding:80px 0;text-align:center}
.nf h1{font-size:50px;color:var(--green);margin-bottom:16px}
/* A flex column with the button pushed to the bottom, so the two cards' buttons
   line up however much address the location has — Roscoe Village has a two-line
   address and Park Ridge one line, which left their buttons at different
   heights (issue #14). `height:100%` already made the cards equal; it is the
   content inside that needed distributing. */
.loc-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px 30px;height:100%;
  display:flex;flex-direction:column;align-items:flex-start}
.loc-card h2{font-size:29px;color:var(--green);margin-bottom:12px}
.loc-card p{margin-bottom:14px;line-height:1.9}
.loc-card .btn{margin-top:auto}

/* ==========================================================================
   Responsive
   NOTE: the approved design is desktop-only. Bootstrap handles the grid
   breakpoints; these rules cover the bespoke pieces (nav, arches, bands).
   The mobile layout has NOT been through design review — see README.
   ========================================================================== */
/* Drawer breakpoint. Deliberately above Bootstrap's lg (992px): the full menu
   needs ~1080px to sit beside the logo, so a 1024px tablet in landscape was
   clipping the last item ("Health Library"). The band 992–1199px therefore
   keeps the Bootstrap grid but uses the drawer. */
@media (max-width:1199.98px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--char);cursor:pointer}
  .nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
  /* The dropdown is the wrapper holding the menu AND the call/book pair
     (issue #14), rather than the <nav> alone. nav.js opens whichever element
     the burger's aria-controls names, which is this one. */
  .hd-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 34px rgba(43,43,43,.14);flex-direction:column;align-items:stretch;gap:0;padding:8px 0;z-index:50;display:none}
  .hd-panel.open{display:flex}
  .hd-panel .nav{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav > .nav-list{flex-direction:column;align-items:stretch;gap:0}

  /*
   * Phone and Book Now, stacked at the foot of the open panel. Full-width rows
   * rather than the inline pair from the desktop bar: they are the last two
   * items in a vertical list of links, and a 44px tap target each is the point.
   */
  .hd-panel .hd-cta{flex-direction:column;align-items:stretch;gap:10px;padding:14px 20px 6px;margin-top:4px;border-top:1px solid var(--line)}
  .hd-panel .hd-phone{justify-content:center;min-height:44px;font-size:16px}
  .hd-panel .hd-book{text-align:center;padding:13px 20px;font-size:15px}

  /* Each row is a two-column grid: label, then toggle. The toggles used to be
     absolutely positioned over the whole <li>, which breaks here because an
     <li> grows when its submenu opens — the parent toggle drifted into the
     middle of the expanded panel, and the flyout toggle (top:0;bottom:0)
     covered the right edge of every submenu link and swallowed taps. In the
     grid they stay beside their own label whatever the row's height. */
  .nav-list > li,
  .dd > li.sub{display:grid;grid-template-columns:1fr 44px;align-items:center;padding:0 20px}
  .dd > li.sub{padding:0}
  .nav-list > li > .nv,
  .dd > li.sub > .ddl{grid-column:1;min-width:0}
  .nv{padding:14px 0}
  .nv:after{display:none}
  .nv .cv,.ddl .rc{display:none}

  .nav-list > li > .nvt,
  .dd > li.sub > .fly-toggle{position:static;grid-column:2;justify-self:end;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transform:none;inset:auto}
  /* Chevron drawn in CSS so the button reads as a control on its own. */
  .nvt:before,.fly-toggle:before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
  [data-open="true"] > .nvt:before,[data-open="true"] > .fly-toggle:before{transform:translateY(2px) rotate(-135deg)}

  .dd,.sub > .fly{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 8px;padding:0;min-width:0;display:none}
  /* Submenus span the full row so they are not squeezed into column 1. */
  .nav-list > li > .dd,.dd > li.sub > .fly{grid-column:1 / -1}
  .ddwrap:hover > .dd,.sub:hover > .fly{display:none}
  .ddwrap[data-open="true"] > .dd,.sub[data-open="true"] > .fly{display:block}
}
/* Layout rules below stay on Bootstrap's lg boundary — only the nav moves up. */
@media (max-width:991.98px){
  /*
   * Arch frames below lg. The columns go full width here, and the arches used
   * to keep a fixed pixel height (440px / 420px) that did not track that new
   * width — so the frame turned wide-landscape (1.76–1.87) while the source
   * photos are tall portraits (0.68). object-fit:cover then zoomed in hard and
   * `object-position:center top` showed the band above the subject's head: at
   * 667x375 only the top 36% of a 1120px-tall photo was on screen, which is
   * wall, framed print and lamp — the face began below the visible slice.
   *
   * An aspect-ratio keeps the frame proportional to the photo at any width,
   * which is what .circ (1/1) and .lthumb (25/16) already do. Capping the
   * width keeps it a portrait card rather than a full-bleed band, and the
   * radius stays at half the cap so the dome is still a true semicircle.
   */
  .arch{border-radius:180px 180px 8px 8px}
  /* The inner-page band arches take a fixed 470px above this breakpoint to
     match the home page; here they go back to a ratio for the reason above. */
  .hero .arch,.pwrap .arch,.eband .entry-figure .arch,.eband-intro .entry-figure .arch{height:auto;aspect-ratio:4/5;width:100%;max-width:360px;margin-left:auto;margin-right:auto}
  /* Only ~15% is cropped at this ratio, but crop from the middle so the
     subject stays framed rather than being trimmed from the bottom. */
  .arch img{object-position:center center}
  /* The plate is absolutely positioned at 74% of the column and cannot line up
     once the arch is centred and capped — it measured 573x468 behind a 751x420
     arch, which is the offset cream shape in the report. */
  .pwrap{padding:0}
  .pwrap .plate{display:none}
  .head{flex-direction:column;align-items:flex-start;gap:24px}
}
@media (max-width:767.98px){
  /*
   * The phone number and Book Now used to sit beside the burger here, which
   * left room for neither: the number was reduced to a bare icon with its
   * digits hidden, and the button to 13px. Both now live inside the panel the
   * burger opens (issue #14), so the header bar holds the logo and the burger
   * and nothing competes for the width — which is why the rules that shrank
   * them are gone rather than adjusted. The number is spelled out again,
   * because in a stacked panel there is space for it.
   */
  .hd .container{gap:12px;padding-top:12px;padding-bottom:12px}
  /*
   * One line, always (issue #14, round 2). The previous rule set
   * `white-space:normal` so the tagline could wrap inside the 140px logo
   * column, and it duly wrapped to two lines under a one-line wordmark. It
   * keeps `nowrap` now and is allowed to be wider than the logo above it —
   * `width:max-content` takes it out of that column's width without needing
   * the logo itself to grow — with the size dropped a step so it still fits.
   */
  .logo-tagline{letter-spacing:.03em;white-space:nowrap;font-size:8px;width:max-content}
  .hd .logo{width:140px}
  .hero h1,.cta h2{font-size:34px}
  .eb,.band p.eb{font-size:34px}
  .band h2,.sec-intro h2,.head h2{font-size:27px}
  /* 290px of banner on a phone is most of the screen before any content, and
     the title is smaller here anyway. The tint also goes vertical, because a
     left-weighted gradient has no room to fade across a 390px viewport. */
  .page-hero.has-bg{min-height:190px}
  .page-hero.has-bg h1{font-size:34px}
  .page-hero-tint{background:linear-gradient(180deg,rgba(36,88,49,.86) 0%,rgba(36,88,49,.92) 100%)}
  /* Phone portrait: a slightly smaller card so the hero copy and buttons are
     still reachable without scrolling past a full screen of photograph. */
  .hero .arch,.pwrap .arch{max-width:300px}
  .arch{border-radius:150px 150px 8px 8px}
  .cta-btns,.hero .hero-btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  .ft .legal{flex-direction:column;gap:10px}
}

/* Short viewports — a phone held in landscape is about 400px tall, where any
   sticky block is a large share of the screen. Below this height the header
   scrolls away with the page instead. */
@media (max-height:500px) and (orientation:landscape){
  .site-top{position:static}
  .hd .container{padding-top:8px;padding-bottom:8px}
  .hd .logo{width:140px}
  /* The drawer must not exceed the screen it opens on. */
  .nav{max-height:calc(100vh - 60px);overflow-y:auto}
  /* A 4/5 card 300px wide is 375px tall — the entire height of a phone held in
     landscape. The frame took 91% of the viewport before this round; 190px
     gives a 238px card, about 63% of a 375px screen, so the heading and
     buttons are visible without scrolling past a full screen of photograph. */
  .hero .arch,.pwrap .arch{max-width:190px}
  .arch{border-radius:95px 95px 8px 8px}
}

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

.hd-phone {
  display: none;
}

/* Map in a two-column band, in place of the photograph (30/08 feedback).
   The arch already clips to the same rounded shape the photographs use, so the
   map only has to fill it — an iframe defaults to inline with a border. */
.eband .entry-map .arch{height:470px}
.eband .entry-map iframe{display:block;width:100%;height:100%;border:0}

/* ---- Condition pages: colour without photographs (30/08 feedback) --------
   "use symbol or icon to add a little color (for example green or light brown)
   ... I do not want to insert a picture for them."

   These sixteen pages are the only ones with no photograph in them, so they
   had nothing but prose to look at. The colour comes from the palette already
   in use — --green for the icons and rules, --brown for the headings, --cream
   for the FAQ boxes — so the pages gain contrast without gaining a new look. */
.single-condition .entry h2.has-ic{display:flex;align-items:center;gap:12px}
.single-condition .entry .h2ic{flex:0 0 auto;width:1.05em;height:1.05em;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* A short rule under each section heading, in place of the visual break a
   photograph would have given. */
.single-condition .entry h2.has-ic::after{content:"";flex:0 0 auto;width:34px;height:2px;background:var(--orange);opacity:.55;border-radius:2px}

/* Symptom and benefit lists: a green marker rather than the default dot. */
.single-condition .entry ul{list-style:none;padding-left:0}
.single-condition .entry ul li{position:relative;padding-left:26px;margin-bottom:7px}
.single-condition .entry ul li::before{content:"";position:absolute;left:4px;top:.58em;width:8px;height:8px;border-radius:50%;border:2px solid var(--green)}

/* The FAQ answers already become boxes (two or more h3 in a band). Tinting
   them separates the questions from the prose above without a heading style. */
.single-condition .entry .sbox{background:var(--cream);border-left:3px solid var(--brown);border-radius:10px;padding:20px 22px}
.single-condition .eband-cream .entry .sbox{background:#fff}
.single-condition .entry .sbox h3{color:var(--brown)}

@media (max-width:575px){
  .single-condition .entry h2.has-ic{gap:9px}
  .single-condition .entry h2.has-ic::after{display:none}
}

/* A som-col section inside a card leads with an <h2>, where the <h3> boxes lead
   with an <h3>. Same card, so the same heading size — 34px inside a half-width
   box is a heading competing with the band title above it. */
.eband .sbox h2{font-size:21px;color:var(--brown);margin:0 0 10px}
.eband .sbox > h2:first-child{margin-top:0}

/* Testimonial cards: clamp the quote in the carousel only.
   Every slide matches the tallest, so one 1,300-character review would triple
   the height of all nine. The Testimonial page shows the same reviews in a grid
   with room to breathe, and gets them in full — the words are the patients'
   and are not shortened in the database. */
.owl-carousel .tq{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}

/* Health Library article: one continuous read, not a stack of bands.
   Constrained to a comfortable measure, since the copy is no longer sharing a
   band with a photograph and would otherwise run the full container width. */
.entry-article{max-width:760px}
.entry-article > :first-child{margin-top:0}
.entry-article h2{font-size:28px;margin:36px 0 12px}
.entry-article ul{margin-bottom:20px}

@media only screen and (min-width: 1024px) {
body.admin-bar .site-top {
  top: 32px;
}
}