/* ============================================================
   PATRIOT CARE CENTER

   Design read : premium-consumer trust brand for veterans. Warm, rounded,
                 confident. Not an institutional document.
   Dials       : DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3
   Palette     : American. Deep navy + flag red on warm white.
                 Gold is used ONLY for star glyphs, never as a brand accent.
   Radius rule : buttons are full pill, cards and images 20px, chips 12px.
                 Documented and followed everywhere.
   Theme       : LIGHT ONLY, by instruction. No dark-mode media query.
   ============================================================ */

:root {
  color-scheme: light;

  --navy:      #0e1c3d;
  --navy-2:    #16294f;
  --red:       #b02a30;
  --red-2:     #96222a;
  --gold:      #c9962e;   /* star glyphs only, always with sr-only text */

  --cream:     #fbfaf7;
  --cream-2:   #f4f1ec;
  --white:     #ffffff;
  --ink:       #121722;
  --ink-2:     #4a5364;   /* 8.1:1 on cream */
  --ink-3:     #78808f;   /* 4.6:1 on cream, small labels only */
  --line:      #e6e2da;
  --line-2:    #d5d0c6;

  --r-card: 20px;
  --r-sm:   12px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(14, 28, 61, .04), 0 4px 12px rgba(14, 28, 61, .05);
  --shadow-2: 0 2px 6px rgba(14, 28, 61, .06), 0 18px 42px rgba(14, 28, 61, .10);
  --shadow-3: 0 4px 10px rgba(14, 28, 61, .08), 0 30px 70px rgba(14, 28, 61, .16);

  --shell: 1280px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  --display: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }

a { color: var(--red); text-underline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-family: var(--sans); font-size: 1.16rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }

/* three of these on the page, no more */
.eyebrow {
  margin: 0 0 1.3rem;
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red);
}


