/* ==========================================================================
   LINS MEDCARE — DESIGN SYSTEM
   Color: Lins Blue core, white, soft blue tints, navy text, neutral grey
   Type:  Plus Jakarta Sans (display) + Inter (body)
   ========================================================================== */

:root {
  /* ---- Color tokens ---- */
  --lins-blue: #5271FF;
  --lins-blue-deep: #2F4CDB;
  --lins-blue-soft: #EEF1FF;
  --lins-blue-mist: #F7F8FC;
  --navy: #101A33;
  --navy-soft: #1C2A4E;
  --grey: #64708A;
  --grey-light: #A6AEC2;
  --line: #E4E8F5;
  --white: #FFFFFF;
  --amber-glow: #FFB648; /* used only as a tiny live-status accent, never as a background */

  /* ---- Type ---- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Radius / shadow / spacing ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-soft: 0 8px 30px rgba(16, 26, 51, 0.06);
  --shadow-card: 0 4px 16px rgba(16, 26, 51, 0.05);
  --shadow-glass: 0 12px 40px rgba(47, 76, 219, 0.14);

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  --container: 1200px;
  --container-narrow: 780px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol { list-style: none; padding: 0; margin: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

p { color: var(--grey); }
p.lead { font-size: 1.15rem; color: var(--navy-soft); line-height: 1.65; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section { position: relative; }
.section-pad { padding: var(--space-3xl) 0; }
.section-pad-sm { padding: var(--space-2xl) 0; }

@media (max-width: 900px) {
  .section-pad { padding: var(--space-2xl) 0; }
  .section-pad-sm { padding: var(--space-xl) 0; }
}

/* ---- Focus states (accessibility) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--lins-blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 0 0 10px 0;
  z-index: 999;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---- Eyebrow / section kicker ----
   Used sparingly, sentence case (not tracked-out caps) to name the section's role. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lins-blue-deep);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-sm);
}
.kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lins-blue);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: var(--space-sm); font-size: 1.05rem; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--lins-blue);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(82, 113, 255, 0.32);
}
.btn-primary:hover { background: var(--lins-blue-deep); box-shadow: 0 12px 28px rgba(47, 76, 219, 0.4); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}
.btn-outline:hover { border-color: var(--lins-blue); color: var(--lins-blue-deep); background: var(--lins-blue-soft); }

.btn-ghost-light {
  background: rgba(255,255,255,0.14);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.24); }

.btn-emergency {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(16, 26, 51, 0.25);
}
.btn-emergency:hover { background: var(--navy-soft); }
.btn-emergency .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber-glow);
  box-shadow: 0 0 0 0 rgba(255, 182, 72, 0.6);
  animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(255, 182, 72, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 182, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 182, 72, 0); }
}

.btn-sm { min-height: 42px; padding: 0 20px; font-size: 0.92rem; }
.btn-block { width: 100%; }

/* ==========================================================================
   GLASS COMPONENTS — used deliberately, not everywhere
   ========================================================================== */
.glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-glass);
}
.glass-on-dark {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(228, 232, 245, 0.9);
}
.site-header .container { max-width: 1340px; }
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: var(--space-md);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.nav-links a {
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--navy-soft);
  transition: color 0.15s ease;
  position: relative;
}
.nav-links a:hover { color: var(--lins-blue-deep); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1220px) {
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 84px 0 0 0;
  background: var(--white);
  z-index: 99;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a {
  display: block;
  padding: 16px 4px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .mobile-cta { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: 12px; }

/* Sticky mobile action bar */
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 10px var(--space-sm);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.mobile-action-bar .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mobile-action-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; color: var(--navy-soft);
  min-height: 48px; justify-content: center;
  border-radius: 14px;
}
.mobile-action-bar a svg { width: 20px; height: 20px; }
.mobile-action-bar a.emergency { color: var(--white); background: var(--navy); }
.mobile-action-bar a.emergency .pulse { background: var(--amber-glow); }

@media (max-width: 720px) {
  .mobile-action-bar { display: block; }
  body { padding-bottom: 78px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background:
    radial-gradient(1100px 500px at 82% -10%, var(--lins-blue-soft) 0%, rgba(238,241,255,0) 60%),
    var(--white);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-copy .trust-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}
.hero-copy h1 { margin-bottom: var(--space-md); }
.hero-copy .lead { max-width: 480px; margin-bottom: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--space-lg); }
.hero-note { font-size: 0.92rem; color: var(--grey); display: flex; align-items: flex-start; gap: 8px; }
.hero-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--lins-blue); }

