/* ==========================================================
   NEXT CARE HEALTH — DIRECTION CONTRACT
   THESIS: The white marble courtyard. Light, air, and calm as
   the material — the same brightness a pilgrim stands in at
   Masjidil Haram. Refuses the category default of dark hero +
   stock stethoscope grid + saturated insurance blue.
   OWN-WORLD: Warm white ground (#FDFDFC) and marble grey
   (#F4F5F3) fields, hairline rules, generous air. Brand teal
   (#5FC2C9) from the logo carries every accent; brand magenta
   (#C2187E) is the single rare punctuation. Icon navy
   (#364968) is the text colour. Display in Plus Jakarta Sans —
   self-hosted, geometric humanist, calm and modern at heavy
   weights; body in the system UI stack. No invented colour.
   STORY: Exact incumbent content, re-set so a reader
   understands the offer in one screen and calls or registers.
   FIRST VIEWPORT: Full-width marble courtyard plate, headline
   set over the open sky at left, REGISTER NOW beneath it,
   nav bar transparent over the image then solid on scroll.
   FORM: candidate 6 grounded list, re-derived light.
   seed key 262ccb1f.
   FINISH: unreviewed and undocumented is unfinished; this
   build ends with the finish review, the verdict, and DESIGN.md
   ========================================================== */

/* ---------- Plus Jakarta Sans (self-hosted) ----------
   Six weights, all served from assets/font/. The family carries every
   heading; the body stays on the system UI stack. font-display:swap
   because a heading font that blocks paint is worse than a reflow. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('font/PlusJakartaSans-Light.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/PlusJakartaSans-Regular.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('font/PlusJakartaSans-Medium.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/PlusJakartaSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('font/PlusJakartaSans-Bold.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('font/PlusJakartaSans-ExtraBold.woff2') format('woff2')}


:root{
  --paper:#FDFDFC;
  --marble:#F4F5F3;
  --marble-2:#EDEFEC;
  --ink:#364968;
  --ink-soft:#67748C;
  --ink-mute:#98A2B3;
  --teal:#5FC2C9;
  --teal-deep:#2D7D85;
  --teal-wash:#EAF7F8;
  --magenta:#C2187E;
  --line:#E3E6E2;
  --line-2:#D2D7D2;
  --r:4px;
  /* Nav heights live on :root so any element can offset against them. */
  --navh:136px;
  --logo:100px;
  --navh-rest:136px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1280px;
  --disp:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* Light at 1.2 leading. The display voice comes from size, colour and
   air, not from weight: ExtraBold shouted, and the brief is calm. Light
   type opens up at large sizes, which is why the tracking is near-neutral
   here — negative tracking on a 300 weight closes the counters and reads
   as cramped. 1.2 leading keeps multi-line headings airy. */
h1,h2,h3,.disp{font-family:var(--disp);font-weight:300;line-height:1.2;letter-spacing:-.01em}
/* Hero H1 always renders on exactly 2 lines. The longest line
   ("Without Cash Payment") measures 10.53em at Light with -.01em
   tracking, so at the 58px ceiling it runs 611px inside the 680px
   .hero-copy column. The floor is 23px because at a 320px viewport
   6.4vw is only 20.5px, too small to read. */
h1{font-size:clamp(23px,6.4vw,58px)}
h2{font-size:clamp(25px,3.2vw,42px)}
h3{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.005em}
.ln{display:block}
p{color:var(--ink-soft)}

