/* ============================================================
   Brightest Light Senior Living — shared design system
   Brand: slate teal + pale ice + warm gold starlight
   Type:  Cormorant Garamond (display) + Mulish (body)
   Accessibility-first: 18px+ base, AA contrast, big tap targets
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal; font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face{
  font-family:'Mulish';
  font-style:normal; font-weight:200 1000;
  font-display:swap;
  src:url('/assets/fonts/mulish.woff2') format('woff2');
}
@font-face{
  font-family:'Mulish';
  font-style:italic; font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/mulish-italic.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root{
  /* brand */
  --teal:#3e5a64;
  --teal-deep:#2c444c;
  --teal-800:#213539;
  --teal-card:#48666f;
  --teal-line:#5c7880;
  --ice:#cfe6ed;
  --ice-bright:#e8f3f6;
  --ice-dim:rgba(207,230,237,.74);
  --gold:#eac985;
  --gold-bright:#f4ddaa;
  --gold-deep:#c99b4f;      /* gold that passes AA as text on paper */
  /* neutrals */
  --paper:#f7f4ee;
  --paper-alt:#efe9df;
  --mist:#e7eef0;           /* pale cool tint tied to teal */
  --ink:#283a40;
  --ink-soft:#586870;
  --ink-line:rgba(40,58,64,.14);
  --white:#ffffff;

  /* type */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Mulish',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  /* Type scale — EVERY font-size on the site comes from this list. Do not introduce
     one-off sizes; near-duplicates (1rem vs 1.03 vs 1.06) read as sloppy, not as
     hierarchy. Steps are far enough apart to be legible as deliberate. */
  --fs-xs:.8rem;                            /* 12.8px  eyebrows, meta, counters   */
  --fs-sm:.95rem;                           /* 15.2px  fine print, footer meta    */
  --fs-md:1.0625rem;                        /* 17px    dense UI: lists, chips, btns */
  --fs-base:1.1875rem;                      /* 19px    body copy — senior-legible */
  --fs-lead:1.25rem;                        /* 20px    section intro paragraphs   */
  --fs-lead-hero:clamp(1.2rem,1.9vw,1.5rem);/* hero keeps its own larger lead     */
  --fs-h4:clamp(1.25rem,2vw,1.6rem);        /* FAQ questions                      */
  --fs-h3:clamp(1.4rem,2.4vw,1.9rem);
  --fs-h2:clamp(2.05rem,4.2vw,3.35rem);     /* every section heading              */
  --fs-stat:clamp(2.6rem,5vw,3.8rem);       /* stat numerals                      */
  --fs-display:clamp(2.9rem,6.4vw,5.3rem);  /* hero h1 only                       */

  /* rhythm */
  --wrap:1180px;
  --wrap-narrow:820px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(2.75rem,6vw,5.25rem);
  --radius-s:14px;
  --radius:20px;
  --radius-l:30px;
  --shadow-sm:0 2px 10px rgba(40,58,64,.07);
  --shadow:0 18px 44px -22px rgba(40,58,64,.32);
  --shadow-teal:0 24px 60px -28px rgba(24,44,50,.7);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;              /* NOT hidden — keeps position:sticky working */
  scroll-behavior:smooth;
  background:var(--paper);
}
body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);     /* 19px base — comfortable for older eyes */
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{max-width:100%;display:block}
img{height:auto}
/* Casual save deterrent on the house photos. This is a deterrent, NOT protection —
   a screenshot, devtools, or the image URL itself all still work, and the files have to
   stay publicly fetchable for the page to render at all. What it does stop is the two
   things people actually try: the iOS/Android long-press "Save Image" sheet
   (-webkit-touch-callout) and drag-to-desktop. Right-click is handled in site.js.
   Deliberately scoped to img/picture: killing the context menu page-wide is hostile. */
/* The callout suppression is listed on the wrapper too, not just the img: iOS attributes
   a long-press to the element under the finger, and the gallery photos sit inside a
   <button>. Chrome discards -webkit-touch-callout as unknown (so it will not show up in
   its CSSOM), Safari is the one that honours it — verify this one on a real iPhone. */
img,picture,.gallery__open,.lightbox__img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;
}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul[class]{list-style:none;padding:0}