.hero-visual { position: relative; }
.hero-photo {
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 15%, #7C93FF 0%, var(--lins-blue) 45%, var(--lins-blue-deep) 100%);
  box-shadow: var(--shadow-soft);
}
.hero-photo .photo-pattern {
  position: absolute; inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.14) 0, rgba(255,255,255,0) 40%);
}
.hero-photo .photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px 20px;
  color: rgba(255,255,255,0.92);
  font-size: 0.85rem;
  background: linear-gradient(180deg, rgba(16,26,51,0) 0%, rgba(16,26,51,0.42) 100%);
}
.hero-photo .photo-caption strong { display: block; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 2px; }

.hero-team-card {
  position: absolute;
  left: -8%;
  bottom: -8%;
  width: 78%;
  min-width: 260px;
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.hero-team-card .team-title { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; margin-bottom: var(--space-sm); color: var(--navy); }
.hero-team-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.hero-team-card li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 600; color: var(--navy-soft); }
.hero-team-card .icon-chip {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--lins-blue-soft);
  color: var(--lins-blue-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-team-card .icon-chip svg { width: 16px; height: 16px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .hero-team-card { position: static; width: 100%; margin-top: var(--space-md); }
  .hero-photo { aspect-ratio: 4/3.3; }
}

/* Emotional statement band */
.emotional-band {
  padding: var(--space-xl) 0;
  text-align: center;
}
.emotional-band p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  max-width: 640px;
  margin: 0 auto;
}
.emotional-band p .accent { color: var(--lins-blue); }

/* ==========================================================================
   SERVICE GROUPS
   ========================================================================== */
