/* Silverleaf Eldercare components. All interactive targets 44px minimum. */

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;               /* 44px */
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill); /* the one rounded element */
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn-primary { background-color: var(--ink); color: var(--paper); }
.btn-primary:hover { color: var(--ink); }
.btn-secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--accent-strong);
}
.btn-secondary:hover { background: var(--accent-strong); color: var(--paper); }
.on-ink .btn-primary { background-color: var(--champagne); color: var(--ink); }
.on-ink .btn-primary:hover { background-color: var(--champagne); }
.on-ink .btn-secondary { color: var(--paper); border-color: var(--champagne); }
.on-ink .btn-secondary:hover { background: var(--champagne); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.text-link {
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
  background-repeat: no-repeat;
  background-size: 2.25rem 2px;
  background-position: 0 100%;
  padding-bottom: 3px;
  transition: background-size var(--dur) var(--ease-out-expo), color var(--dur) var(--ease-out-expo);
}
.text-link:hover { background-size: 100% 2px; color: var(--accent-strong); }

/* Button champagne fill sweep.

   background-origin defaults to padding-box but background-clip defaults to
   border-box, so the sweep was sized to the inside of the border and then
   clipped to the outside of it. On a pill radius that let the gold spill
   through the corners while the ink edge survived only on the flat runs, which
   read as a broken outline. Clipping the sweep to the padding box keeps it
   inside the border, and giving the border a real colour makes the ring a
   deliberate, unbroken edge the whole way round. */
.btn-primary {
  background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  background-clip: padding-box;
  border-color: var(--ink);
  transition: background-size var(--dur) var(--ease-out-expo), color var(--dur) var(--ease-out-expo),
    border-color var(--dur) var(--ease-out-expo);
}
.btn-primary:hover { background-size: 100% 100%; }
.on-ink .btn-primary {
  background-image: linear-gradient(var(--paper), var(--paper));
  background-size: 0% 100%;
  border-color: var(--champagne);
}
.on-ink .btn-primary:hover { background-size: 100% 100%; background-color: var(--champagne); }

/* The secondary button fills on hover, so its sweep needs the same treatment
   to stop the fill bleeding past its own border at the corners. */
.btn-secondary { background-clip: padding-box; }

/* Section headings inherit the display voice sitewide */
.section .container > h2:not(.visually-hidden) {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 100;
}
.card:hover .card-media img { transform: scale(1.03); }
.card-media img { transition: transform var(--dur-slow) var(--ease-out-expo); }

/* Article typography for blog posts */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: 3.2em;
  line-height: 0.8;
  float: left;
  padding-right: 0.12em;
  color: var(--accent-strong);
}
.article-body h2 {
  font-size: var(--fs-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.article-body h3 { font-size: var(--fs-1); margin-top: var(--sp-6); }
.article-body blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--champagne);
}
.article-body blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 100;
  font-size: var(--fs-1);
  color: var(--text-strong);
}

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow var(--dur) var(--ease-out-expo);
}
.site-header .site-header-inner { transition: min-height var(--dur) var(--ease-out-expo), padding var(--dur) var(--ease-out-expo); }
.site-header .brand-lockup img { transition: height var(--dur) var(--ease-out-expo); }
.site-header.is-condensed { box-shadow: var(--shadow-2); }
.site-header.is-condensed .site-header-inner { min-height: 3.75rem; padding-block: var(--sp-2); }
.site-header.is-condensed .brand-lockup img { height: 2.5rem !important; }
.site-header-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.brand-lockup { display: inline-flex; align-items: center; }
.brand-lockup svg { height: 3.25rem; width: auto; }

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--sp-2);
  font-size: var(--fs-0);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-strong);
  white-space: nowrap;
}
/* The nav underline is a bottom border, so it has to skip the pill buttons.
   Applying it to them cost the button its bottom edge and left the ink ring
   open at the base. */
.site-nav a:not(.btn) { border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--accent-strong); }
.site-nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--accent-strong); font-weight: 700; }
/* Buttons inside the nav keep button styling; the nav link color must not
   override the button's own text color. */
.site-nav a.btn-primary { color: var(--paper); }
.site-nav a.btn-primary:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 2px solid var(--rule);
  background: transparent;
  color: var(--text-strong);
  font-size: var(--fs-0);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Services disclosure. Desktop: dropdown on hover, keyboard focus, or the
   chevron toggle; a ::before bridge keeps the hover path unbroken. Without
   JS the menu still opens on hover and :focus-within. Mobile: the sub list
   renders inline inside the open menu, no toggle needed. */
.site-nav li.has-sub { position: relative; display: flex; align-items: center; }
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-left: calc(-1 * var(--sp-2));
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out-expo);
}
.has-sub:hover .nav-sub-toggle svg,
.nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub-toggle svg { transition: transform var(--dur) var(--ease-out-expo); }
.site-nav .nav-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
  flex-direction: column;
  align-items: stretch;
  z-index: 30;
}
.has-sub::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 0.9rem;
}
.site-nav .has-sub:hover .nav-sub,
.site-nav .has-sub:focus-within .nav-sub,
.site-nav .has-sub.is-open .nav-sub { display: flex; }
.nav-sub a { width: 100%; border-bottom: 0; }
.nav-sub a:hover { background: var(--bg-alt); border-bottom: 0; }

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--bg-card);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { width: 100%; padding: var(--sp-3); }
  .site-nav a:not(.btn) { border-bottom: 1px solid var(--rule); }
  /* Mobile: sub links render inline, indented, always visible in the open menu */
  .site-nav li.has-sub { flex-direction: column; align-items: stretch; }
  .nav-sub-toggle { display: none; }
  .site-nav .nav-sub {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav-sub a { padding-left: var(--sp-6); font-weight: 400; }
  .has-sub::before { display: none; }
}

/* --------------------------------------------------------------- sub nav
   Added 2026-10-02. Careers, Testimonials, Blog and Contact moved out of the
   main bar into a strip above it, with the phone number on the left; Home
   went entirely, because the logo is the home link.

   The strip collapses on scroll with no JavaScript. It sits inside the one
   sticky header, and the header's sticky offset is the strip's height
   negated, so the first 44px of scroll carries the strip up and away and the
   main bar is what stays pinned. The mechanism follows the Juan and Only
   build by operator instruction; the styling is this site's own, ink with
   champagne, not that build's tinted band.

   Keep the strip INSIDE .site-header. Two separate sticky elements fight each
   other and the hero pin below them. Every link is 44px tall, which is the
   accessibility floor for this audience. */
:root { --util-h: 2.75rem; }
.site-header { top: calc(var(--util-h) * -1); }
.site-util { background: var(--ink); }
.site-util-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  min-height: var(--util-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.util-phone,
.util-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--util-h);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.util-ico { flex: none; color: var(--champagne); }
.util-nav ul { list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; }
.util-nav a { border-bottom: 2px solid transparent; }
.util-phone:hover,
.util-nav a:hover { color: var(--champagne); }
.util-nav a[aria-current="page"] { border-bottom-color: var(--champagne); }

/* The four strip links and the phone also live in the main list, marked
   nav-m, for the mobile menu. Exactly one copy is displayed at any width, so
   a screen reader never meets the same link twice. The desktop tour button,
   .header-cta, keeps a way to act on screen once the strip, and the phone
   number with it, has scrolled away. */
.nav-m { display: none; }

/* Desktop main bar: logo left, the three links on the true center line of
   the page, the tour button right. A 1fr auto 1fr grid centers the middle
   column on the page itself rather than in whatever space the logo and the
   button leave, so the links do not drift when either of those changes
   width. The button sits outside the nav list for exactly this reason: in
   the list it would have been centered along with the links. */
.header-cta { display: none; }
@media (min-width: 60.0625rem) {
  .site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header-inner > .brand-lockup { grid-column: 1; justify-self: start; }
  .site-header-inner > .site-nav { grid-column: 2; }
  .site-header-inner > .header-cta { grid-column: 3; justify-self: end; display: inline-flex; white-space: nowrap; padding: var(--sp-2) var(--sp-5); }
  .site-nav ul { gap: var(--sp-4); }
}
/* The strip makes the header 44px taller at rest, which pushed the home
   hero's Scroll cue below the fold on a 900px tall screen. Lifting it by the
   strip's height puts it back where it was approved. */
@media (min-width: 60.0625rem) {
  .hero .scroll-cue { bottom: calc(var(--sp-5) + var(--util-h)); }
}
@media (max-width: 60rem) {
  .site-header { top: 0; }
  .site-util { display: none; }
  .nav-m { display: block; }
}

/* ---------------------------------------------------------------- hero */
/* Copy is real HTML, before the media in DOM.
   The hero is one viewport tall: the walk through loops in place, with
   no pin and no scrub (retired 2026-10-07). */
.hero { position: relative; height: 100vh; background: var(--ink); }
.hero-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* tracks the phone toolbar, so the CTAs never sit under it */
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  color: var(--paper);
}
.hero-copy h1 { color: var(--white); font-size: clamp(2.5rem, 6vw, 4rem); max-width: 14ch; }
.hero-copy .eyebrow { color: var(--champagne); }
.hero-lede { font-size: var(--fs-1); max-width: 34ch; color: rgba(244, 240, 235, 0.92); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Contrast scrim so hero copy stays readable over any frame */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 24, 48, 0.82) 0%, rgba(8, 24, 48, 0.55) 45%, rgba(8, 24, 48, 0.25) 100%);
}
/* The grayscale to color scroll release was retired on 2026-09-09 by
   operator decision. The hero plays in full color from the first frame,
   which makes the site fully color everywhere with no exception. The
   scroll scrubbed push in is a separate effect and it stays. Do not add
   a filter back onto .hero-media. */
.hero-static { height: 100vh; height: 100dvh; }
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; }
}

/* ------------------------------------------------------------- page hero */
/* Interior page opener band on ink. No media, no scrub. */
.page-hero { background: var(--ink); }
.page-hero .container { padding-block: var(--sp-8); }
.page-hero h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.25rem); max-width: 20ch; }
.page-hero .eyebrow { color: var(--champagne); }
.page-hero p { color: rgba(244, 240, 235, 0.92); font-size: var(--fs-1); }

/* Simple checklist with champagne markers */
.list-marked { list-style: none; padding: 0; margin: 0 0 var(--sp-4); max-width: 60ch; }
.list-marked li { padding-left: var(--sp-5); position: relative; margin-bottom: var(--sp-3); }
.list-marked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--accent-strong);
}

/* Two column media split for interior pages */
.split { display: grid; gap: var(--sp-7); align-items: center; }
/* A split image that matches its text column's height exactly: the wrapper
   contributes no intrinsic height, so the text sets the row and the image
   covers it. Below the split's stacking point it renders normally. */
@media (min-width: 56rem) {
  .img-match { position: relative; height: 100%; overflow: hidden; }
  .img-match img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
/* Breathing room between a split's topic blocks */
.spread h3 { margin-top: var(--sp-6); }
/* The heading, when it lives inside a split column, keeps the section
   display voice it would have had as a direct container child. */
.h2-display {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 100;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-7-5 { grid-template-columns: 7fr 5fr; }
  .split.split-5-7 { grid-template-columns: 5fr 7fr; }
}

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
a.card:hover, .card:has(a):hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card-media { aspect-ratio: 3 / 2; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.card-body h3 { margin: 0; font-size: var(--fs-1); }
.card-body p { margin: 0; color: var(--text-soft); font-size: var(--fs-0); }
.card-body .text-link { margin-top: auto; padding-top: var(--sp-3); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-6);
}

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: var(--sp-5); max-width: 40rem; }
.form-field { display: grid; gap: var(--sp-2); }
.form-field label { font-weight: 600; color: var(--text-strong); }
.form-hint { font-size: var(--fs-0); color: var(--text-soft); margin: 0; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--text-strong);
  background: var(--bg-card);
  border: 2px solid var(--rule);
  padding: var(--sp-3) var(--sp-4);
  min-height: 2.75rem;
  width: 100%;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--accent-strong);
}
.form-field.has-error input,
.form-field.has-error textarea { border-color: #8C2B2B; }
.form-error { color: #8C2B2B; font-weight: 600; margin: 0; font-size: var(--fs-0); }
.fieldset {
  border: 1px solid var(--rule);
  padding: var(--sp-5);
  margin: 0;
}
.fieldset legend { font-weight: 700; padding-inline: var(--sp-2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;
}
.choice input { width: 1.5rem; height: 1.5rem; accent-color: var(--accent-strong); }

/* ---------------------------------------------------------------- hours */
.hours-block { border: 1px solid var(--rule); padding: var(--sp-5); background: var(--bg-card); }
.hours-block h3 { font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.hours-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.hours-note { font-size: var(--fs-0); color: var(--text-soft); margin: 0; }
.hours-care-line { font-weight: 600; color: var(--text-strong); margin: var(--sp-3) 0 0; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--paper); }
.site-footer a { color: var(--paper); text-decoration-color: var(--champagne); }
.site-footer a:hover { color: var(--champagne); }
.site-footer-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  display: grid;
  gap: var(--sp-6) var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.footer-brand { grid-column: 1 / -1; max-width: 34rem; }
@media (min-width: 88rem) {
  .site-footer-inner { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .footer-brand { grid-column: auto; }
}
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--champagne); }
.site-footer .footer-heading {
  color: var(--champagne);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  margin: 0 0 var(--sp-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
/* Copyright and the build credit sit left, the privacy link sits right. They
   stack and centre on narrow screens, where a split row would wrap badly. */
.footer-legal {
  border-top: 1px solid rgba(244, 240, 235, 0.22);
  /* Same max width and gutter as .site-footer-inner, so the copyright lines up
     with the footer columns above it instead of sitting out at the page edge. */
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-5);
  font-size: var(--fs-0);
  color: rgba(244, 240, 235, 0.75);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}
.footer-legal p { margin: 0; max-width: none; }
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--champagne); }
@media (max-width: 47.9rem) {
  .footer-legal { justify-content: center; text-align: center; }
}
.footer-ids { font-size: var(--fs-0); color: rgba(244, 240, 235, 0.75); }

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 70rem);
}
.lightbox::backdrop { background: rgba(8, 16, 32, 0.9); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 82vh; width: auto; max-width: 100%; margin-inline: auto; }
.lightbox figcaption {
  color: #F4F0EB;
  text-align: center;
  padding: var(--sp-4);
  font-size: var(--fs-0);
}
.lightbox-close {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius-pill);
  border: 2px solid #F4F0EB;
  background: rgba(8, 16, 32, 0.6);
  color: #F4F0EB;
  font-size: var(--fs-1);
  cursor: pointer;
}
.lightbox-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
}
.lightbox-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* A content photograph that does not open a viewer. Same box as the
   lightbox trigger, without the button or the zoom cursor. */
