/* =========================================================
   JONES MEDICAL - PUBLIC SITE STYLESHEET
   =========================================================

   Organised as:
     1.  Design tokens          - the only place raw values live
     2.  Reset and base
     3.  Typography
     4.  Focus and a11y primitives
     5.  Layout primitives
     6.  Buttons
     7.  Navigation
     8.  Announcement bar
     9.  Hero
     10. Cards, features, team
     11. Promo blocks
     12. Contact page and forms
     13. Legal document pages
     14. Confirmation page
     15. Footer
     16. Back to top
     17. Responsive
     18. Motion and print

   Two rules keep this file honest:
     - Components reference tokens, never raw hex/px. If a value is not in
       section 1, it probably should be.
     - Elevation is a three-step scale (section 1). Glass blur is expensive and
       flattens hierarchy when it is everywhere, so it is reserved for the
       fixed nav only.
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
  color-scheme: dark;

  /* ---------- Type families ----------
     Poppins is a geometric display face: excellent large, tiring in long body
     copy at 16px. Inter is designed for exactly that job. Pairing them gives
     headings personality and body text legibility - which matters more than
     usual here, because a lot of our readers are older or reading on a phone
     one-handed. */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---------- Type scale (1.200 minor third) ---------- */
  --text-xs: 0.75rem;      /* 12px - legal fine print, labels */
  --text-sm: 0.875rem;     /* 14px - captions, hints */
  --text-base: 1rem;       /* 16px - body */
  --text-md: 1.125rem;     /* 18px - lead paragraphs */
  --text-lg: 1.25rem;      /* 20px - h4 */
  --text-xl: 1.5rem;       /* 24px - h3 */
  --text-2xl: 1.875rem;    /* 30px */
  --text-3xl: 2.25rem;     /* 36px */

  /* Fluid display sizes. Lower bound is deliberately small: at 320px the h1
     has to share the screen with a fixed nav. */
  --display-1: clamp(1.875rem, 1.35rem + 2.6vw, 3.25rem);
  --display-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --display-3: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);

  /* ---------- Line height and tracking ---------- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 13px;   /* controls: buttons, fields, chips */
  --radius-lg: 18px;   /* cards and anything reading as one object */
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Neutral ramp ---------- */
  --neutral-950: #17151b;
  --neutral-900: #211f26;
  --neutral-850: #2a2731;
  --neutral-800: #2f2b38;
  --neutral-700: #3e3949;
  --neutral-600: #514b5e;
  --neutral-500: #6f6880;
  --neutral-400: #918aa1;
  --neutral-300: #b3adbe;
  --neutral-200: #d4d0da;
  --neutral-100: #eae7ee;
  --neutral-0: #ffffff;

  /* ---------- Brand ramp ----------
     brand-400 (#ff69b4) is the house pink and does two jobs:

       - as INK on dark surfaces - links, icons, borders - at 6.15:1
       - as a FILL under dark ink - buttons, the announcement bar - also
         6.15:1, because the ink is #211f26 rather than white

     White on this pink is 2.65:1 and fails, so nothing pairs the two. That is
     the whole reason --text-on-brand is dark: it lets the brand colour be the
     colour you actually see on a button, instead of hiding it behind a darker
     shade chosen only to survive white text.

     brand-600/700 are kept for deep accents and the pill text on pink. */
  --brand-100: #ffe4f1;
  --brand-200: #ffc3e1;
  --brand-300: #ff9ecd;
  --brand-400: #ff69b4;
  --brand-500: #ee4a9b;
  --brand-600: #c62b74;
  --brand-700: #a82363;
  --brand-800: #7d1949;

  /* ---------- Semantic roles ----------
     Components should reach for these, not for the ramps above. */
  --surface-page: var(--neutral-900);
  --surface-1: #2a2731;        /* cards, form fields */
  --surface-2: #2b2831;        /* raised cards, nested panels */
  --surface-3: #383343;        /* popovers, hover states on surface-2 */
  --surface-sunken: #1b1921;   /* insets, code, table stripes */

  --border-subtle: rgba(255, 255, 255, 0.11);
  --border-default: rgba(255, 255, 255, 0.17);
  --border-strong: rgba(255, 255, 255, 0.28);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.80);
  --text-muted: rgba(255, 255, 255, 0.60);   /* 6.7:1 on surface-page */
  --text-on-brand: #2a0a18;   /* dark plum ink - 6.87:1 on the accent */

  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);

  /* The house pink IS the button colour. It reaches AA as a fill by carrying
     dark ink rather than white: #211f26 on #ff69b4 is 6.15:1, where white on
     the same pink is only 2.65:1. Hover deepens to brand-500, still 4.72:1
     with the same ink. */
  --brand-solid: var(--brand-400);
  --brand-solid-hover: var(--brand-500);

  /* Status colours. Taken from the Flutter app's "Warm Field" palette rather
     than the old web set, which was tuned for a white page and went muddy on
     a dark one. Every one measures better here than what it replaced:
     success 7.74:1, warning 8.74:1, danger 5.59:1 on --surface-page. */
  --color-success: #4fc97a;
  --color-success-bg: rgba(63, 191, 127, 0.12);
  --color-success-border: rgba(63, 191, 127, 0.38);

  --color-warning: #f0b429;
  --color-warning-bg: rgba(240, 178, 50, 0.12);
  --color-warning-border: rgba(240, 178, 50, 0.38);

  --color-danger: #f26d72;
  --color-danger-bg: rgba(244, 100, 92, 0.12);
  --color-danger-border: rgba(244, 100, 92, 0.42);

  --color-info: #5aa9f0;
  --color-info-bg: rgba(90, 169, 240, 0.12);
  --color-info-border: rgba(90, 169, 240, 0.38);

  /* ---------- Elevation ----------
     Three steps, plus one for the fixed nav. Anything needing a fourth is
     probably a modal, and this site does not have one. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --elev-2: 0 4px 14px -2px rgba(0, 0, 0, 0.42);
  --elev-3: 0 18px 36px -12px rgba(0, 0, 0, 0.58);
  --elev-nav: 0 2px 16px rgba(0, 0, 0, 0.38);

  /* ---------- Z-index scale ----------
     Named so nobody has to guess whether 1001 beats 1000. */
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 1000;
  --z-announce: 1010;
  --z-overlay: 1100;
  --z-skip: 1400;

  /* ---------- Layout ----------
     --nav-h is the single source of truth for the fixed-header offset. It is
     redefined per breakpoint in section 17, and body padding is computed from
     it - so the header height and the content offset can no longer drift
     apart the way they used to across five hand-tuned breakpoints. */
  --nav-h: 84px;
  --announce-h: 46px;
  --container: 1200px;
  --container-wide: 1400px;
  --measure: 68ch;

  /* Minimum interactive size. Matches AppTheme.minTarget in the Flutter
     app - this is read one-handed, outdoors, in a driveway. */
  --min-target: 48px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;

  --focus-ring-color: var(--brand-300);

  /* ---------- Legacy token aliases ----------
     css/portal.css is a separate 4,700-line stylesheet that consumes tokens
     from this file by their old names. Renaming them here without these
     aliases would silently un-style most of the employee portal - every
     var(--accent-color) would resolve to nothing.

     These map the old names onto the new semantic roles. They are a migration
     shim, not part of the design system: new work should use the semantic
     tokens above. To retire this block, replace the old names in portal.css
     (96 x --accent-color, 64 x --border-color, 36 x --text-light, and the
     handful below) and delete it.

     --error-color is included because portal.css referenced it in three places
     and nothing ever defined it - those rules were resolving to nothing. */
  --accent-color: var(--accent);
  --border-color: var(--border-subtle);
  --text-light: var(--text-muted);
  --bg-primary: var(--surface-page);
  --bg-secondary: var(--surface-1);
  --card-bg: var(--surface-1);
  --card-border: 1px solid var(--border-subtle);
  --card-shadow: var(--elev-2);
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --glass-blur: blur(20px) saturate(160%);
  --error-color: var(--color-danger);

  /* Height of the portal's fixed app-chrome footer. The portal is a fixed
     shell, so unlike the marketing site it keeps a pinned footer; its sidebar
     is positioned against this. */
  --portal-footer-h: 3.5rem;
}