.service-panel {
  background: var(--lins-blue-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.service-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.service-group {
  border-top: 3px solid var(--group-color, var(--lins-blue));
  padding-top: var(--space-md);
}
.service-group:nth-child(1) { --group-color: #5271FF; }
.service-group:nth-child(2) { --group-color: #2F4CDB; }
.service-group:nth-child(3) { --group-color: #101A33; }
.service-group h3 { margin-bottom: 4px; }
.service-group .group-sub { font-size: 0.88rem; color: var(--grey); margin-bottom: var(--space-md); }
.service-group ul { display: flex; flex-direction: column; gap: 10px; }
.service-group li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; color: var(--navy-soft); font-weight: 500;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.service-group li:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.service-group li svg { width: 17px; height: 17px; color: var(--lins-blue); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 900px) {
  .service-panel { padding: var(--space-lg) var(--space-md); }
  .service-groups { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ==========================================================================
   NURSES VS CAREGIVERS
   ========================================================================== */
.compare-wrap { position: relative; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.compare-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.compare-card h3 { margin-bottom: 6px; }
.compare-card .role-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}
.compare-card ul { display: flex; flex-direction: column; gap: 9px; margin-top: var(--space-sm); }
.compare-card li { display: flex; gap: 9px; font-size: 0.95rem; color: var(--navy-soft); }
.compare-card li svg { width: 16px; height: 16px; color: var(--lins-blue); flex-shrink: 0; margin-top: 3px; }

.compare-connector {
  max-width: 460px;
  margin: -22px auto 0;
  position: relative;
  text-align: center;
  padding: 16px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  z-index: 2;
}

@media (max-width: 800px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-connector { margin-top: var(--space-md); }
}

/* ==========================================================================
   HOW IT WORKS (true sequence — numbering justified)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 26px; left: 6%; right: 6%;
  height: 1.5px;
  background: var(--line);
  z-index: 0;
}
.step { position: relative; z-index: 1; }
.step .step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--lins-blue);
  color: var(--lins-blue-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: 0.92rem; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }
  .steps::before { display: none; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GENERIC 3/4-COL CARD GRIDS (why-us, trust, non-elderly services)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.info-card .icon-chip {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--lins-blue-soft);
  color: var(--lins-blue-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
}
.info-card .icon-chip svg { width: 22px; height: 22px; }
.info-card h3 { margin-bottom: 8px; }
.info-card p { font-size: 0.95rem; }

/* ==========================================================================
   AMBULANCE — dark, distinct, blue-glow, no red
   ========================================================================== */
.ambulance-section {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}
.ambulance-section::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(82,113,255,0.35) 0%, rgba(82,113,255,0) 70%);
  pointer-events: none;
}
.ambulance-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
}
.ambulance-copy .kicker { color: #B9C4FF; }
.ambulance-copy h2 { color: var(--white); }
.ambulance-copy p.lead { color: rgba(255,255,255,0.72); }
.ambulance-copy .partner-note {
  margin-top: var(--space-md);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  display: flex; gap: 8px; align-items: flex-start;
}
.ambulance-copy .partner-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: #B9C4FF; }

.ambulance-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.ambulance-card .status-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.ambulance-card .status-row .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--amber-glow); animation: pulseDot 1.8s infinite; }
.ambulance-card .status-row span { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.ambulance-card h3 { color: var(--white); font-size: 1.3rem; margin-bottom: var(--space-sm); }
.ambulance-card p { color: rgba(255,255,255,0.68); font-size: 0.95rem; margin-bottom: var(--space-lg); }
.ambulance-card .actions { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
  .ambulance-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ==========================================================================
   COVERAGE / LOCATIONS
   ========================================================================== */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.location-card {
  background: var(--lins-blue-mist);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color 0.15s ease;
}
.location-card:hover { background: var(--lins-blue-soft); }
.location-card .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.location-card .name span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--grey); margin-top: 2px; }
.location-card svg { width: 18px; height: 18px; color: var(--lins-blue); }

@media (max-width: 900px) { .coverage-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .coverage-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: 20px 24px;
  background: none; border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
}
.faq-question .chevron {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lins-blue-soft);
  color: var(--lins-blue-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s ease;
}
.faq-item[data-open="true"] .chevron { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.faq-answer-inner { padding: 0 24px 22px; font-size: 0.96rem; color: var(--grey); max-width: 640px; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-card {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.testimonial-card p.quote { color: var(--navy-soft); font-size: 1.02rem; line-height: 1.65; margin-bottom: var(--space-md); flex-grow: 1; }
.testimonial-card .who { display: flex; align-items: center; gap: 12px; }
.testimonial-card .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--lins-blue-soft);
  color: var(--lins-blue-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.testimonial-card .name { font-weight: 700; font-size: 0.92rem; }
.testimonial-card .rel { font-size: 0.82rem; color: var(--grey); }
.placeholder-flag {
  margin-top: var(--space-md);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  width: fit-content;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  background: var(--lins-blue);
  background-image: radial-gradient(900px 400px at 15% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  color: var(--white);
}
.cta-band h2 { color: var(--white); max-width: 600px; margin: 0 auto var(--space-sm); }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto var(--space-lg); }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-primary { background: var(--white); color: var(--lins-blue-deep); box-shadow: 0 10px 24px rgba(16,26,51,0.18); }
.cta-band .btn-primary:hover { background: var(--lins-blue-soft); }

/* ==========================================================================
   PHOTO PLACEHOLDER (used across pages instead of stock photography) —
   swap the .photo-placeholder div for a real <img> when real
   Lins Medcare photography is available. See README for image specs.
   ========================================================================== */
.photo-placeholder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 260px;
  background: linear-gradient(135deg, #7C93FF 0%, var(--lins-blue) 50%, var(--lins-blue-deep) 100%);
}
.photo-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 82% 80%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0) 42%);
}
.photo-placeholder .ph-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  color: rgba(255,255,255,0.92);
}
.photo-placeholder .ph-label svg { width: 34px; height: 34px; margin-bottom: 12px; opacity: 0.85; }
.photo-placeholder .ph-label strong { font-family: var(--font-display); font-size: 0.98rem; display: block; margin-bottom: 4px; }
.photo-placeholder .ph-label span { font-size: 0.82rem; color: rgba(255,255,255,0.72); max-width: 260px; }
/* Once a real <img> is added inside .photo-placeholder or .hero-photo, it
   fills the existing rounded frame automatically — no other markup needs
   to change. See README "Adding real photos". */
.photo-placeholder img,
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  padding: var(--space-2xl) 0 var(--space-lg);
}
.footer-top {
  display: grid;
  /* The last column carries a full email address as one unbreakable line —
     a plain fr share treated it the same as "About" or "Contact", so
     between roughly 980px and 1220px wide it got squeezed to ~155-165px,
     just short of the ~180px "contact@linsmedcare.com" needs, and wrapped
     it to two lines. minmax() gives it a floor that can't be squeezed
     below, taken from the shorter link columns beside it. */
  grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr minmax(200px, 1.2fr);
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 30px; margin-bottom: var(--space-sm); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.92rem; max-width: 260px; }
.footer-col h4 { color: var(--white); font-size: 0.92rem; margin-bottom: var(--space-sm); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.9rem; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--white); }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; margin-bottom: 4px;}
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; color: #8FA0FF; }

