/* ════════════════════════════════════════════════════════════════
   TYPEFACE
   Inter for the whole public site, headings and text alike. Variable font
   (one file covers every weight), Latin subset, self-hosted so no third
   party sees a visitor's request. SIL Open Font License:
   app/assets/fonts/OFL.txt. The upright file is preloaded from the layout;
   the italic (testimonial quotes) loads only where it is used.
   ════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-1f021a24.woff2") format("woff2-variations"), url("/assets/inter-1f021a24.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-italic-7c529059.woff2") format("woff2-variations"), url("/assets/inter-italic-7c529059.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --si-brand:        #005ca8;
  --si-brand-dark:   #00457e;
  --si-brand-mid:    #1577c8;
  /* Brand as a fill under white text. Resolved here, so it stays this blue
     when the portal's dark theme lightens --si-brand for text and borders. */
  --si-brand-fill:   var(--si-brand);
  --si-accent:       #00a7a0;
  --si-accent-dark:  #008f89;
  --si-accent-ink:   #00736e;  /* teal as text or a fill under white text: 5.7:1 on white */
  /* Keyboard focus ring. The brand teal is only 2.99:1 on white, so rings use
     a darker teal (5.7:1 on white, 5.2:1 on --si-bg-softer); dark sections
     swap in a pale teal (≥3.5:1 on every dark and blue band). See KEYBOARD
     FOCUS near the end of this file. */
  --si-focus:        #00736e;
  --si-focus-on-dark: var(--si-focus-on-dark);

  /* Deeper and lighter brand shades for gradients and dark bands */
  --si-brand-deep:   #003a6b;
  --si-brand-bright: #0070c4;
  --si-accent-deep:  #0a7f9c;
  --si-brand-on-dark:  #9fd0ff;
  --si-accent-on-dark: #7ff0e6;
  --si-ink-deep:     #0a1f30;
  --si-ink-on-dark:  #c8dde9;
  --si-white:        #ffffff;  /* text and marks on brand or dark fills — never flips */
  --si-star:         #f5c518;

  /* Status — the same four meanings everywhere: badges, flash, alerts.
     -bg is the fill, -border its edge, -ink the text on that fill (≥4.5:1),
     and the bare name a solid mark (dots, bars, icons). */
  --si-success:        #16a34a;
  --si-success-bg:     #f0fdf4;
  --si-success-border: #bbf7d0;
  --si-success-ink:    #166534;
  --si-success-on-dark: #86efac;
  --si-warning:        #ca8a04;
  --si-warning-bg:     #fefce8;
  --si-warning-border: #fde68a;
  --si-warning-ink:    #854d0e;
  --si-danger:         #dc2626;
  --si-danger-bg:      #fef2f2;
  --si-danger-border:  #fecaca;
  --si-danger-ink:     #b91c1c;
  --si-info-bg:        #eff6ff;
  --si-info-border:    #bfdbfe;
  --si-info-ink:       var(--si-brand-dark);
  /* Category tints (portal kind badges) */
  --si-teal-bg:        #f0fdfa;
  --si-teal-border:    #99f6e4;
  --si-teal-ink:       #0f766e;
  --si-violet-bg:      #eef2ff;
  --si-violet-ink:     #4f46e5;
  --si-neutral:        #94a3b8;
  --si-neutral-bg:     #f1f4f7;
  --si-neutral-border: #d5dde5;
  --si-neutral-ink:    #52606d;
  /* Chart series: categorical slots 1–3 (blue, orange, aqua), in that order.
     Checked with the dataviz palette validator against white; the dark
     theme has its own steps. */
  --si-chart-1: #2a78d6;
  --si-chart-2: #eb6834;
  --si-chart-3: #1baf7a;

  /* Backgrounds */
  --si-bg:           var(--si-white);
  --si-bg-soft:      #f4f9ff;
  --si-bg-softer:    var(--si-bg-softer);
  --si-surface:      var(--si-white);

  /* Text */
  --si-ink:          #0f2a3d;
  --si-ink-muted:    #3c5c74;
  --si-ink-faint:    #527088;   /* ≥4.7:1 on white and the soft backgrounds */

  /* Borders & shadows */
  --si-border:       #dce8f3;
  --si-border-soft:  #eaf3fb;
  --si-border-strong: #c3d4e2;
  --si-shadow-sm:    0 2px 8px rgba(15,42,61,.06);
  --si-shadow:       0 8px 28px rgba(15,42,61,.09);
  --si-shadow-lg:    0 16px 48px rgba(15,42,61,.13);

  /* Shape */
  --si-radius:       14px;
  --si-radius-sm:    8px;
  --si-radius-lg:    20px;

  /* Spacing — a 4px grid. Padding, margin and gap of 8px and up use these;
     smaller values are optical tweaks inside badges and chips. */
  --space-1:  .25rem;  /*  4px */
  --space-2:  .5rem;   /*  8px */
  --space-3:  .75rem;  /* 12px */
  --space-4:  1rem;    /* 16px */
  --space-5:  1.25rem; /* 20px */
  --space-6:  1.5rem;  /* 24px */
  --space-7:  1.75rem; /* 28px */
  --space-8:  2rem;    /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-14: 3.5rem;  /* 56px */
  --space-16: 4rem;    /* 64px */
  --space-18: 4.5rem;  /* 72px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* Content widths — three, plus the page shell */
  --measure-sm: 560px;  /* single-column forms, small grids */
  --measure:    680px;  /* running text, ledes, portal forms */
  --narrow:     860px;  /* FAQ, wider reading layouts */

  /* Layout */
  --si-max:          1120px;
  --si-section:      5rem;
  --header-h:        76px;
  --topbar-h:        36px;
  --si-gutter:       clamp(1rem, 4vw, 2rem); /* responsive side gutter — 16px min on mobile */

  /* Motion — easing curves & durations (see docs/motion.md) */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);      /* enters: fast start, soft landing */
  --ease-out-soft: cubic-bezier(.32, .72, 0, 1);     /* panels & sheets that travel further */
  --ease-in:       cubic-bezier(.4, 0, 1, 1);        /* exits: leave quickly */
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);     /* state to state */
  --ease-spring:   cubic-bezier(.34, 1.4, .64, 1);   /* small, playful overshoot */

  --dur-instant:  80ms;  /* press feedback */
  --dur-fast:    140ms;  /* hover, colour, small nudges */
  --dur:         220ms;  /* menus, popovers, toggles */
  --dur-slow:    320ms;  /* panels, accordions, modals */
  --dur-slower:  480ms;  /* scroll reveals */

  /* Typeface */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale — every font-size uses one of these (see docs/components.md).
     Nothing on the public site goes below --text-2xs (13px); --text-3xs is
     for dense portal metadata only. Logo lockups keep their own sizes. */
  --text-3xs:  .78125rem; /* 12.5px — portal tables, timestamps */
  --text-2xs:  .8125rem;  /* 13px — eyebrows, badges, fine print */
  --text-xs:   .875rem;   /* 14px — secondary text, labels */
  --text-sm:   .9375rem;  /* 15px — compact body, buttons */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.0625rem; /* 17px — public body */
  --text-lg:   1.125rem;  /* 18px — lede */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.375rem;  /* 22px */
  --text-3xl:  1.5rem;    /* 24px */
  --text-4xl:  1.75rem;   /* 28px */
  --text-5xl:  2rem;      /* 32px */
  /* Fluid headings */
  --text-h1:    clamp(2.2rem, 5.5vw, 3.6rem);
  --text-h2:    clamp(1.65rem, 3.5vw, 2.4rem);
  --text-h3:    clamp(var(--text-md), 2vw, var(--text-xl));
  --text-title: clamp(var(--text-4xl), 3vw, 2.25rem); /* stat numbers, page titles inside cards */
  --text-quote: clamp(var(--text-lg), 2.4vw, var(--text-2xl));

  /* Line-height scale */
  --si-lh-heading: 1.15;
  --si-lh-body:    1.65;
  --si-lh-loose:   1.7;
}

/* ════════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md); /* 17px — larger default for senior audience */
  color: var(--si-ink);
  background: var(--si-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* prevent horizontal scroll from 100vw full-bleed sections */
}

img, svg { display: block; max-width: 100%; }
/* photo_tag wraps images in <picture> for WebP; let the <img> lay out as if
   the wrapper were not there. */
picture { display: contents; }
a { color: var(--si-brand); }
/* A link inside running text is underlined, so colour isn't the only clue. */
:is(p, address, dd, li > span) a:not([class]) { text-decoration: underline; text-underline-offset: .15em; }

/* ────── Typography ────── */
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; overflow-wrap: break-word; }
h1 { font-size: var(--text-h1); line-height: 1.06; }

/* Hero headings carry a hand-placed line break for the desktop measure. On a
   phone the heading already wraps every few words, so the forced break only
   strands a word ("living,") on its own line — let it wrap naturally.
   (The markup keeps a space before each such <br> so the words don't fuse.) */
@media (max-width: 600px) {
  h1 br,
  .why-reach-out h2 br { display: none; }
}

/* 320px-class phones: at 2.2rem a single word like "implementation," is wider
   than the 288px column. */
@media (max-width: 360px) {
  h1 { font-size: 1.9rem; }
}
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p  { color: var(--si-ink-muted); line-height: 1.65; }

/* ────── Layout helpers ────── */
.shell {
  width: min(var(--si-max), calc(100vw - 2 * var(--si-gutter)));
  margin-inline: auto;
}

/* Scale section padding down on mobile */
@media (max-width: 760px) {
  :root { --si-section: 3.5rem; }
}

.section-full {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* ════════════════════════════════════════════════════════════════
   SKIP TO MAIN CONTENT  (accessibility — keyboard users)
   ════════════════════════════════════════════════════════════════ */
.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--si-brand);
  color: var(--si-white);
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--si-radius-sm) 0;
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.skip-to-main:focus {
  left: 0;
}

/* ════════════════════════════════════════════════════════════════
   BACK TO TOP  (fixed button, appears after scrolling)
   ════════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  z-index: 35;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--si-brand);
  color: var(--si-white);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,92,168,.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  box-shadow: 0 6px 20px rgba(0,92,168,.55);
  transform: translateY(-2px);
}

.back-to-top.is-visible:active {
  transform: translateY(0) scale(.94);
  transition-duration: var(--dur-instant);
}

/* ════════════════════════════════════════════════════════════════
   FLASH MESSAGES
   ════════════════════════════════════════════════════════════════ */
.flash-bar {
  width: 100%;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  position: relative;
  overflow: hidden; /* the controller animates this bar's height on dismiss */
  animation: flash-in var(--dur-slow) var(--ease-out);
}

/* Transform-only entrance: the bar is already in the layout, so nothing below
   it moves when it arrives. */
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.flash-bar-notice {
  background: var(--si-success-bg);
  border-bottom: 1px solid var(--si-success-border);
  color: var(--si-success-ink);
}

.flash-bar-alert {
  background: var(--si-danger-bg);
  border-bottom: 1px solid var(--si-danger-border);
  color: var(--si-danger-ink);
}

.flash-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.flash-bar-inner svg { flex-shrink: 0; }

.flash-dismiss {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: .5;
  color: inherit;
  padding: .25rem;
  line-height: 1;
}

.flash-dismiss {
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.flash-dismiss:hover  { opacity: 1; }
.flash-dismiss:active { transform: translateY(-50%) scale(.9); transition-duration: var(--dur-instant); }

/* ════════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════════ */
.topbar {
  background: linear-gradient(135deg, var(--si-brand) 0%, var(--si-brand-mid) 100%);
  color: rgba(255,255,255,.85);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  gap: var(--space-4);
}

.topbar-location {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-divider { flex: 1; }

.topbar-links {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: var(--space-5);
  flex-shrink: 0;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  padding-inline: .3rem;    /* stretched to the bar's full height: a usable tap target */
  gap: .35rem;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.topbar-link:hover { color: var(--si-white); text-decoration: underline; }

.topbar-hours {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
}

.topbar-link-signin {
  margin-left: .25rem;
  padding-left: var(--space-4);
  border-left: 1px solid rgba(255,255,255,.25);
}

/* Hours are the first thing to go: with them the bar needs ~1000px and
   scrolls the whole page sideways on tablets and small laptops. */
@media (max-width: 1120px) {
  .topbar-hours { display: none; }
}
/* Then the location line, so the phone, email and staff links keep their room. */
@media (max-width: 900px) {
  .topbar-location { display: none; }
  .topbar-divider  { display: none; }
  .topbar-inner    { justify-content: flex-end; }
}

@media (max-width: 760px) {
  .topbar-location   { display: none; }
  .topbar-link-email { display: none; }
  .topbar-hours      { display: none; }
  .topbar-divider    { display: none; }
  .topbar-inner      { justify-content: center; }
}

/* At 480px only the phone link remains (email/hours/location hidden by 760px rule).
   Keep the topbar visible so the number is always reachable on mobile. */
@media (max-width: 480px) {
  .topbar-inner { height: 32px; }
}

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255,255,255,.98); /* solid fallback for older/low-end devices */
  border-bottom: 1px solid var(--si-border-soft);
  box-shadow: 0 1px 16px rgba(15,42,61,.05);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--si-ink);
  flex-shrink: 0;
}

.brand img  { height: 52px; width: auto; }
.brand strong { font-size: var(--text-base); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }

.brand-mark {
  display: block;
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--si-accent-ink);
  margin-top: .1rem;
}

/* ── Nav links ── */
.site-nav { display: flex; align-items: center; gap: .15rem; }

.nav-link {
  padding: .44rem var(--space-3);
  text-decoration: none;
  color: var(--si-ink-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--si-radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav-link { white-space: nowrap; }

/* Six links, the brand and the CTA only just fit between the collapse point
   and ~1240px, so tighten the spacing there instead of letting labels wrap. */
@media (min-width: 1140px) and (max-width: 1239px) {
  .nav-link { padding: .44rem var(--space-2); font-size: var(--text-xs); }
  .nav-cta-btn { margin-left: var(--space-2); padding-inline: var(--space-4) var(--space-4); }
  .brand strong { font-size: var(--text-sm); }
}

.nav-link:hover  { color: var(--si-brand); background: rgba(0,92,168,.07); }
.nav-link.nav-active { color: var(--si-brand); font-weight: 700; }

/* ── Services dropdown ── */
.nav-has-dropdown { position: relative; }

.nav-link-dropdown { display: flex; align-items: center; gap: .28rem; cursor: pointer; }

.nav-chevron { transition: transform var(--dur) var(--ease-out); flex-shrink: 0; color: var(--si-ink-muted); }
.nav-link-dropdown[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 8px;
  text-decoration: none;
  color: var(--si-ink);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-dropdown-item:hover { background: var(--si-bg-soft); }

.nav-dropdown-all { align-items: center; }
.nav-dropdown-all .nav-dropdown-label { font-weight: 700; color: var(--si-brand); }

.nav-dropdown-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink);
  line-height: 1.2;
}

.nav-dropdown-sub {
  display: block;
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
  margin-top: .1rem;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--si-border-soft);
  margin: .4rem var(--space-2);
}

/* ── Phones: the bottom corner belongs to the chat launcher ── */
@media (max-width: 760px) {
  /* The fixed chat launcher otherwise sits on top of the footer's legal links. */
  .site-footer-full { padding-bottom: var(--space-20); }
  /* A flick reaches the top anyway, and stacked above the chat launcher the
     arrow covered the footer links. */
  .back-to-top { display: none; }
}

/* The header (brand + six links + CTA) needs roughly 1080px. Below 1140px it
   collapses into the menu button; the rules that shape that menu all share
   this breakpoint. */
@media (max-width: 1139px) {
  .nav-has-dropdown { flex-direction: column; align-items: stretch; }
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-5);
  background: linear-gradient(135deg, var(--si-brand) 0%, var(--si-brand-mid) 100%);
  color: var(--si-white);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(0,92,168,.28);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.nav-cta-btn:hover {
  box-shadow: 0 4px 18px rgba(0,92,168,.38);
  transform: translateY(-1px);
  opacity: 1;
}

.nav-cta-btn:active {
  transform: translateY(0) scale(.98);
  transition-duration: var(--dur-instant);
}

.nav-cta-btn svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.nav-cta-btn:hover svg { transform: translateX(2px); }

/* ── Services Dropdown ── */
.nav-has-dropdown { position: relative; }

.nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  cursor: pointer;
  /* Buttons don't inherit these by default; match the sibling <a> links. */
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.nav-chevron {
  transition: transform var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.nav-link-dropdown.dropdown-open .nav-chevron { transform: rotate(180deg); }

/* The panel stays in the DOM so it can animate both ways. It grows out of the
   trigger (origin: top centre) rather than fading in place, and leaves faster
   than it arrives — exits should get out of the way. */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 420px;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15,42,61,.14), 0 4px 12px rgba(15,42,61,.06);
  padding: var(--space-3);
  z-index: 200;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-6px) scale(.97);
  transition: opacity var(--dur-fast) var(--ease-in),
              transform var(--dur-fast) var(--ease-in),
              visibility 0s linear var(--dur-fast);
}

.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s;
}

/* All Services row */
.nav-dropdown-all {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 9px;
  text-decoration: none;
  color: var(--si-ink);
  background: var(--si-surface);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-dropdown-all:hover { background: var(--si-bg-softer); }

.nav-dropdown-all-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--si-brand) 0%, var(--si-brand-mid) 100%);
  color: var(--si-white);
  flex-shrink: 0;
}

.nav-dropdown-all-text { flex: 1; }

.nav-dropdown-arrow {
  color: var(--si-ink-muted);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-dropdown-all:hover .nav-dropdown-arrow { transform: translateX(3px); color: var(--si-brand); }

/* Divider */
.nav-dropdown-divider {
  height: 1px;
  background: var(--si-border);
  margin: var(--space-2) .1rem;
}

/* Service items grid — 2 columns */
.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 9px;
  text-decoration: none;
  color: var(--si-ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-dropdown-item:hover { background: var(--si-bg-softer); }
.nav-dropdown-item:hover .nav-dropdown-label { color: var(--si-brand); }

/* Hierarchy: one service per row, children stacked and indented under their parent */
.nav-dropdown-grid {
  grid-template-columns: 1fr;
  gap: .15rem;
}

.nav-dropdown-children {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: .1rem 0 .25rem var(--space-6);
  padding-left: var(--space-3);
  border-left: 2px solid var(--si-border);
}

.nav-dropdown-item--child {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}
.nav-dropdown-item--child .nav-dropdown-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.nav-dropdown-item--child .nav-dropdown-label { font-size: var(--text-xs); }
.nav-dropdown-item--child .nav-dropdown-sub   { font-size: var(--text-2xs); }

.nav-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--icon-bg, var(--si-brand));
  color: var(--si-white);
  flex-shrink: 0;
  margin-top: 1px;
}

.nav-dropdown-text { display: flex; flex-direction: column; gap: 2px; }

.nav-dropdown-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--si-ink);
  line-height: 1.2;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-dropdown-sub {
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
  line-height: 1.3;
}

/* Collapsed menu: flatten dropdown into nav */
@media (max-width: 1139px) {
  .nav-has-dropdown { width: 100%; }
  .nav-link-dropdown {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }
  .nav-dropdown {
    position: static;
    width: 100%;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    background: var(--si-surface);
    padding: 0;

    /* In the mobile nav the panel sits in the flow, so it opens by animating
       its own height (0fr → 1fr) instead of scaling out of a trigger. */
    display: grid;
    grid-template-rows: 0fr;
    transform: none;
    transition: grid-template-rows var(--dur) var(--ease-out-soft),
                opacity var(--dur-fast) var(--ease-in),
                visibility 0s linear var(--dur);
  }

  .nav-dropdown.is-open {
    grid-template-rows: 1fr;
    transform: none;
    transition: grid-template-rows var(--dur) var(--ease-out-soft),
                opacity var(--dur-fast) var(--ease-out),
                visibility 0s;
  }

  .nav-dropdown-inner { overflow: hidden; min-height: 0; padding: .4rem var(--space-2) var(--space-2); }
  .nav-dropdown-grid { grid-template-columns: 1fr; }
  .nav-dropdown-all { background: transparent; }
}

/* ── Hamburger ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* comfortable tap target */
  padding: var(--space-3);
  background: none;
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--si-ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
  transform-origin: center;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1139px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: flex;
    position: absolute;
    top: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--si-surface);
    border-bottom: 1px solid var(--si-border);
    box-shadow: 0 12px 32px rgba(15,42,61,.1);
    padding: var(--space-3) var(--space-5) var(--space-5);
    /* The page behind is scroll-locked, so on a short phone with the services
       submenu open the panel itself has to scroll or the CTA is unreachable. */
    max-height: calc(100vh - var(--header-h) - var(--topbar-h));
    max-height: calc(100dvh - var(--header-h) - var(--topbar-h));
    overflow-y: auto;
    overscroll-behavior: contain;

    /* The panel is absolutely positioned, so it can stay mounted and slide
       out of the header instead of blinking in and out. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--dur-fast) var(--ease-in),
                transform var(--dur-fast) var(--ease-in),
                visibility 0s linear var(--dur-fast);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur-slow) var(--ease-out-soft),
                visibility 0s;
  }

  /* Rows arrive just behind the panel, ~35ms apart, so the menu reads as one
     movement rather than eight. */
  .site-nav.is-open > * {
    animation: nav-row-in var(--dur) var(--ease-out) backwards;
    animation-delay: calc(60ms + var(--row, 0) * 35ms);
  }
  .site-nav.is-open > :nth-child(2) { --row: 1; }
  .site-nav.is-open > :nth-child(3) { --row: 2; }
  .site-nav.is-open > :nth-child(4) { --row: 3; }
  .site-nav.is-open > :nth-child(5) { --row: 4; }

  @keyframes nav-row-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-link { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
  .nav-cta-btn { margin-left: 0; margin-top: var(--space-3); justify-content: center; padding: var(--space-3) var(--space-5); border-radius: 10px; }
}

