@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500;600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design tokens
   Everything visual should come from a token here rather than a one-off
   value in a component, so the site stays internally consistent as it grows.
   ========================================================================== */
:root {
  /* --- Brand palette (unchanged -- these come from brand/BRAND_GUIDELINES) --- */
  --color-gold: #f7b041;
  --color-gold-soft: #fbd291;
  --color-gold-deep: #d1892a;
  --color-green: #41b34a;
  --color-green-deep: #2f8a36;
  --color-blue: #2aabe1;
  --color-navy: #123b52;
  --color-navy-soft: #1c5678;
  --color-black: #231f20;
  --color-cream: #faf7f0;
  --color-paper: #ffffff;

  /* --- Derived surface / text colors --- */
  --color-border: rgba(18, 59, 82, 0.10);
  --color-border-strong: rgba(18, 59, 82, 0.18);
  --color-muted: rgba(35, 31, 32, 0.66);
  --color-muted-soft: rgba(35, 31, 32, 0.52);
  --color-on-dark: rgba(255, 255, 255, 0.82);
  --color-on-dark-muted: rgba(255, 255, 255, 0.64);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* --- Type scale ---
     One ladder for the whole site. Components pick a step; they don't invent
     their own rem value. Fluid steps only where the size really needs to
     shrink on a phone (headings), fixed everywhere else. */
  --fs-micro: 0.75rem;    /* eyebrows, badges, pill labels -- see .eyebrow */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 0.9688rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-h3: 1.1875rem;
  --fs-h2: clamp(1.6rem, 2.9vw, 2.2rem);
  --fs-h1: clamp(1.85rem, 3.4vw, 2.6rem);
  --fs-hero: clamp(2.1rem, 4.4vw, 3.25rem);

  --tracking-micro: 0.11em;
  --tracking-tight: -0.012em;
  --leading-tight: 1.18;
  --leading-body: 1.65;
  --measure: 68ch;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;

  /* Vertical rhythm for <section>. Steps down at tablet/phone in one place
     rather than each section overriding its own padding. */
  --section-pad: 92px;

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Elevation ---
     Layered (a tight contact shadow + a wide ambient one) rather than a
     single large blur, which is what makes a card read as sitting on the
     page instead of floating vaguely above it. */
  --shadow-sm: 0 1px 2px rgba(18, 59, 82, 0.06), 0 2px 8px rgba(18, 59, 82, 0.05);
  --shadow-md: 0 2px 4px rgba(18, 59, 82, 0.05), 0 10px 26px rgba(18, 59, 82, 0.08);
  --shadow-lg: 0 4px 10px rgba(18, 59, 82, 0.06), 0 22px 52px rgba(18, 59, 82, 0.12);
  --shadow-hover: 0 6px 14px rgba(18, 59, 82, 0.07), 0 28px 60px rgba(18, 59, 82, 0.15);

  /* --- Controls --- */
  --control-height: 48px;
  --control-height-sm: 40px;
  --control-height-lg: 56px;

  /* --- Focus ring --- */
  --ring: var(--color-blue);
  --ring-on-dark: var(--color-gold);
  --ring-width: 3px;
  --ring-offset: 3px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22, .8, .28, 1);
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .55s;
  --transition: var(--dur-slow) var(--ease-out);

  --container: 1180px;
  --header-height: 84px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: var(--fs-base);
  color: var(--color-black);
  background: var(--color-cream);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

/* One visible focus treatment for the whole site. Hover styling alone is not
   a focus state -- a keyboard visitor needs to see where they are. */
:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
}
.section.dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero-rotator :focus-visible,
.hero-page :focus-visible {
  outline-color: var(--ring-on-dark);
}

::selection { background: var(--color-gold-soft); color: var(--color-navy); }

.site-shell { overflow: clip; }

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