.footer-bottom {
  padding-top: var(--space-md);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}
.footer-bottom .legal-links { display: flex; gap: 20px; }

@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BREADCRUMB (SEO + orientation)
   ========================================================================== */
.breadcrumb {
  padding: var(--space-md) 0 0;
  font-size: 0.86rem;
  color: var(--grey);
}
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--lins-blue-deep); }
.breadcrumb .sep { margin: 0 8px; color: var(--grey-light); }
.breadcrumb .current { color: var(--navy-soft); font-weight: 500; }

/* ==========================================================================
   INNER HERO (used on Elderly Care and future sub-pages)
   ========================================================================== */
.inner-hero {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: radial-gradient(1000px 460px at 85% -20%, var(--lins-blue-soft) 0%, rgba(238,241,255,0) 60%);
}
.inner-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
}
.inner-hero .lead { max-width: 480px; margin-bottom: var(--space-lg); }
.inner-hero-visual .photo-placeholder { aspect-ratio: 4/3.6; }

@media (max-width: 980px) {
  .inner-hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .inner-hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
}

/* who-this-is-for chips */
.audience-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-md); }
.audience-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-soft);
}
.audience-chip svg { width: 15px; height: 15px; color: var(--lins-blue); }

/* Two-column text+visual alternating content blocks */
.split-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.split-block.reverse .split-visual { order: -1; }
@media (max-width: 900px) {
  .split-block, .split-block.reverse .split-visual { grid-template-columns: 1fr; order: 0; }
  .split-block { grid-template-columns: 1fr; }
  .split-block .split-visual { order: -1; }
}
.split-visual .photo-placeholder { aspect-ratio: 4/3.2; }
.split-copy ul.check-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; font-size: 0.95rem; color: var(--navy-soft); }
.check-list li svg { width: 17px; height: 17px; color: var(--lins-blue); flex-shrink: 0; margin-top: 2px; }

/* Care request panel (elderly-care page quick CTA) */
.request-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.request-panel h3 { margin-bottom: 6px; }
.request-panel p { font-size: 0.92rem; margin-bottom: var(--space-md); }
.request-panel .field { margin-bottom: 12px; }
.request-panel label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy-soft); margin-bottom: 6px; }
.request-panel select, .request-panel input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  background: var(--white);
}
.request-panel select:focus, .request-panel input:focus { border-color: var(--lins-blue); }
.form-note { font-size: 0.78rem; color: var(--grey); margin-top: 10px; text-align: center; }

/* Placeholder / not-yet-live badge for content-honesty (facts not yet supplied) */
.tbd {
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.88em;
  font-weight: 600;
}

/* ==========================================================================
   HEALTH RESOURCES HUB + ARTICLE TEMPLATE
   ========================================================================== */
.category-row { display: flex; flex-wrap: wrap; gap: 10px; }
.category-chip {
  display: inline-flex; align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.category-chip:hover, .category-chip.active {
  border-color: var(--lins-blue);
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
}

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .article-grid { grid-template-columns: 1fr; } }

.article-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.article-card.is-live:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.article-card .cat-tag {
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}
.article-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.article-card p { font-size: 0.92rem; flex-grow: 1; }
.article-card .card-foot {
  margin-top: var(--space-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lins-blue-deep);
}
.article-card.is-soon { opacity: 0.6; cursor: default; }
.article-card.is-soon .card-foot { color: var(--grey); }

/* Article page */
.article-hero { padding: var(--space-lg) 0 var(--space-xl); }
.article-hero .cat-tag {
  display: inline-block;
  font-size: 0.8rem; font-weight: 700;
  color: var(--lins-blue-deep);
  background: var(--lins-blue-soft);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}
.article-hero h1 { max-width: 760px; }
.article-meta { display: flex; gap: 16px; align-items: center; margin-top: var(--space-md); font-size: 0.88rem; color: var(--grey); }