.media-box { display: block; width: 100%; }

/* ------------------------------------------------------------ empty state */
.gallery-empty {
  border: 1px dashed var(--rule);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: var(--bg-card);
}
.gallery-empty p { margin-inline: auto; }

/* ------------------------------------------------- D2 home flagship */
/* Hero composition refinements */
.hero-copy .display-xl { color: var(--white); margin: var(--sp-3) 0 var(--sp-4); max-width: 12ch; }
/* Spans exactly the H1's first line, "Care that knows": measured at 6.229em
   of the display size, constant across the clamp, so the rule tracks the
   text at every viewport. Re-measure if the H1 changes. */
.hero-hairline { border: 0; border-top: 1.5px solid var(--champagne); font-size: clamp(2.5rem, 6vw, 4rem); width: 6.23em; margin: 0 0 var(--sp-4); opacity: 0.8; }
.scroll-cue {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(244, 240, 235, 0.85);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}
.scroll-cue::after {
  content: "";
  width: 1.5px;
  height: var(--sp-7);
  background: linear-gradient(var(--champagne), transparent);
  animation: cue-drift 2.4s var(--ease) infinite;
}
@keyframes cue-drift {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }

/* Asymmetric services triptych: dominant panel + two stacked */
.triptych { display: grid; gap: var(--sp-5); }
@media (min-width: 56rem) {
  .triptych { grid-template-columns: 7fr 5fr; align-items: stretch; }
  .triptych-stack { display: grid; gap: var(--sp-5); }
}
.panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.panel:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); color: var(--text); }
.panel > * { position: relative; z-index: 1; }
.panel h3 { font-size: var(--fs-2); margin: 0; }
.panel p { margin: 0; color: var(--text-soft); max-width: 44ch; }
.panel .panel-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-3);
  color: var(--accent-strong);
}
.panel-cta {
  font-weight: 600;
  color: var(--text-strong);
  background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
  background-repeat: no-repeat;
  background-size: 2.25rem 2px;
  background-position: 0 100%;
  padding-bottom: 4px;
  transition: background-size var(--dur) var(--ease-out-expo);
  align-self: flex-start;
}
.panel:hover .panel-cta { background-size: 100% 2px; }
.panel.is-dominant .panel-num {
  font-size: clamp(3.25rem, 6vw, 4.75rem);
  line-height: 1;
}
/* The ring image absorbs the panel's free vertical space and centers */
.panel-ring {
  margin-block: auto;
  align-self: center;
  width: min(16rem, 70%);
}
.panel.is-dominant h3 { font-size: var(--fs-4); }
.panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.panel-list li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--text-soft);
}
.panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent-strong);
}

/* Testimonial quotes. Verbatim reviewer text set editorially: oversized
   Fraunces opening mark, champagne rule, generous measure. */
.quote-list {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
/* Two columns of reviews, operator instruction 2026-08-26: one narrow column
   left a page of blank right-hand space. Quote text stays left inside. */
@media (min-width: 900px) {
  .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); }
}
.quote-list .quote-card { text-align: left; }
.quote-list .quote-card p { margin-inline: 0; }
.quote-card blockquote,
.pull-quote blockquote {
  margin: 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--accent-strong);
}
.quote-card blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  color: var(--text-strong);
  margin: 0;
}
.quote-card figcaption,
.pull-quote figcaption {
  margin-top: var(--sp-3);
  padding-left: var(--sp-5);
  font-weight: 600;
  color: var(--text-soft);
}
/* Breadcrumb trail */
.crumbs {
  font-size: var(--fs-0);
  margin-bottom: var(--sp-4);
}
.crumbs a { color: inherit; text-decoration-color: var(--champagne); }
.crumbs span[aria-hidden] { color: var(--champagne); margin-inline: 0.35rem; }
.page-hero .crumbs, .on-ink .crumbs { color: rgba(244, 240, 235, 0.75); }

/* Key takeaways and table of contents boxes on articles */
.takeaways, .toc {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--champagne);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.takeaways-title {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--accent-strong);
  margin: 0 0 var(--sp-3);
}
.takeaways ul, .toc ul, .related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.takeaways li {
  position: relative;
  padding-left: 1.15rem;
}
.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent-strong);
}
.toc a { text-decoration-color: var(--champagne); }

/* Gallery photo slot: a labeled, intentional frame awaiting real photography.
   Reads as designed reservation, not a broken image. */
.photo-slot {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    repeating-linear-gradient(45deg, var(--rule) 0 6px, transparent 6px 12px) border-box;
  border: 1px dashed var(--champagne);
}

/* Team headshot placeholder: an honest, styled frame until photography lands.
   Champagne hairline ring with Fraunces initials, never a fake face. */
.headshot-frame {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  border: 1px solid var(--accent-strong);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-3);
  background: var(--bg-alt);
}
.headshot-frame span {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: 1.9rem;
  color: var(--accent-strong);
}

.pull-quote { margin: var(--sp-5) 0 0; }
.pull-quote blockquote p {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  color: var(--text-strong);
  margin: 0;
}

/* Location rows on ink */
.loc-rows { display: grid; }
.loc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-6);
  align-items: baseline;
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(216, 184, 144, 0.28);
}
.loc-row:last-child { border-bottom: 1px solid rgba(216, 184, 144, 0.28); }
.loc-row h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-2); color: var(--white); }
.loc-row .loc-meta { color: rgba(244, 240, 235, 0.82); margin: 0; }
.loc-row .loc-hours { color: rgba(244, 240, 235, 0.72); font-size: var(--fs-0); margin: var(--sp-2) 0 0; }
.loc-row .text-link { color: var(--champagne); text-decoration-color: var(--champagne); white-space: nowrap; }
@media (max-width: 47.9rem) {
  .loc-row { grid-template-columns: auto 1fr; }
  .loc-row .text-link { grid-column: 2; }
}

/* Daily life image river: staggered, overlapping, drifting */
.river {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 0 var(--sp-5);
}
.river-a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.river-b { grid-column: 7 / span 6; grid-row: 2; position: relative; z-index: 1; }
/* The top right of the river used to be empty while the second image hung
   below it. The section lede lives there now, so the copy and the pictures
   interlock instead of leaving a hole. */
.river-note { grid-column: 8 / span 5; grid-row: 1; padding-bottom: var(--sp-6); }
.river-note p { margin: 0; }
.river-list {
  list-style: none;
  margin: var(--sp-4) 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.river-list li { position: relative; padding-left: var(--sp-5); color: var(--text-soft); }
.river-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent-strong);
}
@media (max-width: 55.9rem) {
  .river-note { grid-column: 1 / span 12; grid-row: 1; padding-bottom: var(--sp-5); }
  .river-a { grid-column: 1 / span 11; grid-row: 2; }
  .river-b { grid-column: 2 / span 11; grid-row: 3; margin-top: calc(-1 * var(--sp-7)); }
}
.river figure { margin: 0; box-shadow: var(--shadow-2); }
.river img { width: 100%; height: auto; display: block; }

/* Quote band setting */
.quote-band blockquote { margin: 0; }
/* The quote breaks where the sentence turns, two lines, never four. */
.quote-band .qline { display: block; }
.quote-band blockquote p {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-style: italic;
  font-weight: 460;
  font-size: var(--fs-display);
  line-height: 1.2;
  color: var(--white);
  max-width: none;
}
.quote-band cite { display: block; font-style: normal; margin-top: var(--sp-5); color: var(--champagne); font-size: var(--fs-0); }

/* Floating label form fields. The label stays a real label and always
   programmatic; visually it rests inside the field and lifts on focus or
   content. Requires placeholder=" " on the control. */
.form-float .form-field { position: relative; }
.form-float .form-field input ~ label,
.form-float .form-field textarea ~ label {
  position: absolute;
  left: var(--sp-4);
  top: 0.85rem;
  color: var(--text-soft);
  font-weight: 500;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-out-expo), color var(--dur) var(--ease-out-expo);
  transform-origin: left top;
  background: var(--bg-card);
  padding: 0 var(--sp-1);
}
.form-float .form-field input,
.form-float .form-field textarea {
  padding-top: 1.1rem;
  padding-bottom: 0.6rem;
}
.form-float .form-field input:focus ~ label,
.form-float .form-field input:not(:placeholder-shown) ~ label,
.form-float .form-field textarea:focus ~ label,
.form-float .form-field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-1.35rem) scale(0.82);
  color: var(--accent-strong);
  font-weight: 600;
}

/* ------------------------------------------------- D3 location craft */
/* Full-bleed location hero with real photography */
.loc-hero {
  position: relative;
  isolation: isolate;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.loc-hero .loc-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.loc-hero .loc-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero .loc-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(10deg, rgba(8, 24, 48, 0.88) 0%, rgba(8, 24, 48, 0.45) 45%, rgba(8, 24, 48, 0.12) 100%);
}
.loc-hero .container { position: relative; z-index: 1; padding-block: var(--sp-8); }
.loc-hero h1 { color: var(--white); }
.loc-hero p { color: rgba(244, 240, 235, 0.94); font-size: var(--fs-1); max-width: 56ch; }
.loc-hero .eyebrow { color: var(--champagne); }

/* Sticky rail layout: scrolling content beside a pinned NAP card */
.rail-layout { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 62rem) { .rail-layout { grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr); } }
.rail {
  position: sticky;
  top: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--champagne);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
}
.rail h2, .rail h3 { font-size: var(--fs-1); margin-bottom: var(--sp-3); }
.rail .hours-list li { border-bottom-color: var(--rule); }

/* Numbered editorial sequence */
.seq { display: grid; gap: var(--sp-7); }
.seq-item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; }
.seq-item .ghost-num { margin-top: -0.4rem; }
.seq-item h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-2); }
.seq-item p { margin: 0 0 var(--sp-3); }

/* FAQ accordion. Real details/summary: keyboard and screen reader native,
   answers in served HTML, FAQPage schema unchanged. */
.faq-acc { border-bottom: 1px solid var(--rule); }
.faq-acc:first-of-type { border-top: 1px solid var(--rule); }
.faq-acc summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-2);
  min-height: 2.75rem;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary h3 { margin: 0; font-size: var(--fs-1); }
.faq-acc summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--accent-strong);
  line-height: 1;
  transition: transform var(--dur) var(--ease-out-expo);
}
.faq-acc[open] summary::after { transform: rotate(45deg); }
.faq-acc summary:hover h3 { color: var(--accent-strong); }
.faq-acc .faq-acc-body { padding: 0 var(--sp-2) var(--sp-5); max-width: 65ch; }
.faq-acc .faq-acc-body p { margin: 0; }

/* ------------------------------------------------- centered tour closer
   Added 2026-09-09. The Bee Cave page ends on one centered column: the
   eyebrow, the heading, the form, the links to the rest of the home, the
   licensing line, and a photograph that closes the page instead of leaving
   a band of empty texture under the form. Field labels stay left aligned
   inside the form because a centered input label is hard to scan. */
.tour-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tour-centered .eyebrow-line { justify-content: center; }
.tour-centered > * { max-width: 100%; }
.tour-lede { max-width: 46ch; }
.tour-centered .form {
  width: 100%;
  max-width: 40rem;
  margin-top: var(--sp-6);
  text-align: left;
}
.tour-more { margin-top: var(--sp-7); }
.tour-more p { margin: 0 0 var(--sp-2); }
.tour-more-head {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--accent-strong);
  font-weight: 600;
}
.tour-centered h3 { margin-top: var(--sp-7); }
.tour-close-image {
  width: 100%;
  margin: var(--sp-8) 0 0;
  box-shadow: var(--shadow-1);
}
.tour-close-image img { width: 100%; height: auto; }

/* Whole image gallery grid (replaced the editorial crop grid 2026-09-09).
   Every tile shows the whole photograph at the ratio it was shot at. There
   is no object-fit and no aspect-ratio here on purpose: the img carries its
   own width and height attributes, so the browser reserves the right box
   and nothing is ever cut off. Rows line up on their top edge, so a 16:9
   video frame and a 3:2 still can sit side by side without either being
   trimmed to match the other. Do not put object-fit: cover back.

   Three fixed columns rather than auto-fill, so the row count is predictable.
   The Bee Cave gallery runs nine video frames and then six stills; three
   columns puts the ratio change on a row boundary and gives five even rows.
   An auto-fill count that slid to two columns would put a 16:9 frame and a
   3:2 still in the same row again and leave a tile stranded on its own. */