@media (max-width: 760px) {
  .brand { flex-shrink: 1; min-width: 0; }
  .brand img { height: 44px; }
  .brand > span { min-width: 0; }   /* lets the name truncate instead of running under the menu button */
  .brand strong { display: block; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* brand-mark (Dignity • Safety • Connection) kept visible — core trust signal */
  .brand-mark { font-size: .6rem; }
}

@media (max-width: 380px) {
  /* Only hide tagline on very small screens where layout breaks */
  .brand-mark { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   BUTTONS  (global)
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  white-space: nowrap;
}

.btn-lg { padding: var(--space-4) var(--space-7); font-size: var(--text-base); }

@media (max-width: 760px) {
  .btn { min-height: 2.75rem; }   /* 44px tap target */
}

/* Under ~400px a nowrap label such as "Book a Free Consultation" is wider
   than the column, so let button text wrap there. */
@media (max-width: 400px) {
  .btn { white-space: normal; line-height: 1.25; text-align: center; }
  .btn-lg { padding-inline: var(--space-5); }
}

.btn:hover  { opacity: .92; transform: translateY(-1px); }
.btn:active {
  transform: translateY(0) scale(.98);
  opacity: 1;
  transition-duration: var(--dur-instant);
}

.btn-primary {
  background: linear-gradient(130deg, var(--si-brand), var(--si-brand-mid));
  color: var(--si-white);
  box-shadow: 0 4px 18px rgba(0,92,168,.28);
}

.btn-secondary {
  background: var(--si-surface);
  color: var(--si-brand);
  border: 1.5px solid var(--si-border);
}

.btn-ghost {
  background: rgba(255,255,255,.1);
  color: var(--si-white);
  border: 1.5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255,255,255,.2); opacity: 1; }

.btn-white {
  background: var(--si-surface);
  color: var(--si-brand-dark);
  box-shadow: var(--si-shadow);
}

.btn-outline-white {
  background: transparent;
  color: var(--si-white);
  border: 1.5px solid rgba(255,255,255,.5);
}
.btn-outline-white:hover { background: rgba(255,255,255,.1); opacity: 1; }

.btn-outline-light {
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 1.5px solid rgba(255,255,255,.25);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5);
}
.btn-outline-light:hover { background: rgba(255,255,255,.1); opacity: 1; }

/* Focus rings */
.btn:focus-visible,
.nav-link:focus-visible,
.brand:focus-visible,
.service-link:focus-visible,
.footer-nav a:focus-visible,
.footer-contact-link:focus-visible {
  outline: 2.5px solid var(--si-focus);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════
   EYEBROW  (reusable label above headings)
   ════════════════════════════════════════════════════════════════ */
.eyebrow {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--si-brand);
  margin-bottom: var(--space-3);
}
.eyebrow-hero  { color: var(--si-accent); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.eyebrow-teal  { color: rgba(255,255,255,.65); }

/* ════════════════════════════════════════════════════════════════
   LEDE  (introductory paragraph, larger than body)
   ════════════════════════════════════════════════════════════════ */
.lede {
  font-size: var(--text-lg);
  line-height: var(--si-lh-loose);
  color: var(--si-ink-muted);
}

/* ════════════════════════════════════════════════════════════════
   SECTION INTRO  (heading + lede above any grid)
   ════════════════════════════════════════════════════════════════ */
.section-intro { max-width: var(--measure); margin-bottom: var(--space-12); }
.section-intro.centered { text-align: center; margin-inline: auto; }
.section-intro h2 { margin-block: var(--space-2) var(--space-3); color: var(--si-ink); }

/* Keep headings from ending on a lone word */
h1, h2, h3 { text-wrap: balance; }
a[href^="tel:"] { white-space: nowrap; }
.section-lede { color: var(--si-ink-muted); font-size: var(--text-md); line-height: var(--si-lh-body); }

/* ════════════════════════════════════════════════════════════════
   1. HERO COVER
   ════════════════════════════════════════════════════════════════ */
.hero-cover {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  min-height: min(90vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Background image delivered as <img> for fetchpriority + preload support */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}

.hero-cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(
      105deg,
      rgba(4,18,36,.78) 0%,
      rgba(0,44,82,.6) 45%,
      rgba(0,80,130,.12) 100%
    );
  background-size: 26px 26px, 100% 100%;
}

.hero-cover-content {
  position: relative;
  z-index: 2;
  padding: var(--space-24) 0 var(--space-20);
  color: var(--si-white);
}
.hero-cover-content > * { max-width: var(--measure); }

.hero-cover-content h1 {
  color: var(--si-white);
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
  margin-bottom: var(--space-5);
}

.lede-hero {
  color: rgba(255,255,255,.82);
  font-size: var(--text-lg);
  line-height: 1.65;
  text-shadow: 0 1px 6px rgba(0,0,0,.2);
  margin-bottom: 0;
}

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
.hero-trust-strip span { display: flex; align-items: center; gap: .35rem; }
.hero-trust-strip svg { color: var(--si-accent); flex-shrink: 0; }

.hero-scroll-hint {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: .55;
  animation: si-bounce 2.2s ease-in-out infinite;
}
@keyframes si-bounce {
  0%,100% { transform: translateX(-50%) translateY(0);    }
  50%      { transform: translateX(-50%) translateY(7px); }
}

@media (max-width: 680px) {
  .hero-cover         { min-height: min(78vh, 600px); }
  .hero-cover-content { padding: var(--space-16) 0 var(--space-10); }
  .hero-actions       { flex-direction: column; align-items: flex-start; }
  .hero-trust-strip   { gap: var(--space-4); }
}

@media (max-width: 420px) {
  .hero-cover-content { padding: var(--space-12) 0 var(--space-8); }
}

/* ════════════════════════════════════════════════════════════════
   2. STATS BAND  — light strip between Trust and CTA
   ════════════════════════════════════════════════════════════════ */
.stats-band {
  background: var(--si-bg-soft);
  border-block: 1px solid var(--si-border-soft);
}

.stats-band-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--space-8) 0;
  gap: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3) var(--space-12);
}

.stat-n {
  font-size: var(--text-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--si-brand);
  line-height: 1;
}

.stat-l {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-ink-faint);
  margin-top: .35rem;
}

.stat-divider {
  width: 1px;
  height: 2.4rem;
  background: var(--si-border);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 640px) {
  .stat-item    { padding: var(--space-3) var(--space-6); }
  .stat-divider { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   3. PILLARS  — soft gradient background
   ════════════════════════════════════════════════════════════════ */
.pillars-section {
  background: linear-gradient(180deg, var(--si-bg-soft) 0%, var(--si-teal-bg) 100%);
  border-block: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
}

.pillar-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-8) var(--space-7) var(--space-7);
  box-shadow: var(--si-shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pillar-card:hover { box-shadow: var(--si-shadow); transform: translateY(-3px); }
.pillar-card h3    { margin-block: var(--space-3) var(--space-2); font-size: var(--text-lg); color: var(--si-ink); }
.pillar-card p     { font-size: var(--text-sm); line-height: var(--si-lh-body); }

.pillar-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--icon-color, var(--si-brand));
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* Three cards hold to ~700px; two-up on a tablet leaves an orphaned third card. */
@media (max-width: 700px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillar-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   4. JOURNEY / HOW IT WORKS  — interactive steps
   ════════════════════════════════════════════════════════════════ */
.journey-section {
  background: var(--si-bg);
  padding: var(--si-section) 0;
}

/* ── Step indicator row ── */
.steps-nav {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-8);
}

.step-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--space-6);
  position: relative;
}

.step-num {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--si-surface);
  border: 2px solid var(--si-border);
  color: var(--si-ink-faint);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  position: relative;
  z-index: 1;
}

.step-lbl {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-ink-faint);
  transition: color var(--dur) var(--ease-out);
  white-space: nowrap;
}

.step-trigger:hover:not(.is-active) .step-num {
  border-color: var(--si-brand);
  color: var(--si-brand);
}

.step-trigger.is-active .step-num {
  background: linear-gradient(135deg, var(--si-brand), var(--si-brand-mid));
  border-color: transparent;
  color: var(--si-white);
  box-shadow: 0 4px 18px rgba(0,92,168,.35);
}

.step-trigger.is-active .step-lbl { color: var(--si-brand); }

.step-trigger:focus-visible { outline: none; }
.step-trigger:focus-visible .step-num {
  outline: 2.5px solid var(--si-focus);
  outline-offset: 3px;
}

/* connector line between steps */
.step-connector {
  flex: 1;
  max-width: 9rem;
  min-width: 0;
  height: 2px;
  background: var(--si-border);
  margin-top: var(--space-6); /* centres on the 3rem circle */
}

/* ── Detail panel ── */
.steps-body { position: relative; }

.step-panel {
  display: none;
}

.step-panel.is-active {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: flex-start;
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-10);
  animation: step-in var(--dur-slow) var(--ease-out);
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-panel-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--si-radius);
  background: var(--sp-color, var(--si-brand));
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  flex-shrink: 0;
}

.step-panel-body h3 {
  font-size: var(--text-xl);
  color: var(--si-ink);
  margin-bottom: var(--space-2);
}

.step-panel-body > p {
  font-size: var(--text-base);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

.step-checklist {
  list-style: none;
  margin-bottom: var(--space-6);
}

.step-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: .4rem 0;
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
  border-bottom: 1px solid var(--si-border-soft);
}

.step-checklist li:last-child { border-bottom: none; }

.step-checklist li::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
  background: var(--si-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: .44rem;
}

/* shared section footer link */
.section-foot-link {
  margin-top: var(--space-8);
  text-align: center;
}

.section-foot-link a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--si-brand);
  text-decoration: none;
  transition: opacity var(--dur) var(--ease-out);
}

.section-foot-link a:hover { opacity: .7; }

@media (max-width: 640px) {
  .step-trigger  { padding: 0 var(--space-3); }
  .step-connector{ max-width: 4rem; }
  .step-lbl      { font-size: var(--text-2xs); }

  .step-panel.is-active {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════════
   5. SERVICES  — soft blue background
   ════════════════════════════════════════════════════════════════ */
.services-section {
  background: var(--si-bg-soft);
  border-block: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.service-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--si-shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  position: relative;
}

.service-card:hover {
  box-shadow: var(--si-shadow);
  border-color: rgba(0,92,168,.2);
  transform: translateY(-3px);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border-soft);
  display: grid;
  place-items: center;
  color: var(--si-brand);
  margin-bottom: var(--space-4);
  transition: background var(--dur) var(--ease-out);
}

.service-card:hover .service-icon {
  background: rgba(0,92,168,.08);
}

.service-card h3 { font-size: var(--text-md); color: var(--si-ink); margin-bottom: var(--space-2); }
.service-card p  { flex: 1; font-size: var(--text-sm); line-height: var(--si-lh-body); }

/* Included services listed inside a service card */
.service-includes-label,
.service-card .service-includes-label {
  flex: none;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--si-ink-faint);
}

.service-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0 0 var(--space-4);
}

.service-includes a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--si-border-soft);
  border-radius: 10px;
  background: var(--si-bg-soft);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.service-includes a:hover {
  border-color: var(--si-border);
  background: var(--si-surface);
  transform: translateX(2px);
}

.service-includes-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--si-white);
  background: var(--sub-color);
}

.service-includes-text { display: flex; flex-direction: column; }
.service-includes-text strong {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--si-ink);
  line-height: 1.25;
}
.service-includes-text small {
  font-size: var(--text-2xs);
  color: var(--si-ink-faint);
}

/* At-a-glance facts on the featured card */
.service-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: var(--space-4) 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0,167,160,.18);
  font-size: var(--text-xs);
  color: var(--si-ink-muted);
}
.service-facts strong {
  display: inline-block;
  min-width: 2.6rem;
  color: var(--si-accent-ink);
  font-weight: 800;
}

.service-link {
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--si-brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: gap var(--dur) var(--ease-out);
}
.service-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--si-radius-lg);
}
.service-link:hover { gap: var(--space-2); }

/* Featured card */
.service-card-featured {
  background: linear-gradient(135deg, var(--si-bg-softer) 0%, var(--si-teal-bg) 100%);
  border-color: rgba(0,167,160,.2);
}

.service-card-featured .service-icon {
  background: rgba(0,167,160,.1);
  border-color: rgba(0,167,160,.2);
  color: var(--si-accent);
}


.service-featured-tag { top: 1.05rem; }

.service-featured-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-accent-ink);
  background: rgba(0,167,160,.12);
  border: 1px solid rgba(0,167,160,.2);
  border-radius: 999px;
  padding: .22rem var(--space-2);
}

.service-icon-featured { flex-shrink: 0; }

@media (max-width: 760px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   6. TRUST / TESTIMONIAL  — dark background
   ════════════════════════════════════════════════════════════════ */
.trust-section {
  background: var(--si-ink);
  padding: var(--si-section) 0;
}

.trust-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.trust-stars {
  display: flex;
  gap: .25rem;
  color: var(--si-star);
  margin-bottom: var(--space-5);
}

/* Quote column */
.trust-quote-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.quote-glyph { color: rgba(255,255,255,.08); flex-shrink: 0; }

.trust-quote {
  margin: 0;
  padding: 0;
  border: none;
}

.trust-quote p {
  font-size: var(--text-quote);
  line-height: 1.65;
  font-weight: 500;
  color: rgba(232,242,250,.92);
}

.trust-quote footer {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: rgba(232,242,250,.72);
}

/* Stats column */
.trust-stats { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }

.trust-stat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--si-radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.trust-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,167,160,.15);
  border: 1px solid rgba(0,167,160,.2);
  display: grid;
  place-items: center;
  color: var(--si-accent);
  flex-shrink: 0;
}

.trust-stat strong {
  display: block;
  font-size: var(--text-base);
  color: var(--si-accent-on-dark);
  margin-bottom: .18rem;
}

.trust-stat span { font-size: var(--text-xs); color: rgba(232,242,250,.65); }

@media (max-width: 860px) {
  .trust-inner { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ════════════════════════════════════════════════════════════════
   8. FINAL CTA  — brand blue gradient
   ════════════════════════════════════════════════════════════════ */
.cta-section {
  background:
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(135deg, var(--si-brand-dark) 0%, var(--si-brand-bright) 100%);
  background-size: 26px 26px, 100% 100%;
  padding: var(--si-section) 0;
  position: relative;
}

.cta-inner {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

.cta-inner h2 {
  color: var(--si-white);
  margin-block: var(--space-2) var(--space-4);
  font-size: var(--text-h2);
}

.cta-inner p { color: rgba(255,255,255,.75); font-size: var(--text-md); margin-bottom: 0; }

.cta-email {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.94);
}
.cta-email a { color: var(--si-white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cta-reassurance {
  margin-top: var(--space-6);
  font-size: var(--text-2xs);
  color: rgba(255,255,255,.94);   /* ≥4.5:1 on the lightest end of the gradient */
  letter-spacing: .02em;
}

.cta-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-8);
}

@media (max-width: 480px) { .cta-actions { flex-direction: column; align-items: center; } }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.site-footer-full {
  background:
    radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--si-ink-deep);
  background-size: 26px 26px, 100% 100%;
  color: var(--si-ink-on-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.5fr;
  gap: var(--space-12);
  padding: var(--space-18) 0 var(--space-14);
}

/* Footer lockup mirrors the header: full-colour logo on a white chip */
.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--si-white);
}
.footer-logo-chip {
  display: grid;
  place-items: center;
  padding: .35rem .45rem;
  background: var(--si-surface);
  border-radius: var(--si-radius-sm);
  flex-shrink: 0;
}
.footer-logo-chip img { height: 44px; width: auto; display: block; }
.footer-lockup strong { display: block; font-size: var(--text-base); font-weight: 700; line-height: 1.2; }
.footer-lockup small {
  display: block;
  margin-top: .15rem;
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--si-accent);
}

.footer-tagline {
  margin-block: var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: rgba(200,221,233,.7);
  max-width: 28ch;
}

.footer-location {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-2xs);
  color: rgba(200,221,233,.5);
}

.footer-location svg { flex-shrink: 0; opacity: .6; }

.footer-heading {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--si-accent);
  margin-bottom: var(--space-4);
  display: block;
}

.footer-nav,
.footer-services,
.footer-contact { display: flex; flex-direction: column; gap: .05rem; }

.footer-nav a,
.footer-services a {
  color: rgba(200,221,233,.7);
  text-decoration: none;
  font-size: var(--text-xs);
  padding: .33rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-nav a:hover,
.footer-services a:hover { color: var(--si-white); }

@media (max-width: 760px) {
  .footer-nav a,
  .footer-services a { padding-block: var(--space-2); }   /* ≥40px rows */
}

/* Services listed under their parent service */
.footer-services .footer-sub-link {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-2xs);
}
.footer-services .footer-sub-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95rem;
  width: .5rem;
  height: 1px;
  background: rgba(200,221,233,.45);
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(200,221,233,.7);
  text-decoration: none;
  font-size: var(--text-xs);
  padding: .33rem 0;
  transition: color var(--dur-fast) var(--ease-out);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.footer-contact-link:hover { color: var(--si-white); }
@media (max-width: 760px) {
  .footer-contact-link { padding-block: .45rem; }   /* ≥40px rows */
}
.footer-contact-link svg   { flex-shrink: 0; opacity: .55; }

.footer-cta {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  align-self: flex-start;
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); }

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  font-size: var(--text-2xs);
  color: rgba(200,221,233,.65);
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-10); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 48ch; }
}

@media (max-width: 640px) {
  /* Brand spans full width; Navigate + Services sit side-by-side; Contact spans full width */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-8);
    padding: var(--space-10) 0 var(--space-8);
  }
  .footer-brand   { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-tagline { max-width: none; font-size: var(--text-xs); }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   INNER PAGES  (About, Services, Contact, etc.)
   ════════════════════════════════════════════════════════════════ */
.section { padding: var(--space-14) 0; }

/* scroll-margin for sticky header on all anchored sections */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.about-hero-wrap {
  background-color: var(--si-bg-softer);
  background-image: radial-gradient(circle, rgba(0,92,168,.09) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: center;
  padding: var(--space-18) 0 var(--space-14);
}

.about-hero h1 { color: var(--si-ink); }

.about-lede {
  color: var(--si-ink-muted);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 52ch;
  margin-top: var(--space-3);
}

.about-hero-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--si-radius-lg);
  box-shadow: var(--si-shadow-lg);
}

@media (max-width: 820px) {
  .about-hero { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-hero-media { order: -1; }
  .about-hero-media img { height: 280px; }
}

.about-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.about-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border);
  border-radius: 999px;
  padding: .35rem var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-ink-muted);
}

.about-tag svg { color: var(--si-brand); flex-shrink: 0; }

/* ── Story ── */
.about-story {
  background-color: var(--si-bg-soft);
  background-image: radial-gradient(circle, rgba(0,92,168,.065) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  border-block: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.about-story-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}

.about-story-media { position: relative; }

.about-story-media img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: var(--si-radius-lg);
  border: 1px solid var(--si-border-soft);
  box-shadow: var(--si-shadow-lg);
}

.about-story-pill {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--si-surface);
  color: var(--si-ink-muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: .45rem var(--space-4);
  border-radius: 999px;
  box-shadow: var(--si-shadow);
  border: 1px solid var(--si-border-soft);
}

.about-story-copy h2  { margin-block: var(--space-2) var(--space-4); }
.about-story-copy > p { margin-bottom: var(--space-3); }

@media (max-width: 820px) {
  .about-story-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-story-media img { max-height: 340px; }
}

/* ── Values ── */
.about-values {
  background-color: var(--si-surface);
  background-image:
    linear-gradient(rgba(0,92,168,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,92,168,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

/* ── Team ── */
.about-team {
  padding: var(--si-section) 0;
  background-color: var(--si-teal-bg);
  background-image: radial-gradient(circle, rgba(0,167,160,.1) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  max-width: var(--narrow);
  margin-inline: auto;
}

.team-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-8);
  box-shadow: var(--si-shadow-sm);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.team-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--si-brand), var(--si-accent));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.team-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.team-initials {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--si-white);
  letter-spacing: -.02em;
}

.team-info h3 { font-size: var(--text-lg); color: var(--si-ink); margin-bottom: .25rem; }

.team-role {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-accent-ink);
  margin-bottom: var(--space-3) !important;
}

.team-info p { font-size: var(--text-sm); line-height: var(--si-lh-body); }

@media (max-width: 560px) {
  .team-card { flex-direction: column; gap: var(--space-4); }
}

/* ── Credentials band ── */
.about-creds {
  background: var(--si-ink);
  padding: var(--space-10) 0;
}

.about-creds-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.about-cred-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-3) var(--space-6);
  color: rgba(232,242,250,.88);
}