.article-body { max-width: var(--container-narrow); margin: 0 auto; }
.article-body > * + * { margin-top: var(--space-md); }
.article-body h2 { margin-top: var(--space-xl); margin-bottom: var(--space-xs); }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 1.02rem; line-height: 1.75; color: var(--navy-soft); }
.article-body ul { display: flex; flex-direction: column; gap: 10px; padding-left: 0; }
.article-body ul li { display: flex; gap: 10px; font-size: 1rem; color: var(--navy-soft); }
.article-body ul li svg { width: 17px; height: 17px; color: var(--lins-blue); flex-shrink: 0; margin-top: 4px; }
.article-callout {
  background: var(--lins-blue-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.98rem;
  color: var(--navy-soft);
}
.article-callout strong { color: var(--navy); }

/* Reveal-on-load hero animation — single deliberate moment, not per-section */
.reveal { opacity: 0; transform: translateY(14px); animation: revealUp 0.7s ease forwards; }
.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   ADDITIONS — interaction layer, mobile fixes, accessibility
   --------------------------------------------------------------------------
   Everything below animates only `transform` and `opacity`, the two
   properties the browser can handle on the GPU without repainting the page.
   No animation library. Every effect is switched off under
   prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOBILE HERO ORDER
   The hero photo was ordered above the headline below 980px, which pushed
   "Quality care, delivered straight to your home." off the bottom of a phone
   screen. Headline first, photo second: a visitor should know what this is
   before they see a picture.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero { padding-top: var(--space-lg); }
  .hero-grid { gap: var(--space-lg); }
  .hero-visual { order: 0; max-width: 460px; margin: 0 auto; }
  .hero-copy .trust-line { margin-bottom: var(--space-sm); }
  .hero-copy .lead { max-width: none; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   2. SCROLL REVEALS
   Three different treatments rather than one effect applied to everything:
   text rises a short distance, photographs uncover from the bottom edge, and
   cards in a group come in staggered. `.is-in` is added once by
   IntersectionObserver and never removed, so nothing replays on scroll-up.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="up"]      { transform: translate3d(0, 16px, 0); }
[data-reveal="right"]   { transform: translate3d(-18px, 0, 0); }
[data-reveal="scale"]   { transform: scale(0.97); }
[data-reveal="uncover"] { clip-path: inset(18% 0 0 0); transform: none; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Stagger within a group. --i is set by the observer, capped so a long list
   never leaves the last item waiting. */
[data-reveal] { transition-delay: calc(var(--i, 0) * 65ms); }

/* --------------------------------------------------------------------------
   3. HEADER — condenses on scroll
   -------------------------------------------------------------------------- */
.site-header {
  transition: box-shadow 0.25s ease, background-color 0.25s ease, padding 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 8px 28px rgba(16, 26, 51, 0.07);
  background: rgba(255, 255, 255, 0.88);
}
.site-header.is-scrolled .nav-row { padding-top: 10px; padding-bottom: 10px; }
.site-header .nav-row { transition: padding 0.25s ease; }

/* --------------------------------------------------------------------------
   4. CARDS AND BUTTONS — response to a deliberate action, not decoration
   -------------------------------------------------------------------------- */
.info-card,
.compare-card,
.article-card,
.testimonial-card {
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}
@media (hover: hover) {
  .info-card:hover,
  .compare-card:hover {
    transform: translate3d(0, -3px, 0);
    border-color: #CBD5FF;
    box-shadow: var(--shadow-soft);
  }
  .article-card.is-live:hover { transform: translate3d(0, -3px, 0); }
  .location-card:hover svg { transform: translate3d(4px, 0, 0); }
}
.info-card:active,
.compare-card:active,
.article-card:active { transform: translate3d(0, -1px, 0); }

.location-card { transition: background-color 0.18s ease, transform 0.18s ease; }
.location-card svg { transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1); }
.location-card:active { transform: scale(0.99); }

.btn { transition: transform 0.12s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; }
.btn:active { transform: scale(0.97); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(82, 113, 255, 0.28); }

/* --------------------------------------------------------------------------
   5. "HOW IT WORKS" — the one place a scroll effect carries real meaning.
   The connecting line draws itself left to right and the step numbers fill in
   sequence, so the section reads as a process rather than four boxes.
   -------------------------------------------------------------------------- */
.steps::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(0.33, 1, 0.68, 1) 0.15s;
}
.steps.is-in::before { transform: scaleX(1); }