/* ---------- Accessibility ---------- */
:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--teal);color:var(--ice-bright);
  padding:.7rem 1.2rem;border-radius:0 0 var(--radius-s) var(--radius-s);
  text-decoration:none;font-weight:700;transition:top .2s var(--ease);
}
.skip-link:focus{top:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Typography ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:.005em;
  color:var(--ink);
  text-wrap:balance;
}
.display{
  font-weight:500;
  font-size:var(--fs-display);
  line-height:1.02;
  letter-spacing:.004em;
}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.12}
.lead{
  font-size:var(--fs-lead);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:60ch;
}
/* Secondary body copy. Deliberately the SAME size as list items (--fs-md) so a
   paragraph and a bullet never sit at different sizes inside one section.
   Section type hierarchy sitewide: h2 (--fs-h2) > .lead (--fs-lead) > .copy/lists (--fs-md) */
.copy{
  font-size:var(--fs-md);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:64ch;
}
.section--teal .copy,.section--deep .copy{color:var(--ice-dim)}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-block;
}
.eyebrow--center{display:block;text-align:center}
em,.serif-em{font-style:italic}
strong{font-weight:700}
.text-gold{color:var(--gold-deep)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--alt{background:var(--paper-alt)}
.section--mist{background:var(--mist)}
.section-head{max-width:64ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .lead{margin-top:1.1rem}
.section-head h2{margin-top:.7rem}
.stack-sm>*+*{margin-top:1rem}
.stack>*+*{margin-top:1.5rem}

/* dark teal panel — the light/dark rhythm */
.section--teal{
  background:var(--teal);
  color:var(--ice);
}
.section--deep{background:var(--teal-deep);color:var(--ice)}
/* both dark panels share the same on-dark type colors */
.section--teal h1,.section--teal h2,.section--teal h3,
.section--deep h1,.section--deep h2,.section--deep h3{color:var(--ice-bright)}
.section--teal .lead,.section--deep .lead{color:var(--ice-dim)}
.section--teal .eyebrow,.section--deep .eyebrow{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--gold);
  --btn-fg:var(--teal-800);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:3.25rem;
  padding:.85rem 1.7rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-md);
  line-height:1.1;text-decoration:none;
  border:2px solid transparent;border-radius:999px;
  cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  box-shadow:0 10px 26px -12px rgba(201,155,79,.85);
}
.btn:hover{transform:translateY(-2px);background:var(--gold-bright);box-shadow:0 16px 34px -14px rgba(201,155,79,.95)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--ink);
  border-color:var(--ink-line);box-shadow:none;
}
.btn--ghost:hover{--btn-bg:rgba(40,58,64,.05);border-color:var(--ink-soft);box-shadow:none}
.btn--on-teal.btn--ghost{
  --btn-fg:var(--ice-bright);border-color:var(--teal-line);
}
.btn--on-teal.btn--ghost:hover{--btn-bg:rgba(255,255,255,.08)}
.btn--lg{min-height:3.6rem;padding:1rem 2.1rem;font-size:var(--fs-base)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* phone link in nav / inline */
.phone-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;text-decoration:none;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.phone-link:hover{color:var(--gold-deep)}
.phone-link svg{width:1.1em;height:1.1em;flex:none}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(247,244,238,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--ink-line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.is-scrolled{box-shadow:var(--shadow-sm)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:.7rem var(--gutter);
  display:flex;align-items:center;gap:1.5rem;
}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__star{width:2.3rem;height:2.3rem;flex:none}
.brand__name{display:flex;flex-direction:column;line-height:1}
.brand__name b{
  font-family:var(--font-display);font-weight:600;font-size:1.5rem;
  letter-spacing:.01em;color:var(--ink);
}
.brand__name span{
  font-family:var(--font-body);font-weight:700;font-size:.6rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:.15rem;
}
.nav__links{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.nav__links a{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:var(--fs-md);white-space:nowrap;
  padding:.55rem .8rem;border-radius:999px;transition:background .15s var(--ease),color .15s var(--ease);
}
.nav__links a:hover{background:rgba(40,58,64,.06);color:var(--gold-deep)}
.nav__actions{display:flex;align-items:center;gap:1rem;flex:none}
.nav__toggle{
  display:none;width:3rem;height:3rem;border:1px solid var(--ink-line);
  border-radius:12px;background:transparent;align-items:center;justify-content:center;
}
.nav__toggle span{position:relative;width:20px;height:2px;background:var(--ink);display:block;transition:.2s var(--ease)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:.2s var(--ease)}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__toggle span::after{top:0;transform:rotate(-45deg)}

@media (max-width:920px){
  .nav__toggle{display:inline-flex}
  .nav__links,.nav__actions .btn{display:none}
  .nav__actions{margin-left:auto}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--ink-line);
    padding:.5rem var(--gutter) 1.5rem;
    box-shadow:var(--shadow);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:.2s var(--ease);
  }
  .nav.is-open .nav__links{display:flex;transform:none;opacity:1;pointer-events:auto}
  .nav__links a{padding:.95rem .4rem;font-size:var(--fs-base);border-radius:10px}
  .nav__links .btn{display:inline-flex;margin-top:.8rem}
}

/* Narrow phones: the header cannot hold the logo lockup, a 12-digit number at 19px and
   a 48px toggle. Measured at a real 393px viewport the row needed 463px, so the toggle
   was pushed fully off-screen (menu unreachable) and the body scrolled to 463 — which
   is also what let the whole page be dragged sideways on iOS, since html{overflow-x:clip}
   hides that from the document but not from the body. Real portrait widths run 320-430,
   so this has to hold at the bottom of that range, not just at the 393 we tested.
   The number gives up its text and becomes a gold circle: the glyph + aria-label still
   read as "call", and the number itself is still spelled out in the hero and footer. */
@media (max-width:560px){
  .nav__inner{gap:.75rem}
  /* The logo is the only decorative item in this row, so it is the one that yields: if
     space ever runs out again it ellipsises instead of pushing the menu off-screen.
     flex-shrink must be re-enabled explicitly — the base rule is `flex:none`, which is
     `0 0 auto`, so min-width:0 alone does nothing. Trimming the star and its gap buys
     ~6px, enough that nothing actually truncates at 360 (a common Android width) and
     only a 320px screen ever clips the wordmark. */
  .brand{flex:0 1 auto;min-width:0;overflow:hidden;gap:.55rem}
  .brand__star{width:2.1rem;height:2.1rem}
  .brand__name{min-width:0}
  .brand__name b,.brand__name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav .phone-link__num{display:none}
  .nav .phone-link{
    width:3rem;height:3rem;justify-content:center;gap:0;
    border-radius:999px;background:var(--gold);color:var(--ink);
  }
  .nav .phone-link svg{width:1.35rem;height:1.35rem}

  /* Hero CTAs share one row instead of stacking. They cannot do it at their natural
     size — "Schedule a visit" alone is ~225px at --fs-base with the --lg padding — so
     the type drops a token and the horizontal padding gives.
     white-space:nowrap is not optional on the number: "602-819-9009" is full of real
     hyphens, so a too-narrow button breaks it into "602-/819-/9009" over three lines
     rather than overflowing. Sizing to content (flex:0 1 auto) rather than forcing equal
     halves is what keeps both on one line — equal halves put the wider label over
     budget while the narrower one sat on unused space. */
  .hero .btn-row{flex-wrap:nowrap;gap:.5rem}
  .hero .btn-row>.btn{
    flex:0 1 auto;min-width:0;
    padding-inline:.85rem;
    font-size:var(--fs-md);
    gap:.4em;
    white-space:nowrap;
  }
  .hero .btn-row>.hero__phone svg{width:1.05em;height:1.05em}
}

/* Smallest phones: the hero pair needs one more step to stay on a single line. */
@media (max-width:380px){
  .hero .btn-row{gap:.4rem}
  .hero .btn-row>.btn{padding-inline:.6rem;font-size:var(--fs-sm)}
}
/* Below this the two simply do not fit side by side; stacking beats clipping. */
@media (max-width:335px){
  .hero .btn-row{flex-wrap:wrap}
  .hero .btn-row>.btn{flex:1 1 100%}
}

/* ---------- Feature / care cards ---------- */
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  background:var(--white);
  border:1px solid var(--ink-line);
  border-radius:var(--radius);
  padding:1.7rem;
  box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:var(--fs-md);line-height:1.6}