.kicker{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-deep)}
.rule{height:1px;background:var(--line);border:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--body);font-size:12.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;padding:17px 34px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:.3s cubic-bezier(.2,.7,.3,1);white-space:nowrap}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-outline{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-wash)}
.btn-onimg{border-color:rgba(54,73,104,.28);color:var(--ink);background:rgba(255,255,255,.72);backdrop-filter:blur(8px)}
.btn-onimg:hover{background:#fff;border-color:var(--teal)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:80}
body.scrolled{--navh:82px;--logo:46px}
header::before{content:"";position:absolute;inset:0;background:rgba(253,253,252,.94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .3s ease}
header.solid::before{opacity:1}
/* Height transition is deliberate: the header is position:fixed and
   contain:layout scopes the reflow to the bar itself, so no page relayout. */
.nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  height:var(--navh);gap:24px;contain:layout;transition:height .38s cubic-bezier(.2,.7,.3,1)}
.nav .brand{display:flex;align-items:center}
.nav .brand img{height:var(--logo);width:auto;transition:height .38s cubic-bezier(.2,.7,.3,1)}
.menu{display:flex;gap:38px;align-items:center}
.menu a{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);position:relative;padding:6px 0;transition:.25s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--teal);transition:.3s}
.menu a:hover{color:var(--teal-deep)}
.menu a:hover::after{width:100%}
.menu a.on{color:var(--teal-deep)}
.menu a.on::after{width:100%}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:2px;padding:10px 12px;cursor:pointer}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);margin:4px 0}

/* ---------- hero ---------- */
/* The stat strip is a flex item that sits at the bottom of the column, not
   an absolutely positioned bar. Pinned absolutely it overlaid the copy at
   any viewport shorter than roughly 700px: the buttons ran under the strip
   by 27px at 1366x620. In flow the hero grows instead, and the photo still
   fills the section because .hero-bg is absolute. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding-top:136px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 55%}
/* The wash is anchored in px, not %, because the copy column is a fixed
   680px: a percentage fade covers a different fraction at every width,
   which either exposed the text or smothered the pilgrims. Many stops on
   an ease curve — a 3-stop ramp banded visibly across the sky. */
/* Client feedback (row 2): the lead paragraph sat over the Kaaba and was
   hard to read — the ramp used to start dropping at 480px, but the copy
   column runs to 760px and the paragraph to ~700px. The plateau now holds
   near-opaque past the whole text block and the fade is pushed out to
   1320px, so the photograph still dissolves instead of ending at a band. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(253,253,252,.985) 0,
    rgba(253,253,252,.975) 700px,
    rgba(253,253,252,.94) 770px,
    rgba(253,253,252,.88) 820px,
    rgba(253,253,252,.78) 870px,
    rgba(253,253,252,.64) 915px,
    rgba(253,253,252,.48) 960px,
    rgba(253,253,252,.32) 1005px,
    rgba(253,253,252,.19) 1050px,
    rgba(253,253,252,.09) 1095px,
    rgba(253,253,252,.02) 1140px,
    rgba(253,253,252,0) 1180px)}
/* margin-block:auto centres the copy in the space left between the nav
   offset and the strip, whatever the viewport height. */