.gallery-whole {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
/* Tiles carry an explicit span. Every row's spans sum to twelve and every
   tile in a row shares a span, so tiles in the same row are the same height
   and no row can leave a hole. The sources are all one shape inside each
   group, so varying the span is the only thing that varies, and that is what
   gives the wall its rhythm without cropping anything. */
.gallery-whole > .g-4 { grid-column: span 4; }
.gallery-whole > .g-6 { grid-column: span 6; }
.gallery-whole > .g-12 { grid-column: span 12; }
@media (min-width: 48rem) and (max-width: 63.9rem) {
  /* Two up: the trios become pairs rather than three cramped columns. */
  .gallery-whole > .g-4,
  .gallery-whole > .g-6 { grid-column: span 6; }
}
@media (max-width: 47.9rem) {
  .gallery-whole > .g-4,
  .gallery-whole > .g-6,
  .gallery-whole > .g-12 { grid-column: span 12; }
}

/* The two closing actions sit centred under the wall, stacked, with the
   button first. */
.gallery-actions {
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.gallery-whole > figure {
  margin: 0;
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.gallery-whole > figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.gallery-whole .lightbox-open { width: 100%; }
.gallery-whole img { display: block; width: 100%; height: auto; }
.gallery-whole figcaption {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: var(--fs-0);
  color: var(--text-soft);
}
@media (max-width: 47.9rem) {
  .gallery-whole { gap: var(--sp-4); }
}

/* Blueprint treatment for the under construction residence */
.blueprint {
  position: relative;
  isolation: isolate;
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(216, 184, 144, 0.10) 0, rgba(216, 184, 144, 0.10) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(216, 184, 144, 0.10) 0, rgba(216, 184, 144, 0.10) 1px, transparent 1px, transparent 48px);
}
/* The blueprint grid needs its real children lifted above the ::before layer,
   but this rule was also overriding .ring-ornament's absolute positioning,
   because components.css loads after base.css at equal specificity. That put a
   34rem decorative circle into the flow and pushed the Burnet headline 544px
   down the page. Ornaments stay out of the flow. */
.blueprint > *:not(.ring-ornament) { position: relative; z-index: 1; }
.stamp {
  display: inline-block;
  border: 2px solid var(--champagne);
  color: var(--champagne);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: 700;
  font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-4);
  transform: rotate(-2deg);
}

/* Lightbox navigation upgrade */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius-pill);
  border: 2px solid #F4F0EB;
  background: rgba(8, 16, 32, 0.6);
  color: #F4F0EB;
  font-size: var(--fs-1);
  cursor: pointer;
}
.lightbox-prev { left: var(--sp-4); }
.lightbox-next { right: var(--sp-4); }
.lightbox-counter {
  position: fixed;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(244, 240, 235, 0.85);
  font-size: var(--fs-small);
  letter-spacing: var(--track-caps);
}
.lightbox[data-single] .lightbox-nav,
.lightbox[data-single] .lightbox-counter { display: none; }

/* ------------------------------------------------------- open item chips */
/* Four categories matching _source/CLIENT_OPEN_ITEMS.md. Every chip carries
   data-register pointing at its register row; validate-seo.mjs enforces
   parity in both directions. All pass WCAG AA on their backgrounds. */
.fact-needed,
/* Chips are internal review markers, not public copy. They render on the
   preview and on localhost and are hidden everywhere else, so the moment the
   real domain answers they disappear without anyone remembering to strip them.
   Same posture as the noindex header, which is also keyed to the host. Default
   is hidden, so if the script never runs the public site is still clean. */
.chip { display: none; }
html[data-review] .chip {
  display: inline-block;
  background: #FBEFD8;
  color: #6B4E12;
  border: 1px dashed #A8863F;
  padding: 0 var(--sp-2);
  font-weight: 600;
}
/* Scoped under the review host for specificity, not for gating. The base
   rule above is html[data-review] .chip, which outweighs a bare .chip-needed,
   so every chip rendered in the amber placeholder colour whatever its
   category and the four way colour coding never actually showed. */
html[data-review] .chip-needed { background: #FADDD8; color: #7A2E1F; border-color: #B5502F; }
html[data-review] .chip-placeholder { background: #FBEFD8; color: #6B4E12; border-color: #A8863F; }
html[data-review] .chip-clarify { background: #DDE7F5; color: #1F3A6B; border-color: #3C64A8; }
html[data-review] .chip-verify { background: #DFEDE3; color: #1F5233; border-color: #3F7D57; }

/* ------------------------------------------------------------ FAQ block */
.faq-item { max-width: 65ch; margin-bottom: var(--sp-5); }
.faq-item h3 { margin-bottom: var(--sp-2); }
.faq-item p { margin: 0; }

/* -------------------------------------------------- grand opening clip
   Rebuilt 2026-09-09. The recap has sound, so it never starts on its own:
   every browser blocks audio without a gesture, and a video that starts
   silently then needs unmuting is worse than one that waits. The poster
   stands with a large play button over it, and the click hands the clip
   to the browser's own controls at full volume.

   The block is a centered full width stack: eyebrow, heading, video, one
   line of text, then the gallery button. The video is as wide as the
   content column allows, at 16:9. */
.opening-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.opening-stack .eyebrow-line { justify-content: center; }
.opening-stack > * { max-width: 100%; }
.opening-clip {
  position: relative;
  margin: var(--sp-6) 0 0;
  width: 100%;
  background: var(--ink);
  box-shadow: var(--shadow-2);
}
.opening-clip video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
/* The play affordance covers the poster, so the whole frame is the target */
.opening-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(8, 24, 48, 0.3);
  color: var(--white);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out-expo);
}
.opening-play:hover { background: rgba(8, 24, 48, 0.42); }
.opening-play-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease-out-expo), background var(--dur) var(--ease-out-expo);
}
.opening-play-mark::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.4rem;
  border-style: solid;
  border-width: 1.05rem 0 1.05rem 1.7rem;
  border-color: transparent transparent transparent var(--ink);
}
.opening-play:hover .opening-play-mark { transform: scale(1.06); background: var(--champagne); }
.opening-play-text {
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-shadow: 0 1px 6px rgba(8, 24, 48, 0.7);
}
.opening-clip.is-playing .opening-play { display: none; }
.opening-note { margin-top: var(--sp-5); max-width: 56ch; }
@media (max-width: 47.9rem) {
  .opening-play-mark { width: 4.25rem; height: 4.25rem; }
  .opening-play-mark::before { border-width: 0.8rem 0 0.8rem 1.3rem; }
  .opening-play-text { font-size: var(--fs-0); }
}
@media (prefers-reduced-motion: reduce) {
  .opening-play,
  .opening-play-mark { transition: none; }
  .opening-play:hover .opening-play-mark { transform: none; }
}

/* Booking slot: holds the Calendly widget once the client's scheduling link
   arrives. Until then it carries the register chip and a phone fallback, so
   the column has real height instead of collapsing. */
.booking-slot {
  border: 1px dashed var(--rule, rgba(11, 23, 48, 0.25));
  border-radius: var(--radius, 0.5rem);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  background: rgba(255, 255, 255, 0.4);
}
.booking-slot p + p { margin-top: var(--sp-3); }

/* Certification path: the route from CNA training into a job here. Real text
   rather than an SVG, so it reflows, scales with the user's font size, and
   reads correctly to a screen reader. Numbered medallions sit on a connecting
   rule that only draws on wide screens, where the steps run side by side. */
.path-flow {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  counter-reset: none;
}
.path-step {
  position: relative;
}
/* Narrow screens stack the steps, so the medallion sits in the flow above the
   heading. Absolute positioning here overlapped the title at 390px. */
.path-num {
  display: inline-flex;
  margin-bottom: var(--sp-3);
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--champagne);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1;
}
.path-step h3 { margin-bottom: var(--sp-2); }
@media (min-width: 56rem) {
  .path-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    position: relative;
  }
  /* the connecting rule, behind the medallions */
  .path-flow::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    border-top: 1.5px solid var(--rule);
    z-index: 0;
  }
  .path-step { padding-top: var(--sp-7); }
  .path-num {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
    z-index: 1;
  }
}

/* Video testimonial slot: holds a 16:9 player once the client sends the three
   films. Empty state is a quiet placeholder rather than a broken frame, so the
   card keeps its shape in the preview. */
.video-slot {
  aspect-ratio: 16 / 9;
  background: var(--mist);
  border-bottom: 1px solid var(--rule);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 12px,
    rgba(16, 27, 55, 0.045) 12px 24px
  );
}

/* Gallery: a full width establishing shot, then the tiles in two groups.
   The two groups exist because the sources have different shapes, 16:9 video
   frames and 3:2 stills. Keeping them in separate grids means a row never
   mixes the two, which is what made the earlier build look ragged, and the
   headings turn that constraint into navigation. */
.gallery-lead {
  margin: var(--sp-6) 0 var(--sp-7);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
}
.gallery-lead .lightbox-open { width: 100%; }
.gallery-lead img { display: block; width: 100%; height: auto; }
.gallery-lead figcaption {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: var(--fs-0);
  color: var(--text-soft);
}
.gallery-group-head {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.gallery-group-head:first-of-type { margin-top: 0; }


/* The fourth service sits under the triptych at full width rather than
   lengthening the stack, which was forcing the dominant panel taller and
   opening a gap above its image. Shorter than a stack panel, and it lays out
   as a row on wide screens so the height stays low. */
.panel-wide {
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  justify-content: flex-start;
  gap: var(--sp-4);
}
@media (min-width: 56rem) {
  .panel-wide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--sp-6);
    row-gap: 0;
  }
  .panel-wide .panel-num { position: static; margin: 0; }
  .panel-wide .panel-cta { margin: 0; white-space: nowrap; }
}
.panel-wide .panel-wide-body p { margin-top: var(--sp-2); max-width: 68ch; }

/* Two locations, one of them not open yet, so the 01 and 02 counters stopped
   earning their place. A status label carries more information in the same
   space and reads correctly when the list is this short. */
.loc-rows-status .loc-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.loc-status {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs--1, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.loc-status.is-open { color: var(--champagne); }
.loc-status.is-open::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--champagne);
  vertical-align: 0.08em;
}
.loc-status.is-soon { color: rgba(244, 240, 235, 0.62); }
@media (max-width: 47.9rem) {
  .loc-rows-status .loc-row { grid-template-columns: 1fr; align-items: start; }
  .loc-rows-status .loc-row .text-link { grid-column: 1; margin-top: var(--sp-4); justify-self: start; }
}

/* A centred heading block above a left aligned body. Used where the section
   intro should sit in the middle of the page but the content under it, a step
   flow or a card grid, still reads better aligned left. */
.sec-head-center { text-align: center; }
.sec-head-center > h2,
.sec-head-center > p { margin-inline: auto; }
.sec-head-center > p { max-width: 62ch; }
.sec-head-center + * { margin-top: var(--sp-6); }

/* File input. The browser default puts a small grey system button next to
   grey "no file chosen" text, which reads as broken next to the rest of the
   form. The input becomes a bordered drop area matching the other fields, and
   the picker button is restyled as a secondary pill. Still the native control,
   so it needs no JavaScript and keeps its keyboard behaviour. */
.file-field input[type="file"] {
  font: inherit;
  color: var(--text-soft);
  background: var(--bg-card);
  border: 2px dashed var(--rule);
  padding: var(--sp-4);
  width: 100%;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.file-field input[type="file"]:hover { border-color: var(--accent-strong); }
.file-field input[type="file"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--accent-strong);
  border-style: solid;
}
.file-field input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-right: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  min-height: 2.75rem;
  border: 2px solid var(--accent-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  background-clip: padding-box;
  color: var(--text-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.file-field input[type="file"]:hover::file-selector-button {
  background: var(--accent-strong);
  color: var(--paper);
}

/* Locations rows. The ghost numeral is seven rem tall against a heading of
   about one and a half, so baseline alignment threw it far above the block it
   labels. Centring the row against the text, with a small optical nudge for
   the numeral's cap height, sits it where it reads as a label. The row CTA is
   a real button here rather than a text link, so it carries the weight of the
   only action on the page. */
.loc-row { align-items: center; }
.loc-row .ghost-num { transform: translateY(0.12em); }
.loc-row .btn { white-space: nowrap; }
@media (max-width: 47.9rem) {
  .loc-row { align-items: start; }
  .loc-row .btn { grid-column: 2; justify-self: start; margin-top: var(--sp-4); }
}

/* An img-match image fills its column's height, so anything after it in the
   same wrapper, a chip or a caption, would sit on top of the picture. The
   wrapper becomes a column: the image takes the free space, the note keeps
   its own line underneath. */
@media (min-width: 56rem) {
  .img-match-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .img-match-stack > .img-match { flex: 1 1 auto; min-height: 0; }
  .img-match-stack > p { flex: 0 0 auto; }
}

/* Centred prose block and a standalone figure, both used on the wellness page
   where a section is a statement rather than a split. */
.prose-center { max-width: 68ch; margin-inline: auto; text-align: center; }
.prose-center p { margin-inline: auto; }
.pull-line {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: 1.4;
  color: var(--text-strong);
  margin-top: var(--sp-5);
}
.on-ink .pull-line { color: var(--white); }
.wellness-figure { margin: var(--sp-7) auto 0; max-width: 60rem; }
.wellness-figure .lightbox-open, .wellness-figure .media-box { width: 100%; }
.wellness-figure img { display: block; width: 100%; height: auto; }
.wellness-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-0);
  color: var(--text-soft);
  text-align: center;
}

/* Silverleaf Academy page. The stat line and the facts bar carry the client's
   published program facts, so they are typeset as statements rather than body
   copy. The spec list is a definition list because it is genuinely a list of
   term and value pairs. */
.academy-stat {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--champagne);
  margin-top: var(--sp-6);
}
.academy-facts {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--sp-3);
}
.page-hero .academy-facts { color: rgba(244, 240, 235, 0.92); }
.spec-list {
  margin: var(--sp-6) auto 0;
  max-width: 60rem;
  display: grid;
  gap: 0;
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.spec-row:first-child { border-top: 1px solid var(--rule); }
.spec-row dt { font-weight: 700; color: var(--text-strong); }
.spec-row dd { margin: 0; color: var(--text-soft); }
@media (max-width: 47.9rem) {
  .spec-row { grid-template-columns: 1fr; gap: var(--sp-1, 0.25rem); }
}
.path-flow-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) {
  .path-flow-5 { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 47.9rem) {
  .path-flow-5 { grid-template-columns: 1fr; }
}
.academy-contact {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  background: var(--bg-card);
}
.academy-contact p { margin: 0 0 var(--sp-2); }
.academy-contact p:last-child { margin-bottom: 0; }
.footnote {
  margin-top: var(--sp-5);
  font-size: var(--fs-0);
  color: var(--text-soft);
  line-height: 1.5;
}

/* Interactive floor plan. The plan is a flat image and the markers are
   absolutely positioned over it in percentages, so they hold their place at
   any width. Each marker is a .lightbox-open trigger carrying a hidden img,
   which is what the existing lightbox reads, so this needs no new script. */
.plan-figure { margin: var(--sp-6) 0 0; }
.plan-canvas {
  max-width: 68rem;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-1);
}
/* The stage is what the markers are positioned against, so it has to be the
   element that carries the image's width. The canvas around it does the
   scrolling on narrow screens; if the markers were positioned against the
   scroller instead they would drift as it scrolled. */