/* =========================================================
   2. RESET AND BASE
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must not land under the fixed header. */
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
  background-image:
    radial-gradient(circle at 15% 45%, rgba(255, 105, 180, 0.07), transparent 28%),
    radial-gradient(circle at 85% 25%, rgba(100, 120, 255, 0.06), transparent 28%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The announcement bar sits above the nav, so both offsets grow by its height. */
body.has-announce { padding-top: calc(var(--nav-h) + var(--announce-h)); }
body.has-announce nav { top: var(--announce-h); }

img,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: var(--accent); }

ul, ol { list-style-position: outside; }

address { font-style: normal; }

code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

kbd {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

.hidden { display: none !important; }


/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--display-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 { font-size: var(--display-2); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--display-3); }
h4 { font-size: var(--text-lg); }

p { text-wrap: pretty; }

strong { font-weight: var(--weight-semibold); }


/* =========================================================
   4. FOCUS AND ACCESSIBILITY PRIMITIVES
   ========================================================= */

/* One global focus style. Previously only the skip link and form fields had
   any focus indicator at all, which left keyboard users with no idea where
   they were on the rest of the site. :focus-visible keeps it off mouse
   clicks. */
:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* On the brand pink, a white ring is only 2.71:1 and a pink ring vanishes.
   Dark is 5.95:1 against it, and matches the ink already on those controls. */
