/**
 * Client-Specific Theming & Customizations
 *
 * This file contains CSS variables for easy color/theme customization
 * and any client-specific CSS overrides.
 *
 * USAGE:
 * 1. Update the CSS variables below to match your client's brand colors
 * 2. Add any additional client-specific CSS at the bottom of this file
 * 3. Do not modify bootstrap.css, platforma.css, or clue.css directly
 */


/* ========================================================================
   CSS VARIABLES - CUSTOMIZE THESE FOR EACH CLIENT
   ======================================================================== */

:root {
  /* ===== PRIMARY BRAND COLORS =====
     Dr. Raffi brand palette, derived from the logo
     (from-client/raffi-logo-color.svg): plum #523F43 + bronze #9B856D,
     with warm ivory + muted sage as complementary accents. */
  --primary-color: #523F43;              /* Logo plum - main brand color */
  --primary-color-dark: #3B2D30;         /* Darker plum for hover states */
  --primary-color-light: #6E585D;        /* Lighter plum for accents */
  --primary-color-bright: #7D6469;       /* Brighter plum for button hover states */

  /* Override Bootstrap's primary color to match the brand */
  --bs-primary: #523F43;
  --bs-primary-rgb: 82, 63, 67;


  /* ===== SECONDARY COLORS ===== */
  --secondary-color: #7C6850;            /* Deep bronze (AA-safe darkened #9B856D) */
  --brand-bronze: #9B856D;               /* Logo bronze - large text / decoration only (fails AA for body text on white) */
  --brand-ivory: #F5F1EA;                /* Warm ivory - section backgrounds */
  --brand-sage: #6C7A6B;                 /* Muted sage - complementary accent */
  --accent-color: #523F43;               /* Accent color (root pages; microsites override per location below) */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-dark);
  --button-color: var(--primary-color);
  --button-hover-color: var(--primary-color-dark);


  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: var(--primary-color);
  --bg-secondary: #fafafa;
  --bg-light: var(--brand-ivory);
  --hero-bg-color: #EFE9E0;              /* Homepage hero section background (warm ivory tint) */
  --sidebar-bg: rgba(59, 45, 48, 0.94);  /* Slide menu background (dark plum) */


  /* ===== TEXT COLORS ===== */
  --text-primary: #2B2225;               /* Main body text (warm near-black) */
  --text-secondary: #6c757d;             /* Secondary/muted text */
  --text-light: #6c757d;                 /* Light gray text */
  --text-white: #ffffff;                 /* White text */


  /* ===== TYPOGRAPHY =====
     Headings use Cormorant Garamond (Google Fonts), matching the
     high-contrast old-style serif of the "Dr. Raffi" logo wordmark
     (the old sites used the same family). Body stays on the fast
     system stack. Font is loaded in base-simple.njk. */
  /* --font-script is set by the layout, and only for a language whose
     registry entry names a fontFamily (localization back-port, workflow 11).
     When no language asks for one the custom property is undefined and the
     var() falls back to -apple-system, so this stack resolves exactly as it
     always has. */
  --font-family-base: var(--font-script, -apple-system), BlinkMacSystemFont,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial,
                      "Noto Sans", sans-serif;
  --font-family-headings: "Cormorant Garamond", Garamond, "Times New Roman", serif;

  /* The stack the page actually renders with: Bootstrap's body and headings
     read --bs-body-font-family, so the script font is spliced in here too.
     The fallback is Bootstrap's --bs-font-sans-serif value verbatim, so with
     no --font-script defined this resolves to exactly what Bootstrap already
     computed. Re-copy the tail from Bootstrap's --bs-font-sans-serif on an
     upgrade. */
  --bs-body-font-family: var(--font-script, system-ui), -apple-system,
                         "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
                         "Liberation Sans", Arial, sans-serif,
                         "Apple Color Emoji", "Segoe UI Emoji",
                         "Segoe UI Symbol", "Noto Color Emoji";
  --font-size-base: 1rem;
  --line-height-base: 1.5;

  /* Heading font weights */
  --heading-font-weight: 600;            /* Cormorant needs the semibold cut for crisp headings */


  /* ===== SPACING ===== */
  --section-padding: 4rem;               /* Vertical padding for major sections */
  --section-padding-mobile: 2rem;        /* Vertical padding on mobile */


  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-pill: 30px;            /* For rounded buttons */


  /* ===== SHADOWS ===== */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


/* ========================================================================
   DARK MODE SUPPORT (OPTIONAL)
   Uncomment this section if you want to support dark mode
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-light: #3d3d3d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
  }
}
*/


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   Add any additional custom CSS below this line
   ======================================================================== */

/* Example: Override specific element styling
.custom-header {
  background-color: var(--primary-color);
  color: var(--text-white);
}
*/

/* Example: Client-specific font import
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
  --font-family-base: 'Roboto', sans-serif;
}
*/

/* Example: Custom button style
.btn-custom {
  background-color: var(--accent-color);
  color: white;
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 2rem;
}
*/


/* ========================================================================
   USAGE EXAMPLES & NOTES
   ======================================================================== */

/*
HOW TO USE CSS VARIABLES:

1. In your HTML or other CSS:
   background-color: var(--primary-color);
   color: var(--text-primary);

2. To change colors for a specific client:
   - Simply update the hex values in the :root section above
   - All instances throughout the site will update automatically

3. Common customizations by client:
   - --primary-color: Your client's main brand color
   - --sidebar-bg: Match the sidebar to their branding
   - --hero-bg-color: Customize homepage hero section
   - --font-family-base: Use client's preferred font

4. Advanced: Override Bootstrap classes:
   .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
   }

BEST PRACTICES:
- Always use variables instead of hardcoded colors
- Test changes across multiple pages before deploying
- Keep client-specific overrides in this file
- Document any custom CSS you add below
*/

/* ==========================================================================
   Multi-location microsites (/chicago/, /bourbonnais/)
   Ported from the bennett_4 microsite pattern. Per-location accent colors
   derive from the Raffi logo palette: plum #523F43 + bronze #9B856D.
   ========================================================================== */

body.location-chicago {
  --accent-color: #523F43;
  --accent-color-dark: #3B2D30;
  --accent-color-soft: rgba(82, 63, 67, 0.10);
}

body.location-bourbonnais {
  --accent-color: #7C6850;
  --accent-color-dark: #5E4E3C;
  --accent-color-soft: rgba(124, 104, 80, 0.10);
}

/* ---------- Sub-navigation ---------- */
.microsite-subnav {
  background: var(--accent-color, #523F43);
  padding: 0.6rem 0;
  position: relative;
  z-index: 50;
}

.microsite-subnav .container {
  max-width: 1320px;
}

.microsite-subnav-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.microsite-subnav .subnav-link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.microsite-subnav .subnav-link:hover,
.microsite-subnav .subnav-link:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.microsite-subnav .subnav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.25);
  font-weight: 600;
}

.microsite-subnav .subnav-link--secondary {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Bourbonnais subnav contrast. On the bronze #7C6850 band the 82% white
   links measured 4.19:1 and the white-wash active pill 3.20:1. Full white
   text (5.31:1) and a darkening pill (7.62:1) pass; Chicago's plum band
   already passed and keeps the shared rules above. */
.location-bourbonnais-subnav .microsite-subnav-label,
.location-bourbonnais-subnav .subnav-link {
  color: var(--text-white);
}
.location-bourbonnais-subnav .subnav-link--secondary {
  opacity: 1;
}
/* Hover and focus get a lighter pill than the current page. */
.location-bourbonnais-subnav .subnav-link:hover,
.location-bourbonnais-subnav .subnav-link:focus-visible {
  background-color: rgba(0, 0, 0, 0.12);
}
.location-bourbonnais-subnav .subnav-link.active {
  background-color: rgba(0, 0, 0, 0.22);
}

/* ---------- Microsite homepage hero ----------
   The microsite home (`/chicago/`, `/bourbonnais/`) renders a
   `#chicago-hero` / `#bourbonnais-hero` band with `text-white` content.
   The accent-color gradient is the fallback background; the shared
   background video layers on top with a tinted overlay per location. */
#chicago-hero,
#bourbonnais-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
              var(--accent-color-dark, #3B2D30) 0%,
              var(--accent-color, #523F43) 100%);
  color: #fff;
}

/* The global clue.css `h1..h4 { color: var(--primary-color) }` rule wins
   over the band's text-white, leaving a plum heading on the dark video.
   Force hero headings white for contrast. */
#chicago-hero h1,
#bourbonnais-hero h1 {
  color: #fff;
}

/* Per-location hero-overlay tints (consumed by the global overlay rule in
   modern-header-modern.css `.background-video-container-overlay`). */
/* Tint raised from .40 / .42 to .70 on 2026-10-13 (workflow 00b review):
   white hero text measured about 2.4:1 against the clip's bright frames;
   at .70 the h1 measures 6.04 (Chicago) and 4.95 (Bourbonnais). The
   corner accents are unchanged. */
body.location-chicago {
  --hero-overlay-corner-1: rgba(59, 45, 48, 0.88);
  --hero-overlay-corner-2: rgba(82, 63, 67, 0.75);
  --hero-overlay-tint:    rgba(40, 30, 32, 0.70);
}
body.location-bourbonnais {
  --hero-overlay-corner-1: rgba(94, 78, 60, 0.88);
  --hero-overlay-corner-2: rgba(124, 104, 80, 0.75);
  --hero-overlay-tint:    rgba(60, 49, 38, 0.70);
}

/* ---------- Microsite hero accent ---------- */
body.microsite #inside-header {
  background: var(--accent-color-soft, rgba(82, 63, 67, 0.10));
  border-bottom: 3px solid var(--accent-color, #523F43);
}

body.microsite #inside-header h1 {
  color: var(--primary-color);
}

body.microsite #inside-header .hp-section-sub {
  color: #555;
}

body.microsite #inside-header .hp-eyebrow {
  color: var(--accent-color, #523F43);
}

body.microsite .hp-eyebrow,
body.microsite .contact-gallery-eyebrow {
  color: var(--accent-color, #523F43);
}

/* Primary CTAs on microsite pages use the location accent so
   calls-to-action visually tie to the active location. */
body.microsite .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

body.microsite .btn-primary:hover,
body.microsite .btn-primary:focus-visible {
  background-color: var(--accent-color-dark);
  border-color: var(--accent-color-dark);
}

body.microsite .btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

body.microsite .btn-outline-primary:hover,
body.microsite .btn-outline-primary:focus-visible {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

/* ---------- Appointment wizard: location selection tiles (step 1) ----------
   Ported from the bennett_4 microsite pattern. Unlike the other radio
   tiles, these stack a short name over the full address so visitors can
   distinguish offices at a glance. */
.appt-location-tile {
  padding: 1rem 0.75rem !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  line-height: 1.25;
}
.appt-location-tile .appt-location-name {
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0.25rem 0;
}
.appt-location-tile .appt-location-addr {
  display: block;
  font-size: 0.8rem;
  opacity: 0.75;
  font-weight: 400;
}
.btn-check:checked + .appt-location-tile .appt-location-addr {
  opacity: 0.95;
}

/* ---------- Multi-location footer (ported from bennett_4) ---------- */
.footer-logo {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
}

/* Footer location cards were removed in favor of the in-content
   "Visit Dr. Raffi" band (partials/practice-summary.njk); their styles
   (.footer-location-card, .footer-hours-list, .footer-portal-links) were
   dropped with them. */

/* ---------- Call-Us location picker modal (ported from bennett_4) ----------
   Full-viewport modal shell that beats any injected third-party `.modal`
   rules without `!important` centering. Backdrop sits between the slide
   menu and the modal. */
.location-picker-modal.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  z-index: 2000;
}
.modal-backdrop.show {
  z-index: 1999;
}

.location-picker-modal .modal-content {
  border-radius: 0.75rem;
}

/* Call-Us modal: large tap targets, location name + phone stacked */
.call-location-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding-block: 0.85rem;
}