/* --- Small layout utilities (these replace per-page inline style="" rules) --- */
.text-center { text-align: center; }
.text-center .section-header,
.text-center .section-subtitle,
.text-center .measure { margin-inline: auto; }
.text-center .section-tag { justify-content: center; }

/* A readable line length for body copy. Long measures are one of the
   quickest ways for an otherwise-tidy page to read as amateurish. */
.measure, .copy-stack p, .section-subtitle { max-width: var(--measure); }

/* ==========================================================================
   Micro-labels ("eyebrows")
   The site has six of these -- hero eyebrow, page eyebrow, section tag,
   property nickname, contact card label, team role. They used to each define
   their own size/tracking/weight (0.72-0.8rem, 0.06-0.14em) which read as
   sloppy up close. One shared treatment now; only the color varies.
   ========================================================================== */
.eyebrow,
.section-tag,
.property-eyebrow,
.contact-card > span,
.team-role,
.footer-title {
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  line-height: 1.3;
}

.eyebrow { display: inline-block; color: var(--color-gold); margin-bottom: var(--space-3); }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
.section-tag::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--color-gold);
  flex: none;
}

/* ==========================================================================
   Buttons
   A single sizing system: every button is a pill of one of three fixed
   heights with the same type, tracking and transitions. Variants only change
   color, never geometry -- so a "Submit" and a hero CTA look like siblings.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.btn-sm { min-height: var(--control-height-sm); padding: 0 18px; font-size: var(--fs-xs); }
.btn-lg { min-height: var(--control-height-lg); padding: 0 36px; font-size: var(--fs-base); }

/* Gold -- the single primary action. Works on light and dark backgrounds. */
.btn-primary {
  background: var(--color-gold);
  color: var(--color-navy);
  box-shadow: 0 2px 4px rgba(18, 59, 82, 0.08), 0 8px 20px rgba(247, 176, 65, 0.24);
}
.btn-primary:hover {
  background: #f9bb58;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(18, 59, 82, 0.10), 0 14px 28px rgba(247, 176, 65, 0.32);
}

/* Outline on a dark background (hero, dark CTA bands). */
.btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}

/* Outline on a light background -- the light-background counterpart to
   .btn-secondary, which is invisible on cream. */
.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-border-strong);
}
.btn-outline:hover {
  background: #fff;
  border-color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Every button gets the same press feedback. */
.btn:active { transform: translateY(0); }

/* Button rows. `.hero-actions` is the original name and stays valid so older
   markup keeps working; `.btn-row` is the name to use going forward. */
.btn-row, .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.btn-row.center, .hero-actions.center, .text-center .btn-row, .text-center .hero-actions {
  justify-content: center;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--header-height);
  background: rgba(18, 59, 82, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.brand-icon { height: 42px; width: auto; object-fit: contain; flex: none; }
.brand-text {
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
}

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

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.site-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.site-nav a.active {
  background: var(--color-gold);
  color: var(--color-navy);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--color-border-on-dark);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: background-color var(--dur) var(--ease-out);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  border-radius: 2px; background: #fff;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* Hamburger folds into an X while the menu is open, so the control shows
   its own state instead of looking identical open and closed. */
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The brand plus seven nav items measure ~859px, so they need a ~900px
   viewport to fit at all -- at the old 900px breakpoint they were handed off
   with literally zero slack and spent the last ~120px compressing and
   wrapping "Travel Nurses" and the brand name onto two lines. 960 hands over
   while there is still ~60px of breathing room. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    /* Fully opaque on purpose: at 98% the hero headline behind it was still
       legible through the menu. */
    background: var(--color-navy);
    border-bottom: 1px solid var(--color-border-on-dark);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25);
    padding: var(--space-3) 20px var(--space-5);
    display: none;
  }
  .site-nav a { justify-content: flex-start; min-height: 46px; padding: 0 16px; font-size: var(--fs-md); }
  .site-header.nav-open .site-nav { display: flex; }
}