.step .step-num {
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.steps.is-in .step .step-num {
  background: var(--lins-blue);
  border-color: var(--lins-blue);
  color: var(--white);
}
.steps.is-in .step:nth-child(1) .step-num { transition-delay: 0.25s; }
.steps.is-in .step:nth-child(2) .step-num { transition-delay: 0.45s; }
.steps.is-in .step:nth-child(3) .step-num { transition-delay: 0.65s; }
.steps.is-in .step:nth-child(4) .step-num { transition-delay: 0.85s; }

/* --------------------------------------------------------------------------
   6. FAQ — smooth open/close and a chevron that shows state
   -------------------------------------------------------------------------- */
.faq-answer { transition: max-height 0.32s cubic-bezier(0.33, 1, 0.68, 1); }
.faq-question .chevron { transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.2s ease; }
.faq-item[data-open="true"] .chevron { transform: rotate(45deg); }
.faq-question:hover { background: var(--lins-blue-mist); }
.faq-question { transition: background-color 0.18s ease; }

/* --------------------------------------------------------------------------
   7. READING PROGRESS — article pages only
   -------------------------------------------------------------------------- */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.read-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--lins-blue);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   8. PAGE ENTRY — one short fade, so moving between pages doesn't flash
   -------------------------------------------------------------------------- */