.card__icon{
  width:3rem;height:3rem;display:grid;place-items:center;margin-bottom:1.1rem;
  color:var(--gold-deep);background:rgba(234,201,133,.18);border-radius:12px;
}
.card__icon svg{width:1.6rem;height:1.6rem}
.section--teal .card{
  background:var(--teal-card);border-color:var(--teal-line);color:var(--ice);box-shadow:var(--shadow-teal);
}
.section--teal .card h3{color:var(--ice-bright)}
.section--teal .card p{color:var(--ice-dim)}
.section--teal .card__icon{color:var(--gold);background:rgba(234,201,133,.16)}

/* ---------- Tag chips (levels of care) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chips--center{justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.6rem 1.1rem;border-radius:999px;
  background:var(--white);border:1px solid var(--ink-line);
  font-weight:600;font-size:var(--fs-md);color:var(--ink);
}
.chip::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gold-deep);flex:none}
.section--teal .chip{background:rgba(255,255,255,.06);border-color:var(--teal-line);color:var(--ice-bright)}
.section--teal .chip::before{background:var(--gold)}
/* Smaller chips on phones so more of them share a line. This block has to live AFTER
   the base .chip rules, not up with the other mobile overrides: same specificity means
   source order decides, and a media query placed earlier in the file silently loses.
   Padding, gap and the dot give first, then the type steps down one token.
   Note the real limit is label length, not padding — "Post-hospital rehabilitation" is
   ~250px of chip on its own, so the longest few can never pair up at 393px. Shortening
   those labels is the only thing that removes rows. */