.promo-announce :focus-visible,
.cta-button:focus-visible,
.promo-btn-grad:focus-visible,
.submit-btn:focus-visible {
  outline-color: var(--neutral-900);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-solid);
  color: var(--text-on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: var(--z-skip);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* =========================================================
   5. LAYOUT PRIMITIVES
   ========================================================= */

.section {
  padding: var(--space-9) var(--space-6);
  text-align: center;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
}


/* =========================================================
   6. BUTTONS
   ========================================================= */

.cta-button,
.secondary-button,
.promo-btn-grad,
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.cta-button,
.promo-btn-grad,
.submit-btn {
  background-color: var(--brand-solid);
  color: var(--text-on-brand);
  box-shadow: var(--elev-2);
}

.cta-button:hover,
.promo-btn-grad:hover,
.submit-btn:hover:not(:disabled) {
  background-color: var(--brand-solid-hover);
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}

.cta-button:active,
.promo-btn-grad:active,
.submit-btn:active:not(:disabled) { transform: translateY(0); }

.secondary-button {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.secondary-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--neutral-0);
  transform: translateY(-2px);
}

.submit-btn {
  width: 100%;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}


/* =========================================================
   7. NAVIGATION
   ========================================================= */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-inline: var(--space-8);
  /* 0.88 rather than 0.72: still reads as glass over scrolling content, but
     opaque enough that text on it has a determinate background. */
  background-color: rgba(33, 31, 38, 0.88);
  /* The one place glass is worth its cost: the nav sits over scrolling
     content, so the blur does real work here. Everything else uses opaque
     surfaces from the elevation scale. */
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

nav.scrolled {
  background-color: rgba(33, 31, 38, 0.92);
  box-shadow: var(--elev-nav);
}

.nav-container {
  max-width: var(--container-wide);
  margin-inline: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.nav-links a:hover { color: var(--text-primary); background-color: rgba(255, 255, 255, 0.06); }

.nav-links a.active { color: var(--accent); }

.nav-links i { font-size: 0.95em; }

.nav-actions { display: flex; align-items: center; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.nav-phone i { color: var(--accent); }

.nav-phone:hover {
  color: var(--text-primary);
  border-color: var(--brand-500);
  background-color: rgba(255, 105, 180, 0.10);
}

.mobile-nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--space-2);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
}