.hero-in{position:relative;z-index:2;width:100%;margin-block:auto}
.hero-copy{max-width:680px}
.hero .kicker{display:block;margin-bottom:22px}
.hero h1{margin-bottom:26px}
.hero h1 .em{color:var(--teal-deep)}
.hero p{font-size:clamp(15px,1.3vw,17px);max-width:54ch;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.hero-strip{position:relative;z-index:2;border-top:1px solid var(--line);
  background:rgba(253,253,252,.92);backdrop-filter:blur(12px)}

/* ---------- hero sky ----------
   Soft white clouds drifting left to right in the band under the header.
   Each cloud runs its own cycle rather than one track sliding by, so there
   is no seam to conceal: a cloud is fully off screen at both ends of its
   own animation, which means the loop can never show a reset. Transform
   only, so the compositor carries it, and each cloud is rasterised once.
   The band is clipped so a cloud can never spill into the copy below, and
   every cloud stops at 74% of the band height so nothing meets that cut. */
.sky{position:absolute;left:0;right:0;top:var(--navh-rest);z-index:1;
  height:clamp(170px,30vh,380px);overflow:hidden;pointer-events:none}
.sky .cloud{position:absolute;left:0;top:0;display:block;height:100%;
  /* Every ellipse must sit strictly inside the box: centre minus radius
     >= 0 and centre plus radius <= 100 on both axes. A radius that runs
     past the edge is clipped at the rectangle and the cloud shows a hard
     box cut. The alpha also has to reach 0 exactly on the ellipse, which
     is what the 100% stop does. */
  background:
    radial-gradient(26% 30% at 32% 48%, rgba(255,255,255,.95), rgba(255,255,255,0) 100%),
    radial-gradient(22% 34% at 52% 38%, rgba(255,255,255,.92), rgba(255,255,255,0) 100%),
    radial-gradient(24% 26% at 70% 52%, rgba(255,255,255,.88), rgba(255,255,255,0) 100%),
    radial-gradient(48% 28% at 50% 70%, rgba(255,255,255,.90), rgba(255,255,255,0) 100%);
  will-change:transform;animation:sky-drift linear infinite}
/* 300vw of travel keeps every cloud off screen at both ends whatever its
   width, and gives each one the same distance to cover, so a shared
   duration would also mean a shared speed. */
@keyframes sky-drift{
  from{transform:translate3d(-200vw,0,0)}
  to{transform:translate3d(100vw,0,0)}}
.sky .cloud:nth-child(1){width:32%;height:70%;top:0%;opacity:.50;animation-duration:120s;animation-delay:-7s}
.sky .cloud:nth-child(2){width:22%;height:56%;top:18%;opacity:.42;animation-duration:130s;animation-delay:-26s}
.sky .cloud:nth-child(3){width:28%;height:66%;top:6%;opacity:.46;animation-duration:124s;animation-delay:-42s}
.sky .cloud:nth-child(4){width:18%;height:48%;top:26%;opacity:.38;animation-duration:136s;animation-delay:-65s}
.sky .cloud:nth-child(5){width:26%;height:62%;top:12%;opacity:.44;animation-duration:122s;animation-delay:-76s}
.sky .cloud:nth-child(6){width:34%;height:72%;top:2%;opacity:.40;animation-duration:132s;animation-delay:-100s}
.sky .cloud:nth-child(7){width:20%;height:52%;top:22%;opacity:.36;animation-duration:126s;animation-delay:-113s}
/* The phone hero stacks: copy, then the photograph as its own plate, so the
   band has to travel down with it or it sits over bare paper, where a white
   cloud shows nothing. Measured at 320-680px: the copy ends at 40-53% of
   the hero, the plate runs 43-56% down to 81-91%, and the gap between them
   is only the plate's 32px top margin. So the band starts at 57%: just
   inside the plate at every width, still clear of the copy, and covering
   71-97% of the plate's height instead of the lower 40% a 70% start left. */
@media(max-width:680px){.sky{display:block;top:57%;bottom:0;height:auto}}
/* The frozen frame has to be a deliberate arrangement, not a pile at the
   left edge: the global reduced-motion reset kills the animation, so the
   clouds need somewhere to sit. */
@media(prefers-reduced-motion:reduce){
  .sky .cloud:nth-child(1){left:2%}
  .sky .cloud:nth-child(2){left:20%}
  .sky .cloud:nth-child(3){left:38%}
  .sky .cloud:nth-child(4){left:55%}
  .sky .cloud:nth-child(5){left:12%}
  .sky .cloud:nth-child(6){left:68%}
  .sky .cloud:nth-child(7){left:84%}
}
.hs-row{display:grid;grid-template-columns:repeat(3,1fr)}
.hs{padding-block:24px;display:flex;gap:16px;align-items:center;min-width:0}
.hs span{min-width:0;overflow-wrap:anywhere}
.hs + .hs{border-left:1px solid var(--line);padding-left:clamp(18px,3vw,44px)}
.hs strong{font-family:var(--disp);font-weight:300;font-size:clamp(26px,2.6vw,36px);color:var(--teal-deep);line-height:1;flex:none}
/* Client row 3: the figure carries its own unit ("48 HOURS", "2-85 YEARS OLD")
   and the label beside it names what the figure measures. The unit sits under
   the number in the label's type so the numeral stays the loudest thing. */
.hs strong em{display:block;margin-top:6px;font-style:normal;font-family:inherit;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);line-height:1.3}
.hs span{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);line-height:1.5}