.about-cred-item strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--si-white);
  margin-bottom: .15rem;
}

.about-cred-item span { display: block; font-size: var(--text-2xs); line-height: 1.45; color: rgba(232,242,250,.7); }

.about-cred-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0,167,160,.15);
  border: 1px solid rgba(0,167,160,.2);
  display: grid;
  place-items: center;
  color: var(--si-accent);
  flex-shrink: 0;
}

.about-cred-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 1100px) {
  .about-creds-inner { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: var(--space-4); }
  .about-cred-item   { padding: var(--space-3) var(--space-6); flex: none; }
  .about-cred-divider{ display: none; }
}

@media (max-width: 640px) {
  .about-creds-inner { grid-template-columns: minmax(0, max-content); }
  .about-cred-item   { padding: var(--space-3) 0; }
}

/* ════════════════════════════════════════════════════════════════
   SERVICES PAGE
   ════════════════════════════════════════════════════════════════ */

.svc-hero {
  background: var(--si-bg);
  border-bottom: 1px solid var(--si-border);
}

.svc-hero-inner {
  display: grid;
  /* minmax(0, …) lets the columns shrink below the heading's longest
     unbreakable line; a plain 1fr track floors at min-content and pushes the
     hero past the viewport on phones. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-14);
  align-items: center;
  padding: var(--space-20) 0 var(--space-18);
}

.svc-hero-copy h1 { color: var(--si-ink); margin-top: .2rem; }

.svc-hero-img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--si-radius);
  box-shadow: var(--si-shadow-lg);
}

.svc-section { padding: var(--si-section) 0; }

.svc-section-soft {
  background: var(--si-bg-soft);
  border-block: 1px solid var(--si-border-soft);
}

.svc-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.svc-inner-reverse .svc-content   { order: 2; }
.svc-inner-reverse .svc-icon-col,
.svc-inner-reverse .svc-stat-panel { order: 1; }

.svc-content h2 { margin: .4rem 0 var(--space-4); }
.svc-content p  { color: var(--si-ink-muted); line-height: 1.65; margin: 0 0 var(--space-4); }

.svc-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.svc-icon-block {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--si-shadow);
}

.svc-icon-brand   { background: linear-gradient(145deg, var(--si-brand), var(--si-brand-mid)); }
.svc-icon-accent  { background: linear-gradient(145deg, var(--si-accent), var(--si-accent-dark)); }
.svc-icon-dark    { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }

.svc-icon-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--si-ink);
}

.svc-icon-label-light { color: rgba(255,255,255,.9); }

.svc-icon-tag {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-accent-ink);
  background: rgba(0,167,160,.1);
  border-radius: 999px;
  padding: .28rem var(--space-3);
}

.svc-icon-tag-light {
  color: var(--si-accent);
  background: rgba(0,167,160,.18);
  border: 1px solid rgba(0,167,160,.3);
}

.svc-address-note {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-2xs);
  color: rgba(200,221,233,.65);
  margin-top: .2rem;
  font-style: normal;
}

.svc-featured { background: var(--si-ink); }
.svc-featured h2 { color: var(--si-white); }
.svc-featured .svc-content p { color: rgba(200,221,233,.82); }
.svc-featured-checklist li { color: rgba(200,221,233,.8); border-bottom-color: rgba(255,255,255,.1); }
.svc-featured .svc-eyebrow { margin-top: var(--space-3); }
.svc-featured-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.svc-featured-checklist li::before { background: var(--si-accent); }
.svc-eyebrow-light { color: var(--si-accent) !important; }

.svc-badge {
  display: inline-block;
  background: var(--si-accent-ink);
  color: var(--si-white);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 999px;
  padding: .3rem var(--space-3);
}

.pillars-inner { padding: var(--si-section) 0; }

/* ── Gradient stat panels (service sections) ── */
.svc-stat-panel {
  background: linear-gradient(135deg, var(--panel-from), var(--panel-to));
  border-radius: var(--si-radius-lg);
  padding: var(--space-10) var(--space-8) var(--space-8);
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.svc-panel-num {
  position: absolute;
  top: -0.12em;
  right: -0.04em;
  font-size: clamp(7rem, 14vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.08);
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.svc-panel-tag {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  margin: 0 0 var(--space-5);
}

.svc-panel-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: var(--space-5);
}

.svc-panel-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 0 var(--space-3);
}

.svc-panel-stat:first-child { padding-left: 0; }
.svc-panel-stat:not(:first-child) { border-left: 1px solid rgba(255,255,255,.12); }

.svc-panel-val {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--si-white);
  line-height: 1;
  letter-spacing: -.02em;
}

.svc-panel-lbl {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.55);
}

.svc-panel-address {
  font-size: var(--text-2xs);
  font-style: normal;
  color: rgba(255,255,255,.8);
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.svc-stat-panel-dark .svc-panel-tag { color: rgba(255,255,255,.8); }

@media (max-width: 860px) {
  .svc-hero-inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-14) 0 var(--space-12); gap: var(--space-10); }
  .svc-hero-img img { height: 320px; }
  .svc-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .svc-inner-reverse .svc-content    { order: 1; }
  .svc-inner-reverse .svc-icon-col,
  .svc-inner-reverse .svc-stat-panel { order: 2; }
  .svc-stat-panel { min-height: 260px; }
}

@media (max-width: 600px) {
  .svc-section { padding: var(--space-14) 0; }
  .svc-icon-block { width: 90px; height: 90px; border-radius: 20px; }
  .svc-stat-panel { min-height: 220px; padding: var(--space-7) var(--space-6) var(--space-6); }
  .svc-panel-val { font-size: var(--text-lg); }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════════════════ */

.contact-hero {
  background: var(--si-ink);
  padding: var(--space-20) 0 var(--space-18);
}

.contact-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-hero-copy h1 { color: var(--si-white); margin: .4rem 0 var(--space-4); }

.contact-lede {
  color: rgba(200,221,233,.78);
  font-size: var(--text-md);
  line-height: 1.65;
}

.contact-trust-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(200,221,233,.75);
}

.contact-trust-strip span { display: flex; align-items: center; gap: .4rem; }
.contact-trust-strip svg  { color: var(--si-accent); flex-shrink: 0; }

.contact-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* Phone and hours are short; email and address get a full row so neither wraps mid-word */
.contact-info-cards { grid-template-areas: "phone hours" "email email" "address address"; }
.contact-info-cards > .contact-info-card:nth-child(1) { grid-area: phone; }
.contact-info-cards > .contact-info-card:nth-child(2) { grid-area: email; }
.contact-info-cards > .contact-info-card:nth-child(3) { grid-area: address; }
.contact-info-cards > .contact-info-card:nth-child(4) { grid-area: hours; }

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--si-radius-sm);
  padding: var(--space-4) var(--space-4);
}

.contact-info-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,167,160,.15);
  color: var(--si-accent);
}

.contact-info-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--si-accent);
  margin: 0 0 .25rem;
}

.contact-info-value {
  font-size: var(--text-sm);
  color: rgba(200,221,233,.9);
  text-decoration: none;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

a.contact-info-value:hover { color: var(--si-white); text-decoration: underline; }
.contact-info-closed { color: rgba(200,221,233,.45); font-size: .88em; }

/* Form section */
.contact-grid-section {
  background: var(--si-surface);
  padding: var(--si-section) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-18);
  align-items: start;
}

.why-reach-out h2 { margin: .4rem 0 var(--space-3); }

.why-steps {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.why-step { display: flex; gap: var(--space-4); align-items: flex-start; }

.why-step-num {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--si-brand), var(--si-brand-mid));
  color: var(--si-white);
  font-weight: 800;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,92,168,.28);
}

.why-step-body strong { display: block; font-size: var(--text-base); margin-bottom: .3rem; color: var(--si-ink); }
.why-step-body p      { margin: 0; font-size: var(--text-sm); color: var(--si-ink-muted); line-height: var(--si-lh-body); }

.contact-form-wrap {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius);
  padding: var(--space-8) var(--space-8) var(--space-8);
  box-shadow: var(--si-shadow);
}

.contact-form-title { font-size: var(--text-xl); color: var(--si-ink); margin: 0 0 .3rem; }

.contact-form-note {
  font-size: var(--text-xs);
  color: var(--si-ink-muted);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--si-border);
}

.form-group { margin-bottom: var(--space-5); position: relative; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-row .form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--si-ink);
  margin-bottom: .4rem;
}

.form-required {
  position: absolute;
  right: 0;
  top: 0;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--si-accent-ink);
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: var(--si-surface);
  border: 1.5px solid var(--si-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--si-ink);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--si-ink-faint); opacity: .8; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--si-brand);
  box-shadow: 0 0 0 3px rgba(0,92,168,.12);
}

/* The border change alone is too faint to find the caret by; keyboard focus
   gets a solid ring as well. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--si-focus);
  outline-offset: 2px;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233c5c74' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-textarea { resize: vertical; min-height: 120px; }
.form-submit-group { margin-top: var(--space-2); margin-bottom: 0; }

/* Cloudflare Turnstile (shared/_turnstile). Its iframe is a fixed 300px, so
   give it room and let a narrow phone scale it rather than scroll sideways. */
.turnstile-widget { margin: .25rem 0 var(--space-4); min-height: 65px; max-width: 100%; overflow: hidden; }

/* Honeypot — visually hidden from real users */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-submit {
  width: 100%;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* Location section */
.location-section {
  background: var(--si-bg);
  padding: var(--si-section) 0;
  border-top: 1px solid var(--si-border-soft);
}

.location-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.location-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius);
  padding: var(--space-8);
  box-shadow: var(--si-shadow-sm);
}

.location-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,92,168,.08);
  color: var(--si-brand);
  border-radius: 14px;
  margin-bottom: var(--space-4);
}

.location-card h3   { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--si-ink); }
.location-address   { font-size: var(--text-base); color: var(--si-ink); line-height: 1.6; margin: 0 0 var(--space-3); font-style: normal; }
.location-sub       { font-size: var(--text-xs); color: var(--si-ink-muted); line-height: 1.55; margin: var(--space-2) 0 var(--space-5); }

.location-map-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

.hours-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-2); }

.hours-table th,
.hours-table td {
  padding: .4rem 0;
  font-size: var(--text-sm);
  text-align: left;
  border-bottom: 1px solid var(--si-border-soft);
}

.hours-table th   { font-weight: 600; color: var(--si-ink); padding-right: var(--space-6); }
.hours-table td   { color: var(--si-ink-muted); }
.hours-closed th,
.hours-closed td  { color: var(--si-ink-faint); }

/* "Prefer to call?" strip */
.contact-cta-strip {
  background: var(--si-bg-soft);
  border-block: 1px solid var(--si-border-soft);
  padding: var(--space-10) 0;
}

.contact-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.contact-cta-headline { font-size: var(--text-2xl); font-weight: 700; color: var(--si-ink); margin: 0 0 .25rem; }
.contact-cta-sub      { font-size: var(--text-xs); color: var(--si-ink-muted); margin: 0; }
.contact-cta-btn      { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

@media (max-width: 900px) {
  .contact-hero-inner { grid-template-columns: 1fr; gap: var(--space-10); padding-bottom: var(--space-12); }
  .contact-grid       { grid-template-columns: 1fr; gap: var(--space-12); }
  .location-cards     { grid-template-columns: 1fr; }
}

/* Drop contact info cards to 1-col earlier so email addresses don't overflow */
@media (max-width: 700px) {
  .contact-info-cards { grid-template-columns: 1fr; grid-template-areas: "phone" "email" "address" "hours"; }
}

@media (max-width: 600px) {
  .contact-hero     { padding: var(--space-14) 0 var(--space-12); }
  .contact-trust-strip { flex-direction: column; gap: var(--space-3); }
  .form-row         { grid-template-columns: 1fr; gap: 0; }
  .contact-form-wrap{ padding: var(--space-6) var(--space-5) var(--space-6); }
  .location-card    { padding: var(--space-6); }
}

@media (max-width: 560px) {
  .contact-cta-strip-inner { flex-direction: column; align-items: flex-start; }
  .contact-cta-btn  { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGES
   ════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.svc-breadcrumb {
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--space-3) 0;
}

.svc-breadcrumb-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem var(--space-2);
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
}

.svc-breadcrumb-inner a {
  color: var(--si-brand);
  text-decoration: none;
  font-weight: 600;
}

.svc-breadcrumb-inner a:hover { text-decoration: underline; }
.svc-breadcrumb-inner a { white-space: nowrap; }

/* ── Hero ── */
.svc-includes {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
}
.svc-includes a {
  color: var(--si-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "Part of …" note on a child service page */
.svc-parent-note {
  margin: .35rem 0 .1rem;
  font-size: var(--text-xs);
  color: var(--si-ink-muted);
}
.svc-parent-note a {
  display: inline-block;
  padding: .4rem 0;         /* tap target */
  color: var(--si-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.svc-detail-hero {
  background: linear-gradient(155deg, var(--si-bg-softer) 0%, var(--si-border) 55%, var(--si-teal-bg) 100%);
  border-bottom: 1px solid var(--si-border-soft);
}

.svc-detail-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-14);
  align-items: center;
  padding: var(--space-18) 0 var(--space-16);
}

.svc-detail-copy h1 { margin: .3rem 0 var(--space-4); }
.svc-detail-copy .lede { color: var(--si-ink-muted); line-height: 1.7; }

.svc-detail-panel { min-height: 320px; }

/* ── Features grid ── */
.svc-detail-features {
  background: var(--si-surface);
  padding: var(--si-section) 0;
}

.svc-detail-features .section-intro { margin-bottom: 0; }

.svc-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.svc-feature-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.svc-feature-card:hover {
  border-color: rgba(0,92,168,.25);
  box-shadow: 0 4px 16px rgba(0,92,168,.08);
}

.svc-feature-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--dot-color, var(--si-brand));
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: .35rem;
}

.svc-feature-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: .1rem;
}

.svc-feature-card h3 { font-size: var(--text-md); color: var(--si-ink); margin-bottom: .4rem; }
.svc-feature-card p  { font-size: var(--text-sm); color: var(--si-ink-muted); line-height: var(--si-lh-body); margin: 0; }

/* ── How It Works steps ── */
.svc-detail-steps {
  background: linear-gradient(180deg, var(--si-bg-softer) 0%, var(--si-teal-bg) 100%);
  border-block: 1px solid var(--si-border);
  padding: var(--si-section) 0;
}

.svc-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--measure);
  margin: var(--space-10) auto 0;
  list-style: none;
  counter-reset: none;
}

.svc-step-item {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.svc-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--step-color, var(--si-brand));
  color: var(--si-white);
  font-size: var(--text-lg);
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.svc-step-body h3 { font-size: var(--text-md); color: var(--si-ink); margin-bottom: .35rem; }
.svc-step-body p  { font-size: var(--text-sm); color: var(--si-ink-muted); line-height: var(--si-lh-body); margin: 0; }

/* ── FAQ ── */
.svc-detail-faq {
  background: var(--si-surface);
  padding: var(--si-section) 0;
}

.faq-list {
  max-width: var(--measure);
  margin: var(--space-10) auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--si-border-soft);
}

.faq-item:first-child { border-top: 1px solid var(--si-border-soft); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--si-ink);
  font-family: inherit;
}

.faq-question:hover { color: var(--si-brand); }

.faq-icon {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
  color: var(--si-ink-muted);
}

.faq-item.is-open .faq-icon { transform: rotate(180deg); color: var(--si-brand); }

.faq-answer {
  padding: 0 0 var(--space-5);
  overflow: hidden; /* the controller animates this panel's height */
}

.faq-answer p {
  font-size: var(--text-sm);
  line-height: var(--si-lh-loose);
  color: var(--si-ink-muted);
  margin: 0;
}

.faq-footer {
  text-align: center;
  margin-top: var(--space-10);
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
}

.faq-footer a {
  color: var(--si-brand);
  font-weight: 600;
  text-decoration: none;
}

.faq-footer a:hover { text-decoration: underline; }

/* ── Other services ── */
/* Included services on a parent service page */
.svc-detail-children {
  background: var(--si-bg-soft);
  border-top: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.svc-detail-others {
  background: var(--si-bg-soft);
  border-top: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.svc-others-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.svc-other-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--si-radius-lg);
  overflow: hidden;
  border: 1px solid var(--si-border-soft);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  box-shadow: var(--si-shadow-sm);
}

.svc-other-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--si-shadow);
}

.svc-other-panel {
  background: linear-gradient(135deg, var(--panel-from), var(--panel-to));
  height: 80px;
  position: relative;
  overflow: hidden;
}

.svc-other-num {
  position: absolute;
  bottom: -0.15em;
  right: .2rem;
  font-size: 4.5rem;
  font-weight: 900;
  color: rgba(255,255,255,.12);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
}

.svc-other-body {
  padding: var(--space-4);
  background: var(--si-surface);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.svc-other-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--si-ink);
  margin: 0 0 .25rem;
  line-height: 1.3;
}

.svc-other-sub {
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
  flex: 1;
}

.svc-other-link {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--si-brand);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .svc-detail-hero-inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-14) 0 var(--space-12); gap: var(--space-10); }
  .svc-feature-grid      { grid-template-columns: 1fr; }
  .svc-others-grid       { grid-template-columns: 1fr 1fr; }
  .svc-others-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .svc-others-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .svc-other-panel { height: 60px; }
  .svc-other-num   { font-size: 3.5rem; }
  .svc-detail-panel { min-height: 240px; }
}

@media (max-width: 380px) {
  .svc-others-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH  — small-screen fixes across all pages
   ════════════════════════════════════════════════════════════════ */

/* Buttons: full-width stacking on very narrow screens */
@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { text-align: center; justify-content: center; }
  .cta-actions  { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { text-align: center; justify-content: center; }
}

/* Pillar cards: tighten padding on phones */
@media (max-width: 480px) {
  .pillar-card { padding: var(--space-6) var(--space-5); }
  .pillar-icon-wrap { width: 44px; height: 44px; border-radius: 11px; margin-bottom: var(--space-4); }
}

/* About story & values: reduce section padding on phones */
@media (max-width: 600px) {
  .about-hero   { padding: var(--space-12) 0 var(--space-10); }
  .about-hero-media img { height: 220px; }
}

@media (max-width: 760px) {
  .about-story  { padding: var(--si-section) 0; } /* inherits 3.5rem from :root override */
  .about-values { padding: var(--si-section) 0; }
  .about-team   { padding: var(--si-section) 0; }
}

/* Services featured (Kane Homestead) dark section: lighter padding on phones */
@media (max-width: 600px) {
  .svc-featured .svc-inner { gap: var(--space-8); }
  .svc-panel-stats { gap: 0; }
  .svc-panel-stat  { padding: 0 var(--space-2); }
  .svc-panel-stat:first-child { padding-left: 0; }
}

/* Why Choose Us pillars on services page */
@media (max-width: 520px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* Flash bar: ensure dismiss button doesn't overlap on small screens */
@media (max-width: 480px) {
  .flash-bar-inner { padding: 0 var(--space-12) 0 var(--space-4); }
  .flash-dismiss   { right: .75rem; }
}

/* ════════════════════════════════════════════════════════════════
   FORM VALIDATION  — inline field feedback
   ════════════════════════════════════════════════════════════════ */

.form-input.is-valid,
.form-textarea.is-valid {
  border-color: var(--si-success);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: var(--space-10);
}

.form-input.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--si-danger);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: var(--space-10);
}

.form-error {
  display: block;
  /* Space is reserved even while empty. Otherwise pressing Send blurs the
     field being fixed, the message appears, the button moves out from under
     the pointer, and the click never lands. */
  min-height: 1.15em;
  font-size: var(--text-2xs);
  color: var(--si-danger);
  margin-top: .3rem;
  font-weight: 500;
}
/* Never use the hidden attribute on this slot: Tailwind's preflight makes
   [hidden] display:none from inside a cascade layer, which beats any
   unlayered override. The slot is simply emptied instead. */

/* ════════════════════════════════════════════════════════════════
   BOOKING PAGES  — /book and a customer's /book/:token
   ════════════════════════════════════════════════════════════════ */

.form-error-summary {
  background: var(--si-danger-bg);
  border: 1px solid var(--si-danger-border);
  border-radius: var(--si-radius-sm);
  color: var(--si-danger-ink);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.form-error-summary p { margin: 0; }
.form-error-summary p + p { margin-top: .25rem; }

.booking-hero { padding: var(--space-18) 0 var(--space-16); }
.booking-hero h1 { color: var(--si-white); margin: .4rem 0 var(--space-4); }
.booking-lede { color: rgba(200,221,233,.85); max-width: var(--measure); font-size: var(--text-md); line-height: 1.65; }

.booking-section { background: var(--si-bg-soft); padding: var(--si-section) 0; }

.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-14);
  align-items: start;
}
.booking-aside { position: sticky; top: 6rem; }

.booking-form-wrap,
.booking-status-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius);
  box-shadow: var(--si-shadow);
  padding: var(--space-8) var(--space-8) var(--space-8);
  min-width: 0;
}

.booking-step { border: 0; margin: 0 0 var(--space-7); padding: 0; min-width: 0; }
.booking-step-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--si-ink);
  margin-bottom: var(--space-4);
  padding: 0;
}
.booking-step-num {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--si-brand);
  color: var(--si-white);
  font-size: var(--text-2xs);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Radio cards: the input stays visible and focusable; the card is its label. */