@media (max-width:560px){
  .chips{gap:.4rem}
  .chip{padding:.4rem .65rem;gap:.35em;font-size:var(--fs-sm)}
  .chip::before{width:.35rem;height:.35rem}
}

/* ---------- Stat strip ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;text-align:center;
  max-width:62rem;margin-inline:auto;
}
.stats>div{padding:.35rem clamp(1rem,3vw,2.25rem)}
.stats>div+div{border-left:1px solid var(--ink-line)}
.section--teal .stats>div+div{border-color:var(--teal-line)}
.stat__num{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-stat);line-height:1;color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
}
.section--teal .stat__num{color:var(--gold)}
.stat__label{margin-top:.4rem;font-weight:600;color:var(--ink-soft);font-size:var(--fs-md)}
.section--teal .stat__label{color:var(--ice-dim)}
@media (max-width:680px){
  /* Stay one row of four rather than folding to 2x2. Four ~70px columns can't hold
     the desktop numeral or padding, so both step down; the hairline dividers from the
     base rule carry straight over. */
  .stats{grid-template-columns:repeat(4,1fr);gap:0;max-width:none;align-items:start}
  .stats>div{padding:.2rem .3rem}
  .stat__num{font-size:var(--fs-h3)}
  .stat__label{
    font-size:var(--fs-xs);line-height:1.3;margin-top:.35rem;
    overflow-wrap:break-word;hyphens:auto;
  }
}
/* Noah wants the four cells side by side on phones too, so they stay in one row all the
   way down. What has to go is `hyphens:auto`: at 393px the label column is only ~79px
   and auto-hyphenation broke words mid-syllable ("State-li-censed" on a real phone).
   With hyphens:manual the browser may still break at the real hyphen in
   "Around-the-clock" — that is correct typography — but it will never invent one.
   The strip also gives up the page gutter here, which buys each column ~12px. */
@media (max-width:430px){
  .stats{
    margin-inline:calc(var(--gutter) * -1);
    width:auto;
  }
  .stats>div{padding:.2rem .25rem}
  .stat__label{overflow-wrap:break-word;hyphens:manual}
}

/* ---------- Media / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
/* share a top edge instead of floating at the optical middle — for a split whose
   copy column is taller than the image's natural height (see #care) */
.split--top{align-items:start}
.split--reverse .split__media{order:2}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:2rem}
  /* Stacked, the copy always comes first so the heading introduces its photo rather
     than trailing it. `--stack` is excluded: its DOM order is already head/media/body,
     which is exactly the stacked order we want. */
  .split:not(.split--stack) .split__media{order:2}
}

/* split--stack: three children (head, media, body). Stacked they fall in DOM order,
   so the photo lands between the heading and the paragraphs. On desktop the photo
   moves to column 1 spanning both rows, with the copy stacked in column 2. */