.call-location-btn .call-location-name {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.call-location-btn .call-location-phone {
  font-size: 0.9rem;
  opacity: 0.92;
}

/* ---------- Brand typography ----------
   Apply the Cormorant Garamond heading face (loaded in base-simple.njk).
   The template defines --font-family-headings but does not consume it in
   clue.css/platforma.css, so we apply it here. */
h1, h2, h3, h4, h5, h6,
.hp-section-heading {
  font-family: var(--font-family-headings);
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.01em;
}

/* Eyebrow labels echo the logo's bronze small-caps subtitle. */
.hp-eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   HOMEPAGE HERO - 2-column editorial layout (Raffi-specific)
   Left: serif headline with a bronze rule echoing the logo's divider,
   AI search pill, ivory + ghost CTAs. Right: plum-glass card listing
   both offices (from locations.js) with a five-star trust line.
   Shares the template's video container, overlay formula, pause toggle,
   scroll cue, and service dock.
   ========================================================================== */

/* Overlay tint: plum (top-left) to bronze (bottom-right) duotone over a
   soft warm tint, kept light enough for the footage to read through. */
:root {
  --hero-overlay-corner-1: rgba(59, 45, 48, 0.85);
  --hero-overlay-corner-2: rgba(155, 133, 109, 0.60);
  --hero-overlay-tint: rgba(43, 34, 37, 0.38);
}

/* The 00a hero's layout, card and service-ledger rules (.raffi-hero-*,
   .raffi-ledger-*, .raffi-btn-*) were removed on 2026-10-13: the 00b
   redesign superseded that hero and nothing renders them. The overlay
   variables above stay as the default for any other background video. */

/* Tinted sections use the warm brand ivory instead of the template's
   cool blue-gray (#f0f5fa in clue.css). */
.hp-section-tinted {
  background-color: var(--brand-ivory);
}

/* Highlight chips (Looks Natural, Preserves Bone, etc.) shipped with the
   template's cool blue tint (#e4edf6 in clue.css). Swap in a soft plum tint
   so they sit in the brand palette on both white and ivory sections. */
.hp-chip {
  background: rgba(82, 63, 67, 0.10);
  color: var(--primary-color);
}

/* Brand-colored hyperlinks sitewide. The template shipped Bootstrap's
   default blue links; point Bootstrap's link tokens at the brand plum so
   body-copy links (contact addresses, inline links) sit in the palette.
   Elements that set their own color (footer .text-white, buttons, nav
   links) are unaffected. */
:root {
  --bs-link-color-rgb: 82, 63, 67;         /* plum      #523F43 */
  --bs-link-hover-color-rgb: 59, 45, 48;   /* dark plum #3B2D30 */
}

/* The default (non-microsite) #inside-header is a dark plum gradient, so its
   eyebrow and sub-heading need light text to stay readable. Microsite pages
   override these with higher specificity (their banner is a light tint). */
#inside-header .hp-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
#inside-header .hp-section-sub {
  color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Doctor biography pages  (/meet-dr-raffi/, /meet-dr-jones/)
   Rendered by partials/doctor-bio.njk.
   ============================================================ */
.doctor-hero {
  background: linear-gradient(135deg,
              var(--primary-color-dark) 0%,
              var(--primary-color) 45%,
              var(--primary-color-bright) 100%);
  color: #fff;
  padding: 3.5rem 0;
}
.doctor-hero-portrait {
  max-width: 360px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid rgba(245, 241, 234, 0.9);   /* ivory ring */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
.doctor-hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.doctor-hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-ivory);
  opacity: 0.85;
  margin-bottom: 0.5rem;
}
.doctor-hero-name {
  color: #fff;
  font-size: 2.6rem;
  margin-bottom: 0.35rem;
}
.doctor-hero-title {
  color: var(--brand-ivory);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.4px;
  margin-bottom: 1rem;
}
.doctor-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.doctor-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
}
.doctor-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.08rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 40rem;
}
.doctor-btn-light {
  background: #fff;
  color: var(--primary-color);
  border: 1.5px solid #fff;
  font-weight: 600;
}
.doctor-btn-light:hover,
.doctor-btn-light:focus {
  background: var(--brand-ivory);
  border-color: var(--brand-ivory);
  color: var(--primary-color-dark);
}
.doctor-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.doctor-btn-outline:hover,
.doctor-btn-outline:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.doctor-body {
  padding: 3.5rem 0;
}
.doctor-subhead {
  font-size: 1.35rem;
  color: var(--primary-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.doctor-highlights {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.doctor-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--brand-ivory);
}
.doctor-highlights li:last-child {
  border-bottom: 0;
}
.doctor-highlights li i {
  color: var(--secondary-color);
  font-size: 1.15rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.doctor-glance {
  background: var(--brand-ivory);
  border-top: 3px solid var(--brand-bronze);
  border-radius: 14px;
  padding: 1.75rem;
  position: sticky;
  top: 100px;
}
.doctor-glance-title {
  font-size: 1.45rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}
.doctor-glance-list {
  margin: 0 0 1.25rem;
}
.doctor-glance-list > div {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(82, 63, 67, 0.12);
}
.doctor-glance-list > div:last-child {
  border-bottom: 0;
}
.doctor-glance-list dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 0.15rem;
}
.doctor-glance-list dd {
  margin: 0;
  color: #3f3033;
  font-weight: 500;
}
.doctor-glance-subhead {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
}
.doctor-glance-orgs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin-bottom: 1.5rem;
}
.doctor-glance-orgs img {
  height: 48px;
  width: auto;
  opacity: 0.85;
}
.doctor-glance-orgs span {
  font-size: 0.85rem;
  color: var(--primary-color);
}

@media (max-width: 991px) {
  .doctor-glance {
    position: static;
    margin-top: 1.5rem;
  }
}
@media (max-width: 767px) {
  .doctor-hero {
    padding: 2.5rem 0;
    text-align: center;
  }
  .doctor-hero-name {
    font-size: 2rem;
  }
  .doctor-hero-meta,
  .doctor-hero-actions {
    justify-content: center;
  }
  .doctor-hero-portrait {
    max-width: 280px;
    margin-bottom: 0.5rem;
  }
}

/* ---------- Doctor cards: no-crop headshots ----------
   Both doctor photos are 600x650 studio portraits with the head in the
   upper half. The template's .hp-people-img box is 5/4 landscape with a
   centered cover crop, which clips the top of both heads (homepage +
   both microsite hubs). Match the box to the photos' native ratio so the
   full head always shows and both cards crop identically. */
.hp-people-img {
  aspect-ratio: 12 / 13;
}

/* ==========================================================================
   Header phones, office pickers, hours rotator & visit-band maps
   (boss-notes 2026-09-25, Lane A). Appended block; nothing above restyled.
   ========================================================================== */

/* "Text" buttons: hidden unless the inline <head> script marked the device
   as SMS-capable (html.can-sms, set in layouts/base-simple.njk). */
.needs-sms {
  display: none;
}
html.can-sms .needs-sms {
  display: inline-block;
}

/* Modal-trigger buttons that sit inside a sentence (financing, emergency
   copy): read as an ordinary inline link, not a button. */
.btn.inline-modal-link {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  text-decoration: underline;
  border: 0;
  /* Same colours as the other in-copy links (plum, dark plum on hover)
     instead of Bootstrap's link blue. */
  color: var(--link-color);
}
.btn.inline-modal-link:hover {
  color: var(--link-hover-color);
}
/* On the dark CTA band and in the warning alert, take the surrounding text
   colour: the link blue measured 2.54:1 and 4.06:1 there. */
.treatment-band-dark .btn.inline-modal-link,
.alert .btn.inline-modal-link {
  color: inherit;
}

/* Top-bar office hours: soft crossfade while rotating between offices on
   root pages (src/js/office-hours.js toggles .is-fading). */
.office-hours-rotator .office-hours-visual {
  transition: opacity 0.3s ease;
}
.office-hours-rotator .office-hours-visual.is-fading {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .office-hours-rotator .office-hours-visual {
    transition: none;
  }
}

/* Visit band, root pages: square map pinned to the bottom of each office
   card so both cards' maps line up. */
.practice-summary-office-card {
  display: flex;
  flex-direction: column;
}
.practice-summary-office-card > .btn {
  align-self: center;
}
/* The flex column above shrink-wrapped the hours table to its content
   (about 130px), so day and time ran together ("Tue9:30am"). Let it take
   the width; clue.css caps it at 220px and centers it. */
.practice-summary-office-card .contact-hours {
  width: 100%;
}
.practice-summary-map {
  margin-top: auto;
  padding-top: 1.5rem;
}
.practice-summary-map-frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.practice-summary-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ========================================================================
   SERVICE AVAILABILITY BAR
   Rendered by partials/service-availability.njk on the localized microsite
   service pages: a lead sentence plus one chip per office, checked when
   that office offers the service. The partial came over from bennett_4
   without its styles; these are its rules recoloured to the Raffi palette
   and laid out for two offices.
   ======================================================================== */

.service-availability {
  background: var(--brand-ivory, #F5F1EA);
  border-top: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.12);
}

.service-availability-lead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-primary, #2B2225);
}

