/* ==========================================================================
   FPFR — home page sections
   Requires fpfr-core.css.
   ========================================================================== */

section{padding:104px 0}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:56px}
.section-head h2{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:600;max-width:20ch;color:var(--navy);letter-spacing:-0.01em;line-height:1.04}
.section-head p{max-width:70ch;color:var(--muted);font-size:1.05rem}

/* ───── hero ───── */
.hero{background:var(--navy);color:var(--white);position:relative;overflow:hidden;padding:0}
.hero-bg{position:absolute;inset:0}
/* The photo runs at full strength — the scrims below do all the darkening.
   (It used to sit at opacity .42, which was a second, invisible dimmer.) */
.hero-bg img{width:100%;height:100%;object-fit:cover}

/* Two stacked scrims. The radial sits on top and pools shade behind the
   words only, so the coastline stays visible out at the edges instead of
   the whole photograph being darkened to protect three lines of text. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 62% 54% at 50% 40%, rgba(10,26,48,.37) 0%, rgba(10,26,48,0) 72%),
    linear-gradient(180deg, rgba(10,26,48,.66) 0%, rgba(10,26,48,.47) 46%, rgba(10,26,48,.72) 100%);
}

.hero-inner{position:relative;padding:96px 28px 46px;text-align:center}

/* the anniversary line leads, the headline follows — single centred axis */
.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 auto;max-width:560px;color:rgba(255,255,255,.85);text-shadow:0 2px 18px rgba(8,18,34,.6)}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";flex:1;height:1px;background:rgba(224,184,72,.45)}
.hero-eyebrow b{color:var(--gold-bright);font-weight:500}

.hero h1{
  font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:600;max-width:16ch;
  margin:20px auto 0;color:var(--white);text-wrap:balance;
  text-shadow:0 2px 18px rgba(8,18,34,.6);
}
.hero h1 em{font-style:italic;color:var(--gold-bright)}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;justify-content:center}

/* ───── signature: the leeward coast line ───── */
.coast{
  margin-top:90px;border-top:1px solid var(--line-dark);
  background:rgba(10,26,48,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  position:relative;
}
.coast-inner{padding:60px 28px 68px}
.coast-head{text-align:center;margin-bottom:36px}
.coast-head .eyebrow{color:rgba(224,184,72,.9)}
.coast-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;color:var(--white);margin-top:10px;letter-spacing:-0.005em}
/* Fades at BOTH ends, so it reads as a coastline running behind the three
   stops rather than a bar that starts hard on the left and trails off.
   The gradient lives on ::after so it can be drawn in on scroll. */
.coast-line{position:relative;margin-top:8px;height:2px;border-radius:2px;overflow:hidden}
.coast-line::after{
  content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,
    rgba(224,184,72,0), var(--gold-bright) 18%, var(--gold-bright) 82%, rgba(224,184,72,0));
}
.coast-stops{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:-9px}
/* centred so each marker sits above its own clinic instead of pointing at
   the gap beside it — and so the columns agree with the centred heading */
.stop{position:relative;padding-top:30px;text-align:center}
.stop::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--navy);border:2px solid var(--gold-bright);transition:background .2s ease;
}
.stop:hover::before{background:var(--gold-bright)}
.stop h3{font-size:1.95rem;font-weight:600;color:var(--white)}
.stop a.tel{
  display:inline-block;margin-top:8px;white-space:nowrap;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:1.08rem;color:var(--gold-bright);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.stop a.tel:hover{border-color:var(--gold-bright)}
.stop .hwy{display:block;margin-top:8px;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.58)}
.stop a.hwy:hover{color:var(--gold-bright);text-decoration:underline}
.stop .hrs{display:block;margin-top:8px;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.76rem;letter-spacing:.02em;color:rgba(255,255,255,.45)}
/* Review link sits with the clinic it belongs to, where someone is
   deciding which one to call.
   NOTE: the score and count are hard-coded in index.html and WILL drift
   as reviews come in. Verified against each Google profile on 5 Aug 2026:
   Waipahu 4.9/17, Wahiawā 4.8/38, Waiʻanae 4.5/15. Re-check periodically,
   or drop the numbers and keep only the link. */