.booking-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.booking-option,
.booking-method,
.booking-slot {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: 1.5px solid var(--si-border);
  border-radius: 12px;
  background: var(--si-surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.booking-option { padding: var(--space-4) var(--space-4); }
.booking-option input,
.booking-method input,
.booking-slot input { margin: .2rem 0 0; accent-color: var(--si-brand); flex-shrink: 0; width: 1.05rem; height: 1.05rem; }
.booking-option-body strong { display: block; color: var(--si-ink); font-size: var(--text-sm); margin-bottom: .2rem; }
.booking-option-body span { display: block; color: var(--si-ink-muted); font-size: var(--text-2xs); line-height: 1.5; }
.booking-option:hover,
.booking-method:hover,
.booking-slot:hover { border-color: var(--si-brand-mid); }
.booking-option:has(input:checked),
.booking-method:has(input:checked),
.booking-slot:has(input:checked) { border-color: var(--si-brand); background: var(--si-bg-soft); box-shadow: 0 0 0 1px var(--si-brand) inset; }
.booking-option:has(input:focus-visible),
.booking-method:has(input:focus-visible),
.booking-slot:has(input:focus-visible) { outline: 2px solid var(--si-focus); outline-offset: 2px; }

.booking-methods { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.booking-method { padding: var(--space-3) var(--space-4); align-items: center; font-weight: 600; font-size: var(--text-sm); color: var(--si-ink); }
.booking-method input { margin: 0; }

/* Day tabs scroll sideways inside the card rather than widening the page. */
.booking-days {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: .15rem .15rem var(--space-2);
  margin-bottom: var(--space-3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.booking-day {
  flex: 0 0 auto;
  min-width: 4.6rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: var(--space-2) var(--space-2);
  border: 1.5px solid var(--si-border);
  border-radius: 12px;
  background: var(--si-surface);
  color: var(--si-ink);
  font: inherit;
  cursor: pointer;
}
.booking-day:hover:not(:disabled) { border-color: var(--si-brand-mid); }
.booking-day:focus-visible { outline: 2px solid var(--si-focus); outline-offset: 2px; }
.booking-day.is-active { background: var(--si-brand); border-color: var(--si-brand); color: var(--si-white); }
.booking-day:disabled { cursor: not-allowed; opacity: .5; background: var(--si-bg-softer); }
.booking-day-name { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.booking-day-date { font-size: var(--text-base); font-weight: 800; }
.booking-day-count { font-size: var(--text-2xs); opacity: .85; }

.booking-slot-group { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.booking-slot-legend { font-size: var(--text-xs); font-weight: 700; color: var(--si-ink-muted); margin-bottom: var(--space-2); padding: 0; }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-2); }
.booking-slot { padding: var(--space-2) var(--space-3); align-items: center; font-weight: 700; font-size: var(--text-sm); color: var(--si-ink); }
.booking-slot input { margin: 0; }
.booking-hint { font-size: var(--text-2xs); color: var(--si-ink-faint); margin: .25rem 0 0; }
.booking-empty {
  background: var(--si-bg-soft);
  border: 1px dashed var(--si-border);
  border-radius: 12px;
  padding: var(--space-4) var(--space-4);
  color: var(--si-ink-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* A customer's own booking page. */
.booking-status-shell { max-width: var(--measure); }
.booking-status {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  padding: .3rem var(--space-3);
  background: var(--si-bg-softer);
  color: var(--si-ink-muted);
}
.booking-status--requested { background: var(--si-warning-bg); color: var(--si-warning-ink); }
.booking-status--confirmed { background: var(--si-teal-bg); color: var(--si-teal-ink); }
.booking-status--completed { background: var(--si-success-bg); color: var(--si-success-ink); }
.booking-status--declined,
.booking-status--cancelled { background: var(--si-danger-bg); color: var(--si-danger-ink); }
.booking-status-title { font-size: var(--text-title); color: var(--si-ink); margin: var(--space-3) 0 var(--space-2); }
.booking-status-note { color: var(--si-ink-muted); line-height: var(--si-lh-body); margin: 0 0 var(--space-6); }
.booking-summary {
  display: grid;
  gap: .1rem;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--si-border);
  border-radius: 12px;
  overflow: hidden;
}
.booking-summary div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--si-surface); }
.booking-summary div:nth-child(odd) { background: var(--si-bg-soft); }
.booking-summary dt { font-weight: 700; color: var(--si-ink-muted); font-size: var(--text-xs); }
.booking-summary dd { margin: 0; color: var(--si-ink); overflow-wrap: anywhere; }
.booking-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.booking-cancel { margin-top: var(--space-4); }
.booking-cancel-btn {
  background: none;
  border: 0;
  padding: .25rem 0;
  color: var(--si-danger-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.booking-cancel-btn:focus-visible { outline: 2px solid var(--si-focus); outline-offset: 2px; }
.booking-status-help { margin: var(--space-7) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--si-border); font-size: var(--text-xs); color: var(--si-ink-muted); }
.booking-back { display: inline-block; font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-2); }

@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .booking-aside { position: static; }
}

@media (max-width: 600px) {
  .booking-form-wrap, .booking-status-card { padding: var(--space-6) var(--space-4) var(--space-6); }
  .booking-options { grid-template-columns: 1fr; }
  .booking-methods { flex-direction: column; }
  .booking-summary div { grid-template-columns: 1fr; gap: .2rem; }
  .booking-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE
   ════════════════════════════════════════════════════════════════ */

.tm-hero {
  background: linear-gradient(135deg, var(--si-ink) 0%, var(--si-brand-deep) 100%);
  padding: var(--space-18) 0;
}

.tm-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}

.tm-hero-copy h1 { color: var(--si-white); margin: .3rem 0 var(--space-4); }
.tm-hero-copy .lede { color: rgba(200,221,233,.8); line-height: 1.7; max-width: 52ch; }

.tm-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--si-radius-lg);
  padding: var(--space-6) var(--space-8);
}

.tm-stat { text-align: center; padding: 0 var(--space-6); }
.tm-stat-n { display: block; font-size: var(--text-3xl); font-weight: 800; color: var(--si-white); line-height: 1; }
.tm-stat-l { display: block; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: rgba(200,221,233,.55); margin-top: .3rem; }
.tm-stat-divider { width: 1px; height: 2.5rem; background: rgba(255,255,255,.15); flex-shrink: 0; }

/* Featured */
.tm-featured {
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.tm-featured-card {
  max-width: var(--measure);
  margin: 0 auto;
  background: var(--si-surface);
  border-radius: var(--si-radius-lg);
  padding: var(--space-12);
  box-shadow: var(--si-shadow);
}

.tm-featured-card blockquote p {
  font-size: var(--text-xl);
  line-height: 1.7;
  color: var(--si-ink);
  font-style: italic;
  margin: var(--space-4) 0 var(--space-6);
}

/* Grid */
.tm-grid-section {
  background: var(--si-surface);
  padding: var(--si-section) 0;
}

.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.tm-card {
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.tm-card:hover { box-shadow: var(--si-shadow); transform: translateY(-2px); }

.tm-stars { display: flex; gap: .2rem; }

.tm-card blockquote p {
  font-size: var(--text-sm);
  line-height: var(--si-lh-loose);
  color: var(--si-ink-muted);
  font-style: italic;
  margin: 0;
  flex: 1;
}

.tm-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.tm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--si-brand), var(--si-brand-mid));
  color: var(--si-white);
  font-size: var(--text-xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tm-attribution strong { display: block; font-size: var(--text-xs); color: var(--si-ink); }
.tm-attribution span   { font-size: var(--text-2xs); color: var(--si-ink-muted); }

.tm-service-tag {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--tag-color, var(--si-brand)) 55%, var(--si-ink)); /* ≥4.5:1 on its own tint */
  background: color-mix(in srgb, var(--tag-color, var(--si-brand)) 12%, transparent);
  border-radius: 999px;
  padding: .25rem var(--space-3);
  align-self: flex-start;
}

@media (max-width: 900px) {
  .tm-hero-inner    { grid-template-columns: 1fr; gap: var(--space-10); }
  .tm-hero-stats    { justify-content: center; }
  .tm-grid          { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .tm-hero          { padding: var(--space-14) 0; }
  .tm-featured-card { padding: var(--space-7) var(--space-6); }
  .tm-featured-card blockquote p { font-size: var(--text-md); }
  .tm-grid          { grid-template-columns: 1fr; }
  .tm-stat          { padding: 0 var(--space-4); }
}

/* Allow testimonial stats strip to wrap on very small screens */
@media (max-width: 480px) {
  .tm-hero-stats    { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-5) var(--space-6); }
  .tm-stat-divider  { display: none; }
  .tm-stat          { flex: 1 1 auto; padding: .25rem var(--space-3); }
}

/* ════════════════════════════════════════════════════════════════
   REVEAL (scroll-in animations)
   ════════════════════════════════════════════════════════════════ */
/* Short travel, quick settle. A reveal should register as the content
   arriving, not as an effect the reader has to sit through. */
.reveal-pending {
  opacity: 0;
  transform: translateY(14px);
}

.reveal-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slower) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--dur-slower) var(--ease-out) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   FAQ PAGE
   ════════════════════════════════════════════════════════════════ */
.faq-hero {
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--space-16) 0;
}

.faq-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.faq-hero-copy h1 { margin-bottom: var(--space-3); }
.faq-hero-copy .lede { max-width: 46ch; }

.faq-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  flex-shrink: 0;
}

.faq-hero-cta p {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink-muted);
}

.faq-body {
  padding: var(--space-14) 0 var(--space-20);
}

.faq-category {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--si-border-soft);
}

.faq-category:last-child { border-bottom: none; margin-bottom: 0; }
.faq-category .faq-list { max-width: none; margin: var(--space-6) 0 0; }
.faq-body .shell > .faq-category { max-width: var(--narrow); margin-inline: auto; }

.faq-cat-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--si-ink);
  margin-bottom: var(--space-6);
  letter-spacing: -.01em;
}

.faq-cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cat-color) 12%, transparent);
  color: var(--cat-color);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .faq-hero-inner   { flex-direction: column; align-items: flex-start; gap: var(--space-7); }
  .faq-hero-cta     { flex-direction: row; flex-wrap: wrap; }
}

/* ── Split hero (Who We Help, FAQ): copy on the left, a visual on the right ── */
.split-hero { padding: var(--space-18) 0; overflow: hidden; }

.split-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-14);
}

.split-hero-copy { display: flex; flex-direction: column; gap: var(--space-7); }
.split-hero-cta  { gap: var(--space-2); }
.split-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 560px) {
  .split-hero-actions { flex-direction: column; }
  .split-hero-actions .btn { width: 100%; justify-content: center; }
}

.who-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* The second column sits a little lower, so the grid reads as a collage. */
.who-mosaic .who-tile:nth-child(even) { margin-top: var(--space-6); }

.who-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--si-radius-lg);
  overflow: hidden;
  box-shadow: var(--si-shadow-lg);
  background: var(--si-brand);
}

.who-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.who-tile-label {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .25rem var(--space-2);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--si-ink);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(15,42,61,.12);
}

.who-tile:hover img,
.who-tile:focus-visible img { transform: scale(1.05); }

.who-tile:focus-visible {
  outline: 3px solid var(--si-brand);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .split-hero-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .who-mosaic { max-width: var(--measure-sm); }
}

@media (max-width: 480px) {
  .split-hero { padding: var(--space-12) 0; }
  .who-mosaic { gap: var(--space-2); }
  .who-mosaic .who-tile:nth-child(even) { margin-top: var(--space-4); }
  .who-tile { border-radius: var(--si-radius); }
  .who-tile-label { font-size: var(--text-2xs); padding: .2rem .45rem; left: .5rem; bottom: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .who-tile img { transition: none; }
}

/* ── FAQ hero: a topic index card with a photo on top ── */
.faq-topics {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  box-shadow: var(--si-shadow-lg);
  overflow: hidden;
}

.faq-topics-photo {
  display: block;
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
}

.faq-topics-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) .35rem;
}

.faq-topics-head .eyebrow { margin: 0; }

.faq-topics-count {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-ink-muted);
}

.faq-topics-list {
  list-style: none;
  margin: 0;
  padding: .25rem var(--space-2) var(--space-2);
}

.faq-topic {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--si-radius);
  color: var(--si-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.faq-topic:hover,
.faq-topic:focus-visible { background: var(--si-bg-soft); }

.faq-topic:focus-visible {
  outline: 3px solid var(--si-brand);
  outline-offset: -3px;
}

.faq-topic-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.faq-topic-text strong { font-size: var(--text-sm); font-weight: 700; }
.faq-topic-text small  { font-size: var(--text-2xs); color: var(--si-ink-muted); }

.faq-topic-arrow {
  margin-left: auto;
  color: var(--si-brand);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq-topic:hover .faq-topic-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .faq-topics { max-width: var(--measure-sm); }
}

@media (max-width: 480px) {
  .faq-topics { border-radius: var(--si-radius); }
  .faq-topics-photo { aspect-ratio: 16/9; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-topic, .faq-topic-arrow { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   MAP SECTION
   ════════════════════════════════════════════════════════════════ */
.map-section { padding: 0 0 var(--si-section); }

.map-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.map-frame-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 0;
  overflow: hidden;
  background: var(--si-bg-soft);
}

.map-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.map-overlay-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border-soft);
  border-top: none;
  padding: var(--space-4) var(--space-5);
}

.map-address {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink-muted);
}

.map-address svg { flex-shrink: 0; color: var(--si-brand); }

@media (max-width: 600px) {
  .map-frame-wrap     { height: 260px; }
  .map-overlay-cta    { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   SERVICE CHOOSER
   ════════════════════════════════════════════════════════════════ */
.chooser-section {
  background: var(--si-bg-soft);
  border-top: 1px solid var(--si-border-soft);
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.chooser-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.chooser-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.chooser-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--si-surface);
  border: 2px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  font-family: inherit;
}

.chooser-option:hover {
  border-color: var(--si-brand);
  box-shadow: var(--si-shadow);
  transform: translateY(-2px);
}

.chooser-option.is-active {
  border-color: var(--si-brand);
  background: color-mix(in srgb, var(--si-brand) 6%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--si-brand) 18%, transparent);
}

.chooser-opt-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--opt-color) 12%, transparent);
  color: var(--opt-color);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.chooser-option strong {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--si-ink);
  line-height: 1.3;
}

.chooser-option span {
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
  line-height: 1.4;
}

.chooser-result {
  background: var(--si-surface);
  border: 2px solid var(--si-brand);
  border-radius: var(--si-radius-lg);
  box-shadow: var(--si-shadow);
  overflow: hidden;
  animation: chooser-slide-in var(--dur-slow) var(--ease-out);
}

@keyframes chooser-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chooser-result-inner {
  padding: var(--space-10) var(--space-10);
}

.chooser-result-inner h3 {
  font-size: var(--text-2xl);
  color: var(--si-ink);
  margin: var(--space-2) 0 var(--space-3);
}

.chooser-result-inner p {
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.chooser-result-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.chooser-reset {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink-muted);
  cursor: pointer;
  padding: .35rem 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
  margin-top: var(--space-3);
  display: block;
}

.chooser-reset:hover {
  color: var(--si-brand);
  text-decoration-color: var(--si-brand);
}

@media (max-width: 1000px) {
  .chooser-options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .chooser-options        { grid-template-columns: 1fr 1fr; }
  .chooser-result-inner   { padding: var(--space-6); }
  .chooser-result-inner h3 { font-size: var(--text-lg); }
}

@media (max-width: 440px) {
  .chooser-options { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   GALLERY (Kane Homestead)
   ════════════════════════════════════════════════════════════════ */
.svc-gallery-section {
  background: var(--si-bg-soft);
  border-top: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.svc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.svc-gallery-thumb {
  position: relative;
  border-radius: var(--si-radius);
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  aspect-ratio: 4/3;
}

.svc-gallery-thumb-featured {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  aspect-ratio: 16/9;
}
.svc-gallery-thumb-featured:only-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
/* The two thumbs beside the featured photo match its height on wide screens:
   their images are taken out of flow so only the featured photo sizes the row. */
@media (min-width: 761px) {
  .svc-gallery-thumb-featured + .svc-gallery-thumb,
  .svc-gallery-thumb-featured + .svc-gallery-thumb + .svc-gallery-thumb {
    aspect-ratio: auto;
  }
  .svc-gallery-thumb-featured + .svc-gallery-thumb img,
  .svc-gallery-thumb-featured + .svc-gallery-thumb + .svc-gallery-thumb img {
    position: absolute;
    inset: 0;
  }
  /* A lone fourth photo becomes a full-width banner instead of an orphan. */
  .svc-gallery-thumb:nth-child(4):last-child {
    grid-column: 1 / -1;
    aspect-ratio: 2/1;
  }
}

.svc-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.svc-gallery-thumb:hover img { transform: scale(1.04); }

.svc-gallery-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15,42,61,.5);
  color: var(--si-white);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.svc-gallery-thumb:hover .svc-gallery-zoom,
.svc-gallery-thumb:focus-visible .svc-gallery-zoom {
  opacity: 1;
}

/* Lightbox */
.svc-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.88);
  display: grid;
  place-items: center;
  padding: var(--space-8);

  opacity: 0;
  transition: opacity var(--dur) var(--ease-in);
}

.svc-gallery-lightbox.is-open {
  opacity: 1;
  transition: opacity var(--dur) var(--ease-out);
}

.svc-gallery-lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  border-radius: var(--si-radius);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  object-fit: contain;

  /* The photo settles into place a touch behind the backdrop, which reads as
     the image coming forward rather than the whole screen blinking. */
  transform: scale(.94);
  transition: transform var(--dur) var(--ease-in);
}

.svc-gallery-lightbox.is-open .svc-gallery-lightbox-img {
  transform: scale(1);
  transition: transform var(--dur-slow) var(--ease-out);
}

.svc-gallery-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255,255,255,.12);
  border: none;
  color: var(--si-white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.svc-gallery-close:hover { background: rgba(255,255,255,.25); }
.svc-gallery-close:active { transform: scale(.92); transition-duration: var(--dur-instant); }

@media (max-width: 760px) {
  .svc-gallery-grid         { grid-template-columns: 1fr 1fr; }
  .svc-gallery-thumb-featured { grid-column: 1 / 3; }
  .svc-gallery-thumb:nth-child(4):last-child { grid-column: 1 / 3; }
}

@media (max-width: 480px) {
  .svc-gallery-grid { grid-template-columns: 1fr; }
  .svc-gallery-thumb-featured,
  .svc-gallery-thumb-featured:only-child { grid-column: auto; aspect-ratio: 4/3; }
}

/* ════════════════════════════════════════════════════════════════
   LEGAL PAGES (Privacy, Terms)
   ════════════════════════════════════════════════════════════════ */
.legal-hero {
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--space-14) 0 var(--space-12);
}

.legal-hero-inner { max-width: var(--measure); }
.legal-hero-inner h1 { margin: var(--space-2) 0 var(--space-3); }

.legal-meta {
  font-size: var(--text-xs);
  color: var(--si-ink-faint);
  font-weight: 500;
}

.legal-body {
  padding: var(--space-14) 0 var(--space-20);
}

.legal-content {
  max-width: var(--measure);
}

.legal-intro {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--si-border-soft);
}

.legal-intro p { font-size: var(--text-base); line-height: 1.7; }

.legal-section {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--si-border-soft);
}

.legal-section:last-of-type,
.legal-section:has(+ .legal-nav) { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.legal-section h2 {
  font-size: var(--text-lg);
  color: var(--si-ink);
  margin-bottom: var(--space-3);
}

.legal-section h3 {
  font-size: var(--text-sm);
  color: var(--si-ink);
  margin: var(--space-5) 0 .4rem;
  font-weight: 700;
}

.legal-section p {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--si-ink-muted);
  margin-bottom: var(--space-3);
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-list {
  margin: var(--space-3) 0 var(--space-3) var(--space-5);
  padding-left: var(--space-4);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.legal-list li {
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
  line-height: 1.6;
}

.legal-address {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
  line-height: 1.8;
}

.legal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--si-border-soft);
}

.legal-nav-link {
  display: inline-block;
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-brand);
}

/* ════════════════════════════════════════════════════════════════
   SUBSCRIPTION PLANS  — page-only; every rule uses a plans- or plan- class
   ════════════════════════════════════════════════════════════════ */
/* ── Hero: soft gradient, faint colour glow, layered photos ── */
.plans-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* keeps the blurred blobs inside the hero */
  background: linear-gradient(160deg, var(--si-bg-soft) 0%, var(--si-bg-soft) 60%, var(--si-teal-bg) 100%);
  border-bottom: 1px solid var(--si-border-soft);
  padding: var(--space-18) 0;
}

.plans-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  pointer-events: none;
}
.plans-blob-a { width: 420px; height: 420px; top: -140px; right: -80px; background: var(--si-brand-on-dark); }
.plans-blob-b { width: 360px; height: 360px; bottom: -120px; left: -120px; background: var(--si-accent-on-dark); }

.plans-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-14);
  align-items: center;
}

.plans-hero-copy h1 { margin: var(--space-2) 0 var(--space-4); color: var(--si-ink); }
.plans-hero-accent { display: block; color: var(--si-brand); }
.plans-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }

.plans-hero-media { position: relative; min-height: 420px; }

.plans-hero-photo {
  position: absolute;
  overflow: hidden;
  border-radius: var(--si-radius-lg);
  box-shadow: var(--si-shadow-lg);
}
.plans-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plans-hero-photo-main { inset: 0 18% 14% 0; }
.plans-hero-photo-side {
  width: 48%;
  height: 46%;
  right: 0;
  bottom: 0;
  border: 6px solid white;
}

.plans-hero-chip {
  position: absolute;
  left: -1.25rem;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--si-border-soft);
  border-radius: 999px;
  box-shadow: var(--si-shadow);
}
.plans-hero-chip strong { display: block; font-size: var(--text-sm); color: var(--si-ink); line-height: 1.2; }
.plans-hero-chip small  { display: block; font-size: var(--text-2xs); color: var(--si-ink-muted); }
.plans-hero-chip-icon .plan-check { margin: 0; background: none; color: var(--si-white); }
.plans-hero-chip-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--si-accent);
  color: var(--si-white);
}


/* ── How it works: a timeline joined by a flowing gradient line ── */
.plans-steps { padding: var(--space-12) 0 var(--space-8); }

.plans-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  list-style: none;
  text-align: center;
}
.plans-timeline::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 16.66%;
  right: 16.66%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--si-brand) 0%, var(--si-brand-mid) 50%, var(--si-accent) 100%);
  opacity: .35;
}

.plans-timeline-step { position: relative; padding: 0 var(--space-2); }
.plans-timeline-step h3 { margin: var(--space-4) 0 .45rem; font-size: var(--text-lg); color: var(--si-ink); }
.plans-timeline-step p  { font-size: var(--text-sm); line-height: var(--si-lh-body); color: var(--si-ink-muted); max-width: 20rem; margin-inline: auto; }

.plans-timeline-node {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--si-brand) 0%, var(--si-accent) 100%);
  color: var(--si-white);
  font-size: var(--text-xl);
  font-weight: 800;
  box-shadow: 0 0 0 8px var(--si-bg), 0 8px 22px rgba(0,92,168,.28);
}

/* ── Plan cards: photo headers tinted with each service's colours ── */
.plans-section { padding: 3.5rem 0 calc(var(--si-section) + 2rem); }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: 24px;
  box-shadow: var(--si-shadow);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--si-shadow-lg); }

.plan-card-head {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  color: var(--si-white);
}
.plan-card-head picture,
.plan-card-head .plan-card-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.plan-card:hover .plan-card-photo { transform: scale(1.05); }

.plan-card-head-text { padding: var(--space-7); text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.6); }
.plan-card-head h3 { color: var(--si-white); font-size: var(--text-2xl); margin-block: .3rem; }
.plan-card-num {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.88);
}
.plan-card-sub { color: rgba(255,255,255,.92); font-size: var(--text-sm); }

.plan-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6) var(--space-7) var(--space-8);
}

.plan-trial {
  align-self: flex-start;
  margin-bottom: var(--space-4);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-accent-ink);
  background: rgba(0,167,160,.12);
  border: 1px solid rgba(0,167,160,.2);
  border-radius: 999px;
  padding: .25rem var(--space-3);
}

.plan-features { list-style: none; flex: 1; margin-bottom: var(--space-6); }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--si-ink-muted);
}
.plan-check {
  flex-shrink: 0;
  margin-top: .12rem;
  padding: 3px;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(0,167,160,.14);
  color: var(--si-accent-ink);
}

.plan-card-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── Every plan: curved band with lifted cards ── */
.plans-every {
  position: relative;
  background: linear-gradient(180deg, var(--si-bg-softer) 0%, var(--si-teal-bg) 100%);
  border-top: 1px solid var(--si-border-soft);
  padding: var(--si-section) 0;
}

.plans-every-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
}

.plans-every-card {
  position: relative;
  background: var(--si-surface);
  border-radius: var(--si-radius-lg);
  padding: var(--space-8) var(--space-7) var(--space-7);
  box-shadow: var(--si-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.plans-every-card:hover { box-shadow: var(--si-shadow); transform: translateY(-4px); }
.plans-every-card h3 { margin-block: var(--space-4) var(--space-2); font-size: var(--text-lg); color: var(--si-ink); }
.plans-every-card p  { font-size: var(--text-sm); line-height: var(--si-lh-body); color: var(--si-ink-muted); }

.plans-every-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--icon-color) 12%, white);
  color: var(--icon-color);
}

@media (prefers-reduced-motion: reduce) {
  .plan-card:hover, .plans-every-card:hover { transform: none; }
  .plan-card:hover .plan-card-photo { transform: none; }
}

@media (max-width: 900px) {
  .plans-hero-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .plans-hero-media { min-height: 340px; }
  .plans-hero-chip { left: .75rem; }
  .plans-every-grid { grid-template-columns: 1fr; max-width: var(--measure-sm); margin-inline: auto; }
}

@media (max-width: 760px) {
  .plans-hero { padding: var(--space-12) 0 var(--space-14); }
  .plans-hero-media { min-height: 280px; }
  .plans-grid { grid-template-columns: 1fr; }
  .plan-card-head { min-height: 190px; }
  .plan-card-head-text, .plan-card-body { padding-inline: var(--space-5); }

  /* The timeline turns vertical: nodes down the left, line joining them. */
  .plans-timeline { grid-template-columns: 1fr; gap: var(--space-7); text-align: left; }
  .plans-timeline::before {
    top: 1.75rem;
    bottom: 1.75rem;
    left: 1.7rem;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, var(--si-brand) 0%, var(--si-accent) 100%);
  }
  .plans-timeline-step { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--space-4); padding: 0; }
  .plans-timeline-node { grid-row: span 2; }
  .plans-timeline-step h3 { margin: .35rem 0 .3rem; }
  .plans-timeline-step p  { margin: 0; max-width: none; }
}

/* ════════════════════════════════════════════════════════════════
   BRAND LAYER — the look first built for the Subscription Plans page,
   shared across the site: softly tinted heroes, a brand-colour accent in
   headlines, check-mark bullets, and balanced heading lines. Declared after every page's own hero rules so
   the shared treatment wins where the two overlap.
   ════════════════════════════════════════════════════════════════ */

/* Headlines break into even lines instead of leaving one word stranded. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Accent for the second half of a headline: solid brand blue, or pale
   teal on dark backgrounds. */
.text-accent { color: var(--si-brand); }
.brand-hero-dark .text-accent { color: var(--si-focus-on-dark); }

/* Hero glow: two soft colour pools over the brand's pale gradient. The
   pools are background layers, so no extra markup is needed. */
.brand-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(560px 420px at 100% 0%, rgba(159,208,255,.28), transparent 70%),
    linear-gradient(160deg, var(--si-bg-soft) 0%, var(--si-bg-soft) 60%, var(--si-teal-bg) 100%);
}
.brand-hero-dark {
  background:
    radial-gradient(560px 440px at 100% 0%, rgba(21,119,200,.22), transparent 70%),
    linear-gradient(135deg, var(--si-ink) 0%, var(--si-brand-deep) 100%);
}

/* A hairline under each hero, as the site had before, keeps the edge crisp. */
.brand-hero { border-bottom: 1px solid var(--si-border-soft); }
.brand-hero-dark { border-bottom-color: rgba(255,255,255,.08); }

.hero-cover .lede-hero { text-shadow: 0 1px 12px rgba(0,20,40,.55); }
/* On phones the copy spans the full width, so the photo gets an even wash
   instead of one that fades out to the right. */
@media (max-width: 760px) {
  .hero-cover-overlay {
    background:
      radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px),
      linear-gradient(180deg, rgba(4,18,36,.7) 0%, rgba(0,44,82,.62) 55%, rgba(0,44,82,.45) 100%);
    background-size: 26px 26px, 100% 100%;
  }
}

/* Check-mark bullets, as on the plans page, in place of the diamonds. */
.step-checklist li::before {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .15rem;
  border-radius: 50%;
  transform: none;
  background: rgba(0,167,160,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008f89' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 68% no-repeat;
}
.svc-featured-checklist li::before {
  background: rgba(143,240,234,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ff0ea' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 68% no-repeat;
}

/* ── Home: subscription plans teaser ── */
.home-plans {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(480px 380px at 100% 0%, rgba(159,208,255,.35), transparent 70%),
    radial-gradient(420px 360px at 0% 100%, rgba(158,238,232,.35), transparent 70%),
    var(--si-bg);
  padding: var(--si-section) 0;
}

.home-plans-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-14);
  align-items: center;
}

.home-plans-copy h2 { margin: var(--space-2) 0 var(--space-4); color: var(--si-ink); }
.home-plans-copy .section-lede { margin-bottom: var(--space-5); }
.home-plans-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }

.home-plans-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.home-plan {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-6);
  border-radius: 22px;
  overflow: hidden;
  color: var(--si-white);
  text-decoration: none;
  box-shadow: var(--si-shadow);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.home-plan:nth-child(2) { margin-top: var(--space-10); }
.home-plan:hover { transform: translateY(-6px); box-shadow: var(--si-shadow-lg); }
.home-plan picture,
.home-plan img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.home-plan:hover img { transform: scale(1.05); }
.home-plan-num {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.home-plan { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.6); }
.home-plan strong { display: block; margin: .25rem 0 .35rem; font-size: var(--text-xl); line-height: 1.25; }
.home-plan-trial {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: .2rem var(--space-2);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.35);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .home-plan:hover, .home-plan:hover img { transform: none; }
}

@media (max-width: 900px) {
  .home-plans-inner { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* Stacked full-width buttons on phones, as the other heroes do. */
@media (max-width: 560px) {
  .home-plans-actions, .plans-hero-actions { flex-direction: column; }
  .home-plans-actions .btn, .plans-hero-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .home-plans-cards { grid-template-columns: 1fr; }
  .home-plan { min-height: 220px; }
  .home-plan:nth-child(2) { margin-top: 0; }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER LEGAL LINKS
   ════════════════════════════════════════════════════════════════ */
.footer-legal-links a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-legal-links a:hover { color: rgba(255,255,255,.9); }
.footer-legal-links > * + a::before { content: "·"; margin: 0 var(--space-2); color: rgba(200,221,233,.65); }

@media (max-width: 640px) {
  .footer-bottom-inner { flex-direction: column; gap: var(--space-2); text-align: center; }
  .footer-legal-links  { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-2); }
  .footer-legal-links a { display: inline-block; padding: var(--space-2) .25rem; }
  .footer-license { flex-basis: 100%; }
  .footer-legal-links > .footer-license + a::before { content: none; }
}


/* ════════════════════════════════════════════════════════════════
   STAFF PORTAL  —  redesigned
   ════════════════════════════════════════════════════════════════ */

/* ─── Shell ─────────────────────────────────────────────────────── */
.portal-body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--si-ink);
  background: var(--si-bg-soft);
  min-height: 100vh;
}

/* ─── Authenticated layout: sidebar + main ───────────────────────── */
.p-shell {
  display: flex;
  min-height: 100vh;
}

/* Phone header and drawer chrome; shown only below the drawer breakpoint. */
.p-topbar { display: none; }
.p-backdrop { display: none; }
.p-sidebar-close { display: none; }

/* ── Sidebar ── */
.p-sidebar {
  width: 256px;
  min-height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--si-surface);
  border-right: 1px solid var(--si-border-soft);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.p-sidebar-top { flex: 1; display: flex; flex-direction: column; }

.p-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--si-border-soft);
  text-decoration: none;
}

.p-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.p-sidebar-brand-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--si-ink);
  letter-spacing: -.01em;
}

.p-sidebar-brand-env {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--si-accent-ink);
}

/* Nav */
.p-nav {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  flex: 1;
}

.p-nav-section {
  padding: var(--space-4) var(--space-5) .3rem;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--si-ink-faint);
}

.p-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--si-ink-muted);
  text-decoration: none;
  border-radius: 8px;
  margin: 1px var(--space-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: relative;
}

.p-nav-link:hover {
  background: var(--si-bg-softer);
  color: var(--si-ink);
}

.p-nav-link.is-active {
  background: var(--si-info-bg);
  color: var(--si-brand);
  font-weight: 600;
}

.p-nav-link.is-active .p-nav-icon { color: var(--si-brand); }

.p-nav-link--soon {
  color: var(--si-ink-faint);
  pointer-events: none;
}

.p-nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--si-ink-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

.p-nav-link:hover .p-nav-icon { color: var(--si-ink-muted); }

.p-nav-soon-chip {
  margin-left: auto;
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--si-bg-softer);
  color: var(--si-ink-faint);
  border: 1px solid var(--si-border);
  border-radius: 4px;
  padding: .1rem .38rem;
}

/* Desktop header: clock beside the signed-in user */
.p-deskbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  margin: -1rem 0 var(--space-5);
}

.p-deskbar-clock {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-right: var(--space-4);
  border-right: 1px solid var(--si-border);
  white-space: nowrap;
}

.p-deskbar-time {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--si-ink);
  font-variant-numeric: tabular-nums;
}

.p-deskbar-date {
  font-size: var(--text-2xs);
  color: var(--si-ink-faint);
}

.p-deskbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  border-radius: 999px;
}
.p-deskbar-user:hover .p-user-name { color: var(--si-brand); }

/* Sidebar footer / user block */
/* Light / Dark / Device (theme_controller) */
.p-theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 var(--space-4) var(--space-3);
  padding: 3px;
  border-radius: 999px;
  background: var(--si-bg-softer);
  border: 1px solid var(--si-border-soft);
}
.p-theme-option {
  font: inherit;
  font-size: var(--text-3xs);
  font-weight: 600;
  padding: .3rem 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--si-ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-theme-option:hover { color: var(--si-ink); }
.p-theme-option[aria-pressed="true"] { background: var(--si-surface); color: var(--si-ink); box-shadow: var(--si-shadow-sm); }

.p-sidebar-footer {
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--si-border-soft);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-user-block {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.p-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--si-brand-fill), var(--si-accent));
  color: var(--si-white);
  font-size: var(--text-3xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.p-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.p-user-name {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-user-role {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
  text-transform: capitalize;
}

.p-sign-out-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--si-border);
  background: transparent;
  color: var(--si-ink-faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

.p-sign-out-btn svg { width: 15px; height: 15px; }
.p-sign-out-btn:hover { background: var(--si-danger-bg); color: var(--si-danger-ink); border-color: var(--si-danger-border); }

/* ── Main content ── */
.p-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-10) var(--space-10);
  overflow-y: auto;
}

/* ─── Dashboard ──────────────────────────────────────────────────── */
.p-dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.p-dash-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--si-ink);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: .35rem;
}

.p-dash-sub {
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
}

/* Roadmap strip */
.p-roadmap-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-5) var(--space-7);
  margin-bottom: var(--space-10);
  overflow-x: auto;
  gap: 0;
}

.p-roadmap-phase {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 130px;
  flex-shrink: 0;
}

.p-roadmap-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--si-border);
  background: var(--si-surface);
  flex-shrink: 0;
  margin-top: 4px;
  transition: background var(--dur) var(--ease-out);
}

.p-roadmap-phase--done .p-roadmap-dot {
  background: var(--si-accent);
  border-color: var(--si-accent);
}

.p-roadmap-phase--active .p-roadmap-dot {
  background: var(--si-brand-fill);
  border-color: var(--si-brand);
  box-shadow: 0 0 0 3px rgba(0,92,168,.15);
}

.p-roadmap-phase strong {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--si-ink);
}

.p-roadmap-phase span {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
}

.p-roadmap-phase--done span em,
.p-roadmap-phase--active span em {
  font-style: normal;
  font-weight: 600;
}

.p-roadmap-phase--done span em { color: var(--si-accent); }
.p-roadmap-phase--active span em { color: var(--si-brand); }

.p-roadmap-line {
  flex: 1;
  height: 2px;
  background: var(--si-border);
  min-width: 32px;
  margin: 0 .25rem;
  position: relative;
  top: 5px;
  align-self: flex-start;
}

.p-roadmap-line--done { background: var(--si-accent); }

/* Section label */
.p-section-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--si-ink-faint);
  margin-bottom: var(--space-4);
}

/* Feature grid */
.p-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.p-feature-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--si-shadow-sm);
}

.p-feature-card:hover {
  box-shadow: var(--si-shadow);
  border-color: var(--si-border);
  transform: translateY(-2px);
}

.p-feature-card--muted { background: var(--si-bg-soft); }
.p-feature-card--muted:hover { box-shadow: var(--si-shadow-sm); transform: none; }

.p-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.p-feature-icon svg { width: 22px; height: 22px; }

.p-feature-icon--blue   { background: var(--si-info-bg); color: var(--si-brand); }
.p-feature-icon--teal   { background: var(--si-teal-bg); color: var(--si-accent); }
.p-feature-icon--indigo { background: var(--si-violet-bg); color: var(--si-violet-ink); }
.p-feature-icon--slate  { background: var(--si-bg-softer); color: var(--si-ink-faint); }

.p-feature-body h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--si-ink);
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}

.p-feature-body p {
  font-size: var(--text-xs);
  color: var(--si-ink-muted);
  line-height: 1.6;
  margin: 0;
}

.p-feature-card--muted .p-feature-body h3 { color: var(--si-ink-muted); }

/* Chips */
.p-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: .2rem var(--space-2);
  border-radius: 999px;
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--si-bg-softer);
  color: var(--si-ink-faint);
  border: 1px solid var(--si-border);
}

.p-chip--blue {
  background: var(--si-info-bg);
  color: var(--si-brand);
  border-color: var(--si-info-border);
}

/* ─── Auth pages (split: brand panel + form card) ────────────────── */
.p-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--si-bg-soft);
}

/* Brand panel */
.p-auth-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-12);
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--si-white);
  background: linear-gradient(160deg, var(--si-brand-deep) 0%, var(--si-brand-fill) 58%, var(--si-accent-deep) 100%);
}

.p-auth-brand-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: .22;
  mix-blend-mode: luminosity;
}

.p-auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(0,167,160,.28), transparent 70%),
    linear-gradient(180deg, rgba(0,58,107,.25) 0%, rgba(0,58,107,0) 35%, rgba(0,58,107,.55) 100%);
}

.p-auth-brand-logo {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  padding: var(--space-3);
  background: var(--si-surface);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0,30,60,.30);
}

.p-auth-brand-logo img { width: 100%; height: 100%; object-fit: contain; }

.p-auth-brand-inner { max-width: 440px; }

.p-auth-brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
  padding: .3rem var(--space-3) .3rem var(--space-2);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--si-white);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}

.p-auth-brand-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--si-accent-on-dark);
  box-shadow: 0 0 0 3px rgba(95,227,216,.25);
}

.p-auth-brand-title {
  margin-top: var(--space-5);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.p-auth-brand-copy {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

.p-auth-brand-list {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-auth-brand-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,.92);
}

.p-auth-brand-list svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 7px;
  color: var(--si-accent-on-dark);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
}

.p-auth-brand-foot {
  font-size: var(--text-2xs);
  color: rgba(255,255,255,.66);
}

/* Form pane */
.p-auth-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: clamp(2rem, 5vw, 4rem) var(--si-gutter);
  background:
    radial-gradient(70% 45% at 50% 0%, var(--si-bg-softer), transparent 70%),
    var(--si-bg-soft);
}

.p-auth-box {
  width: 100%;
  max-width: 440px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  box-shadow: var(--si-shadow-lg);
}

.p-auth-mark {
  display: none;
  height: 64px;
  width: auto;
  margin: 0 auto var(--space-5);
}

.p-auth-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--si-ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.p-auth-sub {
  margin-top: .375rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--si-ink-faint);
}

.p-auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.p-auth-field { display: flex; flex-direction: column; gap: .4rem; }

.p-auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.p-auth-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink);
}

.p-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.p-auth-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--si-ink);
  background: var(--si-surface);
  border: 1.5px solid var(--si-border);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.p-auth-input::placeholder { color: var(--si-neutral); }
.p-auth-input:hover { border-color: var(--si-border-strong); }
.p-auth-input:focus {
  border-color: var(--si-brand);
  box-shadow: 0 0 0 4px rgba(0,92,168,.12);
}

/* The border + halo is the focus indicator; drop the global teal outline. */
.p-auth-input:focus-visible { outline: none; }

.p-auth-pw { position: relative; }
.p-auth-pw .p-auth-input { padding-right: var(--space-12); }

.p-auth-eye {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--si-ink-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.p-auth-eye:hover { color: var(--si-brand); background: var(--si-bg-softer); }
.p-auth-eye:focus-visible { outline: 2px solid var(--si-brand); outline-offset: 1px; }
.p-auth-eye svg { width: 18px; height: 18px; }
.p-auth-eye svg[hidden] { display: none; }

.p-auth-btn {
  display: block;
  width: 100%;
  margin-top: .375rem;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(130deg, var(--si-brand-dark), var(--si-brand-mid));
  color: var(--si-white);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -.005em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,92,168,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

.p-auth-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,92,168,.32); filter: brightness(1.05); }
.p-auth-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,92,168,.25); }
.p-auth-btn:focus-visible { outline: 3px solid rgba(0,92,168,.35); outline-offset: 2px; }

.p-auth-forgot {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-brand);
  text-decoration: none;
  white-space: nowrap;
}