.service-availability-lead i {
  font-size: 1.15rem;
  flex-shrink: 0;
  color: var(--accent-color, #523F43);
}

/* One chip per office. */
.service-availability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.service-availability-loc a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
  background: var(--bs-white);
  color: var(--primary-color, #523F43);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-availability-loc a:hover,
.service-availability-loc a:focus-visible {
  border-color: var(--primary-color, #523F43);
  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.15);
}

.service-availability-loc i {
  font-size: 1rem;
  flex-shrink: 0;
}

.service-availability-loc.is-available i {
  color: var(--primary-color, #523F43);
}

/* #5c636a is 5.08:1 on the tinted chip; --text-secondary (#6c757d) would
   be 3.91:1 there. */
.service-availability-loc.is-unavailable a {
  color: #5c636a;
  background: rgba(var(--bs-primary-rgb), 0.04);
}

.service-availability-loc.is-unavailable i {
  color: #5c636a;
}

/* The office whose microsite the visitor is on. */
.service-availability-loc.is-current a {
  border-color: var(--accent-color, #523F43);
  box-shadow: inset 0 0 0 1px var(--accent-color, #523F43);
}

.service-availability-loc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Links page: an office phone number inside a button label never breaks
   mid-number ("(815) 933-" / "4121" at 1440); the label wraps before it. */
#links .links-phone {
  white-space: nowrap;
}


/* ========================================================================
   MOBILE POLISH (post-build workflow 04)
   Phone-only fixes for Raffi-specific furniture. Every rule sits behind a
   max-width breakpoint, so desktop is unchanged.
   ======================================================================== */

@media (max-width: 767.98px) {
  /* Microsite subnav links were 35px tall: give them a 44px touch target. */
  .microsite-subnav .subnav-link {
    min-height: 44px;
  }

  /* Hub and microsite contact maps were 366x450 on a phone, a full screen
     of map. The iframe's height attribute is 450; CSS overrides it. */
  body.microsite .hp-media-frame > iframe {
    height: 320px;
  }

  /* Links page: labels that wrap to two lines get breathing room inside the
     pill. One-line labels stay inside the 46px icon height, so they do not
     grow. */
  #links .btn-text {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Stretch the icon cap to the pill's full height so it fills taller
     two-line pills instead of floating; one-line pills are already the
     cap's height, so they do not change. */
  #links .btn-gradient {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==== RAFFI_6 ADVANCED REDESIGN ==== */
/* ==========================================================================
   "THE IMPLANT FOLIO" (Dr. Raffi, workflow 00b; chosen by Dan 2026-10-13,
   promoted from design option 1)
   Direction: docs/planning/2026-10-13-advanced-redesign/option-1/06-direction.md
   The approved homepage set as a monograph: a facing-page hero framed over
   the client's footage, numbered chapters with full-width hairline rules,
   unequal spreads with a gutter, and one deep-plum colophon to the copyright.
   Every class is prefixed rf1- so nothing collides with the template or with
   the site's existing raffi- classes.

   Sections, in order:
     1. Variables
     2. Shared chrome: masthead, slide menu, search overlay, footer
     3. Homepage: hero, chapters, interlude, implants, technology, emergency,
        doctors, reviews, colophon, template components
     4. Inside pages (the CSS carry-through)
     4b. Landing pages (the three implant pages, under .rf1-lp)
     5. Responsive
     6. Motion and accessibility states
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
  /* The Sienna widget takes the brand plum: white on it 9.76:1; as text on
     #ffffff 9.76:1 and on #eff1f5 8.63:1. */
  --sienna-color: var(--primary-color);

  /* Palette: Dr. Raffi's implemented tokens, plus one label tint for the
     dark colophon ground (#C9B79F on #3B2D30 is 6.71:1). */
  --rf1-paper: var(--brand-ivory);              /* #F5F1EA page ground */
  --rf1-paper-2: var(--hero-bg-color);          /* #EFE9E0 interlude ground */
  --rf1-mat: #FBF9F5;                           /* plate mat, one shade lighter than the paper */
  --rf1-ink: var(--text-primary);               /* #2B2225, 13.73:1 on paper */
  --rf1-ink-soft: var(--primary-color-light);   /* #6E585D, 5.80:1 on paper */
  --rf1-plum: var(--primary-color);             /* #523F43, 8.67:1 on paper */
  --rf1-plum-deep: var(--primary-color-dark);   /* #3B2D30, the colophon ground */
  --rf1-bronze: var(--brand-bronze);            /* #9B856D, hairlines and large numerals only */
  --rf1-bronze-text: var(--secondary-color);    /* #7C6850, small labels on paper only (4.72:1) */
  --rf1-bronze-light: #C9B79F;                  /* labels and hairlines on the colophon */
  --rf1-hair: rgba(155, 133, 109, 0.45);        /* bronze hairline on paper */
  --rf1-hair-dark: rgba(201, 183, 159, 0.32);   /* hairline on the colophon */
  --rf1-frame: rgba(201, 183, 159, 0.72);       /* the hero frame and gutter over the video */

  /* Type */
  --rf1-serif: var(--font-family-headings);
  --rf1-sans: var(--font-family-base);
  --rf1-h1: clamp(2.5rem, 1.2rem + 3.2vw, 4.25rem);
  --rf1-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --rf1-h3: 1.5rem;
  --rf1-label: 0.8125rem;
  --rf1-body: 1.0625rem;
  --rf1-lead: 1.1875rem;
  --rf1-caption: 1rem;

  /* Space */
  --rf1-gutter: clamp(1.5rem, 0.75rem + 2.5vw, 3.5rem);
  --rf1-chapter-pad: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --rf1-wrap-pad: clamp(1rem, 0.25rem + 3vw, 3rem);
  --rf1-page-pad: 1.5rem;
  /* The hero frame sits one page-padding outside the content column, so the
     hero's text lines up with the body's text at every desktop width. */
  --rf1-frame-inset: max(0.75rem, calc(var(--rf1-wrap-pad) - var(--rf1-page-pad)));
  --rf1-frame-max: calc(74rem - 2 * (3rem - var(--rf1-page-pad)));

  /* Motion, default level (workflow 00b, Motion) */
  --rf1-motion-dur: 1s;
  --rf1-motion-dur-media: 1.1s;
  --rf1-motion-rise: 1.5rem;
  --rf1-motion-stagger: 120ms;
  --rf1-motion-delay: 150ms;
  --rf1-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   2. SHARED CHROME
   ========================================================================== */

/* ---------- Masthead ---------- */

.main-header.rf1-masthead,
body.homepage .main-header.rf1-masthead {
  background-color: var(--rf1-paper);
  border-block-end: 1px solid var(--rf1-hair);
  box-shadow: none;
  transition: none;
}

.rf1-masthead-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 2rem;
  min-height: 5.75rem;
  padding-block: 0.5rem;
  padding-inline: clamp(1rem, 0.25rem + 2.5vw, 2.5rem);
}

.rf1-brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.rf1-logo {
  display: block;
  height: 3.5rem;
  width: auto;
}

.rf1-directory {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: center;
  gap: 0.15rem;
}

.rf1-offices {
  display: flex;
  align-items: stretch;
}

/* One block per office: name and phone (the call link), then today's
   hours beneath, with a hairline between the two offices. */
.rf1-office-block {
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
}

.rf1-office-block + .rf1-office-block {
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-office {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.75rem;
  text-decoration: none;
  line-height: 1.2;
}

/* A fixed minimum width, wider than every form the line takes ("Today
   9:30am – 5:30pm", "Closed today", the weekday fallback), so filling it
   in after load never shifts the masthead. */
.rf1-office-today {
  min-width: 10rem;
  white-space: nowrap;
  font-family: var(--rf1-sans);
  font-size: var(--rf1-label);
  color: var(--rf1-ink-soft);
  line-height: 1.5;
}

.rf1-office-city {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

.rf1-office-phone {
  font-family: var(--rf1-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--rf1-plum);
  font-variant-numeric: tabular-nums;
}

.rf1-office:hover .rf1-office-phone {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rf1-masthead-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rf1-call {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  background: none;
  border: 1px solid var(--rf1-hair);
  color: var(--rf1-plum);
  font-family: var(--rf1-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.rf1-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 0;
  color: var(--rf1-plum);
  font-size: 1.25rem;
}

/* Language toggle (localization, workflow 11): one link per other built
   language, after Request an Appointment. Rendered only once a second
   language is registered and the page's counterpart exists, so it matches
   nothing on an English-only build. */
.rf1-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  color: var(--rf1-plum);
  font-family: var(--rf1-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.rf1-lang:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Below the tablet breakpoint the masthead has no room for the toggle (it
   pushed the Menu button off a 390px screen); the slide menu and the footer
   carry it there. */
@media (max-width: 61.99em) {
  .rf1-lang {
    display: none;
  }
}

.rf1-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  background: none;
  border: 0;
  color: var(--rf1-plum);
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rf1-menu-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 1.5rem;
}

.rf1-menu-lines span {
  display: block;
  height: 1px;
  background: currentColor;
}

.rf1-menu-lines span + span {
  width: 70%;
  margin-inline-start: auto;
}

/* ---------- Buttons and text links (shared) ---------- */

.rf1-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.875rem;
  padding: 0.75em 1.5em;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--rf1-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}

.rf1-btn-plum {
  background-color: var(--rf1-plum);
  border-color: var(--rf1-plum);
  color: var(--rf1-paper);
}

.rf1-btn-plum:hover {
  background-color: var(--rf1-plum-deep);
  border-color: var(--rf1-plum-deep);
  color: #fff;
}

.rf1-btn-line {
  background-color: transparent;
  border-color: var(--rf1-plum);
  color: var(--rf1-plum);
}

.rf1-btn-line:hover {
  background-color: var(--rf1-plum);
  color: var(--rf1-paper);
}

.rf1-btn-ivory {
  background-color: var(--rf1-paper);
  border-color: var(--rf1-paper);
  color: var(--rf1-plum-deep);
}

.rf1-btn-ivory:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--rf1-plum-deep);
}

.rf1-btn-line-light {
  background-color: transparent;
  border-color: rgba(245, 241, 234, 0.7);
  color: var(--rf1-paper);
}

.rf1-btn-line-light:hover {
  background-color: rgba(245, 241, 234, 0.12);
  border-color: var(--rf1-paper);
  color: #fff;
}

.rf1-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  color: var(--rf1-plum);
  font-family: var(--rf1-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rf1-bronze);
  text-underline-offset: 0.55em;
}

.rf1-link:hover {
  color: var(--rf1-plum-deep);
  text-decoration-color: var(--rf1-plum);
}

.rf1-link--light {
  color: var(--rf1-paper);
  text-decoration-color: var(--rf1-bronze-light);
}

.rf1-link--light:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.rf1-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-block-start: 1.75rem;
}

/* ---------- Slide menu (opens from the end side, as the template's does) ---------- */

.slide-menu.rf1-menu {
  background-color: var(--rf1-paper);
  box-shadow: -1px 0 0 var(--rf1-hair), -12px 0 40px rgba(43, 34, 37, 0.18);
}

[dir="rtl"] .slide-menu.rf1-menu {
  box-shadow: 1px 0 0 var(--rf1-hair), 12px 0 40px rgba(43, 34, 37, 0.18);
}

.rf1-menu .slide-menu-header {
  background-color: var(--rf1-paper);
  border-block-end: 1px solid var(--rf1-hair);
  padding: 1.1rem 1.5rem;
}

.rf1-menu .slide-menu-title {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-plum);
}

.rf1-menu .slide-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  color: var(--rf1-plum);
  font-size: 1.25rem;
}

.rf1-menu .slide-menu-close:hover {
  background-color: var(--rf1-paper-2);
  color: var(--rf1-plum-deep);
}

.rf1-menu .slide-nav-item {
  border-block-end: 1px solid var(--rf1-hair);
}

.rf1-menu .slide-nav-link {
  padding: 0.95rem 1.5rem;
  color: var(--rf1-plum);
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  text-align: start;
}

.rf1-menu .slide-nav-link:hover,
.rf1-menu .slide-nav-link:focus {
  background-color: var(--rf1-paper-2);
  color: var(--rf1-plum-deep);
}

.rf1-menu .slide-nav-toggle i {
  font-size: 0.8125rem;
  color: var(--rf1-bronze-text);
}

.rf1-menu .slide-submenu,
.rf1-menu .slide-mega-menu {
  background-color: var(--rf1-paper-2);
}

.rf1-menu .slide-submenu-link,
.rf1-menu .mega-menu-list a {
  color: var(--rf1-ink);
  font-size: 0.9375rem;
  border-radius: 0;
}

.rf1-menu .slide-submenu-link {
  padding-block: 0.7rem;
  padding-inline: 2rem 1.5rem;
}

.rf1-menu .slide-submenu-link:hover,
.rf1-menu .slide-submenu-link:focus,
.rf1-menu .mega-menu-list a:hover,
.rf1-menu .mega-menu-list a:focus {
  background-color: var(--rf1-paper);
  color: var(--rf1-plum);
  padding-inline-start: 2rem;
}

.rf1-menu .mega-menu-list a:hover,
.rf1-menu .mega-menu-list a:focus {
  padding-inline-start: 0.75rem;
}

.rf1-menu .slide-mega-menu .mega-menu-header {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  color: var(--rf1-bronze-text);
  border-block-end: 1px solid var(--rf1-hair);
}

.rf1-menu .slide-nav-footer {
  padding: 1.5rem 1.5rem 6rem;
  background-color: var(--rf1-paper);
  border-block-start: 0;
}

.rf1-menu .slide-nav-cta {
  display: grid;
  gap: 0.5rem;
}

.rf1-menu .rf1-menu-cta {
  width: 100%;
}

.rf1-menu .rf1-menu-cta + .rf1-menu-cta {
  background-color: transparent;
  color: var(--rf1-plum);
}

.rf1-menu .rf1-menu-cta + .rf1-menu-cta:hover {
  background-color: var(--rf1-plum);
  color: var(--rf1-paper);
}

.rf1-menu .slide-nav-social {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.rf1-menu .social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rf1-hair);
  border-radius: 0;
  background: none;
  color: var(--rf1-plum);
}

.rf1-menu .social-icon-btn:hover {
  background-color: var(--rf1-plum);
  color: var(--rf1-paper);
}

/* ---------- Search overlay (restyled over search.css) ---------- */

.rf1-search.search-overlay {
  background-color: rgba(43, 34, 37, 0.82);
}

.rf1-search .search-overlay-content {
  max-width: 56rem;
  border-radius: 0;
  background-color: var(--rf1-paper);
  box-shadow: 0 30px 80px rgba(20, 14, 16, 0.4);
}

.rf1-search .search-header {
  background-color: var(--rf1-paper);
  border-block-end: 1px solid var(--rf1-hair);
  padding: 1.5rem 2rem;
}

.rf1-search .search-input {
  border: 0;
  border-block-end: 2px solid var(--rf1-plum);
  border-radius: 0;
  background-color: transparent;
  padding-block: 0.75rem;
  padding-inline: 2.5rem 0.5rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.625rem;
  color: var(--rf1-ink);
}

.rf1-search .search-input::placeholder {
  color: var(--rf1-ink-soft);
}

.rf1-search .search-input-icon {
  inset-inline-start: 0.25rem;
  color: var(--rf1-bronze-text);
}

.rf1-search .search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--rf1-plum);
}

.rf1-search .search-results-container {
  background-color: var(--rf1-paper);
  padding: 1.5rem 2rem 2rem;
}

.rf1-search .search-suggestions-title {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  color: var(--rf1-bronze-text);
}

.rf1-search .search-suggestion-item {
  border: 0;
  border-block-end: 1px solid var(--rf1-hair);
  border-radius: 0;
  background-color: transparent;
  color: var(--rf1-ink);
}

.rf1-search .search-suggestion-item:hover {
  border-color: var(--rf1-plum);
  background-color: var(--rf1-mat);
  box-shadow: none;
}

.rf1-search .search-suggestion-item i {
  color: var(--rf1-bronze-text);
}

.rf1-search .search-suggestion-item span {
  font-size: 0.9375rem;
}

.rf1-search .search-result-item {
  border-radius: 0;
}

/* ---------- Footer: the colophon's last lines ---------- */

#footer.rf1-footer {
  background: var(--rf1-plum-deep);
  color: var(--rf1-paper);
  padding-block: 0 2rem;
}