.stop .rate{
  display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  padding:8px 16px;border:1px solid rgba(224,184,72,.42);border-radius:999px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.67rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.stop .rate .rstar{color:var(--gold-bright);font-size:.85rem;line-height:1}
/* Two forms of the same fact. "4.9 · 17 Google reviews" is right when there
   is room; squeezed into a 90px column it wrapped the pill onto three lines,
   so narrow screens get "4.9 (17)" instead. Both are always in the markup —
   only one is ever shown, and the screen-reader text is unaffected. */
.stop .rate .r-mini{display:none}
.stop .rate:hover .rstar{color:var(--navy-deep)}
.stop .rate:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--navy-deep)}

/* ───── services: exclusive accordion ─────
   <details name="fpfr-services"> means the browser closes the others for
   us — no JavaScript. Older browsers simply allow more than one open,
   which is a fine degradation.

   Alignment: the summary row and the opened panel share ONE grid, so the
   detail text starts on exactly the same vertical line as the service
   name above it. The photo column can never pull the copy out of line.
   --thumb drives the whole thing and is the only value that changes
   between breakpoints. */
.acc{--thumb:150px;--gutter:26px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary,
.acc .inner{display:grid;grid-template-columns:var(--thumb) 1fr auto;column-gap:var(--gutter)}

.acc summary{list-style:none;cursor:pointer;align-items:center;padding:20px 0}
.acc summary::-webkit-details-marker{display:none}

.acc .thumb{
  grid-column:1;width:100%;aspect-ratio:5/3;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-soft),var(--navy-deep));
}
.acc .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.acc summary:hover .thumb img{transform:scale(1.06)}

.acc .head{grid-column:2;min-width:0}
.acc .head h3{font-size:1.65rem;font-weight:600;color:var(--navy);transition:color .2s}
.acc summary:hover .head h3,
.acc details[open] .head h3{color:var(--gold)}
.acc .head .lede{display:block;color:var(--muted);font-size:.94rem;margin-top:4px;max-width:56ch}