.plan-stage { position: relative; }
.plan-img { display: block; width: 100%; height: auto; }
.plan-pin {
  position: absolute;
  /* Shrink to the marker, not to the stage. Without an explicit width the
     button was resolving to the full stage width, which threw the centring
     translate off by hundreds of pixels and stacked every pin down the left
     edge. */
  width: max-content;
  right: auto;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.plan-pin-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-0);
  line-height: 1;
  box-shadow: 0 2px 10px rgba(8, 24, 48, 0.45);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* The label sits out of flow so it cannot widen the button. If it counted
   toward the width, the centring translate would centre the dot plus the
   label, pushing the dot left of the room it points at. */
.plan-pin-label {
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: var(--fs-0);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.plan-pin:hover .plan-pin-dot,
.plan-pin:focus-visible .plan-pin-dot { background: var(--accent-strong); transform: scale(1.08); }
.plan-pin:hover .plan-pin-label,
.plan-pin:focus-visible .plan-pin-label { opacity: 1; }
.plan-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.plan-figure figcaption {
  max-width: 68rem;
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-0);
  color: var(--text-soft);
  text-align: center;
}
/* Narrow screens: the plan is too dense to read at 390px, so it scrolls
   sideways inside its own frame at a readable size instead of shrinking. */
@media (max-width: 55.9rem) {
  .plan-canvas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .plan-stage { min-width: 46rem; }
  .plan-pin-label { display: none; }
}

/* Video testimonials. Three films side by side on wide screens, each with the
   transcribed words in print underneath so the page still reads with the sound
   off. preload="none" means only the poster loads until someone presses play,
   which matters because the three files together are about 50 MB. */
.video-grid {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
@media (min-width: 56rem) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}
.video-card { margin: 0; background: var(--bg-card); box-shadow: var(--shadow-1); }
.video-clip { display: block; width: 100%; height: auto; background: var(--ink); }
.video-card figcaption { padding: var(--sp-5); }
.video-card blockquote {
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-strong);
}
.video-card blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
}
.video-attrib {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--text-soft);
}

/* The confirmation that replaces a form once it has sent. */
.form-sent {
  padding: var(--sp-6);
  border: 2px solid var(--accent-strong);
  background: var(--bg-card);
}
.form-sent h3 { margin: 0 0 var(--sp-3); }
.form-sent p { margin: 0; }
.form-sent:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The registered mark inside a display heading. At display sizes the glyph
   comes through as a full height R in the serif face, which reads as a stray
   letter. Shrinking it and lifting it to the cap line puts it back where a
   reader expects it. */
.reg {
  font-size: 0.34em;
  vertical-align: 0.9em;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
}

/* A single centred line. Paragraphs carry a 65ch max-width from the base
   sheet, so text-align alone centres the words inside a box that is still
   sitting at the left margin. The auto inline margin is the part that moves
   the box itself. */
.center-line { text-align: center; margin-inline: auto; }

/* A form centred as a block while its own fields stay left aligned. Centring
   the field text would drag the inputs and the floating labels out of line
   with each other. */
.form-center {
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}
.sec-center .form-center button { margin-inline: auto; display: flex; }

/* Internal hero options page. Not linked, not indexed. */
.hero-option-frame {
  margin-top: var(--sp-5);
  max-width: 64rem;
  background: var(--ink);
  box-shadow: var(--shadow-2);
}
.hero-option-frame video { display: block; width: 100%; height: auto; }
.hero-option-note { max-width: 70ch; color: var(--text-soft); }
.hero-option.is-hold .hero-option-note {
  color: #7A2E1F;
  font-weight: 700;
  border-left: 3px solid #B5502F;
  padding-left: var(--sp-4);
}

/* ===================================================== Silverleaf Academy
   Rebuilt 2026-09-28. The page had settled into one shape repeated seven
   times: a centred eyebrow, a centred heading, and four to six centred
   paragraphs under it. Centred prose reads as a template because nothing
   sets a spine for the eye to run down, and multi paragraph copy centred at
   62ch is genuinely harder to read than the same copy left aligned. These
   components give each section its own structure without changing a word of
   the client's copy or any published figure. */

/* Hero. The headline runs the full container so it holds one line at desktop,
   then the pitch and the published program facts sit side by side under it.
   The other interior heroes on this site are centred bands; this is the one
   page selling a program with a price, and the price belongs beside the
   pitch rather than buried three paragraphs into it. */
.page-hero .hero-h1-wide { max-width: none; margin-bottom: var(--sp-6); }
.hero-split { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 60rem) {
  .hero-split { grid-template-columns: 7fr 5fr; gap: var(--sp-8); }
}
.hero-copy > p { max-width: 56ch; }
.hero-copy > .lede { font-size: var(--fs-2); line-height: 1.45; font-family: var(--font-display); }
.page-hero .hero-copy > .lede { color: var(--white); }
.hero-cta { margin: var(--sp-6) 0 0; }

/* The facts card. A definition list rather than a sentence, so length,
   cadence and tuition each read in one glance. */
.fact-card {
  border: 1px solid var(--rule);
  background: var(--bg-card);
  padding: var(--sp-6);
  margin: 0;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}
.fact-row dt {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: var(--sp-2);
}
.fact-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: 1.15;
  color: var(--text-strong);
}
.page-hero .fact-row dt { color: var(--champagne); }
.page-hero .fact-row dd { color: var(--white); }
.fact-note {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.5;
  color: var(--text-soft);
}
.page-hero .fact-note { color: rgba(244, 240, 235, 0.8); }

/* A split whose picture matches the height of the body copy rather than the
   whole column. The eyebrow sits on its own grid row spanning nothing, so the
   image starts level with the heading and ends level with the last line of
   text. The old markup used align-items:center, which stopped the column
   stretching at all, so the image never matched anything. DOM order stays
   eyebrow, text, picture, which is also the order it stacks in on a phone. */
.split-offset { display: grid; gap: var(--sp-6); }
@media (min-width: 56rem) {
  .split-offset {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brow ." "body media";
    column-gap: var(--sp-7);
    row-gap: 0;
    align-items: stretch;
  }
  .split-offset.is-rev { grid-template-areas: ". brow" "media body"; }
  .split-offset > .so-brow { grid-area: brow; margin-bottom: var(--sp-4); }
  .split-offset > .so-body { grid-area: body; }
  .split-offset > .so-media { grid-area: media; }
  /* A panel is a card, not a picture: it sits at the top of the row rather
     than stretching to fill it. */
  .split-offset.split-panel > .so-media { align-self: start; }
}
.so-body > :last-child { margin-bottom: 0; }
.so-cta { margin-top: var(--sp-6); }

/* Facts panel on a light ground, the funding section's counterpart to the
   hero card. The brass top rule marks it as the answer to the money
   question rather than another block of copy. */
.fact-panel {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-strong);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6);
}
.fact-panel h3 { margin: 0 0 var(--sp-5); font-size: var(--fs-1); }
.fact-panel dl { margin: 0; display: grid; gap: var(--sp-5); }
.fact-panel .fact-row dd { font-size: var(--fs-1); }
.fact-panel-note {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-0);
  color: var(--text-soft);
  max-width: none;
}

/* Editorial statement block. The heading holds a narrow left rail and the
   body runs in the wider column beside it, left aligned. This is what the
   centred prose sections become when there is no picture to split against. */
.statement { display: grid; gap: var(--sp-5); }
@media (min-width: 60rem) {
  .statement { grid-template-columns: 5fr 7fr; column-gap: var(--sp-8); align-items: start; }
}
.statement-head h2 { margin-top: var(--sp-3); margin-bottom: 0; }
.statement-body > p { max-width: 62ch; }
.statement-body > :last-child { margin-bottom: 0; }
.statement-body .pull-line {
  border-left: 3px solid var(--champagne);
  padding-left: var(--sp-5);
  margin-top: var(--sp-6);
  max-width: 52ch;
}

/* Program details as a spec sheet. Eight term and value pairs in one tall
   column left two thirds of the band empty; two columns of stacked pairs on
   a card reads as a document a prospective student can scan. */
.spec-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-strong);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5) var(--sp-7) var(--sp-6);
  max-width: 64rem;
  margin: var(--sp-6) auto 0;
}
.spec-card .spec-list { margin: 0; max-width: none; }
.spec-card .spec-row { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-4) 0; }
.spec-card .spec-row dt {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-soft);
}
.spec-card .spec-row dd {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: 1.3;
  color: var(--text-strong);
}
.spec-card .spec-row:last-child { border-bottom: 0; }
@media (min-width: 64rem) {
  .spec-card .spec-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  /* The second item starts the right hand column, so it needs the top rule
     its column mate gets from :first-child. The last item in each column
     drops its bottom rule so neither column ends on a floating line. */
  .spec-card .spec-row:nth-child(2) { border-top: 1px solid var(--rule); }
  .spec-card .spec-row:nth-last-child(2) { border-bottom: 0; }
}

/* Apply section, stacked rather than split. The form is twice the height of
   anything that could sit beside it, so a two column layout left a long
   empty gutter down the right of the page. The pitch and the phone number
   run full width above it and the form takes the middle of the page. */
.apply-contact {
  max-width: 44rem;
  margin: var(--sp-7) auto 0;
  text-align: center;
}
.apply-contact .academy-facts { margin-top: var(--sp-4); }
.apply-form-wrap { max-width: 40rem; margin: var(--sp-8) auto 0; }
.apply-form-wrap h3 { margin-bottom: var(--sp-2); text-align: center; }
.apply-form-wrap .form { max-width: none; margin-top: var(--sp-6); }
.apply-form-wrap > p { max-width: 52ch; margin-inline: auto; text-align: center; }
.apply-foot { max-width: 60ch; margin: var(--sp-7) auto 0; text-align: center; }

/* The Why section's pull quote sits inside a split rather than a statement
   rail, so it carries the rule itself. */
.so-body .pull-line {
  border-left: 3px solid var(--champagne);
  padding-left: var(--sp-5);
  margin-top: var(--sp-6);
}

/* Legal documents. Headings otherwise run the full 72rem container while the
   base paragraph measure caps at 65ch, which leaves every heading hanging off
   the right of the text it introduces. One column, one measure. */
.legal-prose { max-width: 46rem; }
.legal-prose h2 { font-size: var(--fs-2); margin-top: var(--sp-8); }
.legal-prose h3 { font-size: var(--fs-1); margin-top: var(--sp-6); }
.legal-prose > p:first-of-type { font-size: var(--fs-1); }

/* Click to load scheduler. The block holds the page open at roughly the
   height the calendar will take, so pressing the button does not shove the
   rest of the column down. */
.scheduler {
  border: 1px solid var(--rule);
  background: var(--bg-card);
  padding: var(--sp-6);
  text-align: center;
}
.scheduler-note { margin: 0 auto var(--sp-5); max-width: 42ch; color: var(--text-soft); }
.scheduler-alt { margin: var(--sp-5) 0 0; }
.scheduler-mount { min-height: 44rem; }

/* A real headshot in the frame the initials used to sit in. The circle, the
   brass ring and the offset outline are unchanged, so a card with a photograph
   and a card still waiting on one read as the same component. */
.headshot-frame.has-photo { background: none; overflow: hidden; }
.headshot-frame.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Services menu as an icon grid, desktop only. Two rows of three, care
   services on the first row (assisted living, memory care, home care) and
   the rest on the second, each icon centered over its label. The panel
   centers under Services rather than hanging off its left edge, since it is
   now wider than the word it opens from. The icons are decoration: the label
   names the link, so each img carries an empty alt. On phones the submenu
   stays the plain indented list inside the menu; a grid of icons there would
   push the rest of the menu off the screen. */
.nav-sub picture { display: none; }
@media (min-width: 60.0625rem) {
  .site-nav .nav-sub {
    grid-template-columns: repeat(3, 12rem);
    gap: var(--sp-2);
    padding: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
  }
  .site-nav .has-sub:hover .nav-sub,
  .site-nav .has-sub:focus-within .nav-sub,
  .site-nav .has-sub.is-open .nav-sub { display: grid; }
  .nav-sub li { display: flex; }
  .site-nav .nav-sub a {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-4) var(--sp-2);
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    font-weight: 600;
  }
  .nav-sub picture { display: block; line-height: 0; }
  .nav-sub-ico {
    width: 4.5rem;
    height: 4.5rem;
    transition: transform var(--dur) var(--ease-out-expo);
  }
  .nav-sub a:hover .nav-sub-ico,
  .nav-sub a:focus-visible .nav-sub-ico { transform: translateY(-3px); }
}
@media (min-width: 60.0625rem) and (prefers-reduced-motion: reduce) {
  .nav-sub a:hover .nav-sub-ico,
  .nav-sub a:focus-visible .nav-sub-ico { transform: none; }
}

/* ==================================================== service pages, v2
   Design upgrade on branch design/service-pages-v2, plan dated 2026-10-03.
   Borrows layout principles only; every part here is this site's own. */

/* Step 1. Split hero. Copy sits left and left aligned; a real Bee Cave
   photograph fills the right half and fades into the ink through a mask on
   its left edge, so the words read against solid ink and the room opens up
   beside them. Copy comes first in the DOM so a screen reader meets the H1
   first; on narrow screens the photograph is moved above it visually. */