.p-auth-forgot:hover { text-decoration: underline; }

.p-auth-back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-brand);
  text-decoration: none;
}

.p-auth-back:hover { text-decoration: underline; }
.p-auth-back svg { width: 16px; height: 16px; }

.p-auth-alt {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--si-border-soft);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--si-ink-faint);
  text-align: center;
}

.p-auth-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25rem var(--space-4);
  font-size: var(--text-2xs);
  color: var(--si-ink-faint);
  text-align: center;
}

.p-auth-foot a { color: var(--si-ink-muted); text-decoration: none; font-weight: 600; }
.p-auth-foot a:hover { color: var(--si-brand); text-decoration: underline; }

.p-auth-btn-ghost {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--si-surface);
  color: var(--si-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1.5px solid var(--si-border);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.p-auth-btn-ghost:hover { border-color: var(--si-border-strong); box-shadow: var(--si-shadow-sm); }

.p-auth-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
  line-height: 1.6;
}

.p-auth-note + .p-auth-form { margin-top: var(--space-5); }

/* Form fields */
.p-label {
  display: block;
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--si-ink-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.p-input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--si-ink);
  background: var(--si-bg-soft);
  border: 1.5px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.p-input::placeholder { color: var(--si-ink-faint); font-size: var(--text-xs); }
.p-input:hover { border-color: var(--si-info-border); background: var(--si-surface); }
.p-input:focus { border-color: var(--si-brand); background: var(--si-surface); box-shadow: 0 0 0 3px rgba(0,92,168,.10); }

.p-field { margin-bottom: var(--space-4); }

.p-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.p-btn-submit {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(130deg, var(--si-brand-dark), var(--si-brand-mid));
  color: var(--si-white);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  border: none;
  border-radius: var(--si-radius-sm);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,92,168,.28);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  letter-spacing: -.005em;
}

.p-btn-submit:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,92,168,.32); }
.p-btn-submit:active { transform: translateY(0); opacity: 1; }

.p-auth-alert,
.p-auth-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.p-auth-alert {
  background: var(--si-danger-bg);
  border: 1px solid var(--si-danger-border);
  color: var(--si-danger-ink);
}

.p-auth-notice {
  background: var(--si-success-bg);
  border: 1px solid var(--si-success-border);
  color: var(--si-success-ink);
}

.p-auth-alert svg,
.p-auth-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ─── Shared form fields (used globally) ─────────────────────────── */
.field-label {
  display: block;
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--si-ink-muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.field-input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--si-ink);
  background: var(--si-bg-soft);
  border: 1.5px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.field-input::placeholder { color: var(--si-ink-faint); }
.field-input:hover { border-color: var(--si-info-border); background: var(--si-surface); }
.field-input:focus { border-color: var(--si-brand); background: var(--si-surface); box-shadow: 0 0 0 3px rgba(0,92,168,.10); }

.btn-full { width: 100%; justify-content: center; }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sidebar becomes a drawer; the page gets a slim top bar instead. */
  .p-shell { flex-direction: column; }

  .p-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 56px;
    padding: 0 var(--si-gutter);
    background: var(--si-surface);
    border-bottom: 1px solid var(--si-border-soft);
  }

  .p-topbar-menu {
    width: 40px;
    height: 40px;
    margin-left: -.5rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--si-ink);
    cursor: pointer;
  }
  .p-topbar-menu svg { width: 22px; height: 22px; }
  .p-topbar-menu:hover { background: var(--si-bg-softer); }

  .p-topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    color: var(--si-ink);
    text-decoration: none;
  }
  .p-topbar-brand img { height: 28px; width: auto; }

  .p-topbar-clock {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--si-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .p-topbar-clock + .p-topbar-user { margin-left: .25rem; }

  .p-topbar-user { margin-left: auto; text-decoration: none; }

  .p-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(300px, 86vw);
    height: 100dvh;
    min-height: 0;
    box-shadow: var(--si-shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out-soft), visibility 0s linear var(--dur-slow);
  }
  .p-sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out-soft), visibility 0s;
  }

  .p-sidebar-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--si-ink-faint);
    cursor: pointer;
  }
  .p-sidebar-close svg { width: 18px; height: 18px; }
  .p-sidebar-close:hover { background: var(--si-bg-softer); color: var(--si-ink); }

  .p-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15,42,61,.45);
    animation: p-backdrop-in var(--dur) var(--ease-out);
  }
  .p-backdrop[hidden] { display: none; }
  @keyframes p-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

  html.is-drawer-open { overflow: hidden; }

  .p-deskbar { display: none; }

  .p-main {
    padding: 1.25rem var(--si-gutter) 2.5rem;
    overflow: visible;
  }
  .p-auth { grid-template-columns: 1fr; }
  .p-auth-brand { display: none; }
  .p-auth-pane { justify-content: flex-start; padding-top: var(--space-10); }
  .p-auth-mark { display: block; }
  .p-auth-title, .p-auth-sub { text-align: center; }
}

@media (max-width: 700px) {
  .p-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ─── Nav badge (live counts) ────────────────────────────────────── */
.p-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--si-brand-fill);
  color: var(--si-white);
  font-size: var(--text-3xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.p-nav-badge--alert { background: var(--si-danger); }

/* ─── Dashboard KPI cards ────────────────────────────────────────── */
.p-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.p-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--si-shadow-sm);
  color: var(--si-ink);
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}

.p-kpi:hover { border-color: var(--si-border); box-shadow: var(--si-shadow); }

.p-kpi-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.p-kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink);
}

.p-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--si-info-bg);
  color: var(--si-brand);
  flex-shrink: 0;
}

.p-kpi-icon svg { width: 16px; height: 16px; }
.p-kpi--alert .p-kpi-icon { background: var(--si-danger-bg); color: var(--si-danger); }

.p-kpi-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-kpi-value {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.p-kpi-foot {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
}

/* Week-over-week pill */
.p-delta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--text-3xs);
  font-weight: 700;
  padding: .15rem var(--space-2);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.p-delta-arrow { font-size: .75em; }
.p-delta--good { background: var(--si-success-bg); color: var(--si-success-ink); }
.p-delta--bad  { background: var(--si-danger-bg); color: var(--si-danger-ink); }
.p-delta--flat { background: var(--si-bg-softer); color: var(--si-ink-faint); }

/* ─── Dashboard panels ───────────────────────────────────────────── */
.p-panel {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--si-shadow-sm);
  margin-bottom: var(--space-5);
  min-width: 0;
}

.p-panel-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.p-panel-hd--sub { margin-bottom: var(--space-3); }

.p-panel-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--si-ink);
}

.p-panel-subtitle {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--si-ink);
}

.p-panel-muted {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
}

/* Rows and tables sit flat inside a panel instead of as cards of their own. */
.p-panel .p-today-list,
.p-panel .p-appt-list { gap: 0; }

.p-panel .p-today-row,
.p-panel .p-appt-row {
  border: none;
  border-top: 1px solid var(--si-border-soft);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3) .25rem;
}

.p-panel .p-today-row:first-child,
.p-panel .p-appt-row:first-child { border-top: none; padding-top: .25rem; }

.p-panel .p-table-wrap {
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0 -.25rem;
}

.p-panel .p-empty { border-radius: var(--si-radius-sm); }

/* Weekly activity headline and inquiry pipeline */
.p-activity-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: -.25rem 0 var(--space-4);
}

.p-activity-total {
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--si-ink);
}

.p-pipeline {
  margin-top: var(--space-5);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-4) var(--space-5) 0;
}

.p-pipeline-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.p-pipeline-col {
  --pipe: var(--si-brand);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .1rem 0 var(--space-3) var(--space-3);
  border-left: 2px solid var(--pipe);
  border-bottom: 4px solid var(--pipe);
  border-radius: 0 0 0 3px;
  text-decoration: none;
  margin-bottom: -1px;
}

.p-pipeline-col--contacted { --pipe: var(--si-warning); }
.p-pipeline-col--converted { --pipe: var(--si-success); }
.p-pipeline-col--closed    { --pipe: var(--si-neutral); }

.p-pipeline-count {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--si-ink);
  font-variant-numeric: tabular-nums;
}

.p-pipeline-label {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
}

.p-pipeline-col:hover .p-pipeline-label { color: var(--si-brand); text-decoration: underline; }

/* Busiest days */
.p-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.p-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.p-day-count {
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--si-ink);
  visibility: hidden;
}

.p-day-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 30px;
  height: 110px;
}

.p-day-bar {
  width: 100%;
  border-radius: 8px;
  background: var(--si-neutral-bg);
}

.p-day-name {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
}

.p-day--peak .p-day-bar { background: linear-gradient(180deg, var(--si-brand-mid), var(--si-brand)); }
.p-day--peak .p-day-count { visibility: visible; }
.p-day--peak .p-day-name { color: var(--si-brand); font-weight: 700; }
.p-day:hover .p-day-count { visibility: visible; }

/* Homestead occupancy gauge */
.p-gauge {
  position: relative;
  max-width: 240px;
  margin: 0 auto;
}

.p-gauge-svg { display: block; width: 100%; height: auto; }
.p-gauge-svg line { stroke-width: 5; stroke-linecap: round; }
.p-gauge-on  { stroke: var(--si-accent); }
.p-gauge-off { stroke: var(--si-neutral-bg); }

.p-gauge-center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-gauge-value {
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--si-ink);
}

.p-gauge-label {
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
  margin-top: .25rem;
}

.p-gauge-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

/* ─── Dashboard two-column grid ──────────────────────────────────── */
.p-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-7);
  align-items: start;
}

@media (max-width: 1180px) {
  /* minmax(0, …): a plain 1fr lets the column grow to its content's minimum
     width, which pushed the page sideways on phones. */
  .p-dash-grid { grid-template-columns: minmax(0, 1fr); }
  .p-dash-main, .p-dash-rail { min-width: 0; }
}

.p-quick-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.p-quick-actions .p-btn svg { width: 13px; height: 13px; }

.p-btn:disabled,
.p-btn:disabled:hover { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.p-btn--sm {
  padding: .45rem var(--space-4);
  font-size: var(--text-2xs);
}

.p-attn-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.p-attn-item { display: flex; gap: var(--space-2); }

.p-attn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--si-danger);
  margin-top: 6px;
  flex-shrink: 0;
}

.p-attn-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--si-ink);
  text-decoration: none;
}

.p-attn-name:hover { color: var(--si-brand); text-decoration: underline; }

.p-attn-time {
  display: block;
  font-size: var(--text-3xs);
  color: var(--si-ink-faint);
}

.p-attn-note {
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
  margin-top: .2rem;
  line-height: 1.45;
}

/* Empty states */
.p-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  background: var(--si-surface);
  border: 1px dashed var(--si-border);
  border-radius: var(--si-radius);
  color: var(--si-ink-faint);
  font-size: var(--text-xs);
}

.p-empty p { margin-bottom: .35rem; }

.p-empty--ok {
  border: 1px solid var(--si-success-border);
  background: var(--si-success-bg);
  color: var(--si-success-ink);
}

.p-empty--ok p { margin-bottom: 0; }

/* Today's schedule */
.p-today-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-today-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--si-shadow-sm);
}

.p-today-time {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--si-ink);
  min-width: 64px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.p-today-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.p-today-body strong {
  font-size: var(--text-xs);
  color: var(--si-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-kind-badge {
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: capitalize;
  padding: .2rem var(--space-2);
  border-radius: 999px;
  white-space: nowrap;
}

.p-kind-badge--appointment { background: var(--si-info-bg); color: var(--si-brand); }

/* Inquiry aging chip */
.p-age-chip {
  display: inline-block;
  margin-left: .4rem;
  font-size: var(--text-3xs);
  font-weight: 700;
  padding: .12rem var(--space-2);
  border-radius: 999px;
  background: var(--si-warning-bg);
  color: var(--si-warning-ink);
  white-space: nowrap;
}

/* Weekly activity chart */
.p-chart-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--si-shadow-sm);
}

.p-chart { position: relative; }

.p-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-chart-legend {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.p-chart-key {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--si-ink-muted);
}

.p-chart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.p-chart-tick {
  font-size: var(--text-3xs);
  fill: var(--si-ink-faint);
  font-family: inherit;
}

.p-chart-cap {
  font-size: var(--text-3xs);
  font-weight: 700;
  fill: var(--si-ink-muted);
  font-family: inherit;
}

.p-chart-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  box-shadow: var(--si-shadow);
  padding: var(--space-2) var(--space-3);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.p-chart-tooltip[hidden] { display: none; }

.p-chart-tooltip strong {
  font-size: var(--text-3xs);
  color: var(--si-ink);
  margin-bottom: .15rem;
}

.p-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--text-3xs);
  color: var(--si-ink-muted);
  font-variant-numeric: tabular-nums;
}

.p-chart-tooltip-row i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.p-chart-tooltip-total {
  font-weight: 700;
  color: var(--si-ink);
  border-top: 1px solid var(--si-border-soft);
  padding-top: .3rem;
  margin-top: .15rem;
}

/* Screen-reader-only content */
.p-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Dashboard sections ─────────────────────────────────────────── */
.p-dash-section { margin-bottom: var(--space-10); }

.p-dash-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.p-section-more {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-brand);
  text-decoration: none;
}
.p-section-more:hover { text-decoration: underline; }

/* ─── Page header ────────────────────────────────────────────────── */
.p-page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.p-page-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--si-ink);
  letter-spacing: -.025em;
  margin-bottom: .2rem;
}

.p-page-sub {
  font-size: var(--text-xs);
  color: var(--si-ink-muted);
  margin-top: .15rem;
}

.p-page-actions { display: flex; gap: var(--space-3); align-items: center; flex-shrink: 0; }

.p-back-link {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.p-back-link:hover { color: var(--si-ink); }

/* ─── Buttons ────────────────────────────────────────────────────── */
.p-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--si-radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.p-btn:hover { opacity: .88; transform: translateY(-1px); }
.p-btn:active { transform: translateY(0); }

.p-btn--primary {
  background: linear-gradient(130deg, var(--si-brand-dark), var(--si-brand-mid));
  color: var(--si-white);
  box-shadow: 0 3px 12px rgba(0,92,168,.25);
}

.p-btn--secondary {
  background: var(--si-surface);
  color: var(--si-brand);
  border: 1.5px solid var(--si-border);
}

.p-btn--ghost {
  background: transparent;
  color: var(--si-ink-muted);
  border: 1.5px solid var(--si-border);
}

/* ─── Filter bar ─────────────────────────────────────────────────── */
.p-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.p-filter-chip {
  padding: .3rem var(--space-3);
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--si-ink-muted);
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.p-filter-chip:hover { border-color: var(--si-brand); color: var(--si-brand); }
.p-filter-chip.is-active { background: var(--si-brand-fill); color: var(--si-white); border-color: var(--si-brand-fill); }

/* What is narrowing the list right now (active_filter_chips). Each chip
   removes only itself. */
.p-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}
.p-active-filters-label { font-size: var(--text-3xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--si-ink-faint); }
.p-active-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .3rem .4rem .3rem var(--space-3);
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-info-ink);
  background: var(--si-info-bg);
  border: 1px solid var(--si-info-border);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.p-active-filter-x {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: var(--text-xs);
  line-height: 1;
  background: rgba(0,92,168,.1);
}
.p-active-filter:hover { border-color: var(--si-brand); }
.p-active-filter:hover .p-active-filter-x { background: var(--si-brand-fill); color: var(--si-white); }

.p-search-form { margin-left: auto; }
.p-search-input {
  padding: .3rem var(--space-3);
  border: 1px solid var(--si-border);
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-family: inherit;
  color: var(--si-ink);
  background: var(--si-surface);
  outline: none;
  width: 200px;
}
.p-search-input:focus { border-color: var(--si-brand); box-shadow: 0 0 0 3px rgba(0,92,168,.08); }

/* ─── Table ──────────────────────────────────────────────────────── */
.p-table-wrap {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  overflow: hidden;
  box-shadow: var(--si-shadow-sm);
}

.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.p-table thead tr {
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border-soft);
}

.p-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--si-ink-faint);
  text-align: left;
  white-space: nowrap;
}

.p-table td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--si-border-soft);
  color: var(--si-ink-muted);
  vertical-align: middle;
}

.p-table tbody tr:last-child td { border-bottom: none; }
.p-table tbody tr:hover td { background: var(--si-bg-soft); }

.p-table-name { color: var(--si-ink); font-weight: 600; }
.p-table-muted { font-size: var(--text-2xs); color: var(--si-ink-faint); display: block; }
td.p-table-muted { display: table-cell; }
.p-table-link { font-size: var(--text-2xs); font-weight: 600; color: var(--si-brand); text-decoration: none; white-space: nowrap; }
.p-table-link:hover { text-decoration: underline; }
.p-table-empty { text-align: center; color: var(--si-ink-faint); padding: var(--space-10) var(--space-4) !important; }
.p-table-empty-msg { color: var(--si-ink-muted); font-size: var(--text-sm); }
.p-table-empty-msg + * { margin-top: var(--space-3); }
.p-empty .p-btn { margin-top: var(--space-2); }

/* ─── Status badges ──────────────────────────────────────────────── */
.p-status-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem var(--space-2);
  border-radius: 999px;
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .02em;
}

.p-status-badge--new        { background: var(--si-info-bg); color: var(--si-brand); }
.p-status-badge--contacted  { background: var(--si-warning-bg); color: var(--si-warning-ink); }
.p-status-badge--converted  { background: var(--si-success-bg); color: var(--si-success-ink); }
.p-status-badge--closed     { background: var(--si-bg-softer); color: var(--si-ink-faint); }
.p-status-badge--active     { background: var(--si-success-bg); color: var(--si-success-ink); }
.p-status-badge--inactive   { background: var(--si-bg-softer); color: var(--si-ink-faint); }
.p-status-badge--pending    { background: var(--si-warning-bg); color: var(--si-warning-ink); }
.p-status-badge--scheduled  { background: var(--si-info-bg); color: var(--si-brand); }
.p-status-badge--confirmed  { background: var(--si-teal-bg); color: var(--si-teal-ink); }
.p-status-badge--completed  { background: var(--si-success-bg); color: var(--si-success-ink); }
.p-status-badge--cancelled  { background: var(--si-danger-bg); color: var(--si-danger-ink); }
.p-status-badge--requested  { background: var(--si-warning-bg); color: var(--si-warning-ink); }

/* ─── Chips extras ───────────────────────────────────────────────── */
.p-chip--red  { background: var(--si-danger-bg); color: var(--si-danger-ink); border-color: var(--si-danger-border); }
.p-chip--teal { background: var(--si-teal-bg); color: var(--si-teal-ink); border-color: var(--si-teal-border); }

/* ─── Cards ──────────────────────────────────────────────────────── */
.p-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-6);
  box-shadow: var(--si-shadow-sm);
  margin-bottom: var(--space-5);
}

.p-card-title {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--si-ink-faint);
  margin-bottom: var(--space-4);
}

.p-card-subtitle {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--si-ink-faint);
  margin: var(--space-4) 0 var(--space-2);
}

/* ─── Detail layout ──────────────────────────────────────────────── */
.p-detail-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
}

.p-detail-message {
  font-size: var(--text-sm);
  color: var(--si-ink-muted);
  line-height: 1.7;
  white-space: pre-wrap;
}

.p-detail-notes {
  font-size: var(--text-xs);
  color: var(--si-ink-muted);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* ─── Definition list ────────────────────────────────────────────── */
.p-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.p-dl dt { color: var(--si-ink-faint); font-weight: 600; font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: .03em; padding-top: .1rem; }
.p-dl dd { color: var(--si-ink-muted); }

/* ─── Activity list ──────────────────────────────────────────────── */
.p-activity-list { list-style: none; margin: 0; padding: 0; }
.p-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--si-border-soft);
  font-size: var(--text-xs);
}
.p-activity-item:last-child { border-bottom: none; }
.p-activity-item > div { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.p-activity-item strong { color: var(--si-ink); font-weight: 600; }

.p-activity-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--si-border);
}
.p-activity-dot--scheduled { background: var(--si-brand); }
.p-activity-dot--confirmed { background: var(--si-accent); }
.p-activity-dot--completed { background: var(--si-success); }
.p-activity-dot--cancelled { background: var(--si-danger); }
.p-activity-dot--flagged   { background: var(--si-danger); }

/* ─── Appointment rows ───────────────────────────────────────────── */
.p-appt-list { display: flex; flex-direction: column; gap: var(--space-3); }

.p-appt-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-sm);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--si-shadow-sm);
}

.p-appt-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  text-align: center;
}
.p-appt-day  { font-size: var(--text-3xs); font-weight: 700; color: var(--si-ink-muted); text-transform: uppercase; }
.p-appt-hour { font-size: var(--text-2xs); color: var(--si-ink-faint); }

.p-appt-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; flex-shrink: 0;
}
.p-appt-icon svg { width: 18px; height: 18px; }

.p-appt-body {
  flex: 1; display: flex; flex-direction: column; gap: .15rem;
}
.p-appt-body strong { font-size: var(--text-xs); font-weight: 600; color: var(--si-ink); }

.p-appt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }

/* ─── Forms ──────────────────────────────────────────────────────── */
.p-form-wrap { max-width: var(--measure); }
.p-form { display: flex; flex-direction: column; gap: .125rem; }
.p-form-field { margin-bottom: var(--space-4); }
.p-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.p-form-row--3 { grid-template-columns: 2fr 1fr 1fr; }