/* =========================================================
   8. ANNOUNCEMENT BAR
   =========================================================
   The pill used to read "Request an Assessment", duplicating the hero's
   primary CTA about 100px below it - two buttons, same action, competing for
   the same click. It now offers the *other* conversion path, a phone call,
   which also puts the number on screen for mobile visitors who otherwise
   never see it (the nav phone link is hidden below 985px). */

.promo-announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-announce);
  min-height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-9);
  /* Solid fallback under the gradient. If the gradient fails to paint the
     text is still readable, and it gives contrast checkers a background they
     can actually resolve. */
  background-color: var(--brand-400);
  background-image: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 100%);
  color: var(--text-on-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: center;
  line-height: var(--leading-snug);
}

.promo-announce .promo-msg i { margin-right: var(--space-2); }

.promo-announce .promo-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--neutral-900);
  color: var(--brand-300);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease);
}

.promo-announce .promo-pill:hover { transform: translateY(-1px); }

.promo-announce .promo-close {
  position: absolute;
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--text-on-brand);
  opacity: 0.85;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

.promo-announce .promo-close:hover { opacity: 1; }


/* =========================================================
   9. HERO
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-6) var(--space-9);
  text-align: center;
  background-color: var(--surface-page);
  background-image: radial-gradient(circle at top right, #2a1f2d 0%, var(--surface-page) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.hero-background { position: absolute; inset: 0; overflow: hidden; }

.hero-shape {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 200%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: rotate(-20deg);
  animation: floatShape 40s infinite linear;
}

.hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: moveDots 90s infinite linear;
}

.hero-content {
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--container);
  margin-inline: auto;
}

.hero h1 { margin-bottom: var(--space-4); }

.hero p {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-inline: auto;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-7);
}


/* =========================================================
   10. CARDS, FEATURES, TEAM
   ========================================================= */

.features,
.team-section {
  padding: var(--space-9) var(--space-6);
  text-align: center;
}

.features h2,
.team-section h2 { margin-bottom: var(--space-6); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-5);
  max-width: var(--container);
  margin-inline: auto;
}

/* Opaque surface + border, not glass. When every card was blurred glass, no
   card read as raised - and stacking that many backdrop-filters is a real
   scroll cost on mid-range Android. */
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-3);
  border-color: var(--border-default);
}

.feature h3 { margin-bottom: var(--space-3); }

.feature p { color: var(--text-secondary); }

.feature-icon {
  font-size: var(--text-3xl);
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.team-photo {
  width: clamp(112px, 20vw, 148px);
  height: clamp(112px, 20vw, 148px);
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: var(--space-4);
  border: 3px solid var(--brand-500);
}

.team-section .feature p { color: var(--accent); font-weight: var(--weight-medium); }


/* =========================================================
   11. PROMO BLOCKS
   ========================================================= */

.promo-hire,
.promo-service {
  width: min(var(--container), calc(100% - var(--space-8)));
  margin: var(--space-9) auto 0;
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  position: relative;
  overflow: hidden;
}

.promo-hire {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.promo-hire::after {
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255, 105, 180, 0.22), transparent 70%);
  pointer-events: none;
}

.promo-hire-badge {
  width: 58px; height: 58px;
  border-radius: var(--radius-md);
  background-color: var(--brand-400);
  background-image: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 100%);
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
  color: var(--text-on-brand);
  flex-shrink: 0;
}

.promo-hire-text { flex: 1; min-width: 220px; }
.promo-hire-text h3 { margin-bottom: var(--space-1); font-size: var(--text-xl); }
.promo-hire-text p { color: var(--text-secondary); font-size: var(--text-sm); }