.rf1-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--rf1-gutter);
  padding-block: 3rem 2.5rem;
  border-block-start: 1px solid var(--rf1-hair-dark);
}

.rf1-footer-logo {
  display: block;
  width: 12.5rem;
  height: auto;
}

.rf1-footer-logo-link {
  display: inline-block;
}

.rf1-footer-blurb {
  margin-block: 1.25rem;
  max-width: 22rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rf1-paper);
}

.rf1-footer-social {
  display: flex;
  gap: 0.5rem;
}

.rf1-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rf1-hair-dark);
  color: var(--rf1-paper);
  text-decoration: none;
}

.rf1-footer-social-link:hover {
  background-color: rgba(245, 241, 234, 0.1);
  color: #fff;
}

.rf1-footer-lists {
  display: grid;
  gap: 1.75rem;
}

.rf1-footer-list {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
}

.rf1-footer-heading {
  margin: 0;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-light);
}

.rf1-runin,
.rf1-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf1-runin a,
.rf1-legal a {
  display: inline-block;
  padding-block: 0.15rem;
  color: var(--rf1-paper);
  font-size: 0.9375rem;
  text-decoration: none;
}

.rf1-runin a:hover,
.rf1-legal a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rf1-footer-last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rf1-hair-dark);
}

.rf1-legal a {
  font-size: 0.8125rem;
}

.rf1-copyright {
  order: -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--rf1-paper);
}


/* ==========================================================================
   3. HOMEPAGE
   ========================================================================== */

.rf1-wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--rf1-wrap-pad);
}

.rf1-sec {
  background-color: var(--rf1-paper);
  color: var(--rf1-ink);
}

body.homepage #homepage-cover.rf1-hero + .rf1-sec {
  padding-block-start: var(--rf1-chapter-pad);
}

.rf1-sec p {
  font-size: var(--rf1-body);
  line-height: 1.7;
}

/* ---------- Hero: the folio frame ---------- */

body.homepage #homepage-cover.rf1-hero {
  /* Overlay re-tint through the template's three variables only, in the
     brand plum: the top-leading corner is weighted, because the footage's
     pendant bulbs sit upper left; the bronze trailing corner of the site's
     current hero is replaced with plum. */
  --hero-overlay-corner-1: rgba(43, 34, 37, 0.9);
  --hero-overlay-corner-2: rgba(59, 45, 48, 0.78);
  --hero-overlay-tint: rgba(43, 34, 37, 0.64);
  margin-block-start: 0;
  padding-block-start: 0;
  min-height: clamp(36rem, 30rem + 12vh, 42.5rem);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--rf1-plum-deep);
  background-image: none;
}

.rf1-folio.bg-cover {
  flex: 1;
  display: flex;
  padding: var(--rf1-frame-inset);
  color: #fff;
}

.rf1-folio-frame {
  flex: 1;
  width: 100%;
  max-width: var(--rf1-frame-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  border-inline: 1px solid var(--rf1-frame);
  border-block-end: 1px solid var(--rf1-frame);
  margin-block-start: 0.6rem;
}

.rf1-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--rf1-page-pad);
}

.rf1-page--facing {
  border-inline-start: 1px solid var(--rf1-frame);
}

/* The running head sits on the frame's top line, which it draws itself:
   a short hairline, the words, then the rest of the line. */
body.homepage #homepage-cover .rf1-runhead {
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block: -0.6rem 0;
  margin-inline: calc(-1 * var(--rf1-page-pad)) calc(-1 * var(--rf1-page-pad));
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.rf1-runhead::before,
.rf1-runhead::after {
  content: "";
  height: 1px;
  background-color: var(--rf1-frame);
}

.rf1-runhead::before {
  flex: 0 0 calc(var(--rf1-page-pad) - 0.85rem);
}

.rf1-runhead::after {
  flex: 1 1 auto;
}

.rf1-page--facing .rf1-runhead {
  margin-inline-start: calc(-1 * var(--rf1-page-pad) - 1px);
}

body.homepage #homepage-cover .rf1-hero-title {
  margin-block: clamp(2.25rem, 1rem + 5vh, 4.5rem) 0;
  max-width: 15ch;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-h1);
  line-height: 1.04;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 24px rgba(20, 14, 16, 0.35);
  text-wrap: balance;
}

body.homepage #homepage-cover .rf1-hero-lead {
  margin-block: clamp(2.25rem, 1rem + 5vh, 4.5rem) 0;
  padding-inline: 0;
  max-width: 27rem;
  font-size: var(--rf1-lead);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 16px rgba(20, 14, 16, 0.35);
}

.rf1-hero-search {
  position: relative;
  max-width: 27rem;
  margin-block-start: 1.75rem;
}

.rf1-hero-search-icon {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--rf1-plum);
  font-size: 1.125rem;
  pointer-events: none;
}

.rf1-hero-search-input {
  width: 100%;
  min-height: 3.25rem;
  padding-block: 0.75rem;
  padding-inline: 2.85rem 1rem;
  border: 0;
  border-block-end: 2px solid var(--rf1-bronze);
  border-radius: 0;
  background-color: var(--rf1-paper);
  color: var(--rf1-ink);
  font-family: var(--rf1-sans);
  font-size: 1rem;
}

.rf1-hero-search-input::placeholder {
  color: var(--rf1-ink-soft);
  opacity: 1;
}

.rf1-hero-search-input:focus {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-block-end-color: var(--rf1-plum);
}

.rf1-hero-actions {
  max-width: 27rem;
  margin-block: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.rf1-hero-actions li {
  border-block-start: 1px solid var(--rf1-frame);
}

.rf1-hero-actions li:last-child {
  border-block-end: 1px solid var(--rf1-frame);
}

.rf1-hero-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  color: #fff;
  font-family: var(--rf1-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.rf1-hero-actions a:hover {
  color: var(--rf1-bronze-light);
}

.rf1-page-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: auto;
  padding-block: 2rem 1rem;
}

.rf1-page-foot--facing {
  justify-content: flex-end;
  padding-inline-end: 3.25rem;
}

body.homepage #homepage-cover .rf1-trust {
  margin: 0;
  padding-inline: 0;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.rf1-folio-num {
  font-family: var(--rf1-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--rf1-bronze-light);
}

/* The quiet pause toggle: the glyph on a faint disc, inside the frame's
   trailing foot; a 44px hit area around a 34px disc. */
body.homepage #homepage-cover .hero-video-toggle.rf1-pause {
  inset-block-end: calc(var(--rf1-frame-inset) + 0.35rem);
  inset-inline-end: calc(max(var(--rf1-frame-inset), (100% - var(--rf1-frame-max)) / 2) + 0.5rem);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  opacity: 1;
}

body.homepage #homepage-cover .hero-video-toggle.rf1-pause::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  z-index: -1;
  border-radius: 50%;
  background-color: rgba(43, 34, 37, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body.homepage #homepage-cover .hero-video-toggle.rf1-pause:hover::before,
body.homepage #homepage-cover .hero-video-toggle.rf1-pause:focus-visible::before {
  background-color: rgba(43, 34, 37, 0.82);
}

body.homepage #homepage-cover .hero-video-toggle.rf1-pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Chapters, rules and spreads ---------- */

.rf1-chapter {
  padding-block: var(--rf1-chapter-pad) 0;
}

.rf1-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-family: var(--rf1-serif);
  font-weight: 600;
  color: var(--rf1-bronze-text);
}

.rf1-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--rf1-hair);
}

.rf1-rule-num {
  font-size: 1.375rem;
  line-height: 1;
  color: var(--rf1-bronze-text);
  min-width: 2.5rem;
}

.rf1-rule-label {
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rf1-h2 {
  margin-block: 0 1.25rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-h2);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--rf1-plum);
  text-wrap: balance;
}

.rf1-h3 {
  margin-block: 0 0.75rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-h3);
  line-height: 1.2;
  color: var(--rf1-plum);
}

.rf1-sec .rf1-lead {
  font-size: var(--rf1-lead);
  line-height: 1.65;
  max-width: 40rem;
}

.rf1-spread {
  display: grid;
  gap: var(--rf1-gutter);
  align-items: start;
}

.rf1-text-page {
  max-width: 34rem;
}

/* Plates: the image or video on a light mat inside a bronze hairline, with
   an italic caption beneath. */
.rf1-plate {
  margin: 0;
}

.rf1-plate-media {
  padding: 0.5rem;
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
}

.rf1-plate-media img,
.rf1-plate-media video {
  display: block;
  width: 100%;
  height: auto;
}

.rf1-plate--video video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--rf1-plum-deep);
}

/* Native video controls and the map iframes draw no focus ring of their
   own; their frames show one when focus is inside. */
.rf1-plate-media:focus-within {
  outline: 2px solid var(--rf1-plum);
  outline-offset: 3px;
}

.rf1-leaf-map:focus-within {
  outline: 2px solid var(--rf1-paper);
  outline-offset: 3px;
}

.rf1-caption {
  margin-block-start: 0.75rem;
  font-family: var(--rf1-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--rf1-caption);
  color: var(--rf1-ink-soft);
}

/* I. Welcome: the text and a ruled index of the four featured services */
.rf1-spread--welcome {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
}

.rf1-h2--wide {
  max-width: 20ch;
}

.rf1-index {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-index ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf1-index li + li {
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding-block: 0.85rem;
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--rf1-plum);
}

.rf1-index-label {
  grid-column: 1;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.15;
}

.rf1-index-sub {
  grid-column: 1;
  font-size: 0.875rem;
  color: var(--rf1-ink-soft);
}

.rf1-index a i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--rf1-bronze-text);
}

.rf1-index a:hover .rf1-index-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* II and IV: a plate and a text page with a gutter hairline between */
.rf1-spread--plate-first {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "plate text";
}

.rf1-spread--plate-first .rf1-plate {
  grid-area: plate;
  align-self: center;
}

.rf1-spread--plate-first .rf1-text-page {
  grid-area: text;
  align-self: center;
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-tech .rf1-spread--plate-first {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "text plate";
}

.rf1-tech .rf1-spread--plate-first .rf1-text-page {
  padding-inline: 0 var(--rf1-gutter);
  border-inline-start: 0;
  border-inline-end: 1px solid var(--rf1-hair);
  max-width: none;
}

/* Interlude: New Patients and Financing, ruled on the second ground */
.rf1-meet {
  padding-block-end: var(--rf1-chapter-pad);
}

.rf1-interlude {
  background-color: var(--rf1-paper-2);
  border-block: 1px solid var(--rf1-hair);
}

.rf1-interlude-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rf1-note {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

.rf1-note:first-child {
  padding-inline-end: var(--rf1-gutter);
}

.rf1-note + .rf1-note {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-note p {
  max-width: 30rem;
}

.rf1-note-mark img {
  display: block;
  width: 10.5rem;
  height: auto;
}

/* III. Implants: two columns, the copy and the player, about 5 / 7, with
   the three facts as one row on a shared hairline under the player and
   its caption (Dan, 2026-10-13). */
.rf1-spread--implants {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.rf1-implants .rf1-text-page {
  max-width: none;
}

.rf1-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.5rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-facts li {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--rf1-plum);
}

/* The Toothority player in the folio's colors: its two accent variables
   redefined on the section that holds it (muvi-player.css:7-8), square
   corners and no shadow inside the plate. */
.rf1-implants {
  --muvi-teal: var(--rf1-bronze-light);
  --muvi-magenta: var(--rf1-bronze);
}

.rf1-implants .muvi-container {
  border-radius: 0;
  box-shadow: none;
}

/* IV. Technology: the ledger of named equipment with office availability */
.rf1-ledger {
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-ledger li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.8rem;
  border-block-end: 1px solid var(--rf1-hair);
}

.rf1-ledger-name {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--rf1-plum);
}

.rf1-ledger-where {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

/* V. Emergency: two columns, the heading with its copy, then the photo
   (Dan, 2026-10-13). */
.rf1-passage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rf1-gutter);
  align-items: start;
}

.rf1-passage .rf1-actions {
  margin-block-start: 1.25rem;
}

.rf1-inline-facts {
  font-family: var(--rf1-serif);
  font-weight: 600;
  color: var(--rf1-plum);
}

.rf1-sec .rf1-inline-facts {
  font-size: 1.1875rem;
  line-height: 1.4;
}

.rf1-inline-facts .rf1-fact {
  white-space: nowrap;
}

.rf1-inline-facts .rf1-dot {
  margin-inline: 0.4rem;
  color: var(--rf1-bronze-text);
}

.rf1-inset {
  margin: 0;
  padding: 0.4rem;
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
}

.rf1-inset img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* VI. Doctors: founder first; both portraits the same size and crop
   (Dan, 2026-10-13) */
.rf1-doctors-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--rf1-gutter);
  align-items: end;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.rf1-doctors-head p {
  margin: 0;
  max-width: 34rem;
}