@media (max-width: 380px) {
  .brand-text { font-size: 0.95rem; }
  .brand-icon { height: 36px; }
}

/* ==========================================================================
   Hero rotator (homepage)
   ========================================================================== */
.hero-rotator {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
}

.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }

.hero-rotator::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,59,82,0.38) 0%, rgba(18,59,82,0.55) 55%, rgba(18,59,82,0.88) 100%);
  z-index: 1;
}

.hero-rotator-copy {
  position: relative;
  z-index: 2;
  padding: 0 0 var(--space-8);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero-rotator-copy .eyebrow { color: var(--color-gold); }

.hero-rotator-copy h1 {
  font-size: var(--fs-hero);
  font-weight: 900;
  margin-bottom: 0.38em;
  text-shadow: 0 2px 24px rgba(18, 59, 82, 0.35);
}

.hero-rotator-copy p {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin: 0 auto;
  text-shadow: 0 1px 12px rgba(18, 59, 82, 0.35);
}

.hero-lede-short { display: none; }
.hero-rotator-copy .btn-row,
.hero-rotator-copy .hero-actions { justify-content: center; margin-top: var(--space-6); }

.hero-dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
}
.hero-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 0; padding: 0; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-dot.is-active { background: var(--color-gold); transform: scale(1.3); }

/* ==========================================================================
   Simple page hero (contact / team / FAQ / travel nurses / terms)
   ========================================================================== */
.hero-page {
  position: relative;
  padding: var(--space-10) 0 var(--space-9);
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-soft));
  color: #fff;
}
.hero-page h1 { font-size: var(--fs-h1); margin-bottom: 0.3em; }
.hero-page p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-md);
  max-width: var(--measure);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: var(--section-pad) 0; }
.section.soft { background: var(--color-paper); }
.section.dark { background: var(--color-navy); color: #fff; }

.section.dark .section-tag { color: var(--color-gold); }
.section.dark .section-tag::before { background: var(--color-gold); }
.section.dark .section-title { color: #fff; }
.section.dark .section-subtitle { color: var(--color-on-dark); }
.section.dark .stat-card,
.section.dark .contact-card,
.section.dark .form-shell {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-on-dark);
  box-shadow: none;
}
.section.dark .stat-card h3,
.section.dark .contact-card h3 { color: #fff; }
.section.dark .stat-card p,
.section.dark .contact-card p { color: var(--color-on-dark-muted); }
.section.dark .stat-card:hover,
.section.dark .contact-card:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.section-header { margin-bottom: var(--space-6); }
.section-title { font-size: var(--fs-h2); margin-bottom: 0.35em; }
.section-title:last-child { margin-bottom: 0; }
.section-subtitle { color: var(--color-muted); font-size: var(--fs-md); margin: 0; }

.split-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.split-layout.reverse > *:first-child { order: 2; }
.split-layout.reverse > *:last-child { order: 1; }

.copy-subheading { font-size: var(--fs-xl); margin-top: 1.4em; }

.media-panel {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  margin-bottom: var(--space-5);
}
.media-panel img { width: 100%; height: 100%; object-fit: cover; }

/* Small teaser thumbnails that scroll down to Properties / the video
   walkthroughs section, instead of a full-size photo or video embed
   competing with the stat cards for attention. */
.mini-thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.mini-thumb {
  position: relative; flex: 1; display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.mini-thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mini-thumb:hover img { transform: scale(1.06); }
.mini-thumb span:not(.mini-thumb-play) {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 10px 8px;
  font-size: var(--fs-xs);
  font-weight: 700; line-height: 1.2; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(18, 59, 82, 0.88));
}
.mini-thumb-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; padding-left: 2px;
  box-shadow: 0 2px 10px rgba(18, 59, 82, 0.3);
}

/* Hospital drive-time list in the "Over 50 Families" column. */
.distance-list {
  list-style: none;
  margin: 0 0 1.05em;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.distance-list li {
  position: relative;
  padding-left: 24px;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.distance-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}
.distance-list strong { color: var(--color-black); }

/* ==========================================================================
   Stat / contact cards
   ========================================================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}
/* Single-column variant used beside a column of copy (replaces the inline
   style="grid-template-columns:1fr; margin-top:0" these used to carry). */
.stats-row.stacked { grid-template-columns: 1fr; margin-top: 0; }

.stat-card, .contact-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.stat-card:hover, .contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.stat-card strong.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(247, 176, 65, 0.16);
  color: var(--color-navy);
  margin-bottom: var(--space-4);
  font-size: 1.3rem;
}
.section.dark .stat-card strong.stat-icon { background: rgba(247, 176, 65, 0.22); }

.stat-card h3, .contact-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.stat-card p, .contact-card p { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
.contact-card > span { display: block; color: var(--color-gold-deep); margin-bottom: var(--space-3); }
.section.dark .contact-card > span { color: var(--color-gold); }

/* auto-fit rather than a fixed 3, so removing a card (the Insurance
   Verification one went in 2026-09) reflows instead of leaving a gap. */
.contact-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }

/* ==========================================================================
   Properties: card grid
   ========================================================================== */
.properties-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.property-card {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-strong);
}

