/* ---- Navbar ---- */
#navbar { transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.nav-link { color: rgba(242,240,233,0.75); }
.nav-link:hover { color: #F2F0E9; }
.nav-logo-vue { color: #F2F0E9; }
.nav-logo-text { color: rgba(242,240,233,0.65); }
#navbar.scrolled { background: rgba(242,240,233,0.88) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(46,64,54,0.15) !important; box-shadow: 0 4px 32px rgba(0,0,0,0.08); }
#navbar.scrolled .nav-link       { color: rgba(46,64,54,0.75); }
#navbar.scrolled .nav-link:hover { color: #2E4036; }
#navbar.scrolled .nav-logo-vue   { color: #2E4036; }
#navbar.scrolled .nav-logo-text  { color: rgba(46,64,54,0.6); }

/* ---- Mobile menu ---- */
#mobile-menu { transition: opacity 0.3s ease, transform 0.3s ease; }
#mobile-menu.hidden { opacity: 0; pointer-events: none; transform: translateY(-8px); }
#mobile-menu.open   { opacity: 1; pointer-events: all; transform: translateY(0); }

/* ---- Buttons ---- */
.btn-clay { position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s ease; cursor: pointer; }
.btn-clay:hover { transform: scale(1.03); box-shadow: 0 8px 32px rgba(204,88,51,0.35); }
.btn-clay .btn-slide { position: absolute; inset: 0; background: rgba(255,255,255,0.15); transform: translateX(-101%); transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.btn-clay:hover .btn-slide { transform: translateX(0); }
.btn-magnetic { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); }
.hamburger-line { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: all 0.3s ease; }
#hamburger { cursor: pointer; }

/* ---- Interactive clay ---- */
/* Measured contrast ratios behind every decision below. All figures are the
   standard WCAG 2.x sRGB relative-luminance calculation:
     #CC5833 on cream  #F2F0E9 ... 3.68:1   fails AA normal text
     #B24727 on cream  #F2F0E9 ... 4.82:1   passes AA normal text
     #AE4324 on cream  #F2F0E9 ... 5.08:1   passes AA normal text
     #CC5833 on tinted #E8E7E0 ... 3.38:1   fails AA normal text
     #B24727 on tinted #E8E7E0 ... 4.43:1   fails AA normal text
     #AE4324 on tinted #E8E7E0 ... 4.67:1   passes AA normal text
     #CC5833 on moss   #2E4036 ... 2.63:1   fails everything
     #B24727 on moss   #2E4036 ... 2.01:1   fails everything, worse than clay
     #AE4324 on moss   #2E4036 ... 1.91:1   fails everything, worse still
     cream   on moss   #2E4036 ... 9.68:1   passes AA and AAA
   So there is no clay of any darkness that works as text on moss: darkening
   clay moves it TOWARDS the moss background. Moss-context text and links use
   cream, full stop. Both clay tokens below are light-surface colours only.
   #E8E7E0 is the composite of the rgba(46,64,54,0.05) callout tint over cream.

   Decorative clay #CC5833 is deliberately untouched everywhere: badge and
   button fills, the step numeral, callout and card borders, check dots, the
   oversized C.A.R.E. letterforms, and the footer wordmark. Those are fills,
   shapes, and large graphical accents, not meaningful running text.

   main.css is unlayered and Tailwind's utilities live in `@layer utilities`,
   so these rules win on the cascade without !important. */
:root { --clay-interactive: #B24727; }

/* Different value, different job. `--clay-interactive` is spent by link and
   button affordances; `--clay-text` is the colour of meaningful STATIC clay
   text. Keeping them apart means a future change to one affordance cannot
   silently restyle every eyebrow label on the site, and vice versa. Static
   text is the harder case: it has to clear AA on the tinted callout surface
   too, where #B24727 reaches only 4.43:1, so `--clay-text` is a shade darker
   than the interactive token rather than the same value. */
:root { --clay-text: #AE4324; }

/* ---- Semantic interactive link treatments ---- */
/* These replace an earlier global `a.hover\:text-clay` rule. That selector
   keyed off a Tailwind utility rather than off meaning, so it applied its
   cream-context colour to ANY anchor carrying that utility, including one
   dropped onto moss where #B24727 measures 2.01:1. The colour a link needs
   depends on the background behind it, which a utility class does not encode,
   so the treatment is now named for the context it is valid in and applied
   deliberately per link.

   Cream context. Default is moss (9.68:1 on cream); hover/focus/active move
   to interactive clay (4.82:1) AND add an underline, so the state change is
   never carried by colour alone. :visited is pinned to the same moss default
   rather than left to inherit, so a visited link cannot pick up a stray
   colour from elsewhere. Declared before :hover so that, at equal
   specificity, the interactive states still win on a visited link. */
.vue-link-cream { color: #2E4036; }
.vue-link-cream:visited { color: #2E4036; }
.vue-link-cream:hover,
.vue-link-cream:focus,
.vue-link-cream:active { color: var(--clay-interactive); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.vue-link-cream:focus-visible { outline: 2px solid var(--clay-interactive); outline-offset: 3px; border-radius: 3px; }

/* Moss context. Cream in every state — default, visited, hover, focus,
   active — so contrast never drops below 9.68:1 no matter what the link has
   been through. Because the colour cannot change, the affordance is carried
   entirely by the underline: always present but held back at 1px and 50%
   opacity so it reads as quieter than the surrounding cream copy, then
   thickened to 2px at full opacity and pushed further off the baseline on
   hover/focus/active. Focus adds a cream outline on top of that. */
.vue-link-moss { color: #F2F0E9; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(242,240,233,0.5); text-underline-offset: 3px; }
.vue-link-moss:visited { color: #F2F0E9; }
.vue-link-moss:hover,
.vue-link-moss:focus,
.vue-link-moss:active { color: #F2F0E9; text-decoration-thickness: 2px; text-decoration-color: #F2F0E9; text-underline-offset: 4px; }
.vue-link-moss:focus-visible { outline: 2px solid #F2F0E9; outline-offset: 3px; border-radius: 3px; }

/* Meaningful NON-link text on moss — location labels, card eyebrows, and
   attributions that previously used `text-clay` at 2.63:1 — needs no class of
   its own: those templates swap the `text-clay` utility for the existing
   `text-cream` token (9.68:1). Their mono/uppercase/tracking treatment already
   sets them apart from body copy, so the hierarchy survives losing the colour
   difference. */

/* ---- Meaningful static clay text on cream and comparable light surfaces ---- */
/* The cream-side counterpart to the rule above. The same eyebrow, location,
   role, and category labels sitting on cream carried the `text-clay` utility,
   which resolves to decorative brand clay at 3.68:1 — under AA for normal-size
   text, and these labels are 0.75rem, so the large-text exemption never
   applies to them.

   This is a purpose-named class rather than a redefinition of `--clay` or the
   `text-clay` utility, because brand clay is still exactly right for the fills,
   borders, dots, SVG strokes, and oversized letterforms it is used for. Only
   the text role needed a darker value, so only the text role gets a token.

   Valid backgrounds, all verified with the sRGB calculation above:
     #F2F0E9  cream sections, .step-card, .feature-card, .protocol-card
              (cream variant), .contact-card, .team-card, .team-modal-card
              ................................................. 5.08:1  passes
     #E8E7E0  the /about/ Clinical Mission callout, whose
              rgba(46,64,54,0.05) tint composites to this over cream
              ................................................. 4.67:1  passes
   NOT valid on moss #2E4036 (1.91:1). Anything darker than the #E8E7E0
   composite needs its own measurement before this class goes near it. */
.vue-text-clay { color: var(--clay-text); }

/* ---- Base ---- */
body { background-color: #F2F0E9; color: #1A1A1A; font-family: 'Inter', sans-serif; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; }
h1,h2,h3,h4 { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 700; }
.vue-heading { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 700; }
.hero-drama  { font-family: 'Lora', serif !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.15; }
@media (max-width: 640px)               { .hero-drama { font-size: 3rem !important; } }
@media (min-width: 641px) and (max-width: 1023px) { .hero-drama { font-size: 5rem !important; } }

/* ---- Footer icons ---- */
.social-icon { color: rgba(242,240,233,0.40); transition: color 0.2s ease; display: flex; align-items: center; }
.social-icon:hover { color: rgba(242,240,233,1.00); }
.pulse-dot-green { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: pulseGreen 2s ease-in-out infinite; }
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); transform: scale(1.15); }
}

/* ---- GSAP fade initial state ---- */
/* Hidden only once vue-theme.js confirms GSAP/ScrollTrigger loaded and is
   about to animate elements in (adds .js-gsap to <html> — see vue-theme.js).
   Fails safe: if the GSAP CDN is blocked or unavailable, .gsap-fade content
   never receives this rule and stays visible at its default opacity. */
.js-gsap .gsap-fade { opacity: 0; }

/* ---- Interior page hero ---- */
.page-hero { background: #2E4036; padding: 10rem 6% 6rem; position: relative; overflow: hidden; }
.page-hero-content { position: relative; z-index: 10; max-width: 64rem; margin: 0 auto; }

/* ---- Symptom cards on moss backgrounds (frosted glass) ---- */
.symptom-card { background: rgba(242,240,233,0.1); border: 1px solid rgba(242,240,233,0.15); border-radius: 1.5rem; padding: 1.75rem 1.5rem; transition: transform 0.3s ease; }
.symptom-card:hover { transform: translateY(-4px); }

/* ---- Feature cards on cream backgrounds (no step numeral) ---- */
.feature-card { background: #F2F0E9; border: 1px solid rgba(46,64,54,0.1); box-shadow: 0 4px 40px rgba(46,64,54,0.07); border-radius: 1.5rem; padding: 1.75rem 1.5rem; transition: transform 0.3s ease; }
.feature-card:hover { transform: translateY(-4px); }

/* ---- Step cards on cream backgrounds ---- */
.step-card { position: relative; padding: 2.5rem 2rem 2rem; border-radius: 1.5rem; background: #F2F0E9; border: 1px solid rgba(46,64,54,0.1); box-shadow: 0 4px 40px rgba(46,64,54,0.07); transition: transform 0.3s ease; overflow: hidden; }
.step-card:hover { transform: translateY(-4px); }
.step-card-number { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 3rem; line-height: 1; color: #CC5833; margin-bottom: 1.25rem; }

/* ---- Research stat cards on cream backgrounds ---- */
.research-stat { background: #F2F0E9; border: 1px solid rgba(46,64,54,0.1); box-shadow: 0 4px 40px rgba(46,64,54,0.07); border-radius: 1.5rem; padding: 1.75rem 1.5rem; text-align: center; }

/* ---- Research stat cards on moss backgrounds (frosted glass) ---- */
.research-stat-moss { background: rgba(242,240,233,0.1); border: 1px solid rgba(242,240,233,0.15); border-radius: 1.5rem; padding: 1.75rem 1.5rem; text-align: center; }

/* ---- Research stat numeral ---- */
/* The stat numeral is what drives stat-card height, so it belongs to the
   shared pattern rather than to each template. Every template previously
   repeated `style="font-size: clamp(3rem, 7vw, 5rem)"` inline, which meant
   there was no shared control point at all — an inline declaration cannot be
   corrected from a stylesheet without !important, so the same oversize value
   was duplicated on every page that uses the pattern.
   The `vw` unit also sized the numeral from the VIEWPORT rather than from the
   card. On desktop it pinned to its 5rem (80px) ceiling inside a roughly
   328px-wide grid column, i.e. display-hero scale inside a card, so the
   numeral plus the card's block padding accounted for well over half the card
   height before any of its actual content. This clamp is sized for the card:
   it reaches its 3.25rem ceiling at about 1156px and holds a 2.25rem floor on
   phones, where each card spans the full column width.
   `leading-none` and `font-bold` stay on the element as Tailwind utilities;
   only the size and family live here. */
.research-stat-number { font-family: 'Inter', sans-serif; font-size: clamp(2.25rem, 4.5vw, 3.25rem); }

/* ---- Citation cards ---- */
.citation-card { background: #F2F0E9; border: 1px solid rgba(46,64,54,0.1); box-shadow: 0 4px 40px rgba(46,64,54,0.07); border-radius: 1rem; padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; transition: transform 0.3s ease; }
.citation-card:hover { transform: translateY(-3px); }

/* ---- Credential badges ---- */
.cred-tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: white; background: #CC5833; padding: 5px 14px; border-radius: 9999px; }
.cred-tag-lavender { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: white; background: #827191; padding: 5px 14px; border-radius: 9999px; }

/* ---- Callout box ---- */
.bvd-callout { border-left: 3px solid #CC5833; padding: 1.5rem 1.75rem; background: rgba(242,240,233,0.1); margin: 2.5rem 0; border-radius: 0 0.5rem 0.5rem 0; }

/* ---- Exam distinction columns ---- */
.distinction-col { padding: 2.25rem 1.75rem; border-radius: 1.5rem; }
.distinction-col.standard { background: #E8E6DF; }
.distinction-col.vue-col { background: #2E4036; }

/* ---- Checklist ---- */
.checklist-item { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 1px solid rgba(46,64,54,0.08); }
.checklist-item:last-child { border-bottom: none; }
.check-dot { width: 20px; height: 20px; background: #CC5833; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.check-dot::after { content: '\2713'; color: #F2F0E9; font-size: 10px; font-weight: 700; }

/* ---- Full-height homepage hero ---- */
#hero { min-height: 100dvh; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding-top: 7rem; padding-bottom: 5rem; }
#hero-bg { position: absolute; inset: 0; background: #2E4036; background-size: cover; background-position: center top; transform: scale(1.05); transition: transform 8s ease; }
#hero-bg.loaded { transform: scale(1); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,26,0.92) 0%, rgba(46,64,54,0.75) 50%, rgba(46,64,54,0.45) 100%); }
.hero-content { position: relative; z-index: 10; }

/* ---- Homepage process sticky cards ---- */
.protocol-card { position: sticky; border-radius: 2.5rem; transform-origin: top center; }
.protocol-card-inner { min-height: 85vh; display: flex; align-items: center; justify-content: center; }

/* ---- SVG animations (homepage process illustrations) ---- */
@keyframes rotateSlow  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes rotateSlowR { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes scanMove    { 0%{transform:translateX(-80px);opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{transform:translateX(80px);opacity:0;} }
@keyframes ekgDraw     { 0%{stroke-dashoffset:300;opacity:0} 10%{opacity:1} 60%{stroke-dashoffset:0;opacity:1} 85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:-300;opacity:0} }
.rotate-slow   { animation: rotateSlow 12s linear infinite; transform-origin: center; }
.rotate-slow-r { animation: rotateSlowR 8s linear infinite; transform-origin: center; }
.scan-line     { animation: scanMove 2.5s ease-in-out infinite; }
.ekg-path      { stroke-dasharray: 300; stroke-dashoffset: 300; animation: ekgDraw 2.5s ease-in-out infinite; }

/* ---- About page: Research publication items ---- */
.research-item { display: flex; gap: 1rem; align-items: flex-start; background: rgba(242,240,233,0.07); border: 1px solid rgba(242,240,233,0.12); border-radius: 0.75rem; padding: 1.25rem 1.5rem; }
.research-badge { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; background: #CC5833; color: #fff; padding: 4px 8px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* ---- About page: C.A.R.E. carousel ---- */
.care-carousel-outer { position: relative; user-select: none; overflow: hidden; }
.care-carousel { overflow: visible; padding: 28px 0 8px; }
.care-track { display: flex; gap: 20px; align-items: center; will-change: transform; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: grab; }
.care-track.dragging { transition: none; cursor: grabbing; }
.care-slide { flex: 0 0 300px; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease; transform: scale(0.78); opacity: 0.28; cursor: pointer; }
.care-slide.is-active { transform: scale(1); opacity: 1; cursor: default; }
.care-slide.is-adjacent { transform: scale(0.88); opacity: 0.55; }
.care-cell { background: #2E4036; border-radius: 1.5rem; padding: 2.5rem 2rem; display: flex; flex-direction: column; }
.care-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; }
.care-arrow { width: 44px; height: 44px; border-radius: 50%; background: #2E4036; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; flex-shrink: 0; }
.care-arrow:hover { background: #CC5833; transform: scale(1.08); }
.care-dots { display: flex; gap: 8px; align-items: center; }
.care-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(46,64,54,0.2); border: none; padding: 0; cursor: pointer; transition: background 0.3s, transform 0.3s; }
.care-dot.active { background: #2E4036; transform: scale(1.4); }

/* ---- About page: Locations grid ---- */
.locations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .locations-grid { grid-template-columns: 1fr; } }

/* ---- About page: Team cards ---- */
.team-card { padding: 0; }
.team-photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 1.5rem 1.5rem 0 0; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; display: block; }
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-card-body { padding: 1.5rem 1.5rem 1.75rem; }
.team-read-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 0.875rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-interactive); background: none; border: none; cursor: pointer; padding: 0; transition: opacity 0.2s; }
/* Same reasoning as .post-card-link: underline instead of a fade, so the
   contrast on cream holds in every interactive state. */
.team-read-more:hover, .team-read-more:focus, .team-read-more:active { text-decoration: underline; text-underline-offset: 3px; }
.team-read-more:focus-visible { outline: 2px solid var(--clay-interactive); outline-offset: 3px; border-radius: 3px; }

/* ---- About page: Team modal ---- */
.team-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(26,26,26,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.team-modal.hidden { display: none; }
.team-modal-card { background: #F2F0E9; border-radius: 2rem; width: 100%; max-width: 840px; max-height: 90vh; overflow: hidden; position: relative; display: grid; grid-template-columns: 300px 1fr; }
.team-modal-photo { overflow: hidden; }
.team-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.team-modal-body { padding: 2.5rem 2.5rem 2.5rem 2rem; overflow-y: auto; max-height: 90vh; }
.team-modal-body p + p { margin-top: 1rem; }
.team-modal-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; background: rgba(46,64,54,0.12); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #2E4036; font-size: 1.1rem; line-height: 1; transition: background 0.2s; z-index: 10; }
.team-modal-close:hover { background: rgba(46,64,54,0.22); }
@media (max-width: 640px) { .team-modal-card { grid-template-columns: 1fr; } .team-modal-photo { max-height: 220px; } .team-modal-body { padding: 1.5rem; max-height: 60vh; } }

/* ---- Contact page: Cream-background contact cards ---- */
.contact-card { background: #F2F0E9; border: 1px solid rgba(46,64,54,0.1); box-shadow: 0 4px 40px rgba(46,64,54,0.07); border-radius: 1.5rem; padding: 2.5rem 2rem; }
.detail-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(46,64,54,0.08); }
.detail-row:last-child { border-bottom: none; }
.detail-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(46,64,54,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid rgba(46,64,54,0.07); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 0.45rem 0; font-size: 0.9rem; color: rgba(26,26,26,0.7); line-height: 1.5; }
.hours-table td:first-child { font-weight: 600; color: #2E4036; width: 45%; }

/* ---- Contact page: Moss-background frosted contact cards ---- */
.contact-card-frosted { background: rgba(242,240,233,0.1); border: 1px solid rgba(242,240,233,0.15); border-radius: 1.5rem; padding: 2.5rem 2rem; }
.detail-row-frosted { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(242,240,233,0.08); }
.detail-row-frosted:last-child { border-bottom: none; }
.detail-icon-frosted { width: 36px; height: 36px; border-radius: 10px; background: rgba(242,240,233,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.hours-table-frosted { width: 100%; border-collapse: collapse; }
.hours-table-frosted tr { border-bottom: 1px solid rgba(242,240,233,0.08); }
.hours-table-frosted tr:last-child { border-bottom: none; }
.hours-table-frosted td { padding: 0.45rem 0; font-size: 0.9rem; color: rgba(242,240,233,0.7); line-height: 1.5; }
.hours-table-frosted td:first-child { font-weight: 600; color: rgba(242,240,233,0.9); width: 45%; }

/* ---- Contact page: Booking card (moss within cream section) ---- */
.booking-card { background: #2E4036; border-radius: 1.5rem; padding: 2.5rem 2rem; position: relative; overflow: hidden; }

/* ---- Contact page: Self-hosted maps and ordinary directions links ---- */
.clinic-map-figure { margin: 0; }
.clinic-map-image { display: block; width: 100%; height: auto; border: 1px solid rgba(242,240,233,0.15); border-radius: 1rem; }
.clinic-map-credit { margin: 0.65rem 0 0.85rem; color: rgba(242,240,233,0.8); font-size: 0.75rem; line-height: 1.5; }
.clinic-map-directions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.65rem; }
.clinic-map-directions a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 0.85rem; border: 1px solid rgba(242,240,233,0.35); border-radius: 0.75rem; background: rgba(242,240,233,0.08); font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-align: center; }
.clinic-map-directions a:hover { background: rgba(242,240,233,0.15); border-color: rgba(242,240,233,0.65); }

/* ---- WordPress entry content (page.php, single.php) ---- */
.entry-content p { color: rgba(26,26,26,0.7); font-size: 1.125rem; line-height: 1.75; margin-bottom: 1.5rem; }
.entry-content h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: #2E4036; margin-top: 2.5rem; margin-bottom: 1rem; }
.entry-content h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.25rem; color: #2E4036; margin-top: 2rem; margin-bottom: 0.75rem; }
.entry-content ul, .entry-content ol { color: rgba(26,26,26,0.7); font-size: 1.125rem; line-height: 1.75; margin-bottom: 1.5rem; padding-left: 1.5rem; }
.entry-content li { margin-bottom: 0.5rem; }
/* The default link affordance for ordinary WordPress content. GeneratePress
   no longer supplies one: see the generate_settings filter in functions.php.
   Uses the accessible interactive clay (see "Interactive clay" above), not
   decorative brand clay, because this is normal-size link text on cream. The
   underline carries the affordance independently of colour, and :focus-visible
   adds a keyboard-only outline on top of the hover/focus colour change. */
.entry-content a { color: var(--clay-interactive); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover, .entry-content a:focus, .entry-content a:active { color: #2E4036; }
.entry-content a:focus-visible { outline: 2px solid var(--clay-interactive); outline-offset: 2px; border-radius: 2px; }
.entry-content img { border-radius: 1rem; max-width: 100%; height: auto; margin: 2rem 0; display: block; }
.entry-content blockquote { border-left: 3px solid #CC5833; padding: 1rem 1.5rem; margin: 2rem 0; background: rgba(46,64,54,0.04); border-radius: 0 0.5rem 0.5rem 0; }
.entry-content blockquote p { color: #2E4036; font-weight: 500; margin-bottom: 0; }
.entry-content strong { font-weight: 700; color: #1A1A1A; }
.entry-content hr { border: none; border-top: 1px solid rgba(46,64,54,0.1); margin: 2.5rem 0; }

/* ---- Blog post meta (rendered on moss hero in single.php — cream-based colours) ---- */
.post-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.post-meta-item { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(242,240,233,0.65); }
.post-meta-sep { color: rgba(242,240,233,0.35); }

/* ---- Archive post cards ---- */
.post-card { background: #F2F0E9; border: 1px solid rgba(46,64,54,0.1); box-shadow: 0 4px 40px rgba(46,64,54,0.07); border-radius: 1.5rem; padding: 2rem; transition: transform 0.3s ease; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-4px); }
.post-card-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26,26,26,0.4); margin-bottom: 0.75rem; }
.post-card-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.2rem; color: #2E4036; margin-bottom: 0.75rem; line-height: 1.35; text-decoration: none; display: block; }
.post-card-title:hover, .post-card-title:focus, .post-card-title:active { color: var(--clay-interactive); }
.post-card-title:focus-visible { outline: 2px solid var(--clay-interactive); outline-offset: 3px; border-radius: 3px; }
.post-card-excerpt { color: rgba(26,26,26,0.6); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.25rem; flex: 1; }
.post-card-link { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-interactive); text-decoration: none; transition: opacity 0.2s; align-self: flex-start; }
/* Underline rather than a fade on hover/focus: dropping opacity to 0.65 would
   have taken this small text back below 4.5:1 on cream. */
.post-card-link:hover, .post-card-link:focus, .post-card-link:active { text-decoration: underline; text-underline-offset: 3px; }
.post-card-link:focus-visible { outline: 2px solid var(--clay-interactive); outline-offset: 3px; border-radius: 3px; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

/* ---- WordPress pagination ---- */
.vue-pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; }
.vue-pagination .page-numbers { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 1rem; border-radius: 9999px; color: rgba(26,26,26,0.5); background: rgba(46,64,54,0.06); text-decoration: none; transition: all 0.2s; display: inline-block; }
.vue-pagination .page-numbers.current { background: #2E4036; color: #F2F0E9; }
.vue-pagination .page-numbers:hover:not(.current) { background: rgba(46,64,54,0.12); color: #2E4036; }