.acc .sign{
  grid-column:3;width:34px;height:34px;flex-shrink:0;
  border:1px solid rgba(196,154,44,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1.15rem;line-height:1;
  transition:background .2s,color .2s,transform .3s;
}
.acc .sign::before{content:"+"}
.acc summary:hover .sign{background:rgba(196,154,44,.12)}
.acc details[open] .sign{background:var(--gold-bright);color:var(--navy-deep);transform:rotate(45deg)}

.acc .inner{padding:0 0 30px}
.acc .acc-body{grid-column:2;grid-row:1;max-width:62ch}
.acc .acc-body p{color:var(--muted);font-size:.96rem}
.acc .acc-body p + p{margin-top:11px}
.acc h4{
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:500;margin:20px 0 9px;
}
.acc .chips{display:flex;flex-wrap:wrap;gap:7px}
.acc .chip{
  font-size:.79rem;font-weight:500;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(196,154,44,.4);color:var(--navy);background:rgba(196,154,44,.08);
}
.acc .steps{list-style:none;display:flex;flex-direction:column;gap:8px}
.acc .steps li{display:flex;gap:11px;align-items:baseline}
.acc .steps b{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.68rem;color:var(--gold);font-weight:500;flex-shrink:0}
.acc .steps span{font-size:.9rem;color:var(--muted)}
.acc .acc-cta{margin-top:24px}

@media (prefers-reduced-motion: no-preference){
  .acc .inner{animation:fpfr-drop .3s ease}
}
@keyframes fpfr-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ───── story band ───── */
.story{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.story h2{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:600;color:var(--navy)}
.story p{margin-top:20px;color:var(--muted);max-width:52ch}
.story-visual{position:relative}
.story-visual .ph{height:480px}
/* a real group photograph: match the frame to the photo's own 3:2 so nobody
   is cropped out of the sides, and no badge sits over anyone's face */
.story-visual .ph.ph-team{height:auto;aspect-ratio:3/2}

/* generic — any <details> with these spans swaps its own label */
.lbl-less{display:none}
details[open] > summary .lbl-more{display:none}
details[open] > summary .lbl-less{display:inline}

/* the practice section's "Read more" disclosure */
.story-more{margin-top:18px}
.story-more summary{
  list-style:none;cursor:pointer;font-weight:600;font-size:.88rem;color:var(--gold);
  display:inline-flex;align-items:center;gap:8px;user-select:none;
}
.story-more summary::-webkit-details-marker{display:none}
.story-more summary::after{content:"+";font-size:1.15rem;line-height:1;font-weight:500}
.story-more[open] summary::after{content:"–"}
.story-more summary:hover{text-decoration:underline}
.story-detail{margin-top:16px}
.story-detail p + p{margin-top:16px}

/* ───── ʻohana photo strip (continuous marquee) ─────
   Without JS the track is a plain horizontal scroller — still usable, just
   not animated. fpfr.js clones the figures and adds .ready, which is what
   turns it into a seamless loop. That way the photo list is written once. */
.ohana{padding:96px 0 84px;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ohana-head{text-align:center;margin-bottom:38px}
.ohana-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:600;color:var(--navy);margin-top:10px}

.mq{
  position:relative;overflow-x:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.mq.ready{overflow:hidden}
.mq-track{display:flex;gap:16px;padding:0 28px}
.mq.ready .mq-track{width:max-content;padding:0;animation:fpfr-mq 46s linear infinite}
/* stop on hover, and on keyboard focus, and when the button is pressed */
.mq.ready:hover .mq-track,
.mq.ready:focus-within .mq-track,
.mq.paused .mq-track{animation-play-state:paused}
@keyframes fpfr-mq{to{transform:translateX(calc(-50% - 8px))}}

.mq figure{
  flex:0 0 auto;width:300px;height:200px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-soft),var(--navy-deep));
}
.mq figure img{width:100%;height:100%;object-fit:cover}

.mq.ready ~ 
@media (prefers-reduced-motion: reduce){
  .mq.ready{overflow-x:auto}
  .mq.ready .mq-track{animation:none;width:auto}
  .mq.ready ~ }

/* ───── patient reviews (scrolling row) ─────
   Same drag-and-scroll behaviour as the photo strip above, so the two
   sections rhyme. Nothing moves on its own here, so there is no pause
   control to worry about. Cards can be added or removed freely — the row
   scrolls, so there is no fixed count and nothing to rebalance. */
.reviews{padding:96px 0}
.rev-hint{
  max-width:1180px;margin:0 auto 14px;padding:0 28px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.review-row{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  max-width:1180px;margin:0 auto;padding:4px 28px 20px;
  scrollbar-width:thin;scrollbar-color:rgba(196,154,44,.5) transparent;
}
.review-row::-webkit-scrollbar{height:7px}
.review-row::-webkit-scrollbar-thumb{background:rgba(196,154,44,.5);border-radius:99px}
.review-row::-webkit-scrollbar-track{background:rgba(16,36,63,.07);border-radius:99px}

.review{
  flex:0 0 clamp(272px,31vw,370px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;
}
.review .stars{color:var(--gold-bright);letter-spacing:.14em;font-size:.92rem}
.review p{color:var(--ink);font-size:.99rem;line-height:1.65;flex:1;margin-top:12px}
.review p::before{
  content:"\201C";font-family:'Cormorant Garamond',Georgia,serif;font-size:2.6rem;
  color:var(--gold);line-height:0;vertical-align:-.34em;margin-right:5px;
}
.review cite{
  margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.67rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-style:normal;
}

/* ───── "Your first visit" ─────
   The band itself. These three rules were lost when the guided flow
   replaced the old card grid, which left white text on the cream page
   background. */
.patients{background:var(--navy);color:var(--white)}
.patients .section-head h2{color:var(--white)}
.patients .section-head p{color:rgba(255,255,255,.72)}

/* ───── the guided flow ─────
   A stepper: progress bar, one question at a time, Back available.
   Content lives in fpfr.js, not here. If JavaScript is unavailable the
   flow hides itself and .visit-fallback shows the three phone numbers
   instead — a dead wizard would be worse than no wizard. */
.visit{max-width:760px}
.visit-fallback{display:none;max-width:620px}
.no-js .visit-fallback{display:block}
.vf-tels{display:flex;flex-direction:column;gap:6px;margin:14px 0 24px;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:1rem}
.vf-tels a{color:var(--gold-bright)}

.v-dots{display:flex;gap:8px;margin-bottom:22px}
.v-dot{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .35s ease}
.v-dot.done{background:rgba(224,184,72,.5)}
.v-dot.now{background:var(--gold-bright)}

.v-step{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-bottom:10px}
.v-q{font-size:clamp(1.5rem,2.9vw,2.15rem);font-weight:600;color:var(--white)}

.v-opts{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.v-opt{
  padding:14px 24px;border:1px solid var(--line-dark);border-radius:999px;background:transparent;
  color:rgba(255,255,255,.88);font-size:.95rem;font-weight:500;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.v-opt:hover{border-color:rgba(224,184,72,.7);background:rgba(224,184,72,.12);color:var(--white)}

/* Plan names are long enough that pills would wrap mid-name, so the plan
   step stacks them in a single column and left-aligns the text. */
.v-opts.col{flex-direction:column;align-items:stretch;gap:8px;max-width:560px}
.v-opts.col .v-opt{border-radius:10px;text-align:left;padding:13px 18px;font-size:.92rem}

/* insurance search */
.v-search{margin-top:22px;max-width:560px}
.v-search input{
  width:100%;padding:13px 17px;border:1px solid var(--line-dark);border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--white);font:inherit;font-size:.94rem;
}
.v-search input::placeholder{color:rgba(255,255,255,.42)}
.v-search input:focus{outline:none;border-color:rgba(224,184,72,.7);background:rgba(224,184,72,.07)}
.v-hits:not(:empty){margin-top:8px;display:flex;flex-direction:column;gap:6px}
.v-hit{
  display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;
  padding:11px 16px;border:1px solid var(--line-dark);border-radius:9px;background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.9);font:inherit;font-size:.9rem;text-align:left;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.v-hit:hover{border-color:rgba(224,184,72,.7);background:rgba(224,184,72,.12)}
.v-hit span{
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
.v-nohit{margin-top:10px;font-size:.86rem;color:rgba(255,255,255,.55)}

/* "another plan" text entry */
.v-other{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.v-other input{
  flex:1 1 240px;padding:13px 17px;border:1px solid var(--line-dark);border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--white);font:inherit;font-size:.94rem;
}
.v-other input::placeholder{color:rgba(255,255,255,.42)}
.v-other input:focus{outline:none;border-color:rgba(224,184,72,.7);background:rgba(224,184,72,.07)}
.v-go{
  padding:13px 26px;border:none;border-radius:10px;background:var(--gold-bright);
  color:var(--navy-deep);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
}
.v-go:hover{background:var(--gold)}

.v-nav{margin-top:26px}
.v-back{background:none;border:none;cursor:pointer;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.v-back:hover{color:var(--gold-bright)}

/* the answer */
.v-result{animation:fpfr-drop .3s ease}
.v-result h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:var(--gold-bright);margin-top:2px}
.v-meta{margin-top:10px;font-size:.92rem;color:rgba(255,255,255,.66);line-height:1.6}
.v-meta a{color:var(--gold-bright);font-family:'Spline Sans Mono',ui-monospace,monospace}
.v-msg{margin-top:20px;padding:15px 18px;border-left:2px solid var(--gold-bright);background:rgba(224,184,72,.09);font-size:.96rem;color:rgba(255,255,255,.88)}
.v-link{margin-top:12px;font-size:.88rem}
.v-link a{color:var(--gold-bright);font-weight:600}
.v-link a:hover{text-decoration:underline}
.v-result h4{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin:26px 0 10px}
.v-prices{width:100%;border-collapse:collapse;font-size:.94rem}
.v-prices td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.82)}
.v-prices td:last-child{text-align:right;font-family:'Spline Sans Mono',ui-monospace,monospace;color:var(--gold-bright);white-space:nowrap}
/* The fax number is the one thing on endings B and C the patient has to
   carry to someone else, so it is set apart and selectable. */
.v-fax{
  margin-top:14px;padding:13px 18px;border:1px dashed rgba(224,184,72,.45);border-radius:10px;
  font-size:.9rem;color:rgba(255,255,255,.75);
}
.v-fax strong{
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:1.05rem;font-weight:500;
  color:var(--gold-bright);letter-spacing:.02em;user-select:all;
}
.v-note{margin-top:16px;font-size:.88rem;color:rgba(255,255,255,.6)}
.v-note a{color:var(--gold-bright);font-weight:600}
.v-note a:hover{text-decoration:underline}
.v-bring{list-style:none;font-size:.94rem;color:rgba(255,255,255,.8)}
.v-bring li{padding:5px 0 5px 18px;position:relative}
.v-bring li::before{content:"·";position:absolute;left:4px;color:var(--gold-bright)}
.v-actions{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.v-restart{background:none;border:none;cursor:pointer;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.v-restart:hover{color:var(--gold-bright)}

.visit-alt{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.92rem;color:rgba(255,255,255,.6)}
.visit-alt a{color:var(--gold-bright);font-weight:600}
.visit-alt a:hover{text-decoration:underline}

/* ───── careers ─────
   The team photograph runs as a full-width banner that fades into the
   navy, with everything centred beneath it — the same axis as the hero
   and the locations strip. Thirty people standing behind "work three
   days, spend four with your family" argues the point better than any
   amount of copy would. */
.hiring{background:var(--navy-deep);padding:0 0 92px}

/* Capped, not edge-to-edge. The banner is a fixed height, so on an
   ultra-wide monitor every extra pixel of width takes another slice OFF
   the photo — past about 3000px the visible band is thinner than the
   founder's head, and no object-position can save it. The cap also stops
   a 1800px photograph being upscaled into mush. Beyond 1600px it sits
   centred on the navy, which is where the band fades to anyway. */
.hire-banner{position:relative;height:340px;max-width:1600px;margin:0 auto;overflow:hidden}
/* 20%, not 40%: the banner shows about a third of the photo's height, and
   the founder's head sits high in the frame. At 40% the crop started below
   his hairline. Retune this if the photo is ever swapped. */
.hire-banner img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hire-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,26,48,.5) 0%, rgba(10,26,48,.3) 36%, var(--navy-deep) 100%);
}

/* pulled up so the type overlaps the fade rather than sitting under it */
.hire-body{position:relative;margin-top:-70px;text-align:center}
.hire-body .eyebrow{color:var(--gold-bright)}
.hire-body h2{
  font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:600;color:var(--white);
  margin-top:16px;line-height:1.04;text-wrap:balance;
}
.hire-body h2 em{font-style:italic;color:var(--gold-bright)}

/* four reasons, each a short label and one line — not paragraphs */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:48px;text-align:left}
.perk{border-top:1px solid rgba(224,184,72,.35);padding-top:16px}
.perk h3{font-size:1.24rem;font-weight:600;color:var(--gold-bright);line-height:1.15}
.perk p{color:rgba(255,255,255,.72);font-size:.9rem;margin-top:9px}

.hire-cta{margin-top:44px}
.hiring-note{color:rgba(255,255,255,.5);font-size:.85rem;margin:26px auto 0;max-width:54ch}

/* ══════════════════════════════════════════════════════════════════
   Scroll-driven motion (home page). All of it sits behind @supports, so
   browsers without scroll timelines get the static layout unchanged.
   ══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* the hero photograph drifts as the section passes */
    .hero-bg img{
      animation:fpfr-drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }

    /* the coast line draws itself across the three clinics */
    .coast-line::after{
      animation:fpfr-draw linear both;
      animation-timeline:view();
      animation-range:entry 25% cover 52%;
    }

    /* service cards arrive one after another rather than as a block */
    .patients-grid .reveal:nth-child(2){animation-range:entry 4% cover 36%}
    .patients-grid .reveal:nth-child(3){animation-range:entry 4% cover 42%}
  }
}
@keyframes fpfr-drift{
  from{transform:scale(1.1) translateY(-2.2%)}
  to{transform:scale(1.1) translateY(2.2%)}
}
@keyframes fpfr-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the clinic markers breathe — slow, low contrast, staggered */
@media (prefers-reduced-motion: no-preference){
  .stop::before{animation:fpfr-pulse 3.4s ease-in-out infinite}
  .coast-stops .stop:nth-child(2)::before{animation-delay:.7s}
  .coast-stops .stop:nth-child(3)::before{animation-delay:1.4s}
}
@keyframes fpfr-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,184,72,.4)}
  50%{box-shadow:0 0 0 7px rgba(224,184,72,0)}
}