.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: var(--r-sm); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .9rem 1.3rem;
  border-radius: 0 0 var(--r-sm) 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------------- buttons: full pill ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1 var(--sans);
  white-space: nowrap;
  padding: 1.1rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-red { background: var(--red); color: #fff; box-shadow: var(--shadow-1); }   /* 5.9:1 */
.btn-red:hover { background: var(--red-2); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-red:active { transform: translateY(0); }



/* on a photographic or navy ground, so it needs its own contrast */
.btn-clear { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn-clear:hover { background: rgba(255,255,255,.98); color: var(--navy); border-color: #fff; transform: translateY(-2px); }

/* ---------------- masthead ---------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 250, 247, .88);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.masthead .shell { display: flex; align-items: center; gap: 1.75rem; height: 78px; }
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font-family: var(--display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.026em; white-space: nowrap; }
/* tagline sits under the name, in the same grey as the nav links */
.brand em {
  font-style: normal; font-size: .74rem; font-weight: 400;
  letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; margin-top: .12rem;
}
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a { font-size: .95rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .18s var(--ease); }
.nav a:hover { color: var(--navy); }
.masthead .btn { padding: .72rem 1.25rem; font-size: .92rem; }

/* Portal login. Deliberately quieter than the call button so it does not
   compete with the primary action, but still where people look for it. */
.login {
  font-size: .92rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  line-height: 1;
  transition: color .18s var(--ease);
}
.login:hover { color: var(--navy); text-decoration: underline; }
/* sits inside .nav so that on phones it joins the scrolling link strip rather
   than pushing the call button onto a third row */
.nav .login { margin-left: .55rem; }

@media (max-width: 1060px) {
  .masthead .shell { height: auto; flex-wrap: wrap; gap: 1rem; padding-top: .85rem; }
  /* brand + call button must share one row at 414px, or the header eats three */
  .brand b { font-size: 1rem; }
  .brand img { width: 30px; }
  .masthead .btn { padding: .6rem .95rem; font-size: .86rem; }
  .nav { order: 3; width: 100%; margin-top: .8rem; padding-bottom: .8rem; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .btn-long { display: none; }
  .login { font-size: .88rem; }
}

/* ---------------- 1. hero: full bleed video, navy scrim ---------------- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding-block: clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
/* scrim: white body copy measures 9.4:1 against the darkest band of this */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(9,18,40,.94) 0%, rgba(9,18,40,.80) 42%, rgba(9,18,40,.44) 78%, rgba(9,18,40,.34) 100%);
}
.hero .shell {
  position: relative;
  /* `margin-inline: auto` on a GRID ITEM makes it size to fit-content and
     centre, rather than stretching to the column. Without this width the
     shell collapses to the width of .hero-copy and the hero stops lining
     up with every other section. */
  width: 100%;
}
.hero-copy { max-width: 40rem; }
.hero .eyebrow { color: #f0c9a8; }               /* 8.0:1 on the scrim */
.hero h1 { color: #fff; margin-bottom: 1.6rem; }
.hero h1 span { color: #f3b9bc; }                /* 7.4:1 on the scrim */
.hero p { color: rgba(255,255,255,.9); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; max-width: 32rem; margin-bottom: 2.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 700px) {
  .hero { min-height: 0; padding-block: clamp(3rem, 9vw, 5rem); }
  .hero::after { background: linear-gradient(180deg, rgba(9,18,40,.86) 0%, rgba(9,18,40,.92) 100%); }
}

/* ---------------- 2. trust row: pill chips ---------------- */

.trust { background: var(--white); border-bottom: 1px solid var(--line); padding-block: clamp(2rem, 3.5vw, 2.75rem); }
.trust ul { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; justify-content: center; }
.trust li {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .7rem 1.25rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .97rem; color: var(--ink-2);
}
.trust b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--navy); letter-spacing: -0.01em; }

/* ---------------- 3. statement: type + rounded image ---------------- */

.statement .shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.statement h2 { max-width: 20ch; margin-bottom: 1.5rem; }
.statement h2 span { color: var(--red); }
.statement p { color: var(--ink-2); font-size: 1.1rem; max-width: 44ch; }
/* This used to be a decorative landscape, which said nothing. A real
   seven-day availability card makes the same point and is actually useful. */
.week {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-2);
}
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.week-grid div {
  text-align: center;
  padding: .9rem .3rem 1rem;
  border-radius: var(--r-sm);
  background: var(--cream-2);
}
.week-grid .wknd { background: var(--navy); }
.week-grid dt {
  font-family: var(--mono); font-size: .67rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .5rem;
}
.week-grid .wknd dt { color: rgba(255,255,255,.72); }
.week-grid dd {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: .98rem; letter-spacing: -0.01em; color: var(--ink);
}
.week-grid .wknd dd { color: #fff; }
.week-note {
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: .96rem; color: var(--ink-2);
}
.week-note b { color: var(--red); font-weight: 600; }
@media (max-width: 520px) {
  .week-grid { grid-template-columns: repeat(4, 1fr); }
  .week-grid dd { font-size: .9rem; }
}
@media (max-width: 860px) { .statement .shell { grid-template-columns: 1fr; } }

/* ---------------- 4. exam: text left, quote card right ---------------- */

.exam .shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.exam h2 { max-width: 17ch; margin-bottom: 1.75rem; }
.exam p { color: var(--ink-2); }
.exam p.big { color: var(--ink); font-size: 1.14rem; line-height: 1.55; }

.quotecard {
  background: var(--navy); color: #fff;
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-3);
}
.quotecard h3 { color: #fff; font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.024em; line-height: 1.15; margin-bottom: 1rem; }
.quotecard p { color: rgba(255,255,255,.84); font-size: 1rem; }
@media (max-width: 860px) { .exam .shell { grid-template-columns: 1fr; } }

/* ---------------- 5. visit: four rounded cards, staggered ---------------- */

/* ---------------- 5. walkthrough: steps light up as you scroll ----------------
   Motivated motion: these four things happen in a fixed order in time, so
   revealing them in order tells the reader it is a sequence. No scroll
   hijacking, which would be hostile to this audience. FAILS OPEN: every step
   is fully legible unless JS confirms an observer exists. */

.visit { background: var(--white); }
.visit .shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

.walk-aside { position: sticky; top: 110px; }
.walk-aside h2 { max-width: 18ch; }
.walk-aside > p { margin-top: 1.2rem; color: var(--ink-2); max-width: 34ch; }

.track-rail { display: flex; align-items: center; gap: .85rem; margin-top: 2.25rem; }
.track-line { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.track-line::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 100%; background: var(--red);
}
.track-count { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.track-count b { color: var(--red); font-weight: 500; }

.steps { margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.steps li {
  list-style: none;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.25rem;
  align-items: start;
}
.steps .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--r-pill);
  background: var(--cream-2); color: var(--ink-3);
  font-family: var(--mono); font-size: .9rem; font-weight: 500;
  transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.steps h3 { margin-bottom: .6rem; font-size: 1.2rem; }
.steps p { color: var(--ink-2); font-size: 1.06rem; line-height: 1.68; max-width: 54ch; }

/* armed only when the observer is confirmed working */

@media (max-width: 900px) {
  .visit .shell { grid-template-columns: 1fr; }
  .walk-aside { position: static; }
}

/* ---------------- 6. clinics: five rounded photo cards, 2 + 3 ---------------- */

.clinics-head { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.clinics-head p { margin-top: 1.2rem; color: var(--ink-2); }

.clinics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
.clinic {
  grid-column: span 2;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.clinic:nth-child(-n+2) { grid-column: span 3; }   /* first row: two wide, then three */
.clinic:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.clinic-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.clinic:nth-child(-n+2) .clinic-photo { aspect-ratio: 16 / 8; }
.clinic-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.clinic:hover .clinic-photo img { transform: scale(1.03); }
.clinic-body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.clinic .where { font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.clinic h3 { font-family: var(--display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.024em; margin-bottom: .6rem; }
.clinic address { font-style: normal; color: var(--ink-2); font-size: .96rem; line-height: 1.5; }
.clinic .card-foot { margin-top: auto; padding-top: 1.3rem; }
.clinic .kind { display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.clinic .tel { display: inline-block; font-family: var(--mono); font-size: 1.2rem; font-weight: 500; color: var(--navy); text-decoration: none; letter-spacing: -0.01em; }
.clinic .tel:hover { color: var(--red); }
.clinic .dir { display: block; margin-top: .8rem; font-size: .92rem; }

@media (max-width: 1000px) {
  .clinics { grid-template-columns: repeat(2, 1fr); }
  .clinic, .clinic:nth-child(-n+2) { grid-column: span 1; }
  .clinic:nth-child(-n+2) .clinic-photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) { .clinics { grid-template-columns: 1fr; } }

/* ---------------- 7. reviews: two HORIZONTAL rows, opposite directions ----------------
   Row one travels left, row two travels right. Each track holds its card list
   twice, so translating -50% lands exactly on the duplicate. Spacing is
   margin-right rather than `gap`, because with gap the track measures
   2N*card + (2N-1)*gap and -50% drifts half a gap every cycle. */

.reviews { background: var(--navy); overflow: hidden; }
.reviews .shell { position: relative; }
.reviews .eyebrow { color: #f0c9a8; }
.reviews h2 { color: #fff; max-width: 22ch; }
.reviews .sub { color: rgba(255,255,255,.72); margin-top: 1.1rem; max-width: 46ch; }

.rails { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: 1.25rem; }
.rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rail-track { display: flex; width: max-content; animation: slide-left 64s linear infinite; }
.rail-track > * { margin-right: 1.25rem; }
.rail-track--right { animation-name: slide-right; animation-duration: 76s; }
@keyframes slide-left  { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes slide-right { from { transform: translateX(-50%);  } to { transform: translateX(0);    } }
.rail:hover .rail-track, .rail:focus-within .rail-track { animation-play-state: paused; }

.say {
  flex: 0 0 auto; width: min(78vw, 360px);
  background: var(--white);
  border-radius: var(--r-card);
  padding: 1.6rem;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.stars { color: var(--gold); font-size: 1rem; letter-spacing: .16em; line-height: 1; margin-bottom: 1rem; }
.say blockquote { margin: 0 0 1.2rem; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.say cite { font-style: normal; margin-top: auto; font-size: .92rem; font-weight: 600; color: var(--ink); }
.say .meta { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-top: .25rem; }

/* ---------------- 8. people ---------------- */

.people { background: var(--white); }
.people-head { max-width: 32rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.people-head p { margin-top: 1.2rem; color: var(--ink-2); }
/* one straight row, no stagger, and the portraits keep their own colour */
.people-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; align-items: start; }
.person img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-card); background: var(--cream-2);
  margin-bottom: 1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.person:hover img { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.person h3 { margin-bottom: .2rem; font-size: 1.02rem; }
.person .role { display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .7rem; }
.person p { font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) { .people-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; } }
@media (max-width: 620px)  { .people-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- 9. closer ---------------- */

.closer { background: var(--cream-2); }
.closer .inner {
  background: var(--navy); color: #fff;
  border-radius: clamp(var(--r-card), 3vw, 32px);
  padding: clamp(2.5rem, 6vw, 5rem);
  box-shadow: var(--shadow-3);
  text-align: center;
}
.closer h2 { color: #fff; max-width: 24ch; margin: 0 auto 1.3rem; }
.closer p { color: rgba(255,255,255,.8); font-size: 1.12rem; max-width: 48ch; margin-inline: auto; }
.closer .tel {
  display: inline-block; margin-top: 2.5rem;
  font-family: var(--mono); font-size: clamp(1.9rem, 5vw, 3.2rem); font-weight: 500;
  letter-spacing: -0.02em; color: #fff; text-decoration: none;
  border-bottom: 3px solid rgba(255,255,255,.35); padding-bottom: .3rem;
  transition: border-color .2s var(--ease);
}
.closer .tel:hover { border-color: #fff; }
.closer .fine { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .93rem; color: rgba(255,255,255,.7); max-width: 66ch; margin-inline: auto; }
.closer .fine a { color: #fff; }

/* ---------------- footer ---------------- */

.foot { background: var(--cream-2); color: var(--ink-2); font-size: .94rem; padding-bottom: 2.25rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--navy); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-2); }
.foot img { width: 190px; margin-bottom: 1.1rem; }
.foot h4 { margin: 0 0 1rem; font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin-bottom: .55rem; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-top: 1.75rem; border-top: 1px solid var(--line-2); font-size: .86rem; color: var(--ink-3); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---------------- reveal on scroll. Fails OPEN. ----------------
   Content is visible by default. The <html> class is only added by JS once
   an observer is known to exist, so a script failure leaves everything shown. */

[data-rise] { opacity: 1; }
.rise-on [data-rise] { opacity: 0; transform: translateY(18px); }
.rise-on [data-rise].seen { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* hero content lifts in on load, staggered, CSS only */
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .14s; }
.hero-copy > :nth-child(3) { animation-delay: .23s; }
.hero-copy > :nth-child(4) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail-track, .rail-track--right { animation: none; }
  .rail { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .rail-track > [aria-hidden="true"] { display: none; }
  .hero-copy > * { animation: none; }
  .rise-on [data-rise] { opacity: 1; transform: none; }
  .btn:hover, .steps li:hover, .clinic:hover, .person:hover img { transform: none; }
  .clinic:hover .clinic-photo img { transform: none; }
}

/* ---------------- scroll-driven animation ----------------
   Native CSS scroll timelines. No JavaScript, no scroll listener (which the
   skill bans), nothing to leak or clean up.

   Everything lives inside @supports on purpose. If a browser does not know
   `animation-timeline`, it would otherwise run these as ordinary time-based
   animations and leave every card parked on its final dimmed keyframe. The
   guard means unsupported browsers simply get the static, fully legible page. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* general section reveal */
    [data-rise] {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }

    /* the walkthrough: each step brightens as it reaches the middle of the
       screen and settles back as it leaves, so the four read as a sequence */
    .steps li {
      animation: step-focus linear both;
      animation-timeline: view();
      animation-range: entry 25% exit 55%;
    }
    @keyframes step-focus {
      0%        { opacity: .82; transform: translateY(14px) scale(.99);
                  background: var(--cream); box-shadow: none; border-color: var(--line); }
      30%, 62%  { opacity: 1;   transform: none;
                  background: var(--white); box-shadow: var(--shadow-2); border-color: #dcd7cc; }
      100%      { opacity: .86; transform: none;
                  background: var(--cream); box-shadow: none; border-color: var(--line); }
    }
    .steps li .num {
      animation: num-focus linear both;
      animation-timeline: view();
      animation-range: entry 25% exit 55%;
    }
    @keyframes num-focus {
      0%       { background: var(--cream-2); color: var(--ink-3); transform: scale(1); }
      30%, 62% { background: var(--red);     color: #fff;         transform: scale(1.07); }
      100%     { background: var(--navy);    color: #fff;         transform: scale(1); }
    }

    /* progress line in the sticky column, tied to the step list's own timeline */
    .visit .shell { timeline-scope: --walk; }
    .steps { view-timeline-name: --walk; view-timeline-axis: block; }
    .track-line::after {
      animation: rail-fill linear both;
      animation-timeline: --walk;
      animation-range: contain 0% contain 100%;
    }
    @keyframes rail-fill { from { width: 6%; } to { width: 100%; } }
  }
}

/* ---------------- 10. reassurance: the things people actually worry about ----------------
   The comfort section. Warm ground, video behind a heavy scrim, plain answers. */

/* Solid ground, no background video. A moving shutter shadow behind a list of
   questions was decoration that carried no meaning, so it is gone. A single soft
   radial keeps the panel from reading as a flat slab. */
.calm {
  background:
    radial-gradient(120% 90% at 18% 0%, #1b3057 0%, transparent 60%),
    var(--navy);
}
.calm h2 { color: #fff; max-width: 24ch; margin-bottom: 1.2rem; }
.calm .intro { color: rgba(255,255,255,.82); font-size: 1.12rem; max-width: 48ch; }

/* Accordion list rather than a flat grid of six equal cards. Easier to scan for
   the one worry you actually have, and it is a different layout family from
   every other section. Native <details>, so it works with no JavaScript. */

.qa { margin-top: clamp(2.5rem, 4vw, 3.5rem); max-width: 62rem; }

.q {
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  border-radius: var(--r-sm);
  margin-bottom: .6rem;
  transition: background-color .3s var(--ease);
}
.q:hover { background: rgba(255,255,255,.07); }
.q[open] { background: rgba(255,255,255,.08); }

.q summary {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.35rem 1.6rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans); font-size: 1.08rem; font-weight: 600;
  color: #fff;
}
.q summary::-webkit-details-marker { display: none; }
.q summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: var(--r-sm); }

/* plus that rotates into a minus, drawn from two rules rather than an icon file */
.q .sign { position: relative; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-left: auto; }
.q .sign::before, .q .sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; border-radius: 2px; background: rgba(255,255,255,.75);
  transition: transform .35s var(--ease), background-color .3s var(--ease);
}
.q .sign::after { transform: rotate(90deg); }
.q[open] .sign::before { transform: rotate(180deg); background: var(--red-soft, #f3b9bc); }
.q[open] .sign::after  { transform: rotate(180deg); background: var(--red-soft, #f3b9bc); }

.q .ans { padding: 0 1.6rem 1.5rem; }
.q .ans p { color: rgba(255,255,255,.82); font-size: 1.02rem; margin: 0; max-width: 62ch; }

/* Animated open and close. Chrome can interpolate to a keyword height, so the
   panel can actually slide. Everywhere else it just opens instantly, which is
   the correct fallback. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .q::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size .4s var(--ease), opacity .3s var(--ease), content-visibility .4s allow-discrete;
    }
    .q[open]::details-content { block-size: auto; opacity: 1; }
  }
}

.qa-foot {
  margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  color: rgba(255,255,255,.78); font-size: 1.02rem;
}
.qa-foot a { color: #fff; font-weight: 600; }

/* ---------------- more motion, all scroll driven or time based ---------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* slow drift on the clinic photographs, so the cards feel alive */
    .clinic-photo img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift { from { transform: scale(1.075) translateY(1.2%); } to { transform: scale(1) translateY(-1.2%); } }

    /* the hero video eases back very slightly as you leave the section */
    .hero-media video, .hero-media img {
      animation: hero-settle linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }

    /* trust chips rise in sequence */
    .trust li {
      animation: chip-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    .trust li:nth-child(2) { animation-range: entry 4% entry 89%; }
    .trust li:nth-child(3) { animation-range: entry 8% entry 93%; }
    .trust li:nth-child(4) { animation-range: entry 12% entry 97%; }
    .trust li:nth-child(5) { animation-range: entry 16% entry 100%; }
    @keyframes chip-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    /* questions slide up in sequence */
    .q {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
    .q:nth-child(2) { animation-range: entry 9% entry 74%; }
    .q:nth-child(3) { animation-range: entry 13% entry 78%; }
    .q:nth-child(4) { animation-range: entry 17% entry 82%; }
    .q:nth-child(5) { animation-range: entry 21% entry 86%; }
    .q:nth-child(6) { animation-range: entry 25% entry 90%; }
  }
}

/* Stars settle in one at a time. Time based, so it plays on load rather than
   on scroll, which suits a marquee that is already moving. */
@media (prefers-reduced-motion: no-preference) {
  .stars span {
    display: inline-block;
    animation: star-pop .5s var(--ease) both;
  }
  .stars span:nth-child(1) { animation-delay: .04s; }
  .stars span:nth-child(2) { animation-delay: .10s; }
  .stars span:nth-child(3) { animation-delay: .16s; }
  .stars span:nth-child(4) { animation-delay: .22s; }
  .stars span:nth-child(5) { animation-delay: .28s; }
  @keyframes star-pop { from { opacity: 0; transform: scale(.6) translateY(3px); } to { opacity: 1; transform: none; } }
}

/* ---------------- further motion ---------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* every section headline wipes up from behind its own line */
    section h2 {
      animation: wipe-up linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 62%;
    }
    @keyframes wipe-up {
      from { opacity: 0; transform: translateY(26px); clip-path: inset(0 0 100% 0); }
      to   { opacity: 1; transform: none;             clip-path: inset(0 0 -12% 0); }
    }

    /* clinic cards deal in one after another */
    .clinic {
      animation: deal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
    .clinic:nth-child(2) { animation-range: entry 9% entry 69%; }
    .clinic:nth-child(3) { animation-range: entry 13% entry 73%; }
    .clinic:nth-child(4) { animation-range: entry 17% entry 77%; }
    .clinic:nth-child(5) { animation-range: entry 21% entry 81%; }
    @keyframes deal { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }

    /* portraits rise, alternating so the stagger reads deliberately */
    .person {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 70%;
    }
    .person:nth-child(2) { animation-range: entry 10% entry 72%; }
    .person:nth-child(3) { animation-range: entry 12% entry 74%; }
    .person:nth-child(4) { animation-range: entry 14% entry 76%; }
    .person:nth-child(5) { animation-range: entry 16% entry 78%; }

    /* the seven day cells fill in across the week */
    .week-grid div {
      animation: day-in linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    .week-grid div:nth-child(2) { animation-range: entry 13% entry 63%; }
    .week-grid div:nth-child(3) { animation-range: entry 16% entry 66%; }
    .week-grid div:nth-child(4) { animation-range: entry 19% entry 69%; }
    .week-grid div:nth-child(5) { animation-range: entry 22% entry 72%; }
    .week-grid div:nth-child(6) { animation-range: entry 25% entry 75%; }
    .week-grid div:nth-child(7) { animation-range: entry 28% entry 78%; }
    @keyframes day-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }

    /* the closing phone number draws its own underline */
    .closer .tel {
      animation: draw-rule linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 90%;
    }
    @keyframes draw-rule {
      from { border-bottom-color: rgba(255,255,255,0); }
      to   { border-bottom-color: rgba(255,255,255,.5); }
    }

    /* the navy claim card tilts up into place */
    .quotecard {
      animation: card-settle linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
    @keyframes card-settle {
      from { opacity: 0; transform: translateY(36px) rotate(-1.2deg); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---------------- clinic ambience band ----------------
   A full bleed strip of heavily defocused clinic interior, mirroring the band the
   old GoDaddy site carried. The footage is illustrative and contains no
   identifiable people, so the copy over it never claims it shows this clinic or
   its staff. */

.amb {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(300px, 42vw, 480px);
  display: grid; place-items: center;
  background: var(--navy);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.amb-media { position: absolute; inset: 0; z-index: -2; }
.amb-media img, .amb-media video { width: 100%; height: 100%; object-fit: cover; }
.amb::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,18,40,.62), rgba(9,18,40,.74));
}
.amb .shell { position: relative; width: 100%; text-align: center; }
.amb p {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(6,12,28,.55);
}
.amb p span { color: #f3b9bc; }

/* ---------------- service cards ----------------
   `.exam .shell` is a two column grid, so the second shell in that section has to
   opt out or it renders at half width. */
.exam .caps-wrap { display: block; margin-top: clamp(2.5rem, 5vw, 4rem); }

.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cap {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--r-card);
  padding: 1.75rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cap:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cap h3 {
  font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600; letter-spacing: -0.02em; margin-bottom: .6rem;
}
.cap p { color: var(--ink-2); font-size: 1.02rem; margin: 0; }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }

/* ---------------- partners ----------------
   Deliberately a light section. The page already carries plenty of navy, and a
   hairline definition list is a layout family nothing else here uses. */

.partners { background: var(--cream-2); }
.partners-head { max-width: 40rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.partners-head p { margin-top: 1.3rem; color: var(--ink-2); font-size: 1.1rem; }

.caps-list {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line-2);
}
.caps-list > div { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.caps-list dt {
  font-family: var(--display); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -0.016em; color: var(--ink); margin-bottom: .45rem;
}
.caps-list dd { margin: 0; color: var(--ink-2); font-size: 1rem; max-width: 46ch; }

.partners-cta {
  margin-top: 2.25rem; font-size: 1.06rem; color: var(--ink-2);
}
.partners-cta a { font-weight: 600; }

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

/* ---------------- long form documents (privacy, terms) ---------------- */

.doc { padding-block: clamp(3rem, 6vw, 5rem); }
.doc .shell { max-width: 46rem; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.doc .updated { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2.5rem; }
.doc h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 2.75rem 0 .9rem; }
.doc p, .doc li { color: var(--ink-2); font-size: 1.04rem; line-height: 1.7; }
.doc ul { padding-left: 1.2rem; margin: 0 0 1.15rem; }
.doc li { margin-bottom: .5rem; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .note {
  margin-top: 2.5rem; padding: 1.5rem 1.6rem;
  background: var(--cream-2); border-left: 3px solid var(--red);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.doc .note p { margin: 0; color: var(--ink); }