.property-media { position: relative; aspect-ratio: 4/3; flex: none; background: var(--color-cream); }
.property-media img { width: 100%; height: 100%; object-fit: cover; }

/* Multi-photo properties only (.property-media[data-property-slider]) stack
   every slide and crossfade; single-photo properties keep the plain <img>
   above with no absolute positioning needed. */
.property-media[data-property-slider] .property-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.property-media[data-property-slider] .property-slide.is-active { opacity: 1; }

/* A soft scrim behind the dots so they stay legible over a bright photo
   (the shower and kitchen shots in particular washed them out). */
.property-media[data-property-slider]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(180deg, transparent, rgba(18, 59, 82, 0.45));
  pointer-events: none;
  z-index: 1;
}

.property-dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  z-index: 3;
  display: flex; justify-content: center;
  gap: 7px;
  /* The row spans the full width, so without this it would swallow every tap
     along the bottom strip that was meant for the prev/next zones below it. */
  pointer-events: none;
}
.property-dot { pointer-events: auto; }
.property-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 0; padding: 0; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.property-dot:hover { background: #fff; }
.property-dot.is-active { background: var(--color-gold); transform: scale(1.3); }

/* --- Tap/click zones for changing photo ---
   Reviewer feedback (2026-09-20): swiping was the only way to browse photos
   on a phone and it was unpleasant. These are real buttons, so they also work
   by click and by keyboard; swipe still works alongside them. */
.property-nav {
  position: absolute; top: 0; bottom: 0;
  width: 38%;
  z-index: 2;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.property-nav-prev { left: 0; justify-content: flex-start; }
.property-nav-next { right: 0; justify-content: flex-end; }

.property-card:hover .property-nav,
.property-nav:focus-visible { opacity: 1; }

/* Touch devices never get :hover, and discoverability was the actual
   complaint -- so show the arrows there permanently. */
@media (hover: none) {
  .property-nav { opacity: 1; }
}

.property-nav > span {
  width: 34px; height: 34px;
  margin: 0 var(--space-3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(18, 59, 82, 0.28);
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.property-nav:hover > span { background: #fff; transform: scale(1.06); }
.property-nav:active > span { transform: scale(0.94); }
/* Chevron drawn from two borders -- crisp at any size, no font dependency. */
.property-nav > span::before {
  content: "";
  width: 8px; height: 8px;
  border-top: 2px solid var(--color-navy);
  border-right: 2px solid var(--color-navy);
}
.property-nav-next > span::before { transform: rotate(45deg); margin-left: -3px; }
.property-nav-prev > span::before { transform: rotate(-135deg); margin-right: -3px; }

/* Copy column flexes so that however long a description runs, the amenity
   pills sit on the same baseline across every card in the row. Ragged card
   bottoms were the single most "unfinished"-looking thing on the page. */
.property-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5) var(--space-5) var(--space-5);
}

.property-eyebrow { color: var(--color-green-deep); margin-bottom: var(--space-2); display: block; }

.property-title-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.property-copy h3 { font-size: var(--fs-xl); margin-bottom: 0; }

.property-badge {
  display: inline-flex; align-items: center;
  background: var(--color-gold);
  color: var(--color-navy);
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.property-copy .property-address {
  display: block;
  color: var(--color-muted-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.property-copy p { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }

.property-amenities {
  list-style: none;
  margin: auto 0 0;      /* `auto` top margin pins the pills to the card floor */
  padding: var(--space-4) 0 0;
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.property-amenities li {
  background: rgba(65, 179, 74, 0.10);
  color: var(--color-navy);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.property-note {
  font-size: var(--fs-xs);
  color: var(--color-muted-soft);
  font-style: italic;
  margin: var(--space-3) 0 0;
}

/* ==========================================================================
   Team
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.team-card { text-align: center; }
.team-photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4);
  border: 4px solid #fff;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.team-card:hover .team-photo { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.team-role { display: block; color: var(--color-green-deep); }
.section.dark .team-role { color: var(--color-gold-soft); }
.team-card p.team-bio {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-shell {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.form-shell-title { font-size: var(--fs-xl); margin-bottom: var(--space-1); }
.form-shell-intro { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field.full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
}
.field-optional { font-weight: 500; color: var(--color-muted-soft); text-transform: none; letter-spacing: 0; }

.field input, .field select {
  height: var(--control-height);
}
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  background: var(--color-cream);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(18, 59, 82, 0.32); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-blue);
  background: var(--color-paper);
  box-shadow: 0 0 0 3px rgba(42, 171, 225, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(35, 31, 32, 0.38); }

.section.dark .form-shell-title,
.section.dark .field label { color: #fff; }
/* Without this the "Optional" hint inherits the light-background muted color
   -- near-black text sitting on the navy form panel. */
.section.dark .field-optional { color: rgba(255, 255, 255, 0.5); }
.section.dark .form-shell-intro { color: var(--color-on-dark-muted); }
.section.dark .field input,
.section.dark .field textarea,
.section.dark .field select {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border-on-dark);
  color: #fff;
}
.section.dark .field input:hover,
.section.dark .field textarea:hover,
.section.dark .field select:hover { border-color: rgba(255, 255, 255, 0.34); }
.section.dark .field input:focus,
.section.dark .field textarea:focus,
.section.dark .field select:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(247, 176, 65, 0.2);
}
.section.dark .field input::placeholder,
.section.dark .field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.form-feedback {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.form-feedback p { margin: 0; }
.form-feedback-success { background: rgba(65, 179, 74, 0.14); border-color: rgba(65, 179, 74, 0.3); color: #1c5c22; }
.form-feedback-error { background: rgba(227, 30, 36, 0.09); border-color: rgba(227, 30, 36, 0.25); color: #8a1418; }
.form-feedback-error ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.section.dark .form-feedback-success { color: #bdf0c2; }
.section.dark .form-feedback-error { color: #ffc0c2; }

/* Consent checkbox on the testimonial form. The label wraps the control so
   the whole line is a target, and the box keeps its size when the text wraps. */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: 0;
}
.checkbox-field input[type="checkbox"] {
  flex: none;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-gold);
  cursor: pointer;
}
.section.dark .checkbox-field { color: var(--color-on-dark); }

/* Honeypot field: off-screen (not display:none) so it still "exists" to a
   bot's form-filling logic, but no real visitor ever sees or reaches it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faq-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.faq-item.is-open { border-color: rgba(247, 176, 65, 0.55); }

.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-5);
  background: none; border: 0; cursor: pointer;
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  text-align: left;
}

.faq-icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--color-gold-deep);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out);
}
.faq-icon::before { width: 15px; height: 2.5px; border-radius: 2px; }
.faq-icon::after { width: 2.5px; height: 15px; border-radius: 2px; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq-answer { min-height: 0; overflow: hidden; }
.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer p, .faq-answer ul {
  padding-inline: var(--space-5);
  margin: 0 0 0.9em;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  max-width: var(--measure);
}
.faq-answer ul { padding-left: calc(var(--space-5) + 18px); }
.faq-answer li { margin-bottom: var(--space-1); }
/* The last block carries the panel's bottom padding. Without this, an answer
   made of several paragraphs stacks a full panel gap after every one of them. */
.faq-answer > *:last-child { margin-bottom: 0; padding-bottom: var(--space-5); }

/* ==========================================================================
   Testimonials (real quotes not collected yet)
   ========================================================================== */
.testimonial-empty {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-soft));
  border-radius: var(--radius-xl);
  color: var(--color-on-dark);
}
.testimonial-empty strong {
  color: #fff;
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
}
.testimonial-empty span { max-width: 480px; font-size: var(--fs-sm); }
.testimonial-cta { text-align: center; }
.testimonial-cta p { color: var(--color-muted); font-size: var(--fs-md); margin-bottom: 0; }

/* ==========================================================================
   Video embeds
   ========================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-black);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-embed.is-placeholder {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-soft));
  color: var(--color-on-dark);
  box-shadow: var(--shadow-sm);
}
.video-embed.is-placeholder strong {
  color: #fff;
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-size: var(--fs-md);
}
.video-embed.is-placeholder span { font-size: var(--fs-xs); color: var(--color-on-dark-muted); }

.video-caption {
  margin: var(--space-3) 0 0;
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================================
   Spam-protected contact links
   Phone/email render as PNGs (assets/img/contact/) rather than text, and the
   real tel:/mailto: value is assembled only at click time (see main.js), so
   nothing scrapable ever sits in the page source or resting DOM.

   Sizing note: the two PNGs are not interchangeable. phone-*.png is a 510x69
   canvas whose ink is 49px tall (digits, no ascenders or descenders), while
   email-*.png is 899x83 with 63px of ink spanning ascender to descender. Set
   to the same CSS height the phone number renders visibly larger than the
   email address, which is why they get different em heights below -- tuned so
   the *glyphs* match, not the boxes. `middle` alignment keeps them centered
   on the surrounding text instead of riding above the baseline.
   ========================================================================== */
.protected-contact {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease-out);
}
.protected-contact-img { display: block; width: auto; height: 1.05em; }
.protected-contact[data-protected-contact="mail"] .protected-contact-img { height: 1.35em; }
.protected-contact:hover { opacity: 0.8; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-black);
  color: var(--color-on-dark);
  padding: var(--space-9) 0 var(--space-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.9fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}
.footer-brand-mark { margin-bottom: var(--space-4); }
.footer-brand .brand-icon { height: 38px; }
.footer-brand p {
  color: var(--color-on-dark-muted);
  font-size: var(--fs-sm);
  max-width: 280px;
  margin: 0;
}
.footer-title { color: #fff; margin-bottom: var(--space-4); }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a, .footer-contact span {
  color: var(--color-on-dark-muted);
  font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease-out);
}
.footer-links a:hover { color: var(--color-gold); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-5);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Legal / long-form copy pages
   ========================================================================== */
.legal-copy { max-width: 760px; }
.legal-copy h3 { font-size: var(--fs-lg); margin-top: 1.7em; }
.legal-copy h3:first-child { margin-top: 0; }
.legal-copy p, .legal-copy li { color: var(--color-muted); font-size: var(--fs-sm); }
.legal-copy ul { padding-left: 22px; margin: 0 0 1em; }
.legal-copy li { margin-bottom: var(--space-1); }

/* ==========================================================================
   Responsive
   One ladder of breakpoints, largest first, so it is obvious what changes
   where instead of each component carrying its own media query.
   ========================================================================== */

/* --- Tablet --- */
@media (max-width: 1080px) {
  :root { --section-pad: 76px; }
}

@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; gap: var(--space-7); }
  .split-layout.reverse > *:first-child { order: 1; }
  .split-layout.reverse > *:last-child { order: 2; }
  /* Button row under stacked copy reads better centered than left-aligned
     under a now-centered-ish column. */
  .split-layout .btn-row, .split-layout .hero-actions { justify-content: center; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

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

@media (max-width: 720px) {
  .stats-row { grid-template-columns: 1fr; }
}

/* --- Phones --- */
@media (max-width: 640px) {
  :root { --section-pad: 56px; }

  /* Hero: 86vh + bottom-anchored content (justify-content:flex-end) piled
     all the empty space above the copy on tall phone screens, pushing it
     down near the bottom. Center it instead and shrink the section so the
     headline sits close to the header, not ~80px further down. */
  .hero-rotator { min-height: min(60vh, 520px); justify-content: center; }
  .hero-rotator-copy { padding-bottom: 0; }
  .hero-dots { padding-top: var(--space-4); padding-bottom: var(--space-5); }

  /* Real photos behind the hero text are busier than the old placeholder
     gradients and harder to read over on a small screen -- shorten the
     lede instead of dropping it entirely. */
  .hero-lede-full { display: none; }
  .hero-lede-short { display: block; }

  .section-header { margin-bottom: var(--space-5); }

  /* Same dead-space issue on the simple page hero (travel nurse, team,
     contact): the desktop top padding left ~90px of empty navy above the
     heading on a phone. */
  .hero-page { padding: var(--space-8) 0 var(--space-7); }

  .properties-list { grid-template-columns: 1fr; gap: var(--space-5); }
  .property-copy { padding: var(--space-5) var(--space-4) var(--space-4); }
  .form-shell { padding: var(--space-5) var(--space-4); }
  .faq-question { padding: var(--space-4); gap: var(--space-4); }
  .faq-answer p, .faq-answer ul { padding-inline: var(--space-4); }
  .faq-answer ul { padding-left: calc(var(--space-4) + 18px); }
  .faq-answer > *:last-child { padding-bottom: var(--space-4); }
  .video-grid { gap: var(--space-5); }

  /* A full-width primary action is the expected mobile pattern and gives a
     much larger tap target than a centered pill. */
  .btn-row .btn, .hero-actions .btn { width: 100%; }
  .field .btn { width: 100%; }

  /* Footer needs its own mobile treatment: less top padding, a tighter
     single-column gap, and each column's content centered so it reads as
     one calm stacked block instead of left-aligned columns with no visual
     anchor. */
  .site-footer { padding: var(--space-8) 0 var(--space-5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
  .footer-grid > div { text-align: center; }
  .footer-brand-mark { justify-content: center; }
  .footer-brand p { margin-inline: auto; }
  .footer-links, .footer-contact { align-items: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-2); }
}

@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .team-photo { max-width: 220px; margin-inline: auto; }
}

@media (max-width: 520px) {
  .mini-thumbs { gap: var(--space-2); }
  .mini-thumb span:not(.mini-thumb-play) { font-size: 0.66rem; padding: 14px 6px 6px; }
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal-left, .reveal-right, .reveal-up, .reveal-scale {
  opacity: 0;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-left { transform: translateX(-26px); }
.reveal-right { transform: translateX(26px); }
.reveal-up { transform: translateY(24px); }
.reveal-scale { transform: scale(0.94); }
.reveal-left.in-view, .reveal-right.in-view, .reveal-up.in-view, .reveal-scale.in-view {
  opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-left, .reveal-right, .reveal-up, .reveal-scale, .hero-slide {
    opacity: 1 !important;
    transform: none !important;
  }
}