/* ───── responsive ───── */
/* The three clinics stay side by side all the way down rather than
   stacking, so the whole choice is visible at once instead of costing
   three scrolls. Everything shrinks to pay for it — except the phone
   number, which is the point of the section. */
@media(max-width:1040px){
  .coast-stops{grid-template-columns:repeat(3,1fr);gap:16px}
  .coast-line{display:none}
  .coast-inner{padding:52px 20px 58px}
  .stop{padding-top:26px}
  .stop h3{font-size:1.35rem}
  .stop a.tel{font-size:.95rem;margin-top:6px}
  .stop .hwy{font-size:.72rem;line-height:1.35;margin-top:6px}
  .stop .hrs{font-size:.64rem;line-height:1.4;margin-top:6px}
  .stop .rate{margin-top:11px;padding:6px 11px;font-size:.6rem;gap:5px;letter-spacing:.06em}
}
@media(max-width:600px){
  .coast-stops{gap:10px}
  .coast-inner{padding:44px 14px 48px}
  .stop{padding-top:22px}
  .stop::before{width:12px;height:12px}
  .stop h3{font-size:1.05rem;line-height:1.15}
  .stop a.tel{font-size:.76rem;margin-top:5px}
  .stop .hwy{font-size:.62rem;line-height:1.3;margin-top:5px}
  .stop .hrs{font-size:.56rem;line-height:1.35;margin-top:5px}
  .stop .rate{margin-top:9px;padding:5px 9px;font-size:.6rem;gap:4px;letter-spacing:.03em;white-space:nowrap}
  .stop .rate .rstar{font-size:.7rem}
  .stop .rate .r-full{display:none}
  .stop .rate .r-mini{display:inline}
}
@media(max-width:420px){
  .coast-stops{gap:7px}
  .stop h3{font-size:.94rem}
  .stop a.tel{font-size:.68rem}
  .stop .hwy{font-size:.57rem}
  .stop .hrs{font-size:.52rem}
  .stop .rate{padding:4px 7px;font-size:.56rem}
}
@media(max-width:920px){
  section{padding:72px 0}
  .hero-inner{padding-top:80px}
  .story-grid{grid-template-columns:1fr;gap:48px}
  .patients-grid{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr 1fr;gap:22px}
  .hire-banner{height:250px}
  .reviews{padding:72px 0}
  .section-head h2{max-width:none}
  /* tablet: narrower photo column, everything else holds its alignment */
  .acc{--thumb:118px;--gutter:20px}
  .acc summary{padding:18px 0}
  .acc .head h3{font-size:1.45rem}
  .acc .head .lede{font-size:.9rem}
  .acc .sign{width:30px;height:30px;font-size:1.05rem}
}
@media(max-width:600px){
  .story-visual .ph{height:340px}
  .perks{grid-template-columns:1fr;gap:18px;margin-top:36px}
  .hire-banner{height:210px}
  .hire-body{margin-top:-50px}

  /* phone: square thumbnail, and the one-line summary is dropped — beside
     a photo it would push every row to four lines, and the detail says the
     same thing better once opened */
  .acc{--thumb:78px;--gutter:15px}
  .acc summary{padding:15px 0}
  .acc .thumb{aspect-ratio:1/1;border-radius:10px}
  .acc .head h3{font-size:1.22rem;line-height:1.15}
  .acc .head .lede{display:none}
  .acc .sign{width:28px;height:28px;font-size:.98rem}
  /* full width once open — 78px of indent wastes a third of a phone screen */
  .acc .inner{grid-template-columns:1fr;padding-bottom:26px}
  .acc .acc-body{grid-column:1;max-width:none}
  .acc .acc-cta .btn{width:100%;justify-content:center}
}