.p-form-section-label {
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-ink-faint);
  padding-top: var(--space-4);
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--si-border-soft);
}
.p-form-section-label:first-child { border-top: none; padding-top: 0; }

.p-select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--si-ink);
  background: var(--si-bg-soft);
  border: 1.5px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b8fa8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: var(--space-10);
}
.p-select:focus { border-color: var(--si-brand); box-shadow: 0 0 0 3px rgba(0,92,168,.10); background-color: var(--si-surface); }

.p-textarea { resize: vertical; min-height: 80px; }

.p-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--si-ink-muted);
  cursor: pointer;
  margin-bottom: var(--space-3);
}

.p-checkbox {
  width: 16px; height: 16px;
  accent-color: var(--si-brand);
  cursor: pointer;
}

.p-form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--si-border-soft); }
.p-form-errors {
  background: var(--si-danger-bg);
  border: 1px solid var(--si-danger-border);
  border-radius: var(--si-radius-sm);
  color: var(--si-danger-ink);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

/* A field the server rejected (config/initializers/form_errors.rb). */
.p-input.is-invalid,
.p-select.is-invalid { border-color: var(--si-danger); background: var(--si-danger-bg); }
.p-input.is-invalid:focus,
.p-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.p-field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--si-danger-ink);
}

/* ─── Misc ───────────────────────────────────────────────────────── */
.p-link { color: var(--si-brand); font-weight: 600; text-decoration: none; }
.p-link:hover { text-decoration: underline; }

.p-empty-state { font-size: var(--text-xs); color: var(--si-ink-faint); padding: var(--space-2) 0; }

.p-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--si-danger-bg);
  border: 1px solid var(--si-danger-border);
  border-radius: var(--si-radius-sm);
  color: var(--si-danger-ink);
  font-size: var(--text-xs);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-6);
}
.p-alert-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.p-alert-banner ul { margin: .25rem 0 0 var(--space-4); }
.p-alert-link { display: inline-block; padding-block: 3px; color: var(--si-danger-ink); font-weight: 600; }

/* ─── Resident cards ─────────────────────────────────────────────── */
.p-resident-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }

.p-resident-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  padding: var(--space-5);
  box-shadow: var(--si-shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.p-resident-card:hover { box-shadow: var(--si-shadow); }

.p-resident-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--si-brand-fill), var(--si-accent));
  color: var(--si-white); font-size: var(--text-xs); font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
}

.p-resident-info { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.p-resident-info strong { font-size: var(--text-sm); font-weight: 700; color: var(--si-ink); }
.p-resident-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }

.p-attn-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ─── Care notes ─────────────────────────────────────────────────── */
.p-coverage { margin-bottom: var(--space-6); }

.p-coverage-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.p-coverage-hd .p-card-title { margin-bottom: 0; }

.p-date-nav { display: flex; align-items: center; gap: var(--space-2); }
.p-date-nav-label { font-size: var(--text-2xs); font-weight: 600; color: var(--si-ink-muted); min-width: 9rem; text-align: center; }

.p-date-nav-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-sm);
  color: var(--si-ink-muted);
  font-size: var(--text-lg); line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-date-nav-btn:hover { border-color: var(--si-brand); color: var(--si-brand); }
.p-date-nav-btn.is-disabled { opacity: .35; pointer-events: none; }

.p-coverage-table td { vertical-align: middle; }
.p-coverage-done { font-size: var(--text-2xs); font-weight: 600; color: var(--si-teal-ink); }

.p-coverage-todo {
  display: inline-block;
  padding: .2rem var(--space-2);
  border: 1px dashed var(--si-ink-faint);
  border-radius: var(--si-radius-sm);
  font-size: var(--text-3xs); font-weight: 600;
  color: var(--si-ink-faint);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-coverage-todo:hover { border-color: var(--si-brand); border-style: solid; color: var(--si-brand); }

.p-note-list { display: flex; flex-direction: column; gap: var(--space-3); }

.p-note-item {
  padding: var(--space-3) var(--space-4);
  background: var(--si-bg-soft);
  border-radius: var(--si-radius-sm);
}
.p-note-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: .35rem; font-size: var(--text-2xs); }
.p-note-body { font-size: var(--text-xs); color: var(--si-ink-muted); line-height: 1.6; margin-bottom: .35rem; }

/* ─── Phase 2c: timeline, history, reports, pagination ───────────── */

/* Pagination */
.p-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--text-2xs);
  color: var(--si-ink-faint);
}
.p-pagination-links { display: flex; align-items: center; gap: var(--space-2); }
.p-pagination-page { font-weight: 600; color: var(--si-ink-muted); }
.p-pagination-btn {
  padding: .3rem var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--si-border);
  background: var(--si-surface);
  color: var(--si-brand);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.p-pagination-btn:hover { border-color: var(--si-brand); background: var(--si-info-bg); }
.p-pagination-btn.is-disabled { color: var(--si-ink-faint); pointer-events: none; opacity: .6; }

/* Filter bar variants */
.p-filter-bar--tight { margin-bottom: var(--space-4); }
.p-date-range-form { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.p-date-input { width: auto; padding-top: .25rem; padding-bottom: .25rem; }

.p-filter-form { padding: var(--space-4) var(--space-5); }
.p-filter-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.p-filter-form-row .p-form-field { margin-bottom: 0; }
.p-filter-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }

/* Kind badges for the timeline */
.p-kind-badge--check_in  { background: var(--si-teal-bg); color: var(--si-teal-ink); }
.p-kind-badge--note      { background: var(--si-warning-bg); color: var(--si-warning-ink); }
.p-kind-badge--inquiry   { background: var(--si-violet-bg); color: var(--si-violet-ink); }
.p-kind-badge--change    { background: var(--si-bg-softer); color: var(--si-ink-muted); }
.p-kind-badge--care_note { background: var(--si-success-bg); color: var(--si-success-ink); }

/* Note compose card */
.p-note-compose { padding: var(--space-5) var(--space-5); }
.p-note-compose .p-form-field { margin-bottom: var(--space-2); }
.p-note-compose-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* Timeline */
.p-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.p-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--si-border-soft);
}
.p-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 var(--space-4);
  padding: var(--space-3) 0 var(--space-4) var(--space-7);
  border-bottom: 1px solid var(--si-border-soft);
}
.p-tl-item:last-child { border-bottom: none; }
.p-tl-dot {
  position: absolute;
  left: 2px;
  top: 1.05rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--si-surface);
  border: 3px solid var(--si-border);
}
.p-tl-item--appointment .p-tl-dot { border-color: var(--si-brand); }
.p-tl-item--check_in .p-tl-dot    { border-color: var(--si-teal-ink); }
.p-tl-item--note .p-tl-dot        { border-color: var(--si-warning); }
.p-tl-item--inquiry .p-tl-dot     { border-color: var(--si-violet-ink); }
.p-tl-item--care_note .p-tl-dot   { border-color: var(--si-success); }
.p-tl-item--change .p-tl-dot      { border-color: var(--si-ink-faint); width: 10px; height: 10px; left: 3px; }
.p-tl-item--flagged .p-tl-dot     { border-color: var(--si-danger); background: var(--si-danger); }
.p-tl-item--upcoming { background: linear-gradient(90deg, var(--si-bg-soft), transparent 40%); }

.p-tl-time { display: flex; flex-direction: column; line-height: 1.3; padding-top: .1rem; }
.p-tl-date { font-size: var(--text-2xs); font-weight: 700; color: var(--si-ink-muted); white-space: nowrap; }
.p-tl-clock { font-size: var(--text-3xs); color: var(--si-ink-faint); }

.p-tl-body { min-width: 0; }
.p-tl-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .25rem; }
.p-tl-title { font-size: var(--text-xs); color: var(--si-ink); font-weight: 600; }
.p-tl-item--change .p-tl-title { font-weight: 500; color: var(--si-ink-muted); }
.p-tl-text { font-size: var(--text-xs); color: var(--si-ink-muted); line-height: 1.55; margin: 0 0 .3rem; white-space: pre-wrap; }
.p-tl-item--change .p-tl-text { font-size: var(--text-2xs); color: var(--si-ink-faint); }
.p-tl-meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-3xs); color: var(--si-ink-faint); }
.p-tl-remove {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--text-3xs); font-weight: 600; color: var(--si-danger-ink);
}
.p-tl-remove:hover { text-decoration: underline; }

/* History (activity events) */
.p-history { list-style: none; margin: 0; padding: 0; }
.p-history-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--si-border-soft);
}
.p-history-item:last-child { border-bottom: none; }
.p-history--log .p-history-item { padding: var(--space-3) 0; }
.p-history-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: .45rem;
  background: var(--si-border);
}
.p-history-dot--created,
.p-history-dot--reactivated      { background: var(--si-success); }
.p-history-dot--status_changed,
.p-history-dot--assigned,
.p-history-dot--role_changed     { background: var(--si-brand); }
.p-history-dot--updated,
.p-history-dot--password_changed { background: var(--si-accent); }
.p-history-dot--flagged,
.p-history-dot--deleted,
.p-history-dot--deactivated,
.p-history-dot--sign_in_failed   { background: var(--si-danger); }
.p-history-dot--unflagged        { background: var(--si-neutral); }
.p-history-dot--signed_in,
.p-history-dot--signed_out       { background: var(--si-neutral-border); }
.p-history-body { min-width: 0; flex: 1; }
.p-history-text { font-size: var(--text-2xs); color: var(--si-ink-muted); line-height: 1.5; margin: 0; }
.p-history-text strong { color: var(--si-ink); font-weight: 600; }
.p-history-subject {
  display: inline-block;
  margin-left: .15rem;
  padding: .05rem .45rem;
  border-radius: 6px;
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border-soft);
  color: var(--si-brand);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--text-3xs);
}
.p-history-subject:hover { border-color: var(--si-brand); }
.p-history-subject--gone { color: var(--si-ink-faint); text-decoration: line-through; }
.p-history-time { display: block; font-size: var(--text-3xs); color: var(--si-ink-faint); margin-top: .1rem; }
.p-history-item--auth .p-history-text { color: var(--si-ink-faint); }
.p-history-item--alert .p-history-text { color: var(--si-danger-ink); }

/* Reports */
.p-period-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.p-period-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.p-period-custom { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.p-report { padding: var(--space-6) var(--space-6) var(--space-5); }
.p-report-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.p-report-title { font-size: var(--text-md); font-weight: 700; color: var(--si-ink); letter-spacing: -.01em; margin-bottom: .2rem; }
.p-report-note { font-size: var(--text-2xs); color: var(--si-ink-faint); margin-top: var(--space-3); }

.p-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.p-kpi-grid--page { margin-bottom: var(--space-6); }
.p-kpi {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--si-radius-sm);
  background: var(--si-bg-soft);
  border: 1px solid var(--si-border-soft);
}
.p-kpi--card { background: var(--si-surface); box-shadow: var(--si-shadow-sm); padding: var(--space-4) var(--space-5); }
.p-kpi-value { font-size: var(--text-3xl); font-weight: 800; color: var(--si-ink); letter-spacing: -.03em; line-height: 1.1; }
.p-kpi-label { font-size: var(--text-3xs); font-weight: 500; color: var(--si-ink-muted); }

/* Wide reports scroll sideways inside their card instead of clipping. */
.p-report .p-table-wrap, .p-report-table-wrap { overflow-x: auto; }
.p-report-table th, .p-report-table td { white-space: nowrap; }
.p-report-table th.p-num, .p-report-table td.p-num { text-align: right; font-variant-numeric: tabular-nums; }
.p-report-table tfoot td {
  border-top: 2px solid var(--si-border);
  border-bottom: none;
  font-weight: 700;
  color: var(--si-ink);
  background: var(--si-bg-soft);
}
.p-chart-card--flush { border: none; box-shadow: none; padding: 0; }

@media (max-width: 720px) {
  .p-tl-item { grid-template-columns: 1fr; gap: .2rem; }
  .p-tl-time { flex-direction: row; gap: var(--space-2); }
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .p-detail-grid { grid-template-columns: 1fr; }
  .p-form-row { grid-template-columns: 1fr; }
  .p-form-row--3 { grid-template-columns: 1fr; }
}

/* Portal styleguide (/portal/styleguide) */
.p-sg { display: grid; gap: var(--space-5); }
.p-sg .p-card { display: grid; gap: var(--space-3); align-content: start; }
.p-sg-sub { font-size: var(--text-3xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--si-ink-faint); margin-top: var(--space-2); }
.p-sg-note { font-size: var(--text-xs); color: var(--si-ink-muted); }
.p-sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.p-sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2) var(--space-4); }
.p-sg-swatches li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-3xs); color: var(--si-ink-muted); min-width: 0; }
.p-sg-swatch { flex: none; width: 2rem; height: 2rem; border-radius: var(--si-radius-sm); border: 1px solid var(--si-border); }
.p-sg-type li { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--si-border-soft); color: var(--si-ink); }
.p-sg-type code, .p-sg-space code { flex: none; width: 7rem; font-size: var(--text-3xs); color: var(--si-ink-faint); }
.p-sg-type span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.p-sg-space li { display: flex; align-items: center; gap: var(--space-4); padding: 2px 0; }
.p-sg-space span { height: .75rem; border-radius: 2px; background: var(--si-chart-1); }
.p-sg-form { max-width: var(--measure); }
.p-sg-skeleton { display: grid; gap: var(--space-2); max-width: var(--measure-sm); }
.p-sg-skeleton .si-skeleton { height: 1rem; border-radius: 4px; }
.p-sg-skeleton .si-skeleton:last-child { width: 60%; }

/* ════════════════════════════════════════════════════════════════
   PORTAL DARK THEME  — follows the device unless the staff member picked
   Light or Dark in the sidebar (theme_controller sets html[data-theme]).
   Only tokens change; components read them. The public site stays light.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .portal-body {
    color-scheme: dark;
    --si-brand:        #6cb4f0;  /* text and borders; fills keep --si-brand-fill */
    --si-focus:        #5fe3d8;
    --si-accent-ink:   #5eead4;
    --si-bg:           #0c1720;
    --si-bg-soft:      #111f2a;
    --si-bg-softer:    #162634;
    --si-surface:      #142230;
    --si-ink:          #e7eef4;
    --si-ink-muted:    #b6c6d3;
    --si-ink-faint:    #8fa5b7;
    --si-border:       #2a3f51;
    --si-border-soft:  #1f3141;
    --si-border-strong: #3a5165;
    --si-shadow-sm:    0 2px 8px rgba(0,0,0,.35);
    --si-shadow:       0 8px 28px rgba(0,0,0,.45);
    --si-shadow-lg:    0 16px 48px rgba(0,0,0,.55);
    --si-success:        #22c55e;
    --si-success-bg:     #0f2a1c;
    --si-success-border: #1f5135;
    --si-success-ink:    #86efac;
    --si-warning:        #eab308;
    --si-warning-bg:     #2a2410;
    --si-warning-border: #5a4815;
    --si-warning-ink:    #fcd34d;
    --si-danger:         #f87171;
    --si-danger-bg:      #2d1518;
    --si-danger-border:  #5c2429;
    --si-danger-ink:     #fca5a5;
    --si-info-bg:        #10253b;
    --si-info-border:    #1e4468;
    --si-info-ink:       #9ccdf6;
    --si-teal-bg:        #0e2827;
    --si-teal-border:    #1d4d4a;
    --si-teal-ink:       #5eead4;
    --si-violet-bg:      #1e1f3d;
    --si-violet-ink:     #a5b4fc;
    --si-neutral:        #64748b;
    --si-neutral-bg:     #1c2834;
    --si-neutral-border: #34424f;
    --si-neutral-ink:    #b7c2cd;
    --si-chart-1: #3987e5;
    --si-chart-2: #d95926;
    --si-chart-3: #199e70;
  }
}
html[data-theme="dark"] .portal-body {
  color-scheme: dark;
  --si-brand:        #6cb4f0;  /* text and borders; fills keep --si-brand-fill */
  --si-focus:        #5fe3d8;
  --si-accent-ink:   #5eead4;
  --si-bg:           #0c1720;
  --si-bg-soft:      #111f2a;
  --si-bg-softer:    #162634;
  --si-surface:      #142230;
  --si-ink:          #e7eef4;
  --si-ink-muted:    #b6c6d3;
  --si-ink-faint:    #8fa5b7;
  --si-border:       #2a3f51;
  --si-border-soft:  #1f3141;
  --si-border-strong: #3a5165;
  --si-shadow-sm:    0 2px 8px rgba(0,0,0,.35);
  --si-shadow:       0 8px 28px rgba(0,0,0,.45);
  --si-shadow-lg:    0 16px 48px rgba(0,0,0,.55);
  --si-success:        #22c55e;
  --si-success-bg:     #0f2a1c;
  --si-success-border: #1f5135;
  --si-success-ink:    #86efac;
  --si-warning:        #eab308;
  --si-warning-bg:     #2a2410;
  --si-warning-border: #5a4815;
  --si-warning-ink:    #fcd34d;
  --si-danger:         #f87171;
  --si-danger-bg:      #2d1518;
  --si-danger-border:  #5c2429;
  --si-danger-ink:     #fca5a5;
  --si-info-bg:        #10253b;
  --si-info-border:    #1e4468;
  --si-info-ink:       #9ccdf6;
  --si-teal-bg:        #0e2827;
  --si-teal-border:    #1d4d4a;
  --si-teal-ink:       #5eead4;
  --si-violet-bg:      #1e1f3d;
  --si-violet-ink:     #a5b4fc;
  --si-neutral:        #64748b;
  --si-neutral-bg:     #1c2834;
  --si-neutral-border: #34424f;
  --si-neutral-ink:    #b7c2cd;
  --si-chart-1: #3987e5;
  --si-chart-2: #d95926;
  --si-chart-3: #199e70;
}

/* The logo is drawn for a light ground; on the dark theme it sits on a
   white chip, as it does in the public footer. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .portal-body img[src*="logo"] { background: var(--si-white); border-radius: 6px; padding: 2px; }
}
html[data-theme="dark"] .portal-body img[src*="logo"] { background: var(--si-white); border-radius: 6px; padding: 2px; }

/* ════════════════════════════════════════════════════════════════
   WAITING & CONFIRMING  (Turbo progress bar, pending buttons,
   the confirm dialog from lib/confirm.js)
   ════════════════════════════════════════════════════════════════ */
/* Placeholder blocks for content still loading (lazy turbo-frames). The
   shimmer stops under reduced motion with every other animation. */
.si-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--si-border) 25%, var(--si-bg-soft) 50%, var(--si-border) 75%);
  background-size: 200% 100%;
  animation: si-shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes si-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Turbo injects its own blue bar first in <head>; this later rule wins. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--si-brand), var(--si-accent));
}

/* A form on its way: Turbo sets aria-busy on the form and disables the
   button; lib/pending_submit.js relabels it ("Sending…"). */
form[aria-busy="true"] :is(button, input)[type="submit"]:disabled,
form[aria-busy="true"] button:not([type]):disabled {
  cursor: progress;
  opacity: .75;
}
form[aria-busy="true"] :is(button[type="submit"], button:not([type])):disabled::after {
  content: "";
  width: .9em;
  height: .9em;
  margin-left: var(--space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -.1em;
  animation: si-spin .7s linear infinite;
}
@keyframes si-spin { to { transform: rotate(360deg); } }

.si-confirm {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(28rem, calc(100vw - 2 * var(--si-gutter)));
  width: 100%;
  overflow: visible;
  color: var(--si-ink);
}
.si-confirm::backdrop {
  background: rgba(10,31,48,.45);
  backdrop-filter: blur(2px);
}
.si-confirm[open] { animation: si-confirm-in var(--dur) var(--ease-out); }
.si-confirm[open]::backdrop { animation: si-fade-in var(--dur) var(--ease-out); }
@keyframes si-confirm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes si-fade-in    { from { opacity: 0; } }

.si-confirm-card {
  background: var(--si-surface);
  border-radius: var(--si-radius);
  box-shadow: var(--si-shadow-lg);
  padding: var(--space-6);
}
.si-confirm-msg {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--si-lh-body);
  color: var(--si-ink);
  margin-bottom: var(--space-6);
}
.si-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.si-confirm-btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.si-confirm-btn--dismiss {
  background: var(--si-surface);
  color: var(--si-ink);
  border: 1.5px solid var(--si-border-strong);
}
.si-confirm-btn--dismiss:hover { background: var(--si-bg-soft); }
.si-confirm-btn--accept {
  background: var(--si-brand);
  color: var(--si-white);
  border: 1.5px solid var(--si-brand);
}
.si-confirm-btn--accept:hover { background: var(--si-brand-dark); border-color: var(--si-brand-dark); }
.si-confirm[data-tone="danger"] .si-confirm-btn--accept { background: var(--si-danger-ink); border-color: var(--si-danger-ink); }
.si-confirm[data-tone="danger"] .si-confirm-btn--accept:hover { filter: brightness(.88); }
@media (max-width: 480px) {
  .si-confirm-actions { flex-direction: column-reverse; }
  .si-confirm-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   KEYBOARD FOCUS  (baseline for anything without a bespoke ring)
   ════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--si-focus);
  outline-offset: 3px;
}