.promo-service {
  padding: var(--space-7) var(--space-6);
  text-align: center;
  border-top: 3px solid var(--brand-500);
}

.promo-service-icon {
  color: var(--accent);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.promo-service h3 { margin-bottom: var(--space-3); }

.promo-service p {
  margin: 0 auto var(--space-6);
  color: var(--text-secondary);
  max-width: 60ch;
}


/* =========================================================
   12. CONTACT PAGE AND FORMS
   ========================================================= */

.contact-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
}

/* Emergency notice. Deliberately the loudest element on the page - it has to
   out-compete the form for attention. */
.contact-emergency {
  width: min(var(--container), 100%);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md);
  text-align: left;
}

.contact-emergency i { color: var(--color-danger); font-size: var(--text-lg); margin-top: 2px; }
.contact-emergency p { font-size: var(--text-sm); color: var(--text-secondary); }
.contact-emergency strong { color: var(--text-primary); }

.contact-container {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--space-6);
  width: min(var(--container), 100%);
  align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }

.info-item {
  padding: var(--space-5);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}

.info-item > i { color: var(--accent); font-size: var(--text-xl); margin-bottom: var(--space-2); }
.info-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.info-item p { color: var(--text-secondary); font-size: var(--text-base); }

.info-link { color: var(--accent); text-decoration: none; }
.info-link:hover { text-decoration: underline; }

.info-label { color: var(--text-muted); font-size: var(--text-sm); }

.info-item .availability { color: var(--accent); font-size: var(--text-sm); margin-top: var(--space-2); }

.info-social { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); }
.info-social a { color: var(--accent); font-size: var(--text-xl); transition: transform var(--dur-fast) var(--ease); }
.info-social a:hover { transform: translateY(-2px); }

.contact-form-wrapper {
  padding: var(--space-6);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
}

.contact-form-wrapper h2 { margin-bottom: var(--space-2); }

.form-subtitle { color: var(--text-secondary); margin-bottom: var(--space-5); }

/* ---- PHI warning ----
   Sits above the fields, inside the form card, so it cannot be scrolled past
   on the way to the message box. */
.form-phi-notice {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
}

.form-phi-notice h3 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-warning);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-phi-notice p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.form-phi-notice p:last-child { margin-bottom: 0; }
.form-phi-list { color: var(--text-primary) !important; }

/* ---- Fields ---- */
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-group label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.form-req { color: var(--color-danger); margin-left: 2px; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--surface-sunken);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group textarea { min-height: 130px; resize: vertical; }

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
  border-color: var(--brand-500);
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--color-danger); }

.form-group input[type="file"] { padding: var(--space-2); cursor: pointer; font-size: var(--text-sm); }

.form-group input[type="file"]::file-selector-button {
  background-color: var(--brand-solid);
  color: var(--text-on-brand);
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  margin-right: var(--space-3);
}

.form-hint { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-normal); }
.form-hint.is-near-limit { color: var(--color-warning); }

.form-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-error::before { content: "\26A0"; font-size: 1em; }

/* ---- Consent checkbox ---- */
.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.form-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--brand-500);
  cursor: pointer;
}

.form-consent label {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  cursor: pointer;
}

.form-consent .form-error { grid-column: 1 / -1; }

/* The honeypot must be unreachable to people but present to bots, so it is
   moved off-screen rather than display:none - some bots skip hidden inputs. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Submission status ---- */
.form-status:empty { display: none; }

.form-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--surface-2);
  border: 1px solid var(--border-subtle);
}

.form-status-error {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--text-primary);
}

.form-required-note { font-size: var(--text-sm); color: var(--text-muted); }


/* =========================================================
   13. LEGAL DOCUMENT PAGES
   ========================================================= */

.legal-page { padding: var(--space-8) var(--space-5) var(--space-10); }