.svc-hero { position: relative; overflow: hidden; }
.svc-hero .svc-hero-copy {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-9);
}
.svc-hero-copy > * { max-width: 34rem; }
.svc-hero h1 { max-width: 20ch; text-wrap: balance; }
/* Balanced breaks so a short last word never sits alone on its own line. */
.statement-head h2 { text-wrap: balance; }
.svc-hero-copy p,
.statement-body p { text-wrap: pretty; }
.svc-hero-media { margin: 0; }
.svc-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64rem) {
  .svc-hero-media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 54%;
  }
  .svc-hero-media img {
    object-position: var(--hero-pos, 55% 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
            mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  }
}
@media (max-width: 63.9375rem) {
  .svc-hero { display: flex; flex-direction: column; }
  .svc-hero-media { order: -1; height: 56vw; max-height: 26rem; }
  .svc-hero-media img {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  .svc-hero .svc-hero-copy { padding-block: var(--sp-5) var(--sp-8); }
}

/* Step 2. The statement rail from the Academy page, heading left and body
   right, now also mirrored. is-rev puts the heading in the right hand column
   so consecutive prose sections alternate sides instead of stacking on one
   center line. DOM order stays heading first for screen readers. */
@media (min-width: 60rem) {
  .statement.is-rev { grid-template-columns: 7fr 5fr; }
  .statement.is-rev > .statement-head { grid-column: 2; grid-row: 1; }
  .statement.is-rev > .statement-body { grid-column: 1; grid-row: 1; }
}

/* =================================== ornaments, soft corners, icon lists
   2026-10-05, Micah: line art at the edges and corners of sections for
   depth, slightly rounded corners on content photographs, and the Daily Life
   icons. */

/* Ornaments. Decorative line art layered over a section's own texture. The
   texture already lives on the section's ::before and the grain on its
   ::after, so an ornament is its own empty element rather than a third
   pseudo element: it paints above the texture and below the content, and
   never takes a click. Offsets are set inline so it can bleed off the edge,
   and the section clips it. Faint by design, so text over it keeps its
   contrast; on phones it shrinks and fades further, because there the copy
   runs edge to edge. aria-hidden on every instance; it carries nothing. */
.orn {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: no-repeat center / contain;
  --orn-scale: 1;
  width: calc(var(--orn-w, 24rem) * var(--orn-scale));
  opacity: var(--orn-o, 0.5);
}
.textured > .orn { position: absolute; z-index: 0; }
.orn-corner-leaf  { background-image: url("../img/orn-corner-leaf.webp");  aspect-ratio: 820 / 709; }
.orn-blue-leaf    { background-image: url("../img/orn-blue-leaf.webp");    aspect-ratio: 820 / 617; }
.orn-arcs         { background-image: url("../img/orn-arcs.webp");         aspect-ratio: 820 / 817; }
.orn-branch-right { background-image: url("../img/orn-branch-right.webp"); aspect-ratio: 411 / 820; }
.orn-branch       { background-image: url("../img/orn-branch.webp");       aspect-ratio: 469 / 820; }
.orn.flip-x  { transform: scaleX(-1); }
.orn.flip-y  { transform: scaleY(-1); }
.orn.flip-xy { transform: scale(-1, -1); }
/* Height to width ratio of each ornament, for offsets that must track its
   rendered height at every breakpoint. */
.orn-corner-leaf { --orn-r: 0.8646; }
.orn-arcs { --orn-r: 0.9963; }
.orn-hero-about { --orn-r: 1.6854; }
/* One ornament across a section seam: the same piece is placed in both
   sections, seam-out at the bottom of the upper one and seam-in at the top
   of the lower one. --orn-k is the share of its height below the seam's
   upper section edge. Both offsets derive from the rendered height, so the
   halves meet exactly at any width. */
.orn.seam-out { bottom: calc(-1 * var(--orn-w) * var(--orn-scale) * var(--orn-r) * var(--orn-k)); }
.orn.seam-in { top: calc(-1 * var(--orn-w) * var(--orn-scale) * var(--orn-r) * (1 - var(--orn-k))); }
/* A branch that grows in from the right edge: turned so its stem sits just
   past the edge and the foliage reaches into the section. */
.orn.from-right {
  right: calc(var(--orn-w) * var(--orn-scale) * (var(--orn-r) - 1) / 2 - 1.5rem);
  transform: rotate(-90deg);
}
/* Gold line art on ink reads strongly, so it runs fainter there. The navy
   leaf is for light grounds only. */
.on-ink > .orn { --orn-o: 0.2; }
@media (max-width: 47.9rem) {
  .orn { --orn-scale: 0.55; opacity: calc(var(--orn-o, 0.5) * 0.7); }
}

/* Soft corners on content photographs. The site's corners are otherwise
   square; this is a light rounding for pictures only, kept small so it reads
   as finish rather than as a card style. */
:root { --radius-media: 0.625rem; }
.r-media { border-radius: var(--radius-media); overflow: hidden; }
.r-media img { border-radius: inherit; }

/* Icon list. Each item leads with its icon from the service icon family,
   centred on the line. Replaces the small champagne square markers. */
.icon-list li { display: flex; align-items: center; gap: var(--sp-4); padding-left: 0; }
.icon-list li::before { display: none; }
.icon-list picture { flex: none; line-height: 0; }
.icon-list { gap: var(--sp-2); }
.icon-list img { width: 2.5rem; height: 2.5rem; }
/* A paragraph led by an icon keeps its text in one column beside the icon,
   rather than wrapping its last line back under it. */
.has-lead-ico { display: flex; align-items: flex-start; gap: var(--sp-4); }
.lead-ico { flex: none; line-height: 0; margin-top: 0.15rem; }
.lead-ico img { width: 2.5rem; height: 2.5rem; }

/* Stacked statement. Micah, 2026-10-05: the heading-left split read oddly
   on "Is it the right fit", a two line heading beside two long paragraphs
   left a tall empty column under it. Here the heading takes the full width
   on top and the two paragraphs sit side by side beneath it, so the text
   fills the band evenly. Phones stack as before. */
.statement.statement-stack { grid-template-columns: 1fr; }
.statement-stack .statement-head h2 { max-width: none; }
@media (min-width: 60rem) {
  .statement-stack .statement-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-8);
    align-items: start;
  }
  .statement-stack .statement-body > p { max-width: none; margin-bottom: 0; }
}

/* Hero branches, 2026-10-05. Gold line art drawn for the ink heroes, one per
   page, on the left side of the hero behind the copy. The heroes get more
   imagery in the next round; these hold the left side until then. */
.orn-hero-about              { background-image: url("../img/orn-hero-about.webp");              aspect-ratio: 534 / 900; }
.orn-hero-assisted-living    { background-image: url("../img/orn-hero-assisted-living.webp");    aspect-ratio: 432 / 900; }
.orn-hero-memory-care        { background-image: url("../img/orn-hero-memory-care.webp");        aspect-ratio: 493 / 900; }
.orn-hero-home-care          { background-image: url("../img/orn-hero-home-care.webp");          aspect-ratio: 548 / 900; }
.orn-hero-silverleaf-academy { background-image: url("../img/orn-hero-silverleaf-academy.webp"); aspect-ratio: 490 / 900; }
.page-hero { position: relative; }
.page-hero > .container { position: relative; z-index: 1; }
/* The second Daily Life picture drifts up a little as it scrolls past (its
   parallax). With the icon list the note is taller, and at the top of that
   drift the picture came within 6px of the Health and Wellness link. More
   room under the note keeps the link clear through the whole drift. */
.river-note { padding-bottom: var(--sp-7); }

/* Corner rings on light grounds. The champagne ring at 28 percent reads on
   ink but all but vanishes on paper, so on light sections the corner pair
   uses the deeper brass, closer to the weight of the gold line art. Two
   circles centred beyond the corner and clipped by the section read as
   arcs with no loose ends. */
.ring-ornament.ring-corner { border-color: var(--accent-strong); border-width: 1.5px; opacity: 0.42; }
.ring-ornament.ring-corner + .ring-ornament.ring-corner { border-width: 1px; opacity: 0.3; }

/* ================================================== About, 2026-10-05
   Built from Micah's reference: the hero as a split with the gold branch on
   the left, a very large title over a short gold rule; the Welcome band as
   copy beside a framed photograph. */

/* Hero. Reuses the service page split (copy left, photograph right fading
   into the ink); only the type is larger and lighter here. */
.about-hero h1 {
  font-size: clamp(3.25rem, 7vw, 6rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}
.title-rule { display: block; width: 4.5rem; height: 3px; background: var(--champagne); margin: 0 0 var(--sp-5); }
.about-hero .svc-hero-copy > p { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.6; max-width: 27rem; }
@media (min-width: 64rem) { .about-hero .svc-hero-media { width: 57%; } }

/* Gold button. White text needs a deeper gold than the champagne to clear
   AA: #8F7034 gives 4.63 to 1. Used where a light band needs a warm call to
   action instead of the ink pill. */
.btn-gold {
  background: #8F7034;
  border-color: #8F7034;
  color: var(--white);
  gap: var(--sp-3);
}
.btn-gold:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-gold svg { transition: transform var(--dur) var(--ease-out-expo); }
.btn-gold:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-gold:hover svg { transform: none; } }

/* Welcome band. Copy left, framed photograph right; the photograph runs a
   little past the container toward the window edge on wide screens. */
.welcome-split { display: grid; gap: var(--sp-7); align-items: center; }
.welcome-copy h2 { font-size: clamp(2.25rem, 3.1vw, 2.875rem); font-weight: 600; line-height: 1.08; text-wrap: balance; }
.welcome-copy > p { max-width: 58ch; }
.welcome-cta { margin-top: var(--sp-6); }
@media (min-width: 60rem) {
  .welcome-split { grid-template-columns: 1fr 1.08fr; gap: var(--sp-8); }
}
@media (min-width: 84rem) {
  .welcome-split .framed-media { margin-right: -6rem; }
}

/* The framed photograph: a thin brass frame offset behind its left edge, a
   large thin circle behind its right edge, and a leaf spray at its lower
   left. All three sit behind the picture inside the wrapper's own stacking
   context, so they never cover it and never take a click. */
.framed-media { position: relative; isolation: isolate; }
.framed-media > .lightbox-open, .framed-media > .media-box { display: block; width: 100%; }
.framed-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fm-frame {
  position: absolute; z-index: -1; pointer-events: none;
  left: -2.25rem; top: 2.25rem; bottom: 2.25rem; width: 55%;
  border: 1.5px solid var(--accent-strong); opacity: 0.7;
}
.fm-ring {
  position: absolute; z-index: -1; pointer-events: none;
  right: -4.5rem; top: 50%; width: 112%; aspect-ratio: 1; transform: translateY(-50%);
  max-width: 34rem; border: 1.5px solid var(--accent-strong); border-radius: 50%; opacity: 0.55;
}
.framed-media > .orn.fm-leaf {
  z-index: -1; left: -5.5rem; bottom: -3.5rem; --orn-w: 15rem; --orn-o: 0.55;
}
@media (max-width: 59.9375rem) {
  .fm-frame { left: -0.75rem; top: 1rem; bottom: 1rem; }
  .fm-ring { right: -2.5rem; }
  .framed-media > .orn.fm-leaf { left: -1.5rem; bottom: -2rem; }
}

/* ========================== About tune, AL and MC heroes, feature bands
   2026-10-05, from Micah's references. */

/* About hero: shorter, wider photograph, warmer light. The warmth is a CSS
   filter on top of the site's base grade, never baked into the file. */
.about-hero .svc-hero-copy { padding-block: var(--sp-7); }
@media (min-width: 64rem) { .about-hero .svc-hero-media { width: 60%; } }
.about-hero .svc-hero-media img { filter: saturate(1.06) sepia(0.24) contrast(1.02) brightness(0.93) hue-rotate(-5deg); }

/* Larger service heroes: a bigger two line title and a row of three points
   under the lede. */
.svc-hero-lg h1 { font-size: clamp(2.5rem, 4.6vw, 3.875rem); line-height: 1.05; max-width: 15ch; }
.svc-hero-lg .svc-hero-copy { padding-block: var(--sp-8); }
.svc-hero-lg .svc-hero-copy > .hero-points { max-width: none; }
.hero-points {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
}
.hero-points li {
  display: flex; align-items: center; gap: var(--sp-3);
  flex: none; font-size: var(--fs-0); line-height: 1.35; color: var(--paper);
}
.hero-points li > span:last-child { max-width: 9.75rem; text-wrap: balance; }
.hp-ico {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 1.5px solid var(--champagne); border-radius: 50%;
  color: var(--champagne);
}
.hp-ico svg { width: 1.5rem; height: 1.5rem; }
/* Memory care separates its three points with thin vertical rules. */
.hero-points.has-rules { gap: var(--sp-4) 0; }
.hero-points.has-rules li { padding-inline: var(--sp-4); }
.hero-points.has-rules li:first-child { padding-left: 0; }
.hero-points.has-rules li + li { border-left: 1px solid rgba(216, 184, 144, 0.45); }

/* A thin champagne arc over the photograph's right side, and on assisted
   living the Silverleaf mark sitting on it. Decorative, never clickable. */
.hero-arc, .hero-medallion { display: none; }
@media (min-width: 64rem) {
  .hero-arc {
    display: block; position: absolute; z-index: 1; pointer-events: none;
    width: 40rem; aspect-ratio: 1; right: -30rem; top: 50%; transform: translateY(-50%);
    border: 1.5px solid var(--champagne); border-radius: 50%; opacity: 0.7;
  }
  .hero-medallion {
    display: grid; place-items: center; position: absolute; z-index: 2; pointer-events: none;
    width: 5.25rem; height: 5.25rem; right: 6.35rem; top: 21%;
    border: 2px solid var(--champagne); border-radius: 50%;
    background: rgba(8, 24, 48, 0.62); color: var(--champagne);
    backdrop-filter: blur(2px);
  }
  .hero-medallion svg { width: 3rem; height: 3rem; }
}

/* Feature band: copy left with a leaf behind it, a framed photograph right,
   and a card laid over the photograph's lower right. */
.feature-split { display: grid; gap: var(--sp-7); align-items: center; }
.feature-copy h2 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 600; line-height: 1.06; text-wrap: balance; }
.feature-copy > p { max-width: 58ch; text-wrap: pretty; }
@media (min-width: 60rem) {
  .feature-split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
.framed-media.has-card { margin-bottom: var(--sp-6); }
.media-card {
  position: absolute; z-index: 1; right: -2.5rem; bottom: -2.5rem;
  width: min(17rem, 70%); margin: 0; padding: var(--sp-5) var(--sp-5) var(--sp-5);
  background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-2);
}
.media-card blockquote { margin: 0; }
.media-card blockquote p {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.1875rem; line-height: 1.4; color: var(--text-strong);
}
.media-card figcaption {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4);
  font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase;
  font-weight: 700; color: var(--accent-strong);
}
.media-card figcaption::before { content: ""; width: 1.75rem; height: 1.5px; background: var(--accent-strong); }
.media-card.has-mark { text-align: left; }
.mc-mark {
  display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin: 0 auto var(--sp-4);
  border: 1.5px solid var(--accent-strong); border-radius: 50%; color: var(--accent-strong);
}
.mc-mark svg { width: 2.3rem; height: 2.3rem; }
.media-card.has-mark blockquote p::after {
  content: ""; display: block; width: 1.75rem; height: 1.5px; margin-top: var(--sp-4); background: var(--accent-strong);
}
@media (max-width: 59.9375rem) {
  .media-card { position: relative; right: auto; bottom: auto; width: auto; margin: calc(-1 * var(--sp-6)) var(--sp-4) 0; }
  .framed-media.has-card { margin-bottom: 0; }
}
/* The rules divide points that sit side by side. Once the row wraps to a
   column on a phone they read as stray marks, so they go. */