@media (min-width:821px){
  .split--stack{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(1.5rem,4vw,3.5rem);
    row-gap:1.5rem;
    align-items:stretch;
  }
  .split--stack .split__media{grid-column:1;grid-row:1 / span 2;display:flex}
  .split--stack .split__media .media-frame{flex:1 1 auto;height:auto;aspect-ratio:auto}
  .split--stack .split__head{grid-column:2;grid-row:1}
  .split--stack .split__body{grid-column:2;grid-row:2}
}
.media-frame{
  border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow);
  background:var(--mist);position:relative;
}
.media-frame picture{display:block;width:100%;height:100%}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block}
.media-frame--tall{aspect-ratio:2/3}     /* holds a native portrait photo — no crop */
.media-frame--wide{aspect-ratio:3/2}      /* holds a native landscape photo — no crop */

/* split--fill: the image fills its whole column so image + text read as a balanced
   50/50 block on desktop; on mobile (stacked) the frame keeps its natural ratio */
@media (min-width:821px){
  .split--fill{align-items:stretch}
  .split--fill .split__media{display:flex}
  .split--fill .media-frame{flex:1 1 auto;height:auto;aspect-ratio:auto}
}

/* ---------- Gallery — full-bleed band scrolling on a loop ----------
   Two fixed-height rows, filled column by column: a landscape takes one row, a
   portrait spans both. Each tile's width is derived from the row height and its own
   aspect ratio, so every image sits at its true 3:2 or 2:3 and NOTHING is cropped.
   Item order must keep portraits on row 1 (pairs of landscapes between them) or
   auto-placement can't fit the 2-row span and leaves a hole. ---------- */
/* The band is a real horizontally scrollable element, and the auto-scroll drives
   scrollLeft from JS rather than animating transform. A CSS translate animation cannot
   coexist with dragging: the transform and the scroll offset are separate coordinate
   systems, so a swipe would fight the keyframes and snap back. Driving scrollLeft means
   a touch swipe is just native momentum scrolling, and the loop picks up where the
   finger left off (see js/home.js). Pause/resume lives in JS too, which is why the old
   :hover / :has(:focus-visible) pause rules are gone. */
.marquee{
  /* Row height drives everything else in the band — tile widths are derived from it
     (--land is row*1.5, --port is (row*2 + gap)*2/3), which is what keeps every photo at
     its native 3:2 or 2:3 with no crop. So this one value sizes the whole section.
     The floor is what phones get: 17vw is only ~67px at 393px, so the clamp minimum was
     binding and mobile sat at the smallest tiles while desktop ran at its 11rem cap.
     Raising the floor 6.5 -> 8.75rem makes the band ~35% taller on a phone (104 -> 140px
     per row) and leaves every width above ~823px exactly where Noah signed it off. */
  --row:clamp(8.75rem,17vw,11rem);
  --tile-gap:1rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:auto;              /* html{scroll-behavior:smooth} would animate, and
                                        fight every per-frame scrollLeft write */
  overscroll-behavior-x:contain;     /* don't chain a swipe into iOS back-navigation */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* self-scrolling band; the masked edges signal
                                        "more this way" without a visible bar */
  -ms-overflow-style:none;
  margin-top:2.5rem;
  /* soften both cut edges so tiles enter and leave instead of popping */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5rem,#000 calc(100% - 5rem),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5rem,#000 calc(100% - 5rem),transparent 100%);
}
.marquee::-webkit-scrollbar{display:none}
.marquee__track{
  display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(2,var(--row));
  gap:var(--tile-gap);
  width:max-content;list-style:none;margin:0;padding:0;
}
.gallery__item{
  margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);background:var(--mist);
  height:100%;
}
.gallery__item--land{width:calc(var(--row) * 1.5)}
.gallery__item--port{
  grid-row:span 2;
  width:calc((var(--row) * 2 + var(--tile-gap)) * 2 / 3);
}
.gallery__open{
  display:block;width:100%;height:100%;padding:0;margin:0;border:0;
  background:none;cursor:zoom-in;border-radius:inherit;overflow:hidden;
}
.gallery__open picture{display:block;width:100%;height:100%}
.gallery__open img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s var(--ease)}
.gallery__open:hover img{transform:scale(1.045)}
/* On mobile the photo band moves up to sit directly under the stats strip, while on
   desktop it stays under #difference. Flex `order` does this without duplicating the
   markup; everything not named keeps DOM order behind them. */