/* ---------- sections ---------- */
.sec{padding-block:clamp(72px,9vw,132px)}
/* 62ch is a reading measure for body copy; it must not clamp headings,
   whose font-size scales with the viewport and would otherwise wrap on
   large screens. Heading width is set in em so it scales with its own
   font-size: the longest line ("Terms of use for the digital
   certificate") measures 17.26em in Plus Jakarta Sans ExtraBold, so 18em
   always fits. */
.sec-head{margin-bottom:clamp(40px,5vw,68px)}
.sec-head h2{max-width:18em}
.sec-head p{max-width:62ch}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .kicker{display:block;margin-bottom:18px}
.sec-head p{margin-top:20px;font-size:clamp(15px,1.25vw,17px)}
.sec-head.mid h2,.sec-head.mid p{margin-inline:auto}

/* ---------- intro band ---------- */
.band{background:var(--marble);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center;
  padding-block:clamp(56px,7vw,104px)}
/* Band headings sit in a narrow grid column, so they are capped in em
   (scales with own font-size) to avoid ragged wraps on large screens. */
.band-in h2{font-size:clamp(24px,2.6vw,38px);max-width:12em}
.band h2 .em{color:var(--teal-deep)}
.band-img{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.band-img img{aspect-ratio:4/3;object-fit:cover}

/* ---------- six features ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feat{background:var(--paper);padding:clamp(30px,3.4vw,48px);transition:.35s;position:relative}
.feat:hover{background:var(--teal-wash)}
.feat .ic{width:60px;height:60px;margin-bottom:26px;display:flex;align-items:center;justify-content:center}
.feat .ic img{width:100%;height:100%;object-fit:contain;transition:.35s}
.feat:hover .ic img{transform:translateY(-3px)}
.feat h3{margin-bottom:12px;letter-spacing:-.01em}
.feat p{font-size:14.8px;line-height:1.7}
.feat .idx{position:absolute;top:clamp(30px,3.4vw,48px);right:clamp(30px,3.4vw,48px);
  font-size:11px;letter-spacing:.2em;color:var(--ink-mute)}

/* ---------- quote / priority ---------- */
/* Full-height parallax plate, copy pinned bottom-left, paper wash rising
   from the bottom edge. No box: the wash is what makes the copy readable.

   The wash is a long, many-stop ramp — 40% of the section height — so the
   photograph dissolves into the paper instead of meeting it at a band.
   Softness costs the subject, so the photograph rides higher: the layer is
   140% of the section height, offset 34% up, which puts the subject's head
   at roughly a quarter of the way down and clear of the ramp.

   The 6% bottom bleed is the parallax ceiling: past 4% the layer's bottom
   edge lifts above the section and paper shows through. */
.prio{position:relative;overflow:hidden;border-top:1px solid var(--line);
  min-height:100svh;display:flex;align-items:flex-end}
.prio-bg{position:absolute;left:0;right:0;top:-34%;bottom:-6%;z-index:0;will-change:transform}
.prio-bg img{width:100%;height:100%;object-fit:cover}
/* Positioned, so it is out of flow and is not laid out as a flex item. */
.prio::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(253,253,252,0) 36%,
    rgba(253,253,252,.09) 44%,
    rgba(253,253,252,.23) 50%,
    rgba(253,253,252,.42) 55%,
    rgba(253,253,252,.58) 60%,
    rgba(253,253,252,.71) 65%,
    rgba(253,253,252,.81) 71%,
    rgba(253,253,252,.89) 78%,
    rgba(253,253,252,.95) 85%,
    rgba(253,253,252,.98) 92%,
    rgba(253,253,252,1) 100%)}