@media (max-width: 47.9rem) {
  .hero-points { flex-direction: column; }
  .hero-points.has-rules li { padding-inline: 0; border-left: 0; }
}

/* ===================== round 3: About align, MC side card, Home Care,
   Academy. 2026-10-05, from Micah's references. */

/* About Welcome: the photograph runs exactly from the top of the heading to
   the foot of the last paragraph. The copy column dissolves into the grid
   so its rows can be shared: eyebrow, heading, two paragraphs, button. */
@media (min-width: 60rem) {
  .welcome-split { grid-template-columns: 1fr 1.08fr; column-gap: var(--sp-8); row-gap: 0; align-items: stretch; }
  .welcome-copy { display: contents; }
  .welcome-copy > * { grid-column: 1; }
  .welcome-copy > p:nth-last-of-type(2) { margin-bottom: 0; }
  .welcome-split > .framed-media { grid-column: 2; grid-row: 2 / span 3; }
  .welcome-split > .framed-media > .lightbox-open, .welcome-split > .framed-media > .media-box { height: 100%; }
  .welcome-split .framed-media img { height: 100%; aspect-ratio: auto; }
}

/* Memory care: a narrower, taller card centred on the photograph's right
   edge rather than tucked into its lower corner. */
@media (min-width: 60rem) {
  .media-card.is-side {
    right: -3.5rem; top: 50%; bottom: auto; transform: translateY(-50%);
    width: 12.75rem; padding: var(--sp-6) var(--sp-5);
  }
}

/* Light service hero (home care): the same split on paper instead of ink.
   The photograph fades into the paper, the type runs ink, and the icons and
   rules run brass. */
/* Small caps labels for a point row, as in the reference. */
.hero-points.is-caps li > span:last-child {
  font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; max-width: 11rem;
}
/* The home care badge: Micah's house in hand icon, ringed in white, sitting
   where the photograph begins. */
.hero-badge { display: none; }
@media (min-width: 64rem) {
  .hero-badge {
    display: block; position: absolute; z-index: 2; pointer-events: none;
    left: 46%; top: 40%; transform: translate(-50%, -50%);
    width: 7.5rem; height: 7.5rem; border-radius: 50%;
    background: var(--white); padding: 0.4rem; box-shadow: var(--shadow-2);
  }
  .hero-badge img { width: 100%; height: 100%; display: block; }
}

/* Check list: a gold disc with a white tick in place of the square marker,
   in two columns on wide screens. */
.check-list {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-3) var(--sp-6);
}
@media (min-width: 40rem) { .check-list { grid-template-columns: 1fr 1fr; } }
.check-list li { position: relative; padding-left: 2.25rem; color: var(--text-strong); line-height: 1.45; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.05em; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #8F7034 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
@media (min-width: 60rem) { .feature-split.is-wide-copy { grid-template-columns: 1.1fr 0.9fr; } }

/* Academy hero, facts bar and program band. */
.academy-hero .svc-hero-copy { padding-bottom: calc(var(--sp-8) + 3rem); }
.academy-hero .lede { font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45; color: var(--white); }
.academy-hero .hero-cta .btn { gap: var(--sp-3); }
@media (min-width: 64rem) { .academy-hero .svc-hero-media { width: 58%; } }
/* The facts bar straddles the hero and the band below it. A zero height
   bridge between the two sections carries it, so neither section has to
   stop clipping its ornaments to let it through. */
.facts-bridge { position: relative; z-index: 3; }
.facts-bar {
  margin: 0; display: grid; gap: var(--sp-5);
  background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-2);
  padding: var(--sp-5) var(--sp-6);
}
.fb-item { display: flex; align-items: center; gap: var(--sp-4); }
.fb-ico { flex: none; color: var(--accent-strong); }
.fb-ico svg { width: 2.5rem; height: 2.5rem; display: block; }
.facts-bar dt { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: 700; color: var(--accent-strong); }
.facts-bar dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.15; color: var(--text-strong); }
.facts-bar .fact-note { color: var(--text-soft); }
@media (min-width: 64rem) {
  .facts-bridge { height: 0; }
  .facts-bar {
    width: 64%; margin-left: auto; transform: translateY(-50%);
    grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0;
  }
  .fb-item + .fb-item { border-left: 1px solid var(--rule); padding-left: var(--sp-6); }
  .feature-band.after-bridge { padding-top: calc(var(--sp-8) + 3.5rem); }
}
@media (max-width: 63.9375rem) {
  .facts-bridge { background: var(--ink); padding-bottom: var(--sp-6); }
}
.framed-media.is-wide img { aspect-ratio: 2 / 1; }
.program-points { margin-top: var(--sp-6); }
.program-points li { color: var(--text-strong); }
.program-points .hp-ico { border-color: var(--accent-strong); color: var(--accent-strong); width: 3.75rem; height: 3.75rem; }
.program-points .hp-ico svg { width: 1.9rem; height: 1.9rem; }
.program-points.has-rules li + li { border-left-color: var(--rule); }
.program-points.is-caps li > span:last-child { max-width: 8.5rem; font-size: 0.875rem; }
/* round 3 fit and finish */
@media (min-width: 64rem) { .hero-badge { left: 55%; top: 34%; } }
.hc-hero .hero-points.is-caps li > span:last-child { max-width: 13.5rem; }
.feature-band .feature-split.is-wide-copy .framed-media img { aspect-ratio: 4 / 3.4; object-fit: cover; height: auto; }
@media (min-width: 60rem) { .feature-split.is-wide-copy { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .facts-bar { width: 72%; }
  .facts-bar dt, .facts-bar dd { white-space: nowrap; }
  .facts-bar .fact-note { white-space: normal; max-width: 13rem; }
}
.after-bridge .feature-split { align-items: start; }
@media (min-width: 60rem) { .after-bridge .feature-split { grid-template-columns: 0.92fr 1.08fr; } }
.program-points { flex-wrap: nowrap; }
.program-points.has-rules li { padding-inline: var(--sp-4); }
.program-points .hp-ico { width: 3rem; height: 3rem; }
.program-points .hp-ico svg { width: 1.6rem; height: 1.6rem; }
.program-points.is-caps li > span:last-child { max-width: 8rem; font-size: 0.8125rem; letter-spacing: 0.08em; }
@media (max-width: 47.9rem) { .program-points { flex-wrap: wrap; } }
.hc-hero .hero-points.is-caps li > span:last-child { max-width: 9.75rem; }
.hc-hero .hero-points.has-rules li { padding-inline: var(--sp-4); }
.hc-hero .hero-points.has-rules li:first-child { padding-left: 0; }
@media (min-width: 64rem) {
  .facts-bar { width: 76%; }
  .facts-bar .fact-note { max-width: 17rem; }
}
/* The home care points reach into the photograph's faded edge, as in the
   reference; the light hero's fade is longer so that edge reads as paper. */
.hc-hero .hero-points.is-caps li > span:last-child { max-width: 8.75rem; font-size: 0.8125rem; }
@media (min-width: 64rem) {
  .hc-hero .svc-hero-media img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 64%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 64%);
  }
  .facts-bar { width: 84%; }
  .facts-bar .fact-note { max-width: 21rem; }
}
.hc-hero .hero-points.is-caps li:last-child > span:last-child { max-width: 12.5rem; }
@media (max-width: 47.9rem) {
  .svc-hero .hero-points.has-rules li, .hc-hero .hero-points.has-rules li { padding-inline: 0; border-left: 0; }
  .academy-hero .svc-hero-copy { padding-bottom: var(--sp-7); }
}

/* Academy round 4. The facts bar breaks out of the column: it is placed
   against the full width bridge rather than the container, starting under
   the hero copy and running nearly to the window edge, one row and short. */
@media (min-width: 64rem) {
  .facts-bridge { position: relative; }
  .facts-bar {
    position: absolute; left: 41vw; right: 4vw; width: auto; margin: 0;
    transform: translateY(-50%); padding: var(--sp-4) var(--sp-6);
    grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center;
  }
  .facts-bar .fb-ico svg { width: 2.25rem; height: 2.25rem; }
  .facts-bar dd { font-size: 1.5rem; }
  .facts-bar .fact-note { display: block; max-width: none; white-space: nowrap; font-size: 0.9375rem; margin-top: 0.1rem; }
  .fb-item + .fb-item { padding-left: var(--sp-6); }
}
@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .facts-bar { left: 4vw; }
}

/* Program band: wider copy so the heading holds two lines; the photograph
   runs past the container toward the window edge instead of shrinking. */
.after-bridge .feature-copy h2 { font-size: clamp(2.25rem, 3vw, 2.875rem); }
@media (min-width: 60rem) { .after-bridge .feature-split { grid-template-columns: 1.15fr 0.85fr; } }
@media (min-width: 84rem) { .after-bridge .feature-split > div:last-child { margin-right: -4.5rem; } }
@media (min-width: 64rem) { .feature-band.after-bridge { padding-top: calc(var(--sp-8) + 2.5rem); } }

/* Seam: a hairline with the champagne diamond at its centre, where two
   light bands meet and the colour change alone is too faint to read. */
.seam { position: relative; height: 0; z-index: 2; }
.seam::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(72rem, 86vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,134,63,.55) 18%, rgba(168,134,63,.55) 82%, transparent);
}
.seam span {
  position: absolute; left: 50%; top: 0; width: 0.75rem; height: 0.75rem;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--paper);
  border: 1.5px solid var(--accent-strong);
}

@media (min-width: 64rem) {
  .facts-bar { padding: var(--sp-4) var(--sp-5); }
  .fb-item { gap: var(--sp-3); }
  .fb-item + .fb-item { padding-left: var(--sp-5); }
  .facts-bar dt { letter-spacing: 0.1em; }
  .facts-bar .fact-note { font-size: 0.875rem; }
}
@media (min-width: 80rem) { .facts-bar { left: 33vw; } }
/* The program points share the photograph's width in three equal columns,
   labels wrapping inside their own column, so they never run past it. */
@media (min-width: 48rem) {
  .program-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .program-points.has-rules li { padding-inline: var(--sp-3); min-width: 0; }
  .program-points.has-rules li:first-child { padding-left: 0; }
  .program-points.is-caps li > span:last-child { max-width: none; min-width: 0; }
  .program-points .hp-ico { width: 2.75rem; height: 2.75rem; }
}
@media (min-width: 48rem) {
  .program-points li { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
  .program-points.has-rules li, .program-points.has-rules li:first-child { padding-inline: var(--sp-3); }
}

/* ============================== round 5, 2026-10-05 */

/* Assisted living, Is it the right fit: more room for the photograph. */
@media (min-width: 60rem) { .feature-split.is-wide-media { grid-template-columns: 0.85fr 1.15fr; } }
@media (min-width: 84rem) { .feature-split.is-wide-media > .framed-media { margin-right: -4rem; } }

/* Memory care side card: no rule under the quote, less height, so more of
   the photograph shows above and below it. */
.media-card.has-mark.is-side blockquote p::after { display: none; }
@media (min-width: 60rem) {
  .media-card.is-side { width: 15rem; padding: var(--sp-5); }
  .media-card.is-side .mc-mark { width: 3rem; height: 3rem; margin-bottom: var(--sp-3); }
  .media-card.is-side .mc-mark svg { width: 1.8rem; height: 1.8rem; }
  .media-card.is-side blockquote p { font-size: 1.125rem; }
}

/* Our approach, What PAC is: copy, a tall photograph, three points. */
.pac-trio { display: grid; gap: var(--sp-7); align-items: center; }
.pac-copy h2 { font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 600; line-height: 1.06; text-wrap: balance; }
.pac-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.pac-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.pac-points li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pac-points li + li { padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.pac-points .hp-ico { width: 4rem; height: 4rem; border-color: var(--accent-strong); color: var(--accent-strong); background: rgba(255,255,255,.4); }
.pac-points .hp-ico svg { width: 2rem; height: 2rem; }
.pac-points h3 { font-size: var(--fs-1); margin: 0 0 var(--sp-1); }
.pac-points p { margin: 0; color: var(--text-soft); }
@media (min-width: 64rem) {
  .pac-trio { grid-template-columns: 1fr 0.78fr 1fr; gap: var(--sp-7); }
}
@media (min-width: 40rem) and (max-width: 63.9375rem) {
  .pac-photo { max-width: 26rem; }
}

/* Health and wellness: a lead line in the hero, and the five pillars. */
.svc-hero .hero-lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.4; color: var(--white); }
.pillars-head { display: grid; gap: var(--sp-5); align-items: end; }
.pillars-head h2 { font-size: clamp(2rem, 3vw, 2.625rem); font-weight: 600; line-height: 1.08; margin-bottom: 0; }
.pillars-head p { margin: 0; color: var(--text-soft); max-width: 46ch; }
@media (min-width: 60rem) { .pillars-head { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); } }
.pillars { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; gap: var(--sp-6) var(--sp-5); }
.pillars li { text-align: center; }
.pillars .hp-ico { margin: 0 auto var(--sp-4); width: 4.25rem; height: 4.25rem; border-color: var(--accent-strong); color: var(--accent-strong); background: rgba(255,255,255,.45); }
.pillars .hp-ico svg { width: 2.1rem; height: 2.1rem; }
.pillars h3 { font-size: var(--fs-1); margin: 0 0 var(--sp-2); }
.pillars p { margin: 0 auto; color: var(--text-soft); max-width: 24ch; font-size: var(--fs-0); }
@media (min-width: 40rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .pillars { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .pillars li { padding-inline: var(--sp-4); }
  .pillars li + li { border-left: 1px solid var(--rule); }
}
.wb-hero h1 { max-width: 20ch; }
.wb-hero .svc-hero-copy > * { max-width: 36rem; }
.wb-hero .svc-hero-copy { padding-block: var(--sp-7); }
.wb-hero .svc-hero-copy > p:not(.hero-lead) { font-size: var(--fs-0); }
@media (min-width: 64rem) {
  .pac-trio { grid-template-columns: 1.1fr 0.72fr 1fr; }
  .pac-copy h2 { font-size: clamp(2.25rem, 2.9vw, 2.625rem); }
}
.wb-hero h1 { font-size: clamp(2.5rem, 3.4vw, 3rem); }
.wb-hero .svc-hero-copy > h1 { max-width: 36rem; }
@media (min-width: 64rem) {
  .pillars li { padding-inline: var(--sp-3); }
  .pillars p { font-size: 0.9375rem; max-width: none; }
}

/* ============================== round 6, 2026-10-05 */

/* A wider container for bands that carry three columns. */
.container.wide { max-width: 82rem; }

/* What PAC is: the photograph matches the full height of the two text
   columns beside it. */
@media (min-width: 64rem) {
  .pac-trio { align-items: stretch; grid-template-columns: 1.05fr 0.78fr 1fr; }
  .pac-copy, .pac-points { align-self: center; }
  .pac-photo { position: relative; min-height: 26rem; }
  .pac-photo picture, .pac-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* Locations: two location cards and a map card. */
.communities-head h2 { max-width: 22ch; }
.communities { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); align-items: stretch; }
@media (min-width: 48rem) { .communities { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .communities { grid-template-columns: 1fr 1fr 0.85fr; } }
.loc-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--rule); box-shadow: var(--shadow-2); padding: var(--sp-3); }
.loc-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-media); }
.loc-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loc-card-media.is-coming { display: grid; place-items: center; background: var(--ink); }
.loc-card-media.is-coming::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--champagne); opacity: 0.35;
}
.loc-mark { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 2px solid var(--champagne); color: var(--champagne); }
.loc-mark svg { width: 3.2rem; height: 3.2rem; }
.loc-badge {
  position: absolute; left: var(--sp-4); top: var(--sp-4); padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text-strong); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; box-shadow: var(--shadow-1);
}
.loc-card-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4) var(--sp-4); flex: 1; }
.loc-card-body h3 { margin: 0; font-size: var(--fs-2); }
.loc-card-body > p { margin: 0; color: var(--text-soft); }
.loc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.loc-facts li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-strong); }
.loc-facts svg { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; color: var(--accent-strong); flex: none; }
.loc-card-body .btn { margin-top: auto; align-self: flex-start; gap: var(--sp-3); }
.loc-card-body > p + .btn { margin-top: auto; }
.loc-map-card { padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; }
.loc-map { width: 100%; height: auto; max-height: 30rem; margin-top: var(--sp-3); }
.map-lake { fill: none; stroke: #8FA7B8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.map-town { fill: var(--accent-strong); }
.map-town-label { font-family: var(--font-body); font-size: 12px; fill: var(--text-soft); }
.map-pin-label { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--text-strong); }
.map-north path { fill: none; stroke: var(--text-soft); stroke-width: 1.2; }
.map-north text { font-family: var(--font-body); font-size: 10px; fill: var(--text-soft); }