.legal-doc {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.legal-head { margin-bottom: var(--space-6); }

.legal-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.legal-head h1 { margin-bottom: var(--space-3); }

.legal-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.legal-lead {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.legal-doc section { margin-top: var(--space-8); scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }

.legal-doc h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-doc h3 {
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.legal-doc p { margin-bottom: var(--space-4); color: var(--text-secondary); }
.legal-doc strong { color: var(--text-primary); }

.legal-doc ul,
.legal-doc ol { margin: 0 0 var(--space-4) var(--space-5); color: var(--text-secondary); }
.legal-doc li { margin-bottom: var(--space-2); }

.legal-note {
  font-size: var(--text-sm);
  padding: var(--space-4);
  background-color: var(--surface-sunken);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* ---- Table of contents ---- */
.legal-toc {
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.legal-toc h2 {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border: 0;
  padding: 0;
  margin-bottom: var(--space-3);
}

.legal-toc ol { margin: 0 0 0 var(--space-5); }
.legal-toc li { margin-bottom: var(--space-1); }
.legal-toc a { color: var(--text-secondary); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---- Callouts ---- */
.legal-callout {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  border-left-width: 4px;
}

.legal-callout p { margin-bottom: var(--space-2); font-size: var(--text-sm); }
.legal-callout p:last-child { margin-bottom: 0; }

.legal-callout-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  border-left-color: var(--color-info);
}

.legal-callout-warn {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  border-left-color: var(--color-warning);
}

.legal-callout-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  border-left-color: var(--color-danger);
}

/* The HIPAA header is prescribed by 45 CFR 164.520 and must be prominent. */
.legal-callout-headline {
  background-color: var(--surface-2);
  border-color: var(--brand-500);
  border-left-color: var(--brand-400);
  margin-bottom: var(--space-6);
}

.legal-callout-headline p {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* ---- Definition lists ---- */
.legal-dl { margin-bottom: var(--space-4); }

.legal-dl dt {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-top: var(--space-4);
}

.legal-dl dd {
  margin-left: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* ---- Address blocks ---- */
.legal-address {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.legal-address strong { display: inline-block; margin-bottom: var(--space-1); }

/* ---- Tables ---- */
.legal-table-wrap { overflow-x: auto; margin-bottom: var(--space-5); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 480px;
}

.legal-table caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-bottom: var(--space-2);
}

.legal-table th,
.legal-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.legal-table thead th {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--border-default);
}

.legal-table tbody th { color: var(--text-primary); font-weight: var(--weight-semibold); }
.legal-table td { color: var(--text-secondary); }

/* ---- Section 1557 taglines ---- */
.tagline-list { list-style: none; margin: 0 0 var(--space-5) 0 !important; }

.tagline-list li {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.tagline-lang {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.legal-foot {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.legal-foot a { color: var(--text-secondary); }


/* =========================================================
   14. CONFIRMATION PAGE
   ========================================================= */

.confirm-page { padding: var(--space-9) var(--space-5) var(--space-10); }

.confirm-card {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
  text-align: center;
}

.confirm-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-2xl);
  color: var(--color-success);
  background-color: var(--color-success-bg);
  border: 2px solid var(--color-success-border);
}

.confirm-card h1 { margin-bottom: var(--space-3); }

.confirm-lead {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.confirm-next { text-align: left; margin-bottom: var(--space-7); }

.confirm-next h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
  text-align: center;
}

.confirm-steps { list-style: none; display: flex; flex-direction: column; gap: var(--space-5); }

.confirm-steps li { display: flex; gap: var(--space-4); align-items: flex-start; }

.confirm-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--brand-solid);
  color: var(--text-on-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.confirm-steps h3 { font-size: var(--text-base); font-family: var(--font-body); margin-bottom: var(--space-1); }
.confirm-steps p { font-size: var(--text-sm); color: var(--text-secondary); }

.confirm-urgent {
  text-align: left;
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  background-color: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
}

.confirm-urgent h2 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-danger);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.confirm-urgent p,
.confirm-urgent li { font-size: var(--text-sm); color: var(--text-secondary); }
.confirm-urgent ul { margin: var(--space-2) 0 0 var(--space-5); }
.confirm-urgent li { margin-bottom: var(--space-2); }

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.confirm-foot { font-size: var(--text-sm); color: var(--text-muted); }


/* =========================================================
   15. FOOTER
   =========================================================
   Was position:fixed, permanently spending 3.5rem of every mobile viewport on
   a copyright line. Now a normal document footer that can hold the things a
   healthcare footer actually needs: name, address, phone, hours, and the legal
   notices. */

.site-footer {
  margin-top: var(--space-10);
  background-color: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.footer-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-7);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--space-7) var(--space-6);
}

.footer-col { min-width: 0; }

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--accent);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.footer-logo img { height: 40px; width: auto; }

.footer-blurb {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 34ch;
  margin-bottom: var(--space-4);
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.footer-address,
.footer-hours {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.footer-address { margin-bottom: var(--space-3); }
.footer-address a { color: var(--text-secondary); text-decoration: none; }
.footer-address a:hover { color: var(--accent); text-decoration: underline; }

.footer-muted { color: var(--text-muted); }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }

.footer-links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover { color: var(--accent); text-decoration: underline; }

.social-icons { display: flex; gap: var(--space-4); }

.social-icons a {
  color: var(--text-muted);
  font-size: var(--text-lg);
  transition: color var(--dur-fast) var(--ease);
}

.social-icons a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-6);
}

.footer-bottom > * {
  max-width: var(--container);
  margin-inline: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.footer-emergency { margin-top: var(--space-1); }
.footer-emergency strong { color: var(--text-secondary); }
.footer-emergency a { color: var(--color-danger); }


/* =========================================================
   16. BACK TO TOP
   ========================================================= */

.back-to-top {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-sticky);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background-color: var(--brand-solid);
  color: var(--text-on-brand);
  font-size: var(--text-base);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--elev-2);
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.back-to-top[hidden] { display: none; }

.back-to-top:hover { background-color: var(--brand-solid-hover); transform: translateY(-2px); }


/* =========================================================
   17. RESPONSIVE
   =========================================================
   Three breakpoints, down from five. Each one now only has to redefine
   --nav-h; the body offset, scroll padding and announcement-bar stacking all
   derive from it, so they cannot drift out of sync the way the old
   hand-tuned `body { padding-top: ... }` overrides did.

     985px - nav collapses to the mobile menu
     768px - single-column layouts
     560px - small-phone density
   ========================================================= */

@media (max-width: 985px) {
  :root { --nav-h: 64px; }

  nav { padding-inline: var(--space-4); }

  .nav-container { display: grid; grid-template-columns: 1fr auto 1fr; }

  .logo { grid-column: 2; justify-self: center; font-size: var(--text-base); }
  .logo-img { height: 44px; }

  .nav-right { grid-column: 3; justify-self: end; gap: var(--space-3); }

  .nav-actions { display: none; }

  .mobile-nav-toggle { display: block; }

  /* Slide-down panel */
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) 0;
    background-color: var(--neutral-900);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--elev-nav);
    z-index: var(--z-nav);
  }

  body.has-announce .nav-links { top: calc(var(--nav-h) + var(--announce-h)); }

  .nav-links.active { display: flex; }

  .nav-links a {
    padding: var(--space-3) var(--space-5);
    border-radius: 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-md);
  }

  .nav-links li:last-child a { border-bottom: none; }

  .promo-announce { padding-inline: var(--space-8); }

  .contact-container { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .hero { padding: var(--space-8) var(--space-5) var(--space-7); }

  .cta-button,
  .secondary-button { width: 100%; }

  .feature-grid { grid-template-columns: 1fr; }

  .features,
  .team-section,
  .legal-page { padding-inline: var(--space-4); }

  .promo-hire { flex-direction: column; align-items: flex-start; }

  .confirm-card { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 560px) {
  :root { --nav-h: 56px; }

  .logo-img { height: 38px; }
  .logo span { display: none; }

  .promo-announce {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-7);
    flex-wrap: wrap;
  }

  .contact-main,
  .legal-page,
  .confirm-page { padding-inline: var(--space-3); }

  .contact-form-wrapper,
  .info-item { padding: var(--space-4); }

  .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-brand { grid-column: auto; }

  .legal-table { min-width: 380px; }
}