@media (max-width:820px){
  #main{display:flex;flex-direction:column}
  #main>*{order:4}
  #main>.hero{order:1}
  #main>#glance{order:2}
  #main>#gallery{order:3}
  /* On desktop the gallery is --alt so it doesn't collide with #care's paper. Moved up
     here it lands against the stats strip, which is also --alt, so it takes paper
     instead — otherwise the two bands merge with no seam between them. */
  #main>#gallery{background:var(--paper)}
}

/* Reduced motion: the band still scrolls by hand (that is native, not animation) —
   js/home.js just never starts the auto-scroll loop. Nothing to override here. */

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(18,30,34,.93);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  max-width:min(94vw,1180px);
}
.lightbox__img{
  max-width:100%;max-height:76vh;width:auto;height:auto;
  border-radius:var(--radius);box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  background:var(--teal-800);
  transition:filter .4s var(--ease);
}
/* while the full-quality file downloads, the cached grid image stands in, blurred */
.lightbox.is-loading .lightbox__img{filter:blur(10px)}
.lightbox__meta{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.lightbox__cap{color:var(--ice-bright);font-size:var(--fs-md);text-align:center;max-width:56ch}
.lightbox__count{color:var(--ice-dim);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.lightbox__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3.4rem;height:3.4rem;border-radius:50%;place-items:center;display:grid;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.13);color:#fff;
  cursor:pointer;transition:background .15s var(--ease)}
.lightbox__btn:hover{background:rgba(255,255,255,.26)}
.lightbox__btn svg{width:1.6rem;height:1.6rem}
.lightbox__btn--prev{left:-1.4rem}
.lightbox__btn--next{right:-1.4rem}
.lightbox__close{
  position:fixed;top:1.1rem;right:1.1rem;z-index:2;
  width:3rem;height:3rem;border-radius:50%;place-items:center;display:grid;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.13);color:#fff;cursor:pointer;
}
.lightbox__close:hover{background:rgba(255,255,255,.26)}
.lightbox__close svg{width:1.5rem;height:1.5rem}
@media (max-width:640px){
  .lightbox__btn{width:2.9rem;height:2.9rem}
  .lightbox__btn--prev{left:0}
  .lightbox__btn--next{right:0}
}
@media (prefers-reduced-motion:reduce){
  .lightbox,.gallery__open img{transition:none}
}

/* ---------- Testimonials ----------
   Carded and equal-height: quotes are never the same length, and left-aligned text
   blocks of 3 and 5 lines leave a dead corner. The card gives each one an edge, the
   grid stretches them to match, and `margin-top:auto` on the cite pins both
   attributions to the same baseline no matter how long the quote is. */
.quotes{align-items:stretch;gap:1.5rem}
.quote{
  margin:0;
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,3vw,2.4rem);
}
.quote__star{width:1.9rem;height:1.9rem;color:var(--gold);flex:none;margin-bottom:1.1rem}
.quote p{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:var(--fs-h4);line-height:1.36;color:var(--ice-bright);
}
.quote cite{
  display:block;margin-top:auto;padding-top:1.5rem;
  font-style:normal;font-family:var(--font-body);
  font-weight:700;font-size:var(--fs-md);color:var(--gold);letter-spacing:.02em;
}
.quote cite span{display:block;color:var(--ice-dim);font-weight:500;letter-spacing:0;margin-top:.15rem}

/* dark band with the brand starburst glowing behind it */
.section--starred{overflow:hidden;isolation:isolate}
.section--starred>.wrap{position:relative;z-index:2}
.section--starred .hero__glow{
  top:auto;bottom:-38%;right:-5%;left:auto;
  width:min(48vw,420px);opacity:.45;
}

/* ---------- FAQ ---------- */
.faq{max-width:var(--wrap-narrow);margin-inline:auto}
.faq__item{border-bottom:1px solid var(--ink-line)}
.faq__item summary{
  cursor:pointer;list-style:none;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);
  color:var(--ink);line-height:1.25;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:.35rem;top:1.75rem;width:15px;height:15px;
  border-right:2.5px solid var(--gold-deep);border-bottom:2.5px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item .faq__a{padding:0 2rem 1.5rem 0;color:var(--ink-soft);font-size:var(--fs-md)}