.prio-in{position:relative;z-index:2;padding-block:clamp(28px,4vw,56px)}
/* The kicker sits highest, where the wash is still thin, and --teal-deep
   needs an almost-solid backdrop to clear AA (4.71:1 on paper, no margin).
   Over this photo it turns it into --ink instead: 5.7:1 at the thinnest
   point of the ramp, 8.6:1 at the densest. Every other section keeps the
   teal kicker; this is the only one where type sits on a photograph. */
.prio .kicker{color:var(--ink)}
/* The tag carries its own fill so the teal is not at the mercy of the wash
   underneath it: 4.71:1 on paper, 4.5:1 the moment anything shows through. */
.prio .tag{background:rgba(253,253,252,.92)}
.prio h2{max-width:16ch}
.prio h2 .em{color:var(--teal-deep)}
.prio .tag{display:inline-block;margin-top:28px;padding:11px 22px;border:1px solid var(--teal);border-radius:2px;
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep);background:rgba(255,255,255,.6)}

/* ---------- video ---------- */
.player{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--marble)}
.player img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:.65s cubic-bezier(.2,.7,.3,1)}
.player:hover img{transform:scale(1.03)}
.player::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(54,73,104,.5),rgba(54,73,104,.06) 55%);transition:.4s}
.player:hover::after{background:linear-gradient(to top,rgba(54,73,104,.42),rgba(54,73,104,.02) 55%)}
.play{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.play-btn{width:clamp(74px,8vw,100px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);transition:.35s}
.play-btn svg{width:24px;height:24px;fill:var(--teal-deep);margin-left:4px;transition:.3s}
.player:hover .play-btn{background:var(--teal);transform:scale(1.05)}
.player:hover .play-btn svg{fill:#fff}
.player-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(22px,3vw,36px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;color:#fff}
.player-meta h3{color:#fff;max-width:26ch}
.player-meta span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px);align-items:start}
.faq-side{position:sticky;top:112px}
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
/* Every rule that uses the display face sets Light, so the face has one
   voice; size and colour carry the hierarchy. */
.q summary{padding-block:28px;display:flex;justify-content:space-between;align-items:flex-start;gap:26px;cursor:pointer;
  list-style:none;font-family:var(--disp);font-weight:300;letter-spacing:-.008em;
  font-size:clamp(17px,1.6vw,21px);line-height:1.45;transition:.25s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--teal-deep)}
.q .pm{width:26px;height:26px;flex:none;position:relative;margin-top:4px;transition:.35s}
.q .pm::before,.q .pm::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--teal);transition:.35s}
.q .pm::before{width:13px;height:1.5px}
.q .pm::after{width:1.5px;height:13px}
.q[open] .pm{transform:rotate(135deg)}
.q .a{padding:0 0 30px}
.q .a ul{margin-left:20px;display:grid;gap:10px;color:var(--ink-soft);font-size:15.2px}
.q .a li::marker{color:var(--teal)}