/* =========================================================
   18. MOTION AND PRINT
   ========================================================= */

@keyframes floatShape {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(340deg); }
}

@keyframes moveDots {
  from { background-position: 0 0; }
  to   { background-position: 110px 110px; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feature { opacity: 1; }

/* Scroll-triggered reveal, added by js/animations.js. */
.feature.animate { animation: fadeInUp var(--dur-slow) var(--ease) both; }

/* Previously only the page loader honoured this. Every decorative animation
   on the site is now covered - the rotating hero shape, the drifting dot
   field, the card reveals, and all transform-based hovers. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .hero-shape,
  .hero-dots { animation: none; }

  .feature:hover,
  .cta-button:hover,
  .secondary-button:hover,
  .promo-btn-grad:hover,
  .submit-btn:hover,
  .back-to-top:hover,
  .info-social a:hover { transform: none; }
}

@media print {
  nav,
  .promo-announce,
  .back-to-top,
  .skip-link,
  .hero-background,
  .legal-toc,
  .confirm-actions { display: none !important; }

  body {
    padding-top: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .legal-doc,
  .legal-doc p,
  .legal-doc li,
  .legal-table td { color: #000; }

  .legal-callout,
  .legal-address,
  .legal-toc,
  .tagline-list li {
    border: 1px solid #999;
    background: transparent;
  }

  .site-footer { border-top: 1px solid #999; }

  a { color: #000; text-decoration: underline; }

  /* Legal documents get printed and filed. Make the links usable on paper. */
  .legal-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .legal-doc section { break-inside: avoid; }
}


/* =========================================================
   19. MOBILE CALL BAR
   =========================================================
   The nav's phone link is hidden at 985px (.nav-actions { display: none }),
   which left a phone visitor no way to call from anywhere except the contact
   page - the single highest-intent action on the site, missing on the devices
   most likely to be used.

   Fixed to the bottom rather than in the nav because a thumb reaches the
   bottom of a phone and not the top, and because the nav is already carrying
   the logo, the menu button and an announcement bar above it.

   Note on safe areas: the public pages deliberately do NOT set
   viewport-fit=cover. Without it the visual viewport already excludes the home
   indicator, so `bottom: 0` sits above it and no env() inset is needed. Adding
   viewport-fit here would push content under the notch in landscape across ten
   pages for no gain.
   ========================================================= */

.call-bar {
  display: none;
}

@media (max-width: 985px) {
  .call-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: 1px;
    background-color: var(--border-subtle);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
  }

  .call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Comfortably past the 44px minimum - this is the one control on the page
       that someone may be tapping one-handed, in a hurry. */
    min-height: 56px;
    padding: var(--space-3) var(--space-2);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    line-height: 1.2;
  }

  .call-bar-primary {
    flex: 2;
    background-color: var(--brand-solid);
    color: var(--text-on-brand);
  }

  .call-bar-secondary {
    flex: 1;
    background-color: var(--surface-2);
    color: var(--text-primary);
  }

  .call-bar a:active {
    filter: brightness(0.92);
  }

  /* Keep the bar off the end of the page content. */
  body {
    padding-bottom: 56px;
  }

  /* Back-to-top would otherwise sit on top of the bar. */
  .back-to-top {
    bottom: calc(56px + var(--space-4));
  }
}

/* Very narrow phones: the number alone, since two labels will not fit. */
@media (max-width: 380px) {
  .call-bar-primary span {
    font-size: var(--text-sm);
  }

  .call-bar-secondary span {
    display: none;
  }
}