.faq__item .faq__a p+p{margin-top:.8rem}

/* ---------- Footer ---------- */
.footer{
  background:var(--teal-deep);color:var(--ice-dim);
  /* The CTA band above is the SAME --teal-deep, so without this hairline the two
     merge into one dark field and the footer has no edge to start from. */
  border-top:1px solid rgba(207,230,237,.22);
  padding-block:clamp(2rem,4vw,2.75rem) 1.25rem;
}
.footer a{color:var(--ice);text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:1.75rem 2rem;align-items:start}
@media (max-width:820px){
  /* Two columns rather than one long run: the brand block spans the top, then
     Explore and Visit us sit side by side. The link column is `auto` (sized to its
     own labels) rather than 1fr — at 1fr it took half the width for short labels
     like "Reviews" and left a dead channel in the middle, while the address next to
     it had to wrap. This hands the leftover width to the address instead. */
  .footer__grid{grid-template-columns:auto 1fr;gap:1.75rem 2rem}
  .footer__grid>div:first-child{grid-column:1 / -1}
}
.footer .brand__name b{color:var(--ice-bright)}
.footer .brand__name span{color:var(--ice-dim)}
.footer h4{font-family:var(--font-body);font-weight:700;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.65rem}
/* These lists carry no class, so `ul[class]{list-style:none}` never reached them —
   they were rendering with default disc bullets. */
.footer ul{list-style:none;margin:0;padding:0;font-size:var(--fs-md)}
.footer ul li+li{margin-top:.3rem}
.footer address{font-style:normal;line-height:1.5;font-size:var(--fs-md)}
.footer__nap{display:grid;gap:.6rem;justify-items:start}
.footer__bottom{
  border-top:1px solid rgba(207,230,237,.16);margin-top:1.75rem;padding-top:1rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;
  font-size:var(--fs-sm);color:var(--ice-dim);
}
.footer__license{max-width:48ch;font-size:var(--fs-sm);line-height:1.5;margin-top:.5rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center}
.footer__legal>a{text-decoration:underline;text-decoration-color:rgba(207,230,237,.4);text-underline-offset:3px}

/* ---------- Long-form prose (policy / legal pages) ---------- */
.page-head{padding-block:clamp(2.5rem,5vw,4rem) 0}
.page-head h1{font-size:var(--fs-h2);color:var(--ink)}
.page-head .prose__updated{margin-top:.9rem}
.prose{max-width:72ch}
.prose h2{font-size:var(--fs-h3);color:var(--ink);margin-top:2.6rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:var(--fs-md);line-height:1.7;color:var(--ink-soft)}
.prose h2+p{margin-top:.8rem}
.prose p+p{margin-top:1rem}
/* these lists carry no class, so ul[class] leaves their markers — restore the indent */
.prose ul{padding-left:1.35rem;margin-top:.9rem;display:grid;gap:.5rem}
.prose strong{color:var(--ink);font-weight:700}
.prose a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--gold-deep);text-underline-offset:3px;
}
.prose a:hover{color:var(--gold-deep)}
.prose__updated{font-size:var(--fs-sm);color:var(--ink-soft);letter-spacing:.02em}
/* plain-language summary at the top of each policy */
.prose__summary{
  background:var(--paper-alt);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:1.3rem 1.5rem;margin:2rem 0 .5rem;
}
.prose__summary p{color:var(--ink)}
.prose address{font-style:normal;font-size:var(--fs-md);line-height:1.7;color:var(--ink-soft);margin-top:.8rem}

/* ---------- Forms (contact) ---------- */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.15rem}
.field label{font-weight:700;font-size:var(--fs-md)}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--fs-md);padding:.85rem 1rem;
  border:1.5px solid var(--ink-line);border-radius:var(--radius-s);
  background:var(--white);color:var(--ink);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(234,201,133,.35)}
.field textarea{min-height:8rem;resize:vertical}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Divider sparkle ---------- */
.sparkle{display:inline-block;width:1.4rem;height:1.4rem;color:var(--gold-deep)}
.section--teal .sparkle{color:var(--gold)}
.divider{display:flex;align-items:center;gap:1rem;justify-content:center;color:var(--ink-line)}
.divider::before,.divider::after{content:"";height:1px;background:currentColor;flex:1;max-width:7rem}