/* Careers environment: copy beside a wide photograph with three points under it. */
.env-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 30%; }
.env-points { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.env-points li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.env-points .hp-ico { width: 3.25rem; height: 3.25rem; border-color: var(--accent-strong); color: var(--accent-strong); background: rgba(255,255,255,.45); }
.env-points .hp-ico svg { width: 1.6rem; height: 1.6rem; }
.env-points h3 { font-size: 1.125rem; margin: 0 0 var(--sp-1); }
.env-points p { margin: 0; font-size: 0.9375rem; color: var(--text-soft); line-height: 1.45; }
@media (min-width: 48rem) {
  .env-points { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .env-points li { padding-inline: var(--sp-4); }
  .env-points li:first-child { padding-left: 0; }
  .env-points li + li { border-left: 1px solid var(--rule); }
}
@media (min-width: 60rem) { .env-split { grid-template-columns: 0.8fr 1.2fr; } }
.locs-hero .svc-hero-copy { padding-block: calc(var(--sp-8) + 2rem); }
.loc-card-body h3 { font-size: 1.375rem; text-wrap: balance; }
.map-lake { stroke-width: 3; opacity: 0.35; }
.careers-hero h1 { max-width: 22ch; font-size: clamp(2.5rem, 3.6vw, 3.25rem); }
.careers-hero .svc-hero-copy > h1 { max-width: 40rem; }

/* ============================== round 7, 2026-10-05 */
.container.wider { max-width: 88rem; }

/* Locations map: a drawn ground with a faint grid, the Highland Lakes, the
   main highways with their shields, then the towns and the two pins. */
.loc-map-card { padding: 0; }
.loc-map-card .eyebrow { margin-bottom: var(--sp-3); }
.loc-map { flex: 1; max-height: none; margin: 0; filter: drop-shadow(0 6px 18px rgba(8,24,48,.10)); }
.map-ground { fill: #FBF8F3; stroke: var(--rule); }
.map-grid { fill: none; stroke: rgba(16,27,55,.05); stroke-width: 1; }
.map-lake { fill: none; stroke: #9DB5C6; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.map-road { fill: none; stroke: #D9C9A8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.map-shield { fill: #FFFFFF; stroke: #B8A47C; stroke-width: 1; }
.map-shield-t { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; fill: var(--text-soft); }

/* Testimonials hero: the title and a real family's words. */
.tm-hero h1 { max-width: 18ch; }
.hero-quote { margin: 0; }
.hero-quote blockquote { margin: 0; }
.hero-quote blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.35; color: var(--white); max-width: 26ch;
}
.hero-quote figcaption {
  margin-top: var(--sp-4); font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--champagne);
}
.hero-quote figcaption span { display: block; margin-top: 0.2rem; font-weight: 600; font-size: 0.8125rem; color: rgba(244,240,235,.8); }

/* Blog: a featured article, then the rest as image cards. */
.blog-featured { display: grid; gap: var(--sp-6); align-items: center; padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(168,134,63,.4); }
@media (min-width: 60rem) { .blog-featured { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); } }
.bf-copy h2 { font-size: clamp(1.875rem, 2.8vw, 2.5rem); line-height: 1.12; text-wrap: balance; margin: var(--sp-2) 0 var(--sp-4); }
.bf-copy h2 a, .blog-card h3 a { color: inherit; text-decoration: none; }
.bf-copy h2 a:hover, .blog-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent-strong); }
.bf-copy > p { color: var(--text-soft); max-width: 48ch; }
.bf-media { display: block; }
.bf-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-media); }
.blog-date { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--text-soft); }
.blog-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 48rem) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-4); background: var(--bg-card); border: 1px solid var(--rule); box-shadow: var(--shadow-1); padding: var(--sp-3); transition: box-shadow var(--dur) var(--ease-out-expo), transform var(--dur) var(--ease-out-expo); }
.blog-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .blog-card:hover { transform: none; } }
.bc-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-media); min-height: 12rem; }
.bc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-tag {
  position: absolute; left: var(--sp-2); top: var(--sp-2); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--paper); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong);
}
.bc-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; }
.bc-body .blog-date { margin: 0; }
.bc-body h3 { font-size: 1.1875rem; line-height: 1.25; margin: 0; text-wrap: balance; }
.bc-body > p { margin: 0; font-size: 0.9375rem; color: var(--text-soft); line-height: 1.5; }
.bc-body .text-link { margin-top: auto; }
@media (max-width: 30rem) { .blog-card { grid-template-columns: 1fr; } .bc-body { padding: 0 var(--sp-2) var(--sp-2); } }
.pillars-head h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
/* The traced map fills its card, which stretches to the height of the two
   location cards beside it. */
.loc-map-card { background: #FBF8F3; border: 1px solid var(--rule); box-shadow: var(--shadow-2); padding: var(--sp-4) var(--sp-3) var(--sp-3); }
.loc-map-card .eyebrow { margin-left: var(--sp-2); }
.loc-map { display: block; flex: 1; width: 100%; height: 100%; min-height: 22rem; filter: none; border-radius: var(--radius-media); }
.map-ground { fill: #F2EADB; }
.map-water { fill: #A9C9DA; stroke: #94B8CC; stroke-width: .6; stroke-linejoin: round; }
.map-road { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.loc-map .map-road + .map-road { }
.map-town-label { paint-order: stroke; stroke: #EEF3EA; stroke-width: 3px; }
.map-pin-label { paint-order: stroke; stroke: #EEF3EA; stroke-width: 3.5px; }

/* ============================== contact, 2026-10-05 */
.contact-hero h1 { max-width: 16ch; }
.hero-contacts { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.hero-contacts li { display: flex; align-items: center; gap: var(--sp-4); }
.hc-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid var(--champagne); border-radius: 50%; color: var(--champagne); }
.hc-ico svg { width: 1.4rem; height: 1.4rem; }
.hero-contacts a { color: var(--champagne); text-decoration-color: rgba(216,184,144,.45); font-size: var(--fs-1); }
.hero-contacts a.hc-phone { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 600; text-decoration: none; line-height: 1; }

.contact-split { display: grid; gap: var(--sp-8); }
.contact-col h2 { font-size: clamp(2rem, 2.8vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
@media (min-width: 64rem) {
  .contact-split { grid-template-columns: 1fr 1fr; gap: 0; }
  .contact-col:first-child { padding-right: var(--sp-7); border-right: 1px solid rgba(168,134,63,.45); }
  .contact-col:last-child { padding-left: var(--sp-7); }
}
/* The form: white fields, labels beside them on wide screens. */
.form-aligned { max-width: none; gap: var(--sp-4); margin-top: var(--sp-5); }
.form-aligned input[type="text"], .form-aligned input[type="tel"], .form-aligned input[type="email"], .form-aligned textarea {
  background: var(--white); border: 1px solid rgba(16,27,55,.22); border-radius: 4px; padding: 0.7rem 0.85rem; width: 100%;
}
.form-aligned input:focus-visible, .form-aligned textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent-strong); }
.form-aligned label.is-req::after { content: " *"; color: #B5502F; }
@media (min-width: 40rem) {
  .form-aligned .form-field { grid-template-columns: 10.5rem 1fr; align-items: center; gap: var(--sp-4); }
  .form-aligned .form-field:has(textarea) { align-items: start; }
  .form-aligned .form-field:has(textarea) label { padding-top: 0.7rem; }
  .form-aligned .fieldset { display: grid; grid-template-columns: 10.5rem 1fr; gap: var(--sp-2) var(--sp-4); align-items: center; }
  .form-aligned .fieldset legend { float: left; width: 10.5rem; padding: 0; font-weight: 600; color: var(--text-strong); }
}
.form-aligned .btn { justify-self: start; gap: var(--sp-3); margin-top: var(--sp-2); }

/* Booking card: icon, note and button in one row; once opened the calendar
   replaces the row and takes the card's full width. */
.sched-card { text-align: left; padding: var(--sp-4) var(--sp-5); background: var(--white); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-1); margin-top: var(--sp-5); }
.sched-row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-items: center; }
.sched-row .scheduler-note { margin: 0; max-width: none; font-size: 0.9375rem; }
.sched-row .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 80rem) { .sched-row { grid-template-columns: auto 1fr auto; } .sched-row .btn { grid-column: auto; } }
.ct-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--accent-strong); color: var(--accent-strong); background: rgba(255,255,255,.5); }
.ct-ico svg { width: 1.45rem; height: 1.45rem; }

.visit-block { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(168,134,63,.45); }
.visit-row { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
@media (min-width: 40rem) { .visit-row { grid-template-columns: 1.3fr 1fr; } .visit-item + .visit-item { border-left: 1px solid var(--rule); padding-left: var(--sp-5); } }
.visit-item, .care-note { display: flex; gap: var(--sp-4); align-items: flex-start; }
.visit-item h3, .care-note h3 { font-size: 1.125rem; margin: 0 0 var(--sp-1); }
.visit-item p, .care-note p { margin: 0; color: var(--text-soft); font-size: 0.9375rem; }
.care-note { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: rgba(216,184,144,.18); border-radius: 10px; align-items: center; }
.form-aligned .fieldset { border: 0; padding: 0; margin: 0; }
@media (min-width: 40rem) {
  .form-aligned .fieldset { display: block; }
  .form-aligned .fieldset legend { float: left; width: 10.5rem; margin-right: var(--sp-4); line-height: 1.35; }
  .form-aligned .fieldset .choice { display: flex; margin-left: calc(10.5rem + var(--sp-4)); min-height: 2.25rem; align-items: center; }
}
.sched-row, .sched-row .btn { grid-column: auto; }
@media (min-width: 80rem) { .sched-row { grid-template-columns: auto 1fr; } .sched-row .btn { grid-column: 1 / -1; } }
.sched-row .btn { grid-column: 1 / -1; }
.visit-item h3 { font-size: 1.0625rem; }
/* Calendly sizes its frame to 100% of its parent's height. The mount only
   had a min-height, which a percentage height cannot resolve against, so
   the frame fell back to the browser's default 150px and the calendar was
   crushed into a strip. A real height fixes it. */
.scheduler-mount { height: 62rem; min-height: 0; }
.scheduler-mount iframe { display: block; width: 100%; height: 100%; border: 0; }
.sched-card:has(.scheduler-mount) { padding: 0; overflow: hidden; }
@media (max-width: 47.9rem) { .scheduler-mount { height: 48rem; } }

/* ======================= remaining pages, 2026-10-05 */
/* Bee Cave main hero: the branch and arc sit above the photograph's scrim. */
.bc-hero > .orn, .bc-hero > .hero-arc { z-index: 1; }
.svc-hero .hero-phone a { font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 600; color: var(--champagne); text-decoration: none; }

/* Text heroes (Burnet, privacy, blog articles): branches on both sides and
   a ringed badge on the right, no photograph. */
.leaf-hero { position: relative; }
.leaf-hero-inner { position: relative; z-index: 1; display: grid; gap: var(--sp-6); align-items: center; padding-block: var(--sp-8); }
.leaf-hero-copy > * { max-width: 46rem; }
.leaf-hero h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.08; text-wrap: balance; }
.leaf-hero-copy > p { color: rgba(244,240,235,.92); }
.leaf-badge { display: none; }
@media (min-width: 64rem) {
  .leaf-hero-inner { grid-template-columns: 1fr auto; }
  .leaf-badge {
    display: grid; place-items: center; width: 10rem; height: 10rem; border-radius: 50%;
    border: 1.5px solid var(--champagne); color: var(--champagne); position: relative;
    box-shadow: 0 0 0 0.9rem rgba(216,184,144,.06), 0 0 0 1.8rem rgba(216,184,144,.04);
  }
  .leaf-badge::after { content: ""; position: absolute; inset: -1.2rem; border-radius: 50%; border: 1px solid rgba(216,184,144,.35); }
  .leaf-badge svg { width: 4.4rem; height: 4.4rem; }
}
.burnet-hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
.burnet-hero .stamp { margin-bottom: var(--sp-3); }

/* Meet the team: centred cards and larger headshots. */
.team-grid .card-body { align-items: center; text-align: center; }
.team-grid .headshot-frame { width: 11rem; height: 11rem; margin: 0 auto var(--sp-4); }
.team-grid .headshot-frame span { font-size: 2.6rem; }
.team-grid .card-body p { margin-inline: auto; }
.team-grid .chip { margin-inline: auto; }
/* Eight people in rows of three: centre the short last row. */
@media (min-width: 48rem) {
  .team-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .team-grid > .card { flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3); }
}
/* Long bare URLs in article text break onto the next line instead of
   pushing a phone screen sideways. */
.article-body p, .article-body li { overflow-wrap: anywhere; }
/* Home, How we can help: the assisted living ring is larger and grows
   upward into the space beside the 01, its bottom edge holding exactly
   where it sat above the heading, so the card itself does not grow. */
@media (min-width: 56rem) {
  .panel.is-dominant .panel-ring { width: min(21rem, 72%); margin-top: -5.75rem; margin-bottom: 0; }
}

/* ======================= round 11, 2026-10-05: icon cards and polish */

/* Icon card. Replaces the flat white card wherever a set of cards carries
   a title and a line: a ringed icon leads, a brass rule draws across the
   top on hover, and the card lifts slightly. Square corners, as the site's
   card language has always been. */
.icard { position: relative; text-align: left; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(8,24,48,.04), 0 10px 28px rgba(8,24,48,.07); overflow: hidden; }
.icard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent-strong);
  transform: scaleX(.18); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out-expo);
}
.icard:hover::before, .icard:focus-within::before { transform: scaleX(1); }
.icard .card-body { gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); }
.ic-ico {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none;
  border: 1.5px solid var(--accent-strong); color: var(--accent-strong); background: rgba(216,184,144,.14); margin-bottom: var(--sp-2);
}
.ic-ico svg { width: 1.7rem; height: 1.7rem; }
.icard h3 { font-size: 1.3125rem; }
.icard .card-body p { font-size: var(--fs-0); }
.sec-center .icard, .sec-center .icard .card-body { text-align: left; }
@media (prefers-reduced-motion: reduce) { .icard::before { transition: none; } }