/* ---------- contact ---------- */
.contact{background:var(--marble);border-top:1px solid var(--line)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cbox{background:var(--paper);padding:clamp(28px,3vw,40px)}
.cbox .kicker{display:block;margin-bottom:16px;color:var(--ink-mute)}
.cbox a{display:block;font-size:16px;color:var(--ink);transition:.2s;padding:3px 0}
.cbox a:hover{color:var(--teal-deep)}
.cbox p{font-size:14.8px;line-height:1.75}
.cbox .sub{font-size:12.5px;color:var(--ink-mute);letter-spacing:.06em}

/* ---------- footer ---------- */
footer{background:var(--paper);border-top:1px solid var(--line)}
.fbot{padding-block:30px;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.fbot img{height:75px;width:auto}
.fbot .cp{font-size:13px;color:var(--ink-mute)}
.fbot .cp strong{color:var(--ink);font-weight:500}
.fbot .cp a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:.2s}
.fbot .cp a:hover{color:var(--teal-deep)}
.fbot .lnk{font-size:13px;color:var(--ink-mute);transition:.2s}
.fbot .lnk:hover{color:var(--teal-deep)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(54,73,104,.86);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:var(--pad);opacity:0;visibility:hidden;transition:.35s}
.modal.on{opacity:1;visibility:visible}
.modal-in{width:min(1120px,100%);position:relative;transform:scale(.96) translateY(12px);transition:.4s cubic-bezier(.2,.7,.3,1)}
.modal.on .modal-in{transform:none}
.frame{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.frame iframe{width:100%;height:100%;border:0}
.modal-close{position:absolute;top:-52px;right:0;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  border-radius:2px;padding:10px 20px;font-family:var(--body);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:.25s}
.modal-close:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- floating ---------- */
.wa{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:11px;background:var(--teal);color:#fff;
  padding:15px 24px;border-radius:2px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.3);transition:.3s}
.wa:hover{background:var(--teal-deep);transform:translateY(-2px)}
.wa svg{width:17px;height:17px;fill:#fff}

/* ---------- reveal ----------
   Nothing here hides anything until a script has said so. The head sets
   html.js before the first paint, which is what prevents a flash; reveal.js
   then either takes the hiding over in GSAP, or swaps to html.js-css and
   drives the same elements with transitions plus an IntersectionObserver.
   With JavaScript off, neither class exists and every element is visible. */
html.js .rv,
html.js-css .rv{opacity:0;transform:translateY(24px)}
html.js-css .rv{transition:.85s cubic-bezier(.2,.7,.3,1)}
html.js-css .rv.in{opacity:1;transform:none}

@media(max-width:1200px) and (min-width:681px){
  /* Narrower viewport: the couple drifts left into the wash, so shift the
     crop right (0%) to push them clear of the text column. */
  .hero-bg img{object-position:0% 55%}
}
@media(max-width:1024px){
  .menu{display:none}.burger{display:block}
  .feats{grid-template-columns:repeat(2,1fr)}
  .band-in,.faq-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .cgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .feats,.cgrid{grid-template-columns:1fr}

  /* Mobile hero: copy on paper, image as its own full-bleed plate below.
     Overlaying text on a washed-out photo failed at this width. */
  .hero{min-height:0;display:flex;flex-direction:column;padding:calc(var(--navh-rest) + 34px) 0 0;position:relative}
  .hero-in{order:1;position:static}
  .hero-bg{order:2;position:relative;inset:auto;margin-top:32px;aspect-ratio:4/3}
  .hero-strip{order:3}
  .hero-bg img{object-position:64% 48%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(253,253,252,.55) 0%,rgba(253,253,252,0) 26%,rgba(253,253,252,0) 74%,rgba(253,253,252,.42) 100%)}
  .hero-copy{max-width:none}
  .hero .kicker{margin-bottom:16px}
  .hero h1{margin-bottom:18px}
  .hero p{margin-bottom:26px;max-width:none}
  .hero-actions{margin-bottom:2px}

  .hero-strip{position:static;background:var(--paper);border-top:0}
  .hs+.hs{border-left:0;border-top:1px solid var(--line);padding-left:0}

  :root{--navh:104px;--logo:72px;--navh-rest:104px}
  body.scrolled{--navh:72px;--logo:38px}
}
@media(max-width:560px){.hs-row{grid-template-columns:1fr}.hs{gap:14px;padding-block:16px;align-items:center}.hs+.hs{border-left:0;border-top:1px solid var(--line);padding-left:0}.hs strong{font-size:26px;min-width:62px;flex:none}.hs span{font-size:11px;letter-spacing:.1em;min-width:0}.hs br{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html.js .rv,html.js-css .rv,.rv{opacity:1;transform:none}}
/* ===== MEDICAL FACILITIES PAGE ===== */
.page-hero{position:relative;padding-block:calc(var(--navh-rest) + clamp(44px,7vw,104px)) clamp(56px,7vw,104px);overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(253,253,252,.96) 0%,rgba(253,253,252,.85) 40%,rgba(253,253,252,.32) 74%,rgba(253,253,252,0) 100%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{margin-bottom:24px}
.page-hero h1 .em{color:var(--teal-deep)}
.page-hero .lead{max-width:52ch;font-size:clamp(15px,1.3vw,17px)}

.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fac{background:var(--paper);padding:clamp(28px,3.2vw,42px);display:flex;flex-direction:column;transition:.35s}
.fac:hover{background:var(--teal-wash)}
.fac .city{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:16px}
.fac h3{font-family:var(--disp);font-size:clamp(19px,1.7vw,23px);line-height:1.25;margin-bottom:22px}
.fac .addr-lbl{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.fac .addr{font-size:14.5px;line-height:1.7;color:var(--ink-soft);margin-bottom:26px;flex:1}
.fac .links{display:flex;gap:10px;flex-wrap:wrap}
.fac .lk{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);border-radius:2px;padding:11px 18px;transition:.26s}
.fac .lk:hover{border-color:var(--teal);color:var(--teal-deep);background:#fff}
.fac .lk svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}

.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,72px)}
.note{display:flex;gap:16px;padding-block:22px;border-bottom:1px solid var(--line)}
.note svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--teal);fill:none;stroke-width:1.7}
.note p{font-size:14.8px;line-height:1.7}