body { opacity: 1; }
body.is-loading { opacity: 0; }
body.page-ready { animation: pageIn 0.34s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   9. FORM STATES — errors next to the field they belong to
   -------------------------------------------------------------------------- */
.field-error {
  display: none;
  font-size: 0.84rem;
  color: #C32B41;
  margin-top: 6px;
}
.field-error.is-shown { display: block; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #C32B41;
  background: #FFF7F8;
}
.field input,
.field select,
.field textarea { transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lins-blue);
  box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.18);
}
.form-consent {
  font-size: 0.8rem;
  color: var(--grey);
  line-height: 1.5;
  margin-top: var(--space-sm);
}
.form-consent a { color: var(--lins-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

.btn[disabled] { opacity: 0.65; cursor: progress; }

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--lins-blue-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 3px; }
.site-footer a:focus-visible,
.mobile-action-bar a:focus-visible,
.footer-bottom a:focus-visible { outline-color: #A8BBFF; }

/* Comfortable touch targets. Footer and menu links were rendering 16px tall;
   both Apple and Google ask for 44. Padding does the work so nothing moves
   visually on desktop. */
.site-footer .footer-col a,
.site-footer .footer-contact a,
.footer-bottom .legal-links a,
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer .footer-col li,
.site-footer .footer-contact li { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.category-chip { min-height: 44px; }
.nav-toggle { min-width: 44px; min-height: 44px; }

@media (max-width: 720px) {
  /* Stop the sticky bar covering the last line of the page. */
  body { padding-bottom: 86px; }
}

/* --------------------------------------------------------------------------
   11. FOUR-CARD TRUST GRID
   -------------------------------------------------------------------------- */
.value-grid .info-card { padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) - 4px); }
.value-grid .info-card p { font-size: 1rem; }
@media (min-width: 981px) {
  .value-grid { gap: var(--space-md); }
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   Users who ask for less movement get the finished state immediately. The
   site stays complete and usable — nothing is hidden, nothing is waiting on
   an animation that never runs.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .steps::before { transform: scaleX(1) !important; transition: none !important; }
  .steps .step .step-num { transition: none !important; }
  .read-progress { display: none; }
  body.is-loading { opacity: 1; }
  body.page-ready { animation: none; }
  .info-card:hover,
  .compare-card:hover,
  .article-card.is-live:hover,
  .btn:active,
  .location-card:active { transform: none !important; }
  .location-card:hover svg { transform: none !important; }
}

/* Mid-range Android struggles with stacked backdrop-filter layers. Below the
   tablet breakpoint the glass panels fall back to a solid tint, which looks
   near-identical and scrolls without dropping frames. */
@media (max-width: 900px) {
  .glass,
  .hero-team-card,
  .request-panel,
  .mobile-action-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass, .hero-team-card, .request-panel { background: rgba(255, 255, 255, 0.97); }
  .mobile-action-bar { background: rgba(255, 255, 255, 0.98); }
}


/* ==========================================================================
   FIXES FROM BROWSER VERIFICATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   320px horizontal overflow (iPhone SE and similar small Androids)
   A CSS grid item defaults to min-width:auto, which means a track refuses to
   shrink below its content's minimum width and pushes the whole grid wider
   than the screen. Setting min-width:0 lets the track shrink properly. The
   team card's 260px floor was the other half of the problem.
   -------------------------------------------------------------------------- */
.hero-grid > *,
.split-block > *,
.ambulance-grid > *,
.inner-hero-grid > *,
.compare-grid > *,
.grid-2 > *,
.grid-3 > *,
.coverage-grid > *,
.steps > *,
.footer-top > *,
.service-groups > *,
.article-grid > * { min-width: 0; }

/* Long words (URLs, email addresses, "Physiotherapists") must be allowed to
   wrap rather than forcing their container wider than the screen. */
h1, h2, h3, h4, p, li, a, td, th, label { overflow-wrap: break-word; }

@media (max-width: 460px) {
  .hero-team-card { min-width: 0; }
  .hero-team-card ul { grid-template-columns: 1fr; }
}

/* Final guard. `clip` rather than `hidden` so position: sticky keeps working.
   Nothing should reach this, but a single long string in future content
   shouldn't be able to give the whole site a sideways scrollbar. */
html { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Footer column headings are now h2 for a correct outline. This keeps them
   looking exactly as they did.
   -------------------------------------------------------------------------- */
.site-footer .footer-heading {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
  letter-spacing: 0;
}

/* Ambulance emergency card heading moved from h3 to h2; hold its size. */
.ambulance-card h2 { font-size: 1.15rem; }

/* Article cards moved from h3 to h2; hold their size. */
.article-card h2 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Remaining small touch targets
   -------------------------------------------------------------------------- */
.brand { min-height: 44px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------------
   320px overflow, root cause
   .photo-placeholder combines `min-height: 260px` with an `aspect-ratio`, and
   its width was left as `auto`. On a 320px screen the container is narrower
   than 260px x the ratio, so the browser satisfied the aspect ratio by making
   the box WIDER than its parent — 325px inside a 272px column. Giving the box
   a definite width makes the aspect ratio drive the height instead, which is
   what was intended.
   -------------------------------------------------------------------------- */
.photo-placeholder { width: 100%; }
@media (max-width: 420px) {
  .photo-placeholder { min-height: 200px; }
}

/* --------------------------------------------------------------------------
   Footer contact links
   Making these inline-flex for a 44px touch target stopped the text wrapping,
   so "contact@linsmedcare.com" pushed past its 148px grid column at laptop
   widths. Padding gives the same target height while letting the text wrap.
   -------------------------------------------------------------------------- */
.site-footer .footer-contact a {
  display: inline-block;
  min-height: 0;
  padding: 11px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.site-footer .footer-contact li { align-items: flex-start; }
.site-footer .footer-contact li svg { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Vertical rhythm around the statement band
   The hero's 140px bottom padding, the band's own padding and the next
   section's 140px top padding stacked up to roughly 400px of empty white
   around a single line of text, which read as a mistake rather than as
   breathing room. The band now has the soft blue tint used elsewhere on the
   page, so it reads as a deliberate divider, and the space either side of it
   is trimmed.
   -------------------------------------------------------------------------- */
.hero { padding-bottom: var(--space-2xl); }
.emotional-band {
  background: var(--lins-blue-mist);
  padding: var(--space-2xl) 0;
}

/* Laptop screens got the full 140px section padding meant for large desktops,
   which pushed a lot of content below the fold on a 13-inch machine. */
@media (max-width: 1220px) {
  .section-pad { padding: var(--space-2xl) 0; }
}


/* ==========================================================================
   SOCIAL ICONS + ADDRESS
   ========================================================================== */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: var(--space-sm);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--lins-blue);
  border-color: var(--lins-blue);
  color: var(--white);
  transform: translateY(-2px);
}
.footer-social a:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Footer email — replaces the earlier `overflow-wrap: anywhere`, which broke
   the address mid-word ("linsmedcare.co" / "m"). The line is now only ever
   allowed to wrap where main.js has placed a <wbr>, right after the "@" —
   so on a narrow column it splits as "contact@" / "linsmedcare.com" instead.
   -------------------------------------------------------------------------- */
.site-footer .footer-contact a[data-config="email"] {
  overflow-wrap: normal;
  word-break: normal;
}