/* Two equal columns; the articles stretch to the row, so the gutter
   hairline runs the full height of the taller one. */
.rf1-doctors-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

/* The gutter is split as padding on both sides of the hairline, so the two
   portraits come out the same width. */
.rf1-doctor {
  margin: 0;
  padding-inline-end: var(--rf1-gutter);
  border-inline-end: 1px solid transparent;
}

.rf1-doctor + .rf1-doctor {
  border-inline-end: 0;
}

.rf1-doctor + .rf1-doctor {
  padding-inline: var(--rf1-gutter) 0;
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-portrait {
  padding: 0.5rem;
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
  margin-block-end: 1.5rem;
}

.rf1-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 5.4;
  object-fit: cover;
  object-position: 50% 20%;
}

.rf1-doctor-name {
  margin-block: 0 0.25rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1.15;
  color: var(--rf1-plum);
}

.rf1-sec .rf1-doctor-role {
  margin-block: 0 1rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

.rf1-doctor p:not(.rf1-doctor-role) {
  max-width: 34rem;
}

/* Reviews: the template carousel, one generous quote at a time */
#reviews-banner.rf1-reviews {
  padding-block: var(--rf1-chapter-pad);
  background-color: var(--rf1-paper);
  overflow: hidden;
}

/* Reviews: the label and heading are centered over the centered quote
   and its controls (Dan, 2026-10-13); the label's hairline runs out to
   both sides. */
.rf1-rule--plain {
  justify-content: center;
}

.rf1-rule--plain::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--rf1-hair);
}

.rf1-reviews-heading {
  margin-inline: auto;
  max-width: 46rem;
  text-align: center;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.rf1-reviews .swiper {
  max-width: 46rem;
  margin-inline: auto;
  overflow: hidden;
}

#reviews-banner.rf1-reviews .swiper-slide {
  width: 100%;
  padding: 0 1.5rem;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
}

#reviews-banner.rf1-reviews .bi-star-fill {
  font-size: 0.875rem;
  color: var(--rf1-bronze-text);
  margin-inline: 0.15rem;
}

#reviews-banner.rf1-reviews .swiper-slide .text-center:first-child {
  margin-block-end: 1.25rem;
}

#reviews-banner.rf1-reviews .swiper-slide p.mb-3 {
  margin-block-end: 1.5rem;
  font-family: var(--rf1-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.35;
  color: var(--rf1-plum-deep);
  text-wrap: balance;
}

#reviews-banner.rf1-reviews .media-body p {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

#reviews-banner.rf1-reviews .bi-chat-quote-fill {
  display: none;
}

.rf1-reviews .reviews-nav {
  max-width: 46rem;
  margin: 2rem auto 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rf1-hair);
  gap: 1.5rem;
}

.rf1-reviews .reviews-nav-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rf1-hair);
  border-radius: 0;
  background: transparent;
  color: var(--rf1-plum);
  font-size: 1rem;
}

.rf1-reviews .reviews-nav-btn:hover {
  background-color: var(--rf1-plum);
  border-color: var(--rf1-plum);
  color: var(--rf1-paper);
}

.rf1-reviews .reviews-nav-fraction {
  min-width: 3.5rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--rf1-plum);
  font-variant-numeric: tabular-nums;
}

/* ---------- VII. The colophon ---------- */

.rf1-colophon {
  padding-block: var(--rf1-chapter-pad) clamp(3rem, 2rem + 3vw, 5rem);
  background-color: var(--rf1-plum-deep);
  color: var(--rf1-paper);
}

.rf1-colophon .rf1-rule {
  color: var(--rf1-bronze-light);
}

.rf1-colophon .rf1-rule::after {
  background-color: var(--rf1-hair-dark);
}

.rf1-colophon .rf1-rule-num {
  color: var(--rf1-bronze-light);
}

.rf1-colophon .rf1-h2,
.rf1-colophon .rf1-h3 {
  color: #fff;
}

.rf1-colophon p {
  color: var(--rf1-paper);
}

.rf1-colophon-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--rf1-gutter);
  align-items: start;
}

.rf1-colophon-intro p {
  max-width: 30rem;
}

.rf1-timetable-wrap {
  max-width: 40rem;
}

.rf1-timetable {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rf1-timetable caption {
  caption-side: top;
  padding-block: 0 0.75rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-light);
  text-align: start;
}

.rf1-timetable th,
.rf1-timetable td {
  padding-block: 0.6rem;
  padding-inline: 0 1rem;
  border-block-end: 1px solid var(--rf1-hair-dark);
  text-align: start;
  font-size: 0.9375rem;
  color: var(--rf1-paper);
}

.rf1-timetable thead th {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  border-block-end-color: var(--rf1-bronze-light);
}

.rf1-timetable tbody th {
  font-weight: 500;
}

.rf1-timetable .rf1-closed {
  color: var(--rf1-bronze-light);
}

.rf1-day-short {
  display: none;
}

.rf1-colophon-gallery-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--rf1-gutter);
  align-items: baseline;
  margin-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--rf1-hair-dark);
}

.rf1-colophon-gallery-head .rf1-h3 {
  font-size: 1.75rem;
  margin: 0;
}

.rf1-colophon-gallery-head p {
  margin: 0;
  max-width: 32rem;
}

.rf1-leaves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rf1-leaf {
  min-width: 0;
}

.rf1-leaf:first-child {
  padding-inline-end: var(--rf1-gutter);
}

.rf1-leaf + .rf1-leaf {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair-dark);
}

.rf1-leaf-city {
  margin-block: 0 1rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 2rem;
  color: #fff;
}

.rf1-colophon .rf1-leaf-addr {
  margin-block: 0 0.25rem;
  font-size: 1rem;
  line-height: 1.55;
}

.rf1-leaf-phone {
  margin-block: 0 0.5rem;
}

.rf1-leaf-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.625rem;
  color: #fff;
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.rf1-leaf-phone a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.rf1-leaf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin-block-end: 1.5rem;
}

.rf1-leaf-map {
  border: 1px solid var(--rf1-hair-dark);
  margin-block-end: 1rem;
}

.rf1-leaf-map iframe {
  display: block;
}

.rf1-strip {
  display: grid;
  grid-auto-rows: clamp(5rem, 3rem + 4vw, 7.5rem);
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.rf1-strip li {
  min-width: 0;
}

.rf1-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82);
}

.rf1-strip--3 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.rf1-strip--3 li:first-child {
  grid-row: span 2;
}

.rf1-strip--5 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.rf1-strip--5 li:first-child {
  grid-row: span 2;
}

.rf1-invitation {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--rf1-gutter);
  align-items: start;
  margin-block-start: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  padding-block-start: 2.5rem;
  border-block-start: 1px solid var(--rf1-hair-dark);
}

.rf1-colophon .rf1-inline-facts {
  color: #fff;
}

.rf1-colophon .rf1-inline-facts .rf1-dot {
  color: var(--rf1-bronze-light);
}

/* Focus on the dark grounds: the global plum ring would vanish, so the ring
   turns ivory there: the hero, the colophon and the footer, and on inside
   pages the plum title band (not the microsites' light one), the dark
   treatment bands, the doctor hero, the microsite heroes and both office
   subnavs. */
.rf1-hero :focus-visible,
.rf1-colophon :focus-visible,
.rf1-footer :focus-visible,
body:not(.microsite) #inside-header :focus-visible,
.treatment-band-dark :focus-visible,
.doctor-hero :focus-visible,
#contact-gallery :focus-visible,
#chicago-hero :focus-visible,
#bourbonnais-hero :focus-visible,
.microsite-subnav :focus-visible {
  outline: 2px solid var(--rf1-paper);
  outline-offset: 3px;
}


/* ==========================================================================
   4. INSIDE PAGES
   The CSS carry-through (workflow 00b Phase 6).
   ========================================================================== */

/* ---------- Tokens shared by every page ---------- */

/* Square corners sitewide: Bootstrap's radius tokens drive .btn, .card,
   .form-control, .modal and the .rounded utilities (whose own rules are
   !important, so the tokens are the only clean way to square them). */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
  --border-radius-sm: 0;
  --border-radius: 0;
  --border-radius-lg: 0;
  --border-radius-pill: 0;
  /* Bootstrap's secondary text (#6c757d) drops under 4.5:1 on the paper;
     the folio's soft ink (#6E585D) is 5.80:1 on it. */
  --bs-secondary-rgb: 110, 88, 93;
  --bs-secondary-color: #6E585D;
  /* The Toothority player in the folio's colors on every page
     (muvi-player.css:7-8). */
  --muvi-teal: var(--rf1-bronze-light);
  --muvi-magenta: var(--rf1-bronze);
}

body {
  background-color: var(--rf1-paper);
}

.muvi-container,
.media-styled,
.hp-media-frame,
.treatment-img-wrap,
.treatment-section-img {
  border-radius: 0;
}

.media-styled,
.hp-media-frame,
.muvi-container {
  box-shadow: none;
}

/* Plates on inside pages: the media on a light mat inside a hairline. */
.hp-media-frame {
  padding: 0.5rem;
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
}

/* Footer: on inside pages it stands alone, so it opens without the
   colophon's top hairline. */
body:not(.homepage) .rf1-footer-grid {
  border-block-start-color: transparent;
}

/* ---------- Type: labels and headings ---------- */

.hp-eyebrow,
.contact-gallery-eyebrow,
.doctor-hero-eyebrow,
.treatment-box-heading,
.slide-mega-menu .mega-menu-header {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hp-eyebrow,
.contact-gallery-eyebrow,
.treatment-box-heading {
  color: var(--rf1-bronze-text);
}

.hp-section-heading,
.contact-gallery-heading {
  font-weight: 600;
  color: var(--rf1-plum);
}

/* The contact page's gallery sits on the dark plum #contact-gallery band. */
#contact-gallery .contact-gallery-heading {
  color: #fff;
}

#contact-gallery .contact-gallery-eyebrow {
  color: var(--rf1-bronze-light);
}

/* Its two gallery buttons carry an inline 30px radius in the page markup;
   !important is the only CSS that squares them without editing the page. */
#contact-gallery .btn {
  border-radius: 0 !important;
}

/* ---------- Buttons ---------- */

/* Square, sans, small caps-like: the folio's buttons. Colors stay the
   template's (and the microsites' accent colors still apply). The
   appointment wizard's choice tiles and link-style buttons keep their case. */
.btn:not(.btn-check + .btn):not(.btn-link) {
  border-radius: 0;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn.btn-lg:not(.btn-check + .btn):not(.btn-link) {
  font-size: 0.9375rem;
}

/* Small buttons sit in narrow columns and paired rows (treatment CTA bars,
   office cards): sentence case keeps them on one line. A phone number
   never breaks. */
.btn.btn-sm:not(.btn-check + .btn):not(.btn-link) {
  text-transform: none;
  letter-spacing: 0.01em;
}

a.btn[href^="tel:"] {
  white-space: nowrap;
}

/* CTA strips (treatment pages, microsite service pages): a label never
   breaks; when two buttons do not fit side by side, the second moves to
   the next line. The strip's column carries Bootstrap's flex-md-nowrap
   utility, which is !important, so the override is too. */
.treatment-cta .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

.treatment-cta [class*="col-"].flex-md-nowrap {
  flex-wrap: wrap !important;
}

/* The microsite hubs' office cards pair two flex-fill buttons; when both
   labels do not fit, the pair stacks instead of breaking a label. */
.d-flex:has(> .btn.flex-fill) {
  flex-wrap: wrap;
}

.btn.flex-fill {
  white-space: nowrap;
}

/* Download and link buttons stacked in a text column (forms, scheduling,
   service pages): the column takes the text column's full width from
   768px, and from 992px each label holds one line; below that a long
   label may wrap, since the button cannot move. */
@media (min-width: 48em) {
  .row.justify-content-start > [class*="col-"]:has(> .btn-block) {
    flex: 0 0 100%;
    max-width: 100%;
  }

}

@media (min-width: 62em) {
  .row.justify-content-start > [class*="col-"] > .btn-block {
    white-space: nowrap;
  }
}

/* The doctor page's "At a Glance" button: sentence case, so "Schedule
   with Dr. Raffi" holds one line in the narrow card. */
.doctor-glance a.btn.doctor-glance-cta:not(.btn-link) {
  text-transform: none;
  letter-spacing: 0.01em;
  padding-inline: 0.75em;
  white-space: nowrap;
}

/* In-page buttons reach the 44px a primary action needs (Request
   Appointment, Call Us, Schedule). The wizard's choice tiles, link-style
   buttons, the page reader's byline controls and carousel arrows keep their
   own sizing. Display utilities (d-none, d-md-inline-block) are !important
   and still win. */
#main-content .btn:not(.btn-check + .btn):not(.btn-link):not(.page-reader-btn):not(.reviews-nav-btn):not(.gallery-nav-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 2.75rem;
}