@media(max-width:1024px){.fac-grid{grid-template-columns:repeat(2,1fr)}.notes{grid-template-columns:1fr}}
@media(max-width:680px){.fac-grid{grid-template-columns:1fr}}
/* The hotline card fills the empty tail slot; only meaningful in multi-column grids. */
@media(min-width:681px){.fac-help{grid-column:span 2}}

/* ===== BUTTON ROWS ===== */
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* A line break that only exists once the band stacks. The heading reads
   "Download the Full Brochure" / "with the Packages" on one line each from
   1024px down; above that the spans are inline and the text flows as one
   string, which is how it was before. */
.lb{display:inline}
@media(max-width:1024px){
  /* One column here, so the heading has the full width. Releasing the 12em
     cap is what lets "Download the Full Brochure" (12.68em) hold one line. */
  #brochure .band-in h2{max-width:none}
  #brochure .band-in h2 .lb{display:block}
}
@media(max-width:680px){
  /* 12.68em x font-size has to clear the content width at 320px, which is
     280px after the gutter: 21px is the largest size that fits. */
  #brochure .band-in h2{font-size:clamp(21px,6.4vw,30px)}
}

@media(max-width:680px){
  .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
  /* The brochure pair stacks: one column, so both buttons are full width and
     therefore identical in width. */
  .btn-row{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
  .hero-actions .btn,
  .btn-row .btn{width:100%;min-width:0;justify-content:center;padding-inline:14px;text-align:center;white-space:normal;line-height:1.3}
}
@media(max-width:420px){
  .hero-actions{grid-template-columns:1fr}
}

/* ===== HOTLINE CARD (fills the 8th grid slot) ===== */
.fac-help{background:var(--teal-wash)}
.fac-help-body{display:flex;flex-direction:column;flex:1;min-width:0}
.fac-help:hover{background:#E0F3F4}
.fac-help .addr-lbl{color:var(--teal-deep)}
.fac-help .lk{background:var(--teal);border-color:var(--teal);color:#fff}
.fac-help .lk:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.fac-help .lk svg{fill:none;stroke:currentColor}
@media(min-width:681px){
  /* Two columns, not a 4-row grid: the text column keeps its own vertical
     rhythm and the buttons align to the same optical top as the label. */
  .fac-help{display:flex;flex-direction:row;align-items:flex-start;gap:clamp(32px,4vw,72px)}
  .fac-help .fac-help-body{flex:1;min-width:0;display:flex;flex-direction:column}
  .fac-help h3{margin-bottom:14px}
  .fac-help .addr{margin-bottom:0;max-width:54ch}
  .fac-help .links{flex:none;flex-direction:column;align-items:stretch;min-width:200px;margin-top:36px}
  .fac-help .lk{justify-content:center;padding-block:16px}
}

/* ===== MOBILE DRAWER ===== */
.burger{position:relative;z-index:120}
.burger span{transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
body.drawer-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.drawer-open .burger span:nth-child(2){opacity:0}
body.drawer-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.scrim{position:fixed;inset:0;z-index:100;background:rgba(54,73,104,.45);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
body.drawer-open .scrim{opacity:1;visibility:visible}

.drawer{position:fixed;top:0;left:0;bottom:0;z-index:110;width:min(360px,86vw);
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);transition:transform .42s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 0 60px -20px rgba(0,0,0,.35)}
body.drawer-open .drawer{transform:none}
.drawer > *{flex:none}

.drawer-top{padding:26px var(--pad) 22px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.drawer-top img{height:56px;width:auto}
.drawer-x{background:none;border:1px solid var(--line-2);border-radius:2px;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;transition:.25s;flex:none}
.drawer-x:hover{border-color:var(--teal);background:var(--teal-wash)}
.drawer-x svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.8}

.drawer-nav{padding:10px var(--pad) 6px;display:flex;flex-direction:column}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:19px 0;border-bottom:1px solid var(--line);
  font-family:var(--disp);font-weight:300;letter-spacing:-.008em;line-height:1.3;
  font-size:20px;color:var(--ink);transition:.25s}
.drawer-nav a:hover,.drawer-nav a.on{color:var(--teal-deep)}
.drawer-nav a .n{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--ink-mute)}
.drawer-nav a.on .n{color:var(--teal)}

.drawer-cta{padding:24px var(--pad) 0}
.drawer-cta .btn{width:100%;justify-content:center}

.drawer-contact{padding:28px var(--pad) 0}
.drawer-contact .kicker{display:block;margin-bottom:14px;color:var(--ink-mute)}
.drawer-contact a{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15px;color:var(--ink);transition:.2s}
.drawer-contact a:hover{color:var(--teal-deep)}
.drawer-contact a svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:1.7;flex:none}
.drawer-contact a .sub{font-size:11.5px;color:var(--ink-mute);letter-spacing:.06em}

.drawer-foot{padding:22px var(--pad) 28px;margin-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px}

@media(min-width:1025px){.drawer,.scrim{display:none}}

/* ===== PHONE FIXES (verified at true 390px viewport) ===== */
@media(max-width:560px){
  /* Header CTA overflowed the bar at 390px; it lives in the drawer instead. */
  .nav > div{gap:8px}
  .nav > div .btn-primary{display:none}

  /* Hero children must not flex-shrink, or the image plate collapses. */
  .hero > *{flex:none}
  .hero-bg{width:100%}

  /* Long single-line CTA overflowed the page at 390px. */
  .btn{white-space:normal;line-height:1.35;max-width:100%}
  .sec > .rv > .btn-outline{width:100%;justify-content:center;text-align:center}
}

/* ===== PAGE HERO ON PHONE =====
   Same treatment as the homepage hero: copy on clean paper first,
   image as its own full-bleed plate below. Text over a washed-out
   photo was unreadable at this width. */
@media(max-width:680px){
  .page-hero{display:flex;flex-direction:column;padding-block:calc(var(--navh-rest) + 34px) 0}
  .page-hero > *{flex:none}
  .page-hero .wrap{order:1;position:relative;z-index:2}
  .page-hero-bg{order:2;position:relative;inset:auto;margin-top:32px;aspect-ratio:4/3}
  .page-hero-bg img{object-position:center 55%}
  .page-hero-bg::after{background:linear-gradient(180deg,rgba(253,253,252,.55) 0%,rgba(253,253,252,0) 26%,rgba(253,253,252,0) 74%,rgba(253,253,252,.42) 100%)}
  .page-hero .kicker{margin-bottom:16px!important}
  .page-hero h1{margin-bottom:18px}
  .page-hero .lead{max-width:none}
}