/* A heading block centred on the page, used where a section is one centred
   statement: the eyebrow loses its leading dot. */
.center-block { text-align: center; }
.center-block > * { margin-inline: auto; }
.center-block .eyebrow-line { justify-content: center; }
.center-block .eyebrow-line::before { display: none; }
.center-block p { max-width: 62ch; }
/* Daily life splits (assisted living, memory care): a brass frame offset
   behind the photograph and a faint ring, so the picture sits in the band
   instead of floating on it. */
.daily-split { position: relative; isolation: isolate; }
@media (min-width: 56rem) {
  .daily-split::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -1.75rem; top: 2rem; bottom: -1.75rem; width: 38%;
    border: 1.5px solid var(--accent-strong); opacity: .55;
  }
  .daily-split::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -7rem; top: 50%; width: 30rem; aspect-ratio: 1; transform: translateY(-50%);
    border: 1.5px solid var(--accent-strong); border-radius: 50%; opacity: .28;
  }
}
/* Where bands: the two cards sit centred under a centred heading. */
.where-band .card-grid { max-width: 52rem; margin-inline: auto; margin-top: var(--sp-6); }
.where-band .icard .text-link { margin-top: auto; }
/* Academy: funding panel, centred statements with a mark, apply band. */
.fact-panel-v2 { border: 1px solid var(--rule); border-top: 3px solid var(--accent-strong); box-shadow: 0 1px 2px rgba(8,24,48,.04), 0 14px 34px rgba(8,24,48,.09); padding: var(--sp-6); }
.fact-panel-v2 .fp-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.fact-panel-v2 .fp-head .ic-ico { margin: 0; }
.fact-panel-v2 .fp-head h3 { margin: 0; }
.fact-panel-v2 .fact-row { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.fact-panel-v2 .fact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-panel-v2 .fact-row dd { font-size: 1.25rem; }
.fact-panel-v2 .fact-panel-note { background: rgba(216,184,144,.14); border: 0; padding: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 60rem) { .statement.is-centred { align-items: center; } }
.head-mark {
  display: grid; place-items: center; width: 4rem; height: 4rem; margin-top: var(--sp-5); border-radius: 50%;
  border: 1.5px solid var(--accent-strong); color: var(--accent-strong); background: rgba(216,184,144,.14);
  box-shadow: 0 0 0 .5rem rgba(216,184,144,.08);
}
.head-mark svg { width: 2rem; height: 2rem; }
.apply-band .apply-form-wrap { margin-top: 0; }
/* Bee Cave visit card. */
.visit-card { background: var(--bg-card); border: 1px solid var(--rule); border-top: 3px solid var(--accent-strong);
  box-shadow: 0 1px 2px rgba(8,24,48,.04), 0 14px 34px rgba(8,24,48,.09); padding: var(--sp-6); position: relative; overflow: hidden; }
.visit-card::after { content: ""; position: absolute; right: -6rem; bottom: -6rem; width: 14rem; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--accent-strong); opacity: .25; pointer-events: none; }
.visit-card .vc-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.visit-card .vc-head .ic-ico { margin: 0; }
.visit-card .vc-head h2 { margin: 0; font-size: var(--fs-2); }
.visit-card .hours-list { background: rgba(216,184,144,.14); padding: var(--sp-3) var(--sp-4); }
.arrive-media img { display: block; width: 100%; height: auto; }
.faq-head { margin-bottom: var(--sp-6); }
/* Health and wellness: the differences as an icon row in the closing band. */
.diff-icons { list-style: none; margin: var(--sp-6) auto; padding: 0; display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(2, 1fr); max-width: 56rem; }
@media (min-width: 60rem) { .diff-icons { grid-template-columns: repeat(3, 1fr); } }
.diff-icons li { display: flex; align-items: center; gap: var(--sp-3); text-align: left; color: var(--white); font-size: var(--fs-0); line-height: 1.35; }
.di-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--champagne); color: var(--champagne); }
.di-ico svg { width: 1.45rem; height: 1.45rem; }
/* Cards: keep a final line from holding a single word. */
.icard .card-body p { text-wrap: pretty; }

/* FAQ bands, three variants so the sections are not stamped from one mould:
   centred, split (heading left, questions right), and an ink band. */
.faq-band .faq-list { max-width: 52rem; margin-inline: auto; background: rgba(255,255,255,.55); border: 1px solid var(--rule); padding: var(--sp-2) var(--sp-6); }
.faq-band .faq-acc:first-of-type { border-top: 0; }
.faq-band .faq-acc:last-of-type { border-bottom: 0; }
.faq-call { margin-top: var(--sp-5); color: var(--text-soft); }
.faq-split { display: grid; gap: var(--sp-6); }
@media (min-width: 60rem) {
  .faq-split { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-8); align-items: start; }
  .faq-split-head { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.faq-split-head h2 { font-size: clamp(2rem, 3vw, 2.625rem); line-height: 1.08; text-wrap: balance; }
.faq-split-list { background: var(--bg-card); border: 1px solid var(--rule); border-top: 3px solid var(--accent-strong); box-shadow: 0 10px 28px rgba(8,24,48,.07); padding: var(--sp-2) var(--sp-6); }
.faq-split-list .faq-acc:first-of-type { border-top: 0; }
.faq-split-list .faq-acc:last-of-type { border-bottom: 0; }
.faq-ink .faq-list { background: rgba(255,255,255,.04); border-color: rgba(244,240,235,.18); }
.faq-ink .faq-acc { border-color: rgba(244,240,235,.18); }
.faq-ink .faq-acc summary h3 { color: var(--white); }
.faq-ink .faq-acc summary:hover h3 { color: var(--champagne); }
.faq-ink .faq-acc summary::after { color: var(--champagne); }
.faq-ink .faq-acc-body p { color: rgba(244,240,235,.88); }
.faq-ink h2 { color: var(--white); }
.faq-ink .faq-call { color: rgba(244,240,235,.8); }
.faq-ink .faq-call a { color: var(--champagne); }

/* Comparison tables in articles. Real HTML tables, so the data is
   extractable as rows and columns rather than buried in prose. The wrapper
   scrolls sideways on narrow screens instead of crushing the columns. */
.table-wrap { overflow-x: auto; margin: var(--sp-5) 0 var(--sp-6); }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.compare-table { width: 100%; min-width: 34rem; border-collapse: collapse; line-height: 1.5; }
.compare-table caption {
  caption-side: top; text-align: left; padding-bottom: var(--sp-3);
  font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-soft);
}
.compare-table th, .compare-table td {
  padding: 0.875rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.compare-table thead th {
  font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem;
  color: var(--text-strong); border-bottom: 2px solid var(--accent);
}
.compare-table tbody th { width: 24%; font-weight: 600; color: var(--text-strong); }
.compare-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.5); }
.article-faq { margin: var(--sp-4) 0 var(--sp-6); }
/* Narrow screens: each row becomes a stacked card with its column labels,
   so no column hides off screen behind a sideways scroll. */
@media (max-width: 40rem) {
  .compare-table { min-width: 0; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table tbody tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
  .compare-table tbody tr:first-child { border-top: 2px solid var(--accent); }
  .compare-table tbody tr:nth-child(even) { background: none; }
  .compare-table tbody th { width: auto; padding: 0.25rem 0; font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; border: 0; }
  .compare-table td { padding: 0.375rem 0; border: 0; }
  .compare-table td::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--text-soft); font-weight: 600;
  }
}
.team-grid .card[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* Centred icon cards: icon, title and copy on one centre line. */
.icard.ic-center .card-body, .where-band .icard .card-body { text-align: center; align-items: center; }
.icard.ic-center .ic-ico, .where-band .icard .ic-ico { margin-inline: auto; }
.icard.ic-center::before, .where-band .icard::before { transform-origin: center; }
/* The Academy PAC mark, three times the standard head mark, centred in its column. */
.head-mark.is-xl { width: 12rem; height: 12rem; margin-inline: auto; box-shadow: 0 0 0 1.25rem rgba(216,184,144,.08); margin-top: var(--sp-6); }
.head-mark.is-xl svg { width: 6rem; height: 6rem; stroke-width: 1.2; }
/* See it in person: icon above, label below, centred. */
.diff-icons li { flex-direction: column; justify-content: flex-start; text-align: center; gap: var(--sp-3); }
.diff-icons { row-gap: var(--sp-6); }

/* Parker's own mark (2026-10-07) replaces the drawn leaf in these spots.
   It carries its own gold ring, so the frames that used to circle the
   drawn leaf come off and the mark fills the space. */
.loc-mark { border: 0; }
.loc-mark img { width: 100%; height: 100%; display: block; }
.mc-mark { border: 0; }
.mc-mark img { width: 100%; height: 100%; display: block; }
@media (min-width: 64rem) {
  .leaf-badge.is-logo { border: 0; }
  .leaf-badge.is-logo img { width: 100%; height: 100%; display: block; }
}

/* See it in person: the six points flank the copy, three a side, rather
   than sitting in a block above it. Phones put the copy first and the
   points below it in two columns of three. */
.diff-grid {
  display: grid; gap: var(--sp-6) var(--sp-5); max-width: 66rem; margin: var(--sp-6) auto 0;
  grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "left right"; align-items: start;
}
.diff-center { grid-area: center; }
.diff-center .pull-line { margin-top: 0; }
.diff-grid .diff-col { display: flex; flex-direction: column; gap: var(--sp-5); margin: 0; max-width: none; }
.diff-col.is-left { grid-area: left; }
.diff-col.is-right { grid-area: right; }
@media (min-width: 60rem) {
  .diff-grid { grid-template-columns: 1fr 1.6fr 1fr; grid-template-areas: "left center right"; align-items: stretch; }
  .diff-center { align-self: center; }
  /* Three equal rows a side, so the icons line up across the copy even
     where a label wraps to two lines. */
  .diff-grid .diff-col { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); align-items: start; gap: var(--sp-4); }
}

/* Blog engine additions (2026-10-07): cover, reading time, author block,
   share links, figures and quotes in the body, tags on the featured card. */
.post-cover { margin: 0 0 var(--sp-6); }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-media); }
.post-read { white-space: nowrap; color: var(--champagne); }
.post-read::before { content: ""; display: inline-block; width: 0.3rem; height: 0.3rem; margin: 0 0.6rem 0.2rem 0.35rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
.post-figure { margin: var(--sp-6) 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-media); }
.post-figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-soft); }
.post-quote { margin: var(--sp-6) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 3px solid var(--accent-strong); font-family: var(--font-display); font-size: 1.25rem; color: var(--text-strong); }
.post-quote p { margin: 0; }
.post-author {
  display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-7) 0 var(--sp-5);
  padding: var(--sp-5); background: var(--bg-card); border: 1px solid var(--rule); border-top: 3px solid var(--accent-strong);
}
.post-author img { flex: none; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.post-author p { margin: 0; }
.post-author-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-strong); }
.post-author-role { color: var(--text-soft); margin-bottom: var(--sp-2) !important; }
.post-share { margin: 0 0 var(--sp-6); }
.post-share ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.post-share a, .post-share button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--sp-4);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--bg-card);
  color: var(--text-strong); font: inherit; font-size: var(--fs-small); font-weight: 600; text-decoration: none; cursor: pointer;
}
.post-share a:hover, .post-share button:hover { border-color: var(--accent-strong); }
.post-share a:focus-visible, .post-share button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.bf-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.bf-tags span { padding: 0.15rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--text-soft); }
@media (max-width: 30rem) {
  .post-author { flex-direction: column; align-items: flex-start; }
}