/* ---------- The title band (#inside-header) ---------- */

#inside-header {
  position: relative;
  background: var(--rf1-plum-deep);
  padding: clamp(2rem, 1.25rem + 2.5vw, 3.5rem) 0;
}

/* The hero's hairline frame, drawn over the band. */
#inside-header::before {
  content: "";
  position: absolute;
  inset: var(--rf1-frame-inset);
  border: 1px solid var(--rf1-frame);
  pointer-events: none;
}

/* Keep the title clear of the frame on narrow screens. */
#inside-header > * {
  position: relative;
}

@media (max-width: 47.99em) {
  #inside-header .container {
    padding-inline: calc(var(--rf1-frame-inset) + 1rem);
  }
}

#inside-header h1 {
  font-family: var(--rf1-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

#inside-header .hp-eyebrow,
#inside-header h1 .video-header-prefix {
  font-family: var(--rf1-serif);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--rf1-bronze-light);
  opacity: 1;
}

/* Microsite title bands keep their light accent tint; the frame takes the
   office's accent color. */
body.microsite #inside-header::before {
  border-color: var(--accent-color, var(--rf1-plum));
  opacity: 0.35;
}

/* ---------- Sections and grounds ---------- */

/* Tinted sections take the lighter mat, not the darker second paper:
   deep-bronze labels (#7C6850) pass on it (about 5:1) and would not on
   #EFE9E0 (4.40:1). */
.hp-section-tinted {
  background-color: var(--rf1-mat);
  border-block: 1px solid var(--rf1-hair);
}

.hp-section-sub {
  color: var(--rf1-ink-soft);
}

/* ---------- Treatment pages ---------- */

.treatment-band-dark {
  background-color: var(--rf1-plum-deep);
  margin-inline: 0;
  border-radius: 0;
}

.treatment-content-box,
.treatment-fact-card,
.treatment-faq-card {
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
  border-radius: 0;
}

.treatment-fact-card:hover {
  box-shadow: none;
  border-color: var(--rf1-bronze);
}

.treatment-fact-card h3,
.treatment-faq-card .card-header a,
.treatment-faq-card .card-header button.btn-link {
  font-family: var(--rf1-serif);
  font-weight: 600;
}

.treatment-faq-card .card-header a,
.treatment-faq-card .card-header button.btn-link {
  font-size: 1.1875rem;
  text-decoration: none;
}

.treatment-fact-icon .bi {
  color: var(--rf1-bronze-text);
}

.treatment-band-dark .treatment-content-box,
.treatment-band-dark .treatment-fact-card,
.treatment-band-dark .treatment-faq-card {
  background-color: rgba(245, 241, 234, 0.05);
  border-color: var(--rf1-hair-dark);
}

.treatment-band-dark .treatment-box-heading {
  color: var(--rf1-bronze-light);
}

.treatment-band-dark .treatment-fact-icon .bi {
  color: var(--rf1-bronze-light);
}

.treatment-cta {
  border-color: var(--rf1-hair);
}

.treatment-band-dark .treatment-cta {
  background-color: rgba(20, 14, 16, 0.25);
  border-block-start-color: var(--rf1-hair-dark);
}

/* Related topics: ruled tags, not pills. */
.related-pill {
  border-color: var(--rf1-hair);
  border-radius: 0;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--rf1-plum);
}

.related-pill:hover {
  border-color: var(--rf1-plum);
}

/* The "available at these locations" bar on treatment and microsite pages. */
.service-availability {
  background: var(--rf1-paper-2);
  border-color: var(--rf1-hair);
}

.service-availability-loc a {
  border-radius: 0;
  border-color: var(--rf1-hair);
  background: var(--rf1-mat);
}

.service-availability-loc a:hover,
.service-availability-loc a:focus-visible {
  box-shadow: none;
}

/* ---------- Cards: contact, visit band, video library, tech, aftercare ---------- */

.contact-card,
.hp-people-card,
.practice-summary-office-card,
.video-library-card,
.hp-tech-card,
.aftercare-hub-cards .aftercare-hub-card,
.contact-gallery-card,
.doctor-glance {
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
  border-radius: 0;
  box-shadow: none;
}

.contact-card:hover,
.hp-people-card:hover,
.video-library-card:hover,
.hp-tech-card:hover,
.aftercare-hub-cards .aftercare-hub-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--rf1-bronze);
}

.contact-card-icon {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--rf1-hair);
}

.contact-card-icon i,
.hp-tech-card i {
  color: var(--rf1-bronze-text);
}

.contact-card h3,
.aftercare-hub-cards .aftercare-hub-card h3,
.video-library-card .card-title {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--rf1-plum);
}

.contact-phone a {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.practice-summary-map-frame {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rf1-hair);
}

.hp-chip {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--rf1-hair);
  color: var(--rf1-plum);
}

/* People cards (the microsite hubs' "Meet Your ... Doctors"): the portrait
   framed on the mat, serif name, bronze small-caps role. */
.hp-people-card .hp-people-img {
  margin: 0.5rem 0.5rem 0;
  border-radius: 0;
}

.hp-people-body h3 {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--rf1-plum);
}

.hp-people-subtitle {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.14em;
  color: var(--rf1-bronze-text);
}

/* ---------- Doctor pages ---------- */

.doctor-hero {
  position: relative;
  background: var(--rf1-plum-deep);
}

.doctor-hero::before {
  content: "";
  position: absolute;
  inset: var(--rf1-frame-inset);
  border: 1px solid var(--rf1-frame);
  pointer-events: none;
}

.doctor-hero .container {
  position: relative;
}

.doctor-hero-portrait {
  border-radius: 0;
  border: 0;
  padding: 0.5rem;
  background-color: var(--rf1-mat);
  box-shadow: none;
}

.doctor-hero-name {
  font-family: var(--rf1-serif);
  font-weight: 600;
}

.doctor-hero-eyebrow {
  color: var(--rf1-bronze-light);
  opacity: 1;
}

.doctor-hero-chip {
  border-radius: 0;
  background: transparent;
  border-color: var(--rf1-frame);
}

.doctor-btn-light,
.doctor-btn-outline {
  border-radius: 0;
}

.doctor-glance {
  border-block-start: 1px solid var(--rf1-hair);
}

.doctor-glance-list dt {
  font-family: var(--rf1-serif);
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  color: var(--rf1-bronze-text);
}

/* ---------- Microsites ---------- */

/* The office subnav: square links on the office's accent band. */
.microsite-subnav .subnav-link {
  border-radius: 0;
}

/* Carousel and gallery controls: square, hairline. */
.reviews-nav-btn,
.gallery-nav-btn {
  border-radius: 0;
  border-width: 1px;
}

#reviews-banner:not(.rf1-reviews) .swiper-slide {
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
  border-radius: 0;
}

#reviews-banner:not(.rf1-reviews) .bi-star-fill {
  color: var(--rf1-bronze-text);
}

/* ---------- Aftercare (aftercare.css loads after client.css, so these
   rules carry the .aftercare scope to outrank it) ---------- */

.aftercare {
  --ac-line: var(--rf1-hair);
  --ac-soft: var(--rf1-mat);
}

.aftercare .aftercare-section--priority,
.aftercare .aftercare-section--when-to-call,
.aftercare .aftercare-note,
.aftercare .aftercare-subsection,
.aftercare .aftercare-jump a,
.aftercare .aftercare-hub-card {
  border-radius: 0;
}

/* Link-style buttons (the watch pages' transcript link): plum, not the
   template's blue, which fails on the paper. */
.btn-link {
  --bs-btn-color: var(--rf1-plum);
  --bs-btn-hover-color: var(--rf1-plum-deep);
  --bs-btn-active-color: var(--rf1-plum-deep);
}

/* ---------- Search page, links page, forms ---------- */

.search-page-input {
  border-radius: 0;
}

/* Links page: the folio's paper instead of the template's pale blue
   pattern, and square buttons. */
#links {
  background-image: none;
  background-color: var(--rf1-paper-2);
}

/* The longest office label ("Call Bourbonnais (815) 933-4121") holds one
   line, as the template's own phone rule already sets below 576px. */
#links .btn-text {
  font-size: 1.05rem;
}

.btn-gradient,
.btn-clue,
.radius-btn,
.radius-style button {
  border-radius: 0;
}

.form-control,
.form-select,
body .search-page-input {
  border-radius: 0;
}

.form-control:focus,
.form-select:focus,
body .search-page-input:focus {
  border-color: var(--rf1-plum);
  box-shadow: 0 0 0 0.2rem rgba(82, 63, 67, 0.2);
}

/* Narrow column buttons (thanks, 404, forms): tighter tracking, so short
   labels hold one line. */
.btn.btn-block:not(.btn-check + .btn) {
  padding-inline: 1em;
  letter-spacing: 0.04em;
}

/* Appointment wizard: square tiles on the folio's paper. Its markup and
   script are untouched. The template's hover color is !important, so the
   override is too. */
.appt-day .btn-outline-primary,
.appt-nextstep,
#multistep-appt-3 .appt-day {
  border-radius: 0;
}

/* The tiles' tray: the folio's second paper instead of the template's
   pale blue (clue.css .appt-day), square. */
.multistep-appt .appt-day {
  background-color: var(--rf1-paper-2);
  border-color: var(--rf1-paper);
  border-radius: 0;
}

.appt-day .btn-outline-primary:hover,
.appt-nextstep:hover {
  background-color: var(--rf1-paper-2) !important;
}

/* The microsite heroes' pause toggle, quiet like the homepage's: the glyph
   on a faint disc, a 44px hit area. */
#chicago-hero .hero-video-toggle,
#bourbonnais-hero .hero-video-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  opacity: 1;
}

#chicago-hero .hero-video-toggle::before,
#bourbonnais-hero .hero-video-toggle::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  z-index: -1;
  border-radius: 50%;
  background-color: rgba(43, 34, 37, 0.55);
}

#chicago-hero .hero-video-toggle:hover::before,
#chicago-hero .hero-video-toggle:focus-visible::before,
#bourbonnais-hero .hero-video-toggle:hover::before,
#bourbonnais-hero .hero-video-toggle:focus-visible::before {
  background-color: rgba(43, 34, 37, 0.82);
}


/* ==========================================================================
   4b. LANDING PAGES
   The premium tier of the folio for the three implant landing pages
   (/missing-one-tooth/, /missing-multiple-teeth/, /missing-all-teeth/):
   a framed plum frontispiece, numbered chapters whose rule labels are the
   patient's questions, a comparison table, and framed plum interleaves at
   the decision points. Everything is scoped under the page wrapper .rf1-lp.
   Markup: those three pages, partials/landing/ and macros/landing.njk.
   ========================================================================== */

.rf1-lp {
  --rf1-lp-pad: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
  --rf1-lp-chapter-pad: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  --rf1-lp-h1: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
}

/* Focus on the plum grounds: the global plum ring would vanish. */
.rf1-lp-opener :focus-visible,
.rf1-lp-band :focus-visible {
  outline: 2px solid var(--rf1-paper);
  outline-offset: 3px;
}

/* ---------- Opener: the frontispiece ---------- */

.rf1-lp-opener {
  padding: var(--rf1-frame-inset);
  background-color: var(--rf1-plum-deep);
  color: var(--rf1-paper);
}

.rf1-lp-frame {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  max-width: var(--rf1-frame-max);
  margin: 0.6rem auto 0;
  border: 1px solid var(--rf1-frame);
  border-block-start: 0;
}

.rf1-lp-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--rf1-lp-pad);
  padding-block-end: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.rf1-lp-page--facing {
  border-inline-start: 1px solid var(--rf1-frame);
}