/* On the dark and blue bands the dark teal ring would disappear, so every
   ring inside them (they all read --si-focus) turns pale. */
.topbar,
.hero-cover,
.cta-section,
.trust-section,
.about-creds,
.svc-featured,
.contact-hero,
.tm-hero,
.site-footer-full,
.svc-gallery-lightbox {
  --si-focus: var(--si-focus-on-dark);
}

/* ════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS  (Turbo Drive + the View Transitions API)

   Durations are written out rather than tokenised: these pseudo-elements
   live outside the document tree, so custom properties are not worth the
   bet. Values match --dur / --ease-out.
   ════════════════════════════════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION  (global opt-out — must stay last to win)

   Animation here is decoration: every state change is also carried by
   colour, position or content, so cutting the motion loses nothing.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Portal additions (after the base chip/badge rules they extend) ── */
.p-form-hint {
  margin-top: .4rem;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--si-ink-faint);
}

.p-filter-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: .25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(15,42,61,.08);
  font-size: var(--text-3xs);
  font-weight: 700;
  text-align: center;
  line-height: 1.25rem;
}

.p-filter-chip.is-active .p-filter-count { background: rgba(10,31,48,.3); }

.p-chip--amber { background: var(--si-warning-bg); color: var(--si-warning-ink); border-color: var(--si-warning-border); }

.p-status-badge--discharge_pending { background: var(--si-warning-bg); color: var(--si-warning-ink); }
.p-status-badge--discharged        { background: var(--si-neutral-bg); color: var(--si-neutral-ink); }

.p-alert-banner--muted {
  background: var(--si-neutral-bg);
  border-color: var(--si-neutral-border);
  color: var(--si-ink-muted);
}

.p-appt-list--past .p-appt-row { background: var(--si-bg-soft); box-shadow: none; }

a.p-user-block { text-decoration: none; border-radius: 8px; }
a.p-user-block:hover .p-user-name { color: var(--si-brand); }

/* ─── Help guide (/portal/help) ──────────────────────────────────── */
.p-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-6);
  align-items: start;
}

/* .p-main's overflow makes it the sticky container, and it never scrolls
   itself; let the contents list stick to the viewport on this page. */
.p-main:has(.p-help) { overflow: visible; }

.p-help-toc {
  order: 2;
  position: sticky;
  top: 1.5rem;
  padding: var(--space-5);
  background: var(--si-surface);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius);
  box-shadow: var(--si-shadow-sm);
}
.p-help-toc .p-card-title { margin-bottom: var(--space-3); }
.p-help-toc ol { list-style: none; margin: 0; padding: 0; }
.p-help-toc li + li { margin-top: .125rem; }
.p-help-toc a {
  display: block;
  padding: .3rem var(--space-2);
  margin: 0 -.5rem;
  border-radius: var(--si-radius-sm);
  font-size: var(--text-2xs);
  color: var(--si-ink-muted);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-help-toc a:hover { background: var(--si-bg-soft); color: var(--si-brand); }

.p-help-article {
  max-width: var(--narrow);
  padding: var(--space-8) var(--space-10);
  font-size: var(--text-sm);
  line-height: var(--si-lh-body);
  color: var(--si-ink-muted);
}
.p-help-article > :first-child { margin-top: 0; }
.p-help-article h2 {
  margin: var(--space-10) 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--si-ink);
  scroll-margin-top: 4.5rem; /* clears the sticky phone top bar */
}
.p-help-article h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--si-ink);
  scroll-margin-top: 4.5rem; /* clears the sticky phone top bar */
}
.p-help-article p { margin: 0 0 var(--space-4); }
.p-help-article ul,
.p-help-article ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.p-help-article ul { list-style: disc; }
.p-help-article ol { list-style: decimal; }
.p-help-article li { margin-bottom: .3rem; }
.p-help-article li > ul { margin: .3rem 0 0; }
.p-help-article strong { color: var(--si-ink); font-weight: 600; }
.p-help-article a { color: var(--si-brand); font-weight: 600; text-decoration: none; }
.p-help-article a:hover { text-decoration: underline; }
.p-help-article code {
  padding: .1rem .35rem;
  border-radius: 4px;
  background: var(--si-bg-softer);
  font-size: .85em;
  color: var(--si-ink);
}
.p-help-article hr {
  margin: var(--space-8) 0 0;
  border: 0;
  border-top: 1px solid var(--si-border-soft);
}
.p-help-article table {
  width: 100%;
  margin: var(--space-2) 0 var(--space-5);
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.p-help-article th {
  padding: var(--space-2) var(--space-3);
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border);
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--si-ink-faint);
  text-align: left;
}
.p-help-article td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--si-border-soft);
  vertical-align: top;
}

@media (max-width: 1100px) {
  .p-help { grid-template-columns: minmax(0, 1fr); }
  .p-help-toc { order: 0; position: static; }
  .p-help-toc ol { columns: 2; column-gap: var(--space-6); }
  .p-help-toc li { break-inside: avoid; }
}

/* ─── Portal on phones ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .p-dash-title { font-size: var(--text-3xl); }
  .p-page-title { font-size: var(--text-2xl); }
  .p-dash-header { margin-bottom: var(--space-6); }
  .p-quick-actions { width: 100%; }
  .p-quick-actions .p-btn { flex: 1 1 auto; justify-content: center; }

  .p-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .p-kpi { padding: var(--space-4) var(--space-4) var(--space-3); border-radius: var(--si-radius); }
  .p-kpi-value { font-size: var(--text-3xl); }
  .p-kpi-label { font-size: var(--text-2xs); }
  .p-panel { padding: var(--space-4); border-radius: var(--si-radius); }
  .p-pipeline { padding: var(--space-4) var(--space-3) 0; }
  .p-pipeline-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }

  .p-page-hd { margin-bottom: var(--space-5); }
  .p-page-actions { width: 100%; flex-wrap: wrap; }
  .p-page-actions .p-btn,
  .p-page-actions form { flex: 1 1 auto; }
  .p-page-actions .p-btn { justify-content: center; text-align: center; }

  /* Data tables keep their columns and scroll sideways inside their card. */
  .p-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .p-table { min-width: 640px; }
  .p-coverage-table { min-width: 0; }

  /* List tables become a stack of cards (stack_table_controller copies each
     column name onto its cells). The first cell is the card's title; the
     rest sit two to a row under their labels; long notes take the full
     width; the row's View link covers the card. */
  .p-table--stack { min-width: 0; }
  .p-table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .p-table--stack tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--si-border-soft);
  }
  .p-table--stack tbody tr:last-child { border-bottom: none; }
  .p-table--stack tbody td,
  .p-table--stack tbody tr:hover td { display: block; padding: 0; border: none; background: none; min-width: 0; overflow-wrap: anywhere; }
  .p-table--stack tbody tr:hover { background: var(--si-bg-soft); }
  .p-table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--si-ink-faint);
  }
  .p-table--stack td:first-child { grid-column: 1 / -1; font-size: var(--text-sm); }
  .p-table--stack td:first-child::before,
  .p-table--stack td:last-child::before { display: none; }
  .p-table--stack td.is-wide { grid-column: 1 / -1; }
  .p-table--stack td.is-empty { display: none; }
  .p-table--stack td:last-child:has(> .p-table-link:only-child) { position: static; }
  .p-table--stack td:last-child > .p-table-link:only-child { position: absolute; inset: 0; font-size: 0; }
  .p-table--stack td:first-child a { position: relative; z-index: 1; }
  .p-table--stack td[colspan] { grid-column: 1 / -1; }

  .p-search-form { width: 100%; margin-left: 0; }
  .p-search-input { width: 100%; }

  .p-today-row, .p-resident-card, .p-activity-item { flex-wrap: wrap; }
  .p-today-body { flex: 1 1 60%; min-width: 0; }
  .p-today-row .p-status-badge { margin-left: auto; }

  /* Appointment cards: one fixed three-column layout on phones (time, what,
     status) so every card wraps the same way. The icon repeats the status
     colour and gives way; the whole card is the link. */
  .p-appt-row {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .p-appt-time { align-items: flex-start; text-align: left; min-width: 0; }
  .p-appt-icon { display: none; }
  .p-appt-row > .p-table-link { position: absolute; inset: 0; font-size: 0; border-radius: inherit; }
  .p-resident-info { flex: 1 1 60%; }

  .p-coverage-hd { flex-wrap: wrap; gap: var(--space-2); }
  .p-date-nav-label { min-width: 0; }
  .p-filter-bar { gap: .375rem; }

  .p-chart-card { padding: var(--space-4) var(--space-3) var(--space-3); }
  .p-detail-message, .p-detail-notes { overflow-wrap: anywhere; }

  .p-help-toc ol { columns: 1; }
  .p-help-article { padding: var(--space-5) var(--space-4); }
  .p-help-article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── Online bookings ────────────────────────────────────────────── */
.p-status-badge--declined { background: var(--si-danger-bg); color: var(--si-danger-ink); }

.p-block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.p-block-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--si-border-soft);
  border-radius: var(--si-radius-sm);
}
.p-block-item strong { display: block; font-size: var(--text-xs); color: var(--si-ink); }
.p-block-item .p-table-muted { display: block; font-size: var(--text-2xs); overflow-wrap: anywhere; }

/* The block form sits in the narrow side column: keep date and time pairs
   side by side without the inputs' intrinsic width pushing past the card. */
.p-block-form .p-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.p-block-form .p-input { width: 100%; min-width: 0; padding-left: var(--space-3); padding-right: var(--space-2); }

/* ════════════════════════════════════════════════════════════════
   LIVE CHAT  (shared/_chat_widget on the public site; the message
   bubbles are shared with the portal transcript)
   ════════════════════════════════════════════════════════════════ */
.chat-widget {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  /* Above the sticky header (50) so an open panel is never tucked under
     it; below the mobile menu (60). */
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  /* Kept out of Turbo's page cross-fade: it stays put between pages. */
  view-transition-name: chat-widget;
  pointer-events: none;
}
.chat-widget > * { pointer-events: auto; }

/* The back-to-top arrow shares the corner; lift it above the launcher. */
.back-to-top { bottom: 6rem; }

.chat-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-5) 0 var(--space-4);
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--si-brand), var(--si-brand-mid));
  color: var(--si-white);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,92,168,.4);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,92,168,.5); }
.chat-launcher:active { transform: scale(.96); transition-duration: var(--dur-instant); }

.chat-launcher-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--si-danger);
  border: 2px solid var(--si-white);
}

/* The greeting that pops up a few seconds into a first visit. */
.chat-teaser {
  position: relative;
  width: min(300px, calc(100vw - 2rem));
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius) var(--si-radius) 4px var(--si-radius);
  box-shadow: var(--si-shadow-lg);
  color: var(--si-ink);
  animation: chat-pop var(--dur-slow) var(--ease-spring) both;
}
.chat-teaser-author { font-size: var(--text-2xs); font-weight: 700; color: var(--si-ink-faint); margin-bottom: .35rem; }
.chat-teaser-text[hidden], .chat-teaser-btn[hidden], .chat-typing[hidden] { display: none; }
.chat-teaser-text { font-size: var(--text-sm); color: var(--si-ink-muted); line-height: 1.5; margin-bottom: var(--space-3); padding-right: var(--space-4); }
.chat-teaser-btn {
  border: none;
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  background: var(--si-brand);
  color: var(--si-white);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.chat-teaser-btn:hover { background: var(--si-brand-dark); }
.chat-teaser-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--si-ink-faint);
  cursor: pointer;
}
.chat-teaser-close:hover { background: var(--si-bg-softer); color: var(--si-ink); }

.chat-panel {
  width: min(380px, calc(100vw - 2rem));
  height: min(680px, calc(100dvh - 7rem));
  display: flex;
  flex-direction: column;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-lg);
  box-shadow: var(--si-shadow-lg);
  overflow: hidden;
  animation: chat-pop var(--dur) var(--ease-out) both;
}
.chat-panel[hidden], .chat-teaser[hidden] { display: none; }

.chat-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
  background: linear-gradient(135deg, var(--si-brand), var(--si-brand-mid));
  color: var(--si-white);
  --si-focus: var(--si-focus-on-dark);
}
.chat-panel-title { font-size: var(--text-md); font-weight: 700; line-height: 1.2; color: var(--si-white); }
.chat-panel-sub { font-size: var(--text-2xs); color: rgba(255,255,255,.85); }
.chat-panel-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: var(--si-white);
  cursor: pointer;
}
.chat-panel-close:hover { background: rgba(255,255,255,.26); }

.chat-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-loading { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); height: 100%; }
.chat-skel-status { height: 2.25rem; border-radius: var(--si-radius-sm); }
.chat-skel-bubble { height: 4.5rem; width: 82%; border-radius: var(--si-radius) var(--si-radius) var(--si-radius) 4px; }
.chat-skel-bubble--short { height: 2.5rem; width: 55%; }
.chat-skel-input { height: 5.5rem; margin-top: auto; border-radius: var(--si-radius-sm); }

.chat-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-2xs);
  line-height: 1.4;
  color: var(--si-ink-muted);
  background: var(--si-bg-soft);
  border-bottom: 1px solid var(--si-border-soft);
}
.chat-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--si-neutral); }
.chat-status-dot.is-online { background: var(--si-success); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overscroll-behavior: contain;
}
.chat-msg {
  max-width: 85%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-author { font-size: var(--text-2xs); font-weight: 700; color: var(--si-ink-faint); padding: 0 .35rem; }
.chat-msg-body {
  padding: var(--space-2) var(--space-3);
  border-radius: 16px 16px 16px 4px;
  background: var(--si-bg-softer);
  color: var(--si-ink);
  font-size: var(--text-sm);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.is-mine .chat-msg-body {
  border-radius: 16px 16px 4px 16px;
  background: var(--si-brand);
  color: var(--si-white);
}
.chat-msg-time { font-size: var(--text-2xs); color: var(--si-ink-faint); padding: 0 .35rem; }
.chat-msg--system { align-self: center; max-width: 92%; align-items: center; text-align: center; }
.chat-msg--system .chat-msg-body { background: transparent; color: var(--si-ink-faint); font-size: var(--text-2xs); padding: .25rem; }

.chat-notice:empty { display: none; }
.chat-notice { margin: 0 var(--space-4) var(--space-2); font-size: var(--text-2xs); color: var(--si-danger-ink); }

.chat-form { padding: var(--space-3) var(--space-4) var(--space-2); border-top: 1px solid var(--si-border-soft); display: flex; flex-direction: column; gap: .45rem; }
.chat-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.chat-form-row .chat-input { padding-top: .45rem; padding-bottom: .45rem; }
.chat-input {
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--si-border);
  border-radius: 10px;
  background: var(--si-surface);
  color: var(--si-ink);
  font: inherit;
  font-size: var(--text-sm);
}
.chat-input:focus { border-color: var(--si-brand-mid); }
.chat-compose { display: flex; align-items: flex-end; gap: var(--space-2); }
.chat-textarea { resize: none; max-height: 8rem; field-sizing: content; min-height: 2.6rem; line-height: 1.4; }
.chat-send {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--si-brand);
  color: var(--si-white);
  cursor: pointer;
}
.chat-send:hover { background: var(--si-brand-dark); }
.chat-fineprint { font-size: var(--text-2xs); color: var(--si-ink-faint); line-height: 1.4; }
.chat-fineprint a { color: inherit; }
.chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@keyframes chat-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  /* On phones the chat keeps the corner as an icon, and opens nearly full
     screen. The phone number stays one tap away in the top bar. */
  .chat-widget { right: 1rem; bottom: 1.25rem; }
  .chat-launcher { width: 52px; padding: 0; justify-content: center; }
  .chat-launcher-label { display: none; }
  .chat-panel {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: 5rem;
    width: auto;
    height: calc(100dvh - 6.5rem);
    max-height: 640px;
  }
}

/* Portal: the chat inbox and transcript. */
.p-status-badge--open    { background: var(--si-teal-bg); color: var(--si-teal-ink); }
.p-status-badge--waiting { background: var(--si-warning-bg); color: var(--si-warning-ink); }
.p-chat-online {
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--si-success-bg);
  color: var(--si-success-ink);
  font-size: var(--text-3xs);
  font-weight: 700;
  vertical-align: middle;
}
.p-chat-preview { overflow-wrap: anywhere; }
.p-chat-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.p-chat-transcript { max-height: 60vh; min-height: 16rem; background: var(--si-bg-soft); }
.p-chat-reply { padding: var(--space-4); border-top: 1px solid var(--si-border-soft); }
.p-chat-reply-input { width: 100%; resize: vertical; }
.p-chat-closed-note { padding: var(--space-4); border-top: 1px solid var(--si-border-soft); }
.p-chat-edit { margin-top: var(--space-3); }
.p-chat-edit summary { cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.p-chat-edit .p-form { margin-top: var(--space-3); }
.p-chat-edit .p-input { width: 100%; }

/* WhatsApp: a link in the chat panel and on the Contact page. */
.chat-whatsapp {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--si-success-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--si-border-soft);
}
.chat-whatsapp:hover { background: var(--si-success-bg); text-decoration: underline; }
.chat-whatsapp svg, .contact-info-whatsapp svg { flex-shrink: 0; }
.contact-info-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  /* The contact cards sit on the dark hero band. */
  color: var(--si-success-on-dark);
}
.contact-info-whatsapp:hover { color: var(--si-success-border); }

/* Portal: live chat alerts, availability, and the System Health page. */
.p-nav-badge[hidden] { display: none; }

.p-chat-alerts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(380px, calc(100vw - 2rem));
}
.p-chat-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-left: 4px solid var(--si-brand);
  border-radius: var(--si-radius-sm);
  box-shadow: var(--si-shadow-lg);
  animation: chat-pop var(--dur) var(--ease-out) both;
}
.p-chat-toast-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--si-violet-bg); color: var(--si-brand); }
.p-chat-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-xs); }
.p-chat-toast-body strong { color: var(--si-ink); }
.p-chat-toast-body span { color: var(--si-ink-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.p-chat-toast-close { flex: none; border: none; background: transparent; color: var(--si-ink-faint); cursor: pointer; padding: .25rem; border-radius: 50%; }
.p-chat-toast-close:hover { background: var(--si-bg-softer); color: var(--si-ink); }

.p-chat-settings { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.p-chat-settings-status { display: flex; align-items: flex-start; gap: var(--space-3); }
.p-chat-settings-status .chat-status-dot { margin-top: .4rem; }
.p-chat-settings-status strong { display: block; font-size: var(--text-sm); color: var(--si-ink); }
.p-chat-settings-status .p-table-muted { font-size: var(--text-xs); }
.p-chat-settings-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.p-chat-settings-actions form { margin: 0; }
.p-chat-settings-hint { flex-basis: 100%; margin: 0; }

.p-system-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.p-system-check { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.p-system-check > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-system-check .p-table-muted { font-size: var(--text-2xs); overflow-wrap: anywhere; }
.p-system-check-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--si-neutral); }
.p-system-check--ok .p-system-check-dot { background: var(--si-success); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.p-system-check--failing .p-system-check-dot { background: var(--si-danger); box-shadow: 0 0 0 3px rgba(225,29,72,.18); }
.p-system-card-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.p-system-card-hd .p-card-title { margin: 0; }
.p-system-errors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.p-system-error { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--si-border-soft); border-radius: var(--si-radius-sm); }
.p-system-error-main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; font-size: var(--text-xs); }
.p-system-error-msg { color: var(--si-ink); overflow-wrap: anywhere; }
.p-system-error-main .p-table-muted { font-size: var(--text-3xs); overflow-wrap: anywhere; }
.p-system-error-loc { font-size: var(--text-3xs); color: var(--si-ink-faint); overflow-wrap: anywhere; }
#backups .p-alert-banner { margin-bottom: var(--space-3); font-size: var(--text-2xs); }

/* "Typing…" dots, shown while the chat welcome is being written. */
.chat-typing { display: inline-flex; align-items: center; gap: 4px; height: 1.2em; padding: .1rem 0; }
.chat-typing > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--si-ink-faint);
  opacity: .4;
  animation: chat-typing 1.2s var(--ease-in-out) infinite;
}
.chat-typing > span:nth-child(2) { animation-delay: .15s; }
.chat-typing > span:nth-child(3) { animation-delay: .3s; }
.chat-teaser .chat-typing { margin-bottom: .25rem; }
.chat-msg[hidden] { display: none; }

@keyframes chat-typing {
  0%, 60%, 100% { opacity: .35; transform: none; }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* "Who's the care for?" choices, and the note under the optional fields. */
.chat-care-for { border: 0; margin: 0; padding: 0; min-width: 0; }
.chat-care-for-label { font-size: var(--text-2xs); font-weight: 600; color: var(--si-ink-muted); margin-bottom: .35rem; padding: 0; }
.chat-care-for-label span { font-weight: 400; color: var(--si-ink-faint); }
.chat-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chat-chip {
  border: 1px solid var(--si-border);
  background: var(--si-surface);
  color: var(--si-ink);
  border-radius: 999px;
  padding: .3rem var(--space-3);
  font: inherit;
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chat-chip:hover { border-color: var(--si-brand-mid); }
.chat-chip[aria-pressed="true"] { background: var(--si-brand); border-color: var(--si-brand); color: var(--si-white); }
.chat-form-hint { font-size: var(--text-2xs); color: var(--si-ink-faint); margin-top: -.15rem; }