/* The running head sits on the frame's top line, which it draws itself. */
.rf1-lp-runhead {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block: -0.6rem 0;
  margin-inline: calc(-1 * var(--rf1-lp-pad));
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.rf1-lp-runhead::before,
.rf1-lp-runhead::after {
  content: "";
  height: 1px;
  background-color: var(--rf1-frame);
}

.rf1-lp-runhead::before {
  flex: 0 0 calc(var(--rf1-lp-pad) - 0.85rem);
}

.rf1-lp-runhead::after {
  flex: 1 1 auto;
}

.rf1-lp-page--facing .rf1-lp-runhead {
  margin-inline-start: calc(-1 * var(--rf1-lp-pad) - 1px);
}

.rf1-lp-title {
  margin-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) 0;
  max-width: 16ch;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-lp-h1);
  line-height: 1.06;
  letter-spacing: 0;
  color: #fff;
  text-wrap: balance;
}

/* The page reader moves itself to just after the h1. */
.rf1-lp-opener .page-reader {
  margin-block-start: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
}

.rf1-lp-promise {
  margin-block: 1.5rem 0;
  max-width: 28rem;
  font-size: var(--rf1-lead);
  line-height: 1.6;
  color: var(--rf1-paper);
}

.rf1-lp-opener .rf1-actions {
  gap: 0.75rem;
}

.rf1-lp-byline {
  margin-block: auto 0;
  padding-block-start: 2rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-light);
}

/* The plate sits centered in the facing page below its running head. */
.rf1-lp-frontis {
  margin-block: auto;
  padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.rf1-lp-opener .rf1-plate-media {
  border-color: var(--rf1-frame);
}

.rf1-lp-opener .rf1-caption {
  color: var(--rf1-bronze-light);
}

/* ---------- Proof strip ---------- */

.rf1-lp-proof {
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-block-end: 1px solid var(--rf1-hair);
}

.rf1-lp-proof-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf1-lp-proof-list li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-inline: 1.25rem;
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-lp-proof-list li:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.rf1-lp-proof-fig {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem);
  line-height: 1;
  color: var(--rf1-plum);
}

.rf1-lp-proof-label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--rf1-ink-soft);
}

/* ---------- Chapters ---------- */

.rf1-lp-chapter {
  padding-block: var(--rf1-lp-chapter-pad);
}

.rf1-lp-chapter + .rf1-lp-chapter {
  padding-block-start: 0;
}

.rf1-lp-chapter--mat {
  background-color: var(--rf1-mat);
  border-block: 1px solid var(--rf1-hair);
}

.rf1-lp-chapter--mat + .rf1-lp-chapter,
.rf1-lp-chapter + .rf1-lp-chapter--mat {
  padding-block-start: var(--rf1-lp-chapter-pad);
}

.rf1-lp .rf1-rule {
  margin-block-end: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}

.rf1-lp-intro {
  max-width: 44rem;
}

.rf1-lp .rf1-sec .rf1-lead {
  max-width: 44rem;
}

/* A text page and its plate (the plate trails, with a gutter hairline). */
.rf1-lp-spread {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rf1-gutter);
  align-items: start;
}

.rf1-lp-spread > .rf1-plate,
.rf1-lp-plates {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

/* Two plates stacked in the plate column (the full page's two options). */
.rf1-lp-plates .rf1-plate + .rf1-plate {
  margin-block-start: 2rem;
}

/* The definition ledger: What it is / Who it's for / How we help. */
.rf1-lp-ledger {
  margin: 1.75rem 0 0;
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--rf1-hair);
}

.rf1-lp-ledger dt {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--rf1-plum);
}

.rf1-lp-ledger dd {
  margin: 0;
  font-size: var(--rf1-body);
  line-height: 1.65;
}

/* Ruled notes in pairs (the full page's two options, the multiple page's
   aside), with a gutter hairline between. */
.rf1-lp-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-note {
  padding-block: 2rem 0;
  padding-inline-end: var(--rf1-gutter);
}

.rf1-lp-note + .rf1-lp-note {
  padding-inline: var(--rf1-gutter) 0;
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-lp-aside {
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--rf1-hair);
  max-width: 48rem;
}

/* ---------- The comparison table ---------- */

.rf1-lp-compare {
  width: 100%;
  margin-block: 2rem 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.rf1-lp-compare th,
.rf1-lp-compare td {
  padding: 1rem 1.25rem 1rem 0;
  border-block-end: 1px solid var(--rf1-hair);
  text-align: start;
  vertical-align: top;
}

.rf1-lp-compare thead th {
  width: 39%;
  vertical-align: bottom;
  border-block-end: 1px solid var(--rf1-bronze);
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--rf1-plum);
}

.rf1-lp-compare thead th.rf1-lp-compare-corner {
  width: 22%;
}

.rf1-lp-compare-plate {
  display: block;
  max-width: 17rem;
  margin-block-end: 0.85rem;
  padding: 0.4rem;
  background-color: var(--rf1-mat);
  border: 1px solid var(--rf1-hair);
}

.rf1-lp-compare-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.rf1-lp-compare tbody th {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--rf1-plum);
}

.rf1-lp-compare td {
  font-size: var(--rf1-body);
  line-height: 1.55;
  color: var(--rf1-ink);
}

.rf1-lp-after-table {
  margin-block-start: 1.75rem;
  max-width: 44rem;
}

/* ---------- Steps ---------- */

.rf1-lp-spread--steps {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.rf1-lp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rf1-lp-step;
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--rf1-hair);
  counter-increment: rf1-lp-step;
  font-size: var(--rf1-body);
  line-height: 1.6;
}

.rf1-lp-steps li::before {
  content: counter(rf1-lp-step, decimal-leading-zero);
  content: counter(rf1-lp-step, decimal-leading-zero) / "";
  grid-row: 1 / span 2;
  font-family: var(--rf1-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--rf1-bronze-text);
}

.rf1-lp-step-name {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--rf1-plum);
}

.rf1-lp-care {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

/* ---------- Plum bands: the interleaves ---------- */

.rf1-lp-band {
  padding: var(--rf1-frame-inset);
  background-color: var(--rf1-plum-deep);
  color: var(--rf1-paper);
}

.rf1-lp-band-frame {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  max-width: var(--rf1-frame-max);
  margin-inline: auto;
  border: 1px solid var(--rf1-frame);
}

.rf1-lp-band--plain .rf1-lp-band-frame {
  grid-template-columns: minmax(0, 1fr);
}

.rf1-lp-band-body {
  align-self: center;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) var(--rf1-lp-pad);
}

.rf1-lp-band--plain .rf1-lp-band-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem var(--rf1-gutter);
}

.rf1-lp-band--plain .rf1-lp-band-text {
  flex: 1 1 26rem;
}

.rf1-lp-band-title {
  margin-block: 0 0.85rem;
  max-width: 22ch;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-h2);
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
}

.rf1-lp-band p {
  margin: 0;
  max-width: 36rem;
  font-size: var(--rf1-lead);
  line-height: 1.6;
  color: var(--rf1-paper);
}

.rf1-lp-band .rf1-actions {
  gap: 0.75rem;
}

.rf1-lp-band--plain .rf1-actions {
  margin-block-start: 0;
}

.rf1-lp-band-media {
  margin: 0;
  padding: 0.6rem;
  border-inline-start: 1px solid var(--rf1-frame);
}

.rf1-lp-band-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
}

/* ---------- Doctor and technology ---------- */

.rf1-lp-doctor {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--rf1-gutter);
  align-items: start;
}

.rf1-lp-doctor .rf1-portrait {
  margin-block-end: 0;
}

.rf1-lp-doctor-text {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-lp-creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem var(--rf1-gutter);
  margin-block: 1.75rem 0.5rem;
}

.rf1-lp-label {
  margin-block: 0 0.6rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

.rf1-lp-creds ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-creds li {
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--rf1-hair);
  font-size: 1rem;
  line-height: 1.45;
}

.rf1-lp-tech {
  margin-block-start: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rf1-gutter);
  margin-block-start: 1.75rem;
}

.rf1-lp-tech .rf1-plate-media img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background-color: #fff;
}

.rf1-lp-where {
  display: block;
  margin-block: 0.75rem 0.35rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

.rf1-lp-tech .rf1-ledger {
  margin-block: 2rem 1rem;
  max-width: 34rem;
}

/* ---------- Reviews: a static 2 x 2 grid ---------- */

.rf1-lp-reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-review {
  margin: 0;
  padding-block: 2rem;
  padding-inline-end: var(--rf1-gutter);
  border-block-end: 1px solid var(--rf1-hair);
}

.rf1-lp-review:nth-child(even) {
  padding-inline: var(--rf1-gutter) 0;
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-lp-review blockquote {
  margin: 0 0 1rem;
}

.rf1-sec .rf1-lp-review blockquote p {
  margin: 0;
  font-family: var(--rf1-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--rf1-plum-deep);
}

.rf1-lp-review figcaption {
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rf1-bronze-text);
}

/* ---------- Financing ---------- */

.rf1-lp-pay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: 1.75rem;
  border-block-start: 1px solid var(--rf1-hair);
}

.rf1-lp-pay > div {
  padding-block: 1.75rem 0;
  padding-inline-end: var(--rf1-gutter);
}

.rf1-lp-pay > div + div {
  padding-inline-start: var(--rf1-gutter);
  border-inline-start: 1px solid var(--rf1-hair);
}

.rf1-lp-pay-mark {
  display: block;
  width: 10.5rem;
  height: auto;
  margin-block-end: 1rem;
}

.rf1-lp-pay-foot {
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rf1-hair);
}

/* ---------- FAQ and related topics ---------- */

.rf1-lp-faq {
  max-width: 56rem;
}

.rf1-lp-faq h2,
.rf1-lp-related h2 {
  margin-block: 0 1.25rem;
  font-family: var(--rf1-serif);
  font-weight: 600;
  font-size: var(--rf1-h2);
  line-height: 1.1;
  color: var(--rf1-plum);
}

.rf1-lp-related {
  padding-block: var(--rf1-lp-chapter-pad);
  text-align: center;
}

.rf1-lp-related h2 {
  font-size: var(--rf1-h3);
}

/* Standard components on these pages reach the 44px a target needs. The
   FAQ question button fills its header (the header's padding moves onto the
   button; the macro's p-0 utility is !important, so this is too), and the
   related-topic links grow to 44px. */
.rf1-lp .treatment-faq-card .card-header {
  padding: 0;
}

.rf1-lp .treatment-faq-card .card-header button.btn-link {
  min-height: 2.75rem;
  padding: 1rem 1.25rem !important;
}

.rf1-lp .related-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- Landing pages: tablet and phone ---------- */

@media (max-width: 61.99em) {
  .rf1-lp-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-lp-page--facing {
    border-inline-start: 0;
    padding-block-start: 0;
  }

  .rf1-lp-page--facing .rf1-lp-runhead {
    display: none;
  }

  .rf1-lp-frontis {
    padding-block-start: 0;
  }

  .rf1-lp-title,
  .rf1-lp-promise {
    max-width: 40rem;
  }

  .rf1-lp-byline {
    padding-block-start: 1.5rem;
  }

  .rf1-lp-proof-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.5rem;
  }

  .rf1-lp-proof-list li:nth-child(4) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .rf1-lp-spread,
  .rf1-lp-spread--steps,
  .rf1-lp-doctor {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-lp-spread > .rf1-plate,
  .rf1-lp-plates,
  .rf1-lp-care,
  .rf1-lp-doctor-text {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .rf1-lp-spread > .rf1-plate,
  .rf1-lp-doctor .rf1-portrait {
    max-width: 30rem;
  }

  .rf1-lp-plates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .rf1-lp-plates .rf1-plate + .rf1-plate {
    margin-block-start: 0;
  }

  .rf1-lp-pay {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-lp-pay > div,
  .rf1-lp-pay > div + div {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .rf1-lp-pay > div + div {
    margin-block-start: 1.75rem;
    border-block-start: 1px solid var(--rf1-hair);
  }
}

@media (max-width: 47.99em) {
  .rf1-lp-opener .rf1-actions .rf1-btn,
  .rf1-lp-band .rf1-actions .rf1-btn {
    flex: 1 1 auto;
  }

  .rf1-lp-proof-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }

  .rf1-lp-proof-list li,
  .rf1-lp-proof-list li:nth-child(4) {
    padding-block: 1rem;
    padding-inline: 0 1rem;
    border-inline-start: 0;
    border-block-end: 1px solid var(--rf1-hair);
  }

  .rf1-lp-proof-list li:nth-child(even) {
    padding-inline: 1rem 0;
    border-inline-start: 1px solid var(--rf1-hair);
  }

  .rf1-lp-proof-list li:last-child {
    grid-column: 1 / -1;
    border-block-end: 0;
  }

  .rf1-lp-ledger > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-lp-notes,
  .rf1-lp-plates,
  .rf1-lp-creds,
  .rf1-lp-tech-grid,
  .rf1-lp-reviews {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-lp-note,
  .rf1-lp-note + .rf1-lp-note,
  .rf1-lp-review,
  .rf1-lp-review:nth-child(even) {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .rf1-lp-note + .rf1-lp-note {
    margin-block-start: 2rem;
    border-block-start: 1px solid var(--rf1-hair);
  }

  /* The comparison table restacks: each row is a two-column grid with its
     row header on a line of its own; the column heads stay at the top.
     The explicit table roles in the markup keep the semantics through the
     display change. */
  .rf1-lp-compare,
  .rf1-lp-compare thead,
  .rf1-lp-compare tbody {
    display: block;
  }

  .rf1-lp-compare tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    border-block-end: 1px solid var(--rf1-hair);
  }

  .rf1-lp-compare thead tr {
    border-block-end-color: var(--rf1-bronze);
  }

  .rf1-lp-compare th,
  .rf1-lp-compare td,
  .rf1-lp-compare thead th {
    width: auto;
    padding: 0;
    border: 0;
  }

  .rf1-lp-compare thead th {
    padding-block-end: 0.75rem;
    font-size: 1.125rem;
  }

  .rf1-lp-compare thead th.rf1-lp-compare-corner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rf1-lp-compare-plate {
    max-width: none;
    margin-block-end: 0.6rem;
  }

  .rf1-lp-compare tbody th {
    grid-column: 1 / -1;
    padding-block: 1rem 0.35rem;
  }

  .rf1-lp-compare td {
    padding-block-end: 1rem;
    font-size: 1rem;
  }

  .rf1-lp-band-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-lp-band-media {
    order: -1;
    border-inline-start: 0;
    border-block-end: 1px solid var(--rf1-frame);
  }

  .rf1-lp-band-media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

/* Below 1100px the masthead drops the two-office directory (with each
   office's hours) for a Call button that opens the office picker; the
   homepage colophon's timetable and the inside pages' visit band carry the
   hours. */
@media (max-width: 68.74em) {
  .rf1-offices {
    display: none;
  }

  .rf1-call {
    display: inline-flex;
  }
}

@media (max-width: 61.99em) {
  /* Tablet: the plate spreads stack (text, then the plate at full width),
     the implant notes keep a short hairline, and the fact lines drop their
     separators so no dot is left at a line's end. */
  .rf1-spread--plate-first,
  .rf1-tech .rf1-spread--plate-first {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "plate";
  }

  .rf1-spread--plate-first .rf1-text-page,
  .rf1-tech .rf1-spread--plate-first .rf1-text-page {
    max-width: 40rem;
    padding-inline: 0;
    border-inline: 0;
  }

  .rf1-tech .rf1-spread--plate-first .rf1-text-page {
    max-width: none;
  }

  .rf1-inline-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
  }

  .rf1-inline-facts .rf1-dot {
    display: none;
  }

  .rf1-folio-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-page--facing {
    border-inline-start: 0;
  }

  .rf1-page--facing .rf1-runhead {
    margin-inline-start: calc(-1 * var(--rf1-page-pad));
  }

  .rf1-page--title .rf1-page-foot {
    padding-block: 2rem 2.25rem;
  }

  /* Implants: the copy, then the player with its row of facts. */
  .rf1-spread--implants {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-passage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 47.99em) {
  :root {
    --rf1-motion-rise: 1rem;
  }

  .rf1-masthead-inner {
    min-height: 4.25rem;
    column-gap: 0.25rem;
  }

  .rf1-logo {
    height: 2.75rem;
  }

  .rf1-masthead-request {
    display: none;
  }

  .rf1-call {
    padding-inline: 0.6rem;
  }

  .rf1-menu-btn {
    padding-inline: 0.5rem;
    gap: 0.5rem;
  }

  .rf1-menu-word {
    font-size: 0.8125rem;
  }

  body.homepage #homepage-cover.rf1-hero {
    min-height: 0;
  }

  .rf1-hero-search,
  .rf1-hero-lead,
  .rf1-hero-actions {
    max-width: none;
  }

  .rf1-page-foot {
    padding-block: 1.25rem 0.75rem;
  }

  body.homepage #homepage-cover .rf1-hero-title {
    margin-block-start: 1.75rem;
  }

  body.homepage #homepage-cover .rf1-hero-lead {
    margin-block-start: 1.5rem;
  }

  .rf1-ledger li {
    flex-direction: column;
    align-items: flex-start;
  }

  /* On phones the hero's foot meets the fixed chat and Sienna buttons at
     load, so the pause disc moves in from the corner, clear of both. */
  body.homepage #homepage-cover .hero-video-toggle.rf1-pause {
    inset-inline-end: calc(var(--rf1-frame-inset) + 4.5rem);
  }

  .rf1-page-foot--facing {
    padding-inline-end: 7rem;
  }

  .rf1-spread--welcome,
  .rf1-spread--plate-first,
  .rf1-tech .rf1-spread--plate-first,
  .rf1-spread--implants,
  .rf1-passage,
  .rf1-doctors-head,
  .rf1-doctors-grid,
  .rf1-interlude-grid,
  .rf1-colophon-head,
  .rf1-colophon-gallery-head,
  .rf1-leaves,
  .rf1-invitation,
  .rf1-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf1-spread--plate-first,
  .rf1-tech .rf1-spread--plate-first {
    grid-template-areas: "text" "plate";
  }

  .rf1-spread--plate-first .rf1-text-page,
  .rf1-tech .rf1-spread--plate-first .rf1-text-page,
  .rf1-index,
  .rf1-doctor,
  .rf1-doctor + .rf1-doctor,
  .rf1-note + .rf1-note,
  .rf1-leaf + .rf1-leaf {
    padding-inline: 0;
    border-inline: 0;
  }

  .rf1-index {
    border-block-start: 1px solid var(--rf1-hair);
  }

  /* On phones the three facts stack as a short ruled list. */
  .rf1-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: 0;
  }

  .rf1-facts li {
    padding-block: 0.7rem;
    border-block-end: 1px solid var(--rf1-hair);
  }

  .rf1-note:first-child,
  .rf1-leaf:first-child {
    padding-inline-end: 0;
  }

  .rf1-note + .rf1-note {
    border-block-start: 1px solid var(--rf1-hair);
  }

  .rf1-doctor + .rf1-doctor {
    padding-block-start: 1rem;
  }

  .rf1-leaf + .rf1-leaf {
    margin-block-start: 3rem;
    padding-block-start: 2.5rem;
    border-block-start: 1px solid var(--rf1-hair-dark);
  }

  .rf1-timetable-wrap {
    margin-inline-start: 0;
  }

  .rf1-timetable th,
  .rf1-timetable td {
    padding-inline-end: 0.6rem;
    font-size: 0.875rem;
  }

  .rf1-timetable thead th {
    font-size: 1.0625rem;
  }

  /* Short day names on phones; the full name stays for screen readers. */
  .rf1-day-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rf1-day-short {
    display: inline;
  }

  .rf1-strip--5 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rf1-strip--5 li:first-child {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  .rf1-strip--3 li:first-child {
    grid-row: span 2;
  }

  .rf1-footer-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .rf1-search .search-header,
  .rf1-search .search-results-container {
    padding-inline: 1.25rem;
  }

  .rf1-search .search-input {
    font-size: 1.25rem;
  }
}

@media (max-width: 23.74em) {
  .rf1-logo {
    height: 2.4rem;
  }

  /* Visually hidden, not display:none: the word is the button's only name. */
  .rf1-menu-word {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .rf1-menu-btn {
    min-width: 2.75rem;
    justify-content: center;
  }
}


/* ==========================================================================
   6. MOTION AND ACCESSIBILITY STATES
   Default level only. Entrances: opacity and translate, ending at none.
   Pending targets hide only under html.rf1-armed, which the footer script
   adds after every target is observed. The hero's content enters once on
   load through CSS keyframes; a pause, focus in the hero or a stored pause
   sets the one-way html.rf1-settled class, so it never replays.
   ========================================================================== */

@keyframes rf1-rise {
  from {
    opacity: 0;
    translate: 0 var(--rf1-motion-rise);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.rf1-armed [data-rf1-reveal]:not(.rf1-in),
  html.rf1-armed [data-rf1-reveal-group] > :not(.rf1-in) {
    opacity: 0;
    translate: 0 var(--rf1-motion-rise);
  }

  html.rf1-armed [data-rf1-reveal].rf1-in,
  html.rf1-armed [data-rf1-reveal-group] > .rf1-in {
    transition: opacity var(--rf1-motion-dur) var(--rf1-motion-ease), translate var(--rf1-motion-dur) var(--rf1-motion-ease);
    transition-delay: calc(var(--rf1-i, 0) * var(--rf1-motion-stagger));
  }

  html.rf1-armed .rf1-plate.rf1-in,
  html.rf1-armed .rf1-doctor.rf1-in,
  html.rf1-armed .rf1-strip > .rf1-in {
    transition-duration: var(--rf1-motion-dur-media);
  }

  html.rf1-armed .rf1-in.rf1-instant {
    transition: none;
  }

  html.rf1-armed [data-rf1-reveal]:focus-within,
  html.rf1-armed [data-rf1-reveal-group] > :focus-within {
    opacity: 1;
    translate: none;
    transition: none;
  }

  html:not(.clue-motion-paused):not(.rf1-settled) .rf1-load {
    animation: rf1-rise var(--rf1-motion-dur) var(--rf1-motion-ease) backwards;
    animation-delay: calc(var(--rf1-motion-delay) + var(--rf1-step, 0) * var(--rf1-motion-stagger));
  }

  body.homepage #homepage-cover .hero-video-toggle.rf1-pause::before {
    transition: background-color 0.2s ease;
  }

  .rf1-btn,
  .rf1-link,
  .rf1-hero-actions a,
  .rf1-index a i,
  .rf1-reviews .reviews-nav-btn,
  .rf1-menu .social-icon-btn,
  .rf1-footer-social-link {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  /* END reduced-motion */
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .rf1-hero-actions a i,
  .rf1-index a i {
    transition: translate 0.25s var(--rf1-motion-ease), color 0.2s ease;
  }

  html:not(.clue-motion-paused) .rf1-hero-actions a:hover i,
  html:not(.clue-motion-paused) .rf1-index a:hover i {
    translate: 0.3rem 0;
  }
  /* END reduced-motion */
}

@media (prefers-reduced-motion: reduce) {
  [data-rf1-reveal],
  [data-rf1-reveal-group] > *,
  html.rf1-armed [data-rf1-reveal].rf1-in,
  html.rf1-armed [data-rf1-reveal-group] > .rf1-in,
  html.rf1-armed .rf1-plate.rf1-in,
  html.rf1-armed .rf1-doctor.rf1-in,
  html.rf1-armed .rf1-strip > .rf1-in,
  html.rf1-armed .rf1-in.rf1-instant,
  html.rf1-armed [data-rf1-reveal]:focus-within,
  html.rf1-armed [data-rf1-reveal-group] > :focus-within,
  .rf1-load,
  html:not(.clue-motion-paused):not(.rf1-settled) .rf1-load,
  body.homepage #homepage-cover .hero-video-toggle.rf1-pause::before,
  .rf1-btn,
  .rf1-link,
  .rf1-hero-actions a,
  .rf1-hero-actions a i,
  .rf1-index a i,
  .rf1-reviews .reviews-nav-btn,
  .rf1-menu .social-icon-btn,
  .rf1-footer-social-link {
    animation: none;
    transition: none;
  }
  /* END reduced-motion */
}

/* A finished entrance ends at once, one already under way included:
   transition none (not a zero duration) cancels a running transition. */
[data-rf1-reveal].rf1-instant,
[data-rf1-reveal-group] > .rf1-instant,
html.clue-motion-paused [data-rf1-reveal],
html.clue-motion-paused [data-rf1-reveal-group] > * {
  transition: none;
}

/* The shared pause stops hover movement too. */
html.clue-motion-paused .rf1-hero-actions a i,
html.clue-motion-paused .rf1-index a i {
  translate: none;
}

@media print {
  html.rf1-armed [data-rf1-reveal]:not(.rf1-in),
  html.rf1-armed [data-rf1-reveal-group] > :not(.rf1-in),
  html .rf1-load {
    opacity: 1;
    translate: none;
    animation: none;
  }
}
/* ==== END RAFFI_6 ADVANCED REDESIGN ==== */