/* ==========================================================================
   SELAH SENIOR LIVING — selah.css
   Palette : lantern navy / flame gold / parchment / sage
   Type    : Cinzel (mark) · Fraunces (display) · Hanken Grotesk (body)
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --navy:#16294D;
  --navy-deep:#0E1B33;
  --navy-soft:#24395F;
  --flame:#C6952F;
  --flame-lite:#E8BE5C;
  --flame-glow:rgba(232,190,92,.45);
  --parchment:#F7F3EA;
  --parchment-2:#FBF8F2;
  --sage:#DFE2D0;
  --stone:#6E6C60;
  --stone-soft:#8C8A7E;
  --line:rgba(22,41,77,.14);

  --bg:var(--parchment);
  --bg-alt:var(--parchment-2);
  --bg-band:var(--sage);
  --surface:#FFFFFF;
  --ink:var(--navy-deep);
  --ink-2:#3A4A66;
  --muted:var(--stone);
  --accent:var(--flame);
  --accent-ink:#8E6A18;
  --footer-bg:var(--navy);
  --footer-ink:#E7EEF7;
  --shadow-soft:0 18px 50px -24px rgba(14,27,51,.30);
  --shadow-lift:0 34px 80px -32px rgba(14,27,51,.45);

  --ff-mark:"Cinzel",Georgia,"Times New Roman",serif;
  --ff-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --ff-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:1280px;
  --gut:clamp(20px,5vw,72px);
  --r-sm:6px; --r-md:14px; --r-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --slow:1.05s;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1322; --bg-alt:#101C30; --bg-band:#16243A; --surface:#152239;
    --ink:#EFE9DC; --ink-2:#C3CEDF; --muted:#9AA6B8;
    --line:rgba(232,190,92,.20);
    --accent:var(--flame-lite); --accent-ink:var(--flame-lite);
    --footer-bg:#070E1A; --footer-ink:#E7EEF7;
    --shadow-soft:0 18px 50px -24px rgba(0,0,0,.75);
    --shadow-lift:0 34px 80px -30px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1322; --bg-alt:#101C30; --bg-band:#16243A; --surface:#152239;
  --ink:#EFE9DC; --ink-2:#C3CEDF; --muted:#9AA6B8;
  --line:rgba(232,190,92,.20);
  --accent:var(--flame-lite); --accent-ink:var(--flame-lite);
  --footer-bg:#070E1A; --footer-ink:#E7EEF7;
  --shadow-soft:0 18px 50px -24px rgba(0,0,0,.75);
  --shadow-lift:0 34px 80px -30px rgba(0,0,0,.85);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-body);font-size:18px;line-height:1.7;
  font-weight:380;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:500;line-height:1.06;
  letter-spacing:-.018em;margin:0;text-wrap:balance;
  font-variation-settings:"SOFT" 18,"WONK" 0,"opsz" 40}
p{margin:0}
::selection{background:var(--flame-glow);color:var(--navy-deep)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type scale */
.t-hero{font-size:clamp(2.9rem,7.4vw,6.4rem)}
.t-xl{font-size:clamp(2.3rem,4.6vw,4rem)}
.t-lg{font-size:clamp(1.85rem,3vw,2.8rem)}
.t-md{font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.24}
.lede{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.62;color:var(--ink-2);max-width:62ch}
.small{font-size:.94rem;color:var(--muted);line-height:1.6}
.eyebrow{
  font-family:var(--ff-body);font-size:.775rem;font-weight:650;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.1rem
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.75}
.serif-em{font-family:var(--ff-display);font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}

/* ---------- lantern divider ---------- */
.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:1.1rem 0 0}
.divider i{display:block;height:1px;width:clamp(40px,9vw,108px);
  background:linear-gradient(90deg,transparent,var(--accent));opacity:.6}
.divider i+i{background:linear-gradient(270deg,transparent,var(--accent))}
.divider svg{width:16px;height:22px;color:var(--accent);flex:none}

/* ---------- buttons ---------- */
.btn{
  --b:var(--navy);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.02em 2.05em;border:1px solid var(--b);background:var(--b);color:#fff;
  font-size:.88rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .4s var(--ease)
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--flame);
  transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover{border-color:var(--flame);color:var(--navy-deep)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--ghost{--b:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{color:var(--navy-deep)}
.btn--light{--b:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--light:hover{color:var(--navy-deep)}
.btn--gold{--b:var(--flame);color:var(--navy-deep)}
.btn--gold::after{background:#fff}
.btn--block{width:100%}

.link-u{position:relative;display:inline-block;font-weight:600;letter-spacing:.04em;
  color:var(--accent-ink);padding-bottom:3px}
.link-u::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease-out)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- preloader ---------- */
#loader{position:fixed;inset:0;z-index:999;background:var(--navy-deep);
  display:grid;place-items:center;transition:opacity .7s ease,visibility .7s}
#loader .lamp{width:clamp(64px,9vw,96px);color:#fff;opacity:.92}
#loader .flame{opacity:0;transform-origin:50% 100%;animation:ignite 1.5s .35s var(--ease-out) forwards}
#loader .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--flame);
  box-shadow:0 0 24px var(--flame-glow)}
#loader .pct{position:absolute;bottom:32px;right:var(--gut);color:var(--flame-lite);
  font-size:.8rem;letter-spacing:.3em;font-variant-numeric:tabular-nums}
#loader .mk{position:absolute;bottom:30px;left:var(--gut);color:rgba(255,255,255,.5);
  font-family:var(--ff-mark);font-size:.78rem;letter-spacing:.42em}
@keyframes ignite{0%{opacity:0;transform:scaleY(.1)}55%{opacity:1;transform:scaleY(1.18)}100%{opacity:1;transform:scaleY(1)}}
body.loaded #loader{opacity:0;visibility:hidden}
body.loading{overflow:hidden}

/* ---------- cursor ---------- */
.cur,.cur-d{position:fixed;top:0;left:0;z-index:900;pointer-events:none;
  border-radius:50%;will-change:transform}
.cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--accent);
  opacity:0;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),
    margin .35s var(--ease),background-color .35s,border-color .35s}
.cur-d{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent);opacity:0;transition:opacity .3s}
body.cursor-on .cur,body.cursor-on .cur-d{opacity:1}
body.cur-hover .cur{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--flame-glow);border-color:transparent}
body.cur-hover .cur-d{opacity:0}
.cur .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:.56rem;
  font-weight:700;letter-spacing:.16em;color:var(--navy-deep);opacity:0;transition:opacity .3s}
body.cur-media .cur{width:104px;height:104px;margin:-52px 0 0 -52px;background:var(--flame);border-color:transparent}
body.cur-media .cur .lbl{opacity:1}
body.cur-media .cur-d{opacity:0}

/* ---------- scroll progress ---------- */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--flame),var(--flame-lite));z-index:120;
  box-shadow:0 0 18px var(--flame-glow)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:110;padding:18px 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease),transform .55s var(--ease)}
.hdr .row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:10px 0}
.hdr.hide{transform:translateY(-104%)}
.hdr.on-dark:not(.solid){color:#fff}
.hdr.on-dark:not(.solid) .mark-txt b{color:#fff}
.hdr.on-dark:not(.solid) .nav a{color:rgba(255,255,255,.9)}
.hdr.on-dark:not(.solid) .burger span{background:#fff}

.mark{display:flex;align-items:center;gap:11px}
.mark svg{width:30px;flex:none;color:var(--navy)}
.hdr.on-dark:not(.solid) .mark svg{color:#fff}
.mark-txt{display:flex;flex-direction:column;line-height:1}
.mark-txt b{font-family:var(--ff-mark);font-weight:600;font-size:1.22rem;
  letter-spacing:.2em;color:var(--navy);transition:color .4s}
.mark-txt i{font-style:normal;font-size:.53rem;font-weight:600;letter-spacing:.34em;
  color:var(--accent);margin-top:5px}
:root[data-theme="dark"] .mark svg,:root[data-theme="dark"] .mark-txt b{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark svg,
  :root:not([data-theme="light"]) .mark-txt b{color:var(--ink)}}

.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font-size:.79rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  position:relative;padding:6px 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--accent-ink)}
.hdr .btn{padding:.82em 1.5em;font-size:.75rem}
@media (max-width:1080px){.nav,.hdr .cta-d{display:none}}

.burger{display:none;width:52px;height:42px;border:1px solid var(--line);background:none;
  border-radius:2px;cursor:pointer;padding:0;place-items:center;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
@media (max-width:1080px){.burger{display:grid}}
body.menu-open .burger span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}

/* overlay menu */
.menu{position:fixed;inset:0;z-index:108;background:var(--navy-deep);color:#fff;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out);
  display:grid;place-items:center;visibility:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{overflow:hidden}
.menu li a{display:block;font-family:var(--ff-display);font-size:clamp(2rem,7vw,4.2rem);
  line-height:1.24;padding:.04em 0;transform:translateY(105%);opacity:0;
  transition:transform .8s var(--ease-out),opacity .6s,color .35s}
body.menu-open .menu li a{transform:translateY(0);opacity:1}
.menu li a:hover{color:var(--flame-lite)}
.menu li:nth-child(1) a{transition-delay:.16s}.menu li:nth-child(2) a{transition-delay:.22s}
.menu li:nth-child(3) a{transition-delay:.28s}.menu li:nth-child(4) a{transition-delay:.34s}
.menu li:nth-child(5) a{transition-delay:.40s}.menu li:nth-child(6) a{transition-delay:.46s}
.menu .m-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:36px;display:flex;
  flex-wrap:wrap;gap:10px 28px;justify-content:space-between;color:rgba(255,255,255,.62);font-size:.9rem}
.menu .m-foot a:hover{color:var(--flame-lite)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:flex-end;
  padding:150px 0 clamp(46px,7vh,84px);overflow:hidden;color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:-8% 0 -8%;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 42%;
  transform:scale(1.12);animation:kb 22s var(--ease) infinite alternate}
@keyframes kb{to{transform:scale(1.01) translate3d(-1.5%,-1%,0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(14,27,51,.66) 0%,rgba(14,27,51,.26) 30%,rgba(14,27,51,.60) 62%,rgba(14,27,51,.90) 100%)}
.hero h1{color:#fff;text-shadow:0 2px 40px rgba(10,18,34,.55)}
.hero .eyebrow{color:var(--flame-lite);text-shadow:0 1px 14px rgba(10,18,34,.9),0 0 3px rgba(10,18,34,.7)}
.hero .eyebrow::before{background:var(--flame-lite)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:40px;align-items:end;width:100%}
.hero-sub{color:rgba(255,255,255,.94);font-size:1.06rem;max-width:38ch;
  border-left:2px solid var(--flame);padding-left:20px;
  text-shadow:0 1px 16px rgba(10,18,34,.85)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}}
@media (max-width:560px){.hero-cta{display:grid;grid-template-columns:1fr}.hero-cta .btn{width:100%}}

/* word mask reveal */
.rw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.rw>span{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform 1s var(--ease-out),opacity .8s}
.ready .rw>span{transform:translateY(0);opacity:1}

.scroll-cue{position:absolute;right:var(--gut);bottom:26px;z-index:2;
  display:grid;justify-items:center;gap:9px;color:rgba(255,255,255,.72);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase}
.scroll-cue i{display:block;width:1px;height:46px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--flame-lite);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:700px){.scroll-cue{display:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(78px,11vh,148px) 0;position:relative}
.sec--band{background:var(--bg-band)}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--navy-deep);color:#fff;overflow:hidden}
.sec--dark .lede,.sec--dark .small{color:rgba(231,238,247,.78)}
.sec--dark .eyebrow{color:var(--flame-lite)}
.sec--dark .eyebrow::before{background:var(--flame-lite)}
.sec-head{max-width:760px;margin-bottom:clamp(42px,6vh,72px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head .lede{margin-top:1.15rem}
.sec-head.center .lede{margin-inline:auto}

/* reveal */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease-out),transform 1.05s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-out)}
.clip.in{clip-path:inset(0 0 0 0)}
.no-js .rv,.no-js .clip{opacity:1;transform:none;clip-path:none}

/* figure */
.fig{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-band)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.fig:hover img{transform:scale(1.045)}
.fig--frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.42);
  pointer-events:none;opacity:0;transform:scale(1.02);transition:opacity .6s,transform .7s var(--ease-out)}
.fig--frame:hover::after{opacity:1;transform:scale(1)}
.par{will-change:transform}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,56px)}
.pillar{padding-top:26px;border-top:1px solid var(--line)}
.pillar .ic{width:38px;height:38px;color:var(--accent);margin-bottom:18px}
.pillar h3{font-size:1.42rem;margin-bottom:.55rem}
.pillar p{color:var(--muted);font-size:1rem}
@media (max-width:820px){.pillars{grid-template-columns:1fr;gap:30px}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(34px,5vw,86px);align-items:center}
.split--rev .split-media{order:2}
.split-media{position:relative}
.split-media .fig{aspect-ratio:4/5}
.split-media .stamp{position:absolute;right:-22px;bottom:-26px;width:clamp(128px,15vw,172px);
  aspect-ratio:1;background:var(--navy);color:#fff;border-radius:50%;display:grid;
  place-content:center;text-align:center;gap:3px;box-shadow:var(--shadow-lift);padding:12px}
.split-media .stamp b{font-family:var(--ff-display);font-size:1.9rem;line-height:1;color:var(--flame-lite)}
.split-media .stamp span{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);line-height:1.35}
.f-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:2px}
.f-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.f-list li:last-child{border-bottom:1px solid var(--line)}
.f-list svg{width:20px;flex:none;color:var(--accent);margin-top:5px}
.f-list b{display:block;font-family:var(--ff-display);font-size:1.18rem;font-weight:500}
.f-list p{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:38px}
  .split--rev .split-media{order:0}.split-media .stamp{right:12px;bottom:-22px}}

/* ---------- day switcher (Apple-style) ---------- */
.day{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:center}
.day-tabs{display:grid;gap:4px}
.day-tab{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  text-align:left;background:none;border:0;border-radius:var(--r-sm);
  padding:20px 20px 20px 22px;cursor:pointer;color:inherit;opacity:.5;
  transition:opacity .45s var(--ease),background-color .45s var(--ease)}
.day-tab::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  background:color-mix(in srgb,var(--ink) 22%,transparent)}
.day-tab::after{content:"";position:absolute;left:0;top:14px;width:2px;height:0;
  background:var(--accent);transition:height .2s linear}
.day-tab[aria-selected="true"]{opacity:1;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.day-tab[aria-selected="true"]::after{height:calc(100% - 28px);transition:height 6.4s linear}
.day-tab .ic{width:26px;height:26px;color:var(--accent);margin-top:4px}
.day-tab b{display:block;font-family:var(--ff-display);font-size:1.34rem;font-weight:500;line-height:1.2}
.day-tab span{display:block;font-size:.95rem;color:var(--muted);margin-top:4px}
.day-stage{position:relative;aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden;
  background:var(--navy-deep);box-shadow:var(--shadow-lift)}
.day-stage figure{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .95s var(--ease),visibility .95s}
.day-stage figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);
  transition:transform 7.5s linear}
.day-stage figure.on{opacity:1;visibility:visible}
.day-stage figure.on img{transform:scale(1)}
.day-stage figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,3vw,38px);
  color:#fff;background:linear-gradient(to top,rgba(9,16,30,.88),transparent);
  font-size:1.04rem;line-height:1.55}
.day-stage figcaption b{display:block;font-family:var(--ff-display);font-size:1.6rem;
  font-weight:500;margin-bottom:.3rem;color:var(--flame-lite)}
@media (max-width:900px){.day{grid-template-columns:1fr}
  .day-tabs{grid-template-columns:repeat(2,1fr);grid-auto-flow:column dense}
  .day-tabs{display:grid;grid-template-columns:repeat(2,1fr)}
  .day-tab{padding:14px}.day-tab span{display:none}}

/* ---------- phone / family connect ---------- */
.connect{display:grid;grid-template-columns:1fr 380px;gap:clamp(36px,5vw,80px);align-items:center}
.phone-wrap{perspective:1400px;display:grid;justify-items:center}
.phone{position:relative;width:300px;max-width:82vw;aspect-ratio:9/19.2;border-radius:44px;
  background:linear-gradient(150deg,#2b3243,#0d121c 55%,#242b3a);padding:11px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.10) inset;
  transform-style:preserve-3d;transition:transform .5s var(--ease)}
.phone::before{content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);
  width:92px;height:26px;background:#0a0e16;border-radius:14px;z-index:4}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0a0e16}
.phone-screen .scr{position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity .6s var(--ease),transform .8s var(--ease-out);display:grid;
  grid-template-rows:auto 1fr auto}
.phone-screen .scr.on{opacity:1;transform:none}
.scr-top{padding:54px 20px 12px;color:#fff}
.scr-top small{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--flame-lite)}
.scr-top b{display:block;font-family:var(--ff-display);font-size:1.22rem;font-weight:500;margin-top:2px}
.scr-body{position:relative;overflow:hidden}
.scr-body img{width:100%;height:100%;object-fit:cover}
.scr-note{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(10,15,25,.78);
  backdrop-filter:blur(8px);border:1px solid rgba(232,190,92,.28);border-radius:12px;
  padding:12px 14px;color:#fff;font-size:.78rem;line-height:1.5}
.scr-note b{color:var(--flame-lite);display:block;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:3px;font-family:var(--ff-body)}
.scr-foot{display:flex;justify-content:space-around;padding:12px 10px 24px;
  border-top:1px solid rgba(255,255,255,.10);background:#0d121c}
.scr-foot svg{width:20px;color:rgba(255,255,255,.4)}
.scr-foot svg.act{color:var(--flame-lite)}
.phone-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.phone-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 26%,transparent);transition:background .4s,transform .4s,width .4s}
.sec--dark .phone-dots button{background:rgba(255,255,255,.28)}
.phone-dots button[aria-selected="true"]{background:var(--flame);width:26px;border-radius:5px}
@media (max-width:900px){.connect{grid-template-columns:1fr}.connect .phone-wrap{order:-1}}

/* ---------- pinned horizontal gallery ---------- */
.pin{position:relative}
.pin-vp{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.pin-head{padding:0 var(--gut) 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.pin-track{display:flex;gap:clamp(16px,2vw,30px);padding-inline:var(--gut);will-change:transform}
.moment{position:relative;flex:none;width:clamp(240px,26vw,380px);border-radius:var(--r-sm);
  overflow:hidden;background:var(--navy-deep)}
.moment img{width:100%;aspect-ratio:3/4;object-fit:cover;opacity:.92;transition:transform 1.1s var(--ease-out),opacity .5s}
.moment:hover img{transform:scale(1.05);opacity:1}
.moment figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;
  background:linear-gradient(to top,rgba(10,17,32,.9),transparent)}
.moment figcaption b{display:block;font-family:var(--ff-display);font-size:1.3rem;font-weight:500}
.moment figcaption span{font-size:.9rem;color:rgba(255,255,255,.78)}
.moment .num{position:absolute;top:18px;left:20px;color:var(--flame-lite);font-size:.72rem;
  letter-spacing:.2em;font-variant-numeric:tabular-nums}
.pin-rail{margin:30px var(--gut) 0;height:2px;background:var(--line);position:relative}
.pin-rail i{position:absolute;inset:0;width:24%;background:var(--accent);transform-origin:0 50%}
@media (max-width:820px){.pin-vp{height:auto;position:static;padding:0 0 10px}
  .pin-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;transform:none!important}
  .moment{width:74vw;scroll-snap-align:center}.pin{height:auto!important}.pin-rail{display:none}}

/* ---------- homes ---------- */
.homes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
.home{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.home:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.home .fig{aspect-ratio:16/10}
.home-body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;flex:1}
.home-body h3{font-size:1.85rem}
.home-tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);font-weight:650}
.home-meta{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px;font-size:.96rem;color:var(--muted)}
.home-meta li{display:flex;gap:11px;align-items:flex-start}
.home-meta svg{width:17px;flex:none;color:var(--accent);margin-top:5px}
.home-body .link-u{margin-top:auto;align-self:flex-start;padding-top:8px}
@media (max-width:820px){.homes{grid-template-columns:1fr}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.stat{text-align:center;padding:0 8px}
.stat b{display:block;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.7rem,5.2vw,4.2rem);line-height:1;color:var(--flame-lite);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{display:block;margin-top:12px;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(231,238,247,.72);line-height:1.5}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:36px 20px}}

/* lantern glow follows cursor */
.glow{position:absolute;top:0;left:0;width:760px;height:760px;margin:-380px 0 0 -380px;
  pointer-events:none;border-radius:50%;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(232,190,92,.17) 0%,rgba(232,190,92,.06) 38%,transparent 66%)}
.sec--dark:hover .glow{opacity:1}

/* ---------- marquee ---------- */
.marq{overflow:hidden;position:relative;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-in{display:flex;gap:22px;width:max-content;animation:slide 58s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.quote{flex:none;width:min(430px,84vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:32px 30px;display:grid;gap:14px}
.quote .st{color:var(--accent);letter-spacing:.24em;font-size:.82rem}
.quote p{font-family:var(--ff-display);font-size:1.14rem;line-height:1.5;font-style:italic;
  font-variation-settings:"SOFT" 50,"WONK" 1}
.quote cite{font-style:normal;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- faq ---------- */
.faq{max-width:900px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 46px 26px 0;position:relative;
  font-family:var(--ff-display);font-size:clamp(1.14rem,1.7vw,1.42rem);font-weight:500;
  transition:color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:6px;top:50%;
  background:var(--accent);transition:transform .45s var(--ease)}
.faq summary::before{width:16px;height:1.5px;margin-top:-.75px}
.faq summary::after{width:1.5px;height:16px;margin-top:-8px;margin-right:7.25px}
.faq details[open] summary::after{transform:rotate(90deg) scaleX(0)}
.faq .ans{overflow:hidden;color:var(--muted);padding:0 60px 26px 0;font-size:1.02rem}

/* ---------- cta ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding:clamp(86px,13vh,160px) 0;text-align:center;isolation:isolate}
.cta-bg{position:absolute;inset:0;z-index:-2;opacity:.26}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 42%,rgba(232,190,92,.18),transparent 58%)}
.cta h2{color:#fff;margin-bottom:1.1rem}
.cta .lede{margin-inline:auto;color:rgba(255,255,255,.82)}
.cta .lantern{width:54px;margin:0 auto 26px;color:var(--flame-lite)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.flicker{animation:flick 4.2s infinite ease-in-out}
@keyframes flick{0%,100%{opacity:1}44%{opacity:.72}47%{opacity:.98}72%{opacity:.8}}

/* ---------- footer ---------- */
.ftr{background:var(--footer-bg);color:var(--footer-ink);padding:clamp(60px,8vh,96px) 0 34px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
.ftr .mark svg,.ftr .mark-txt b{color:#fff}
.ftr h4{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--flame-lite);
  font-family:var(--ff-body);font-weight:650;margin-bottom:18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.97rem}
.ftr a:hover{color:var(--flame-lite)}
.ftr .tag{margin-top:20px;color:rgba(231,238,247,.66);font-size:.97rem;max-width:30ch}
.ftr-addr{display:grid;gap:8px;font-size:.97rem;color:rgba(231,238,247,.8)}
.ftr-addr b{color:#fff;font-weight:600}
.ftr-bot{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:.86rem;color:rgba(231,238,247,.56)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- floating tour pill ---------- */
.pill{position:fixed;right:24px;bottom:24px;z-index:105;display:inline-flex;align-items:center;
  gap:10px;padding:15px 24px;border-radius:60px;background:var(--navy);color:#fff;
  font-size:.78rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:var(--shadow-lift);transform:translateY(140%);transition:transform .7s var(--ease-out),background-color .4s}
.pill.show{transform:translateY(0)}
.pill:hover{background:var(--flame);color:var(--navy-deep)}
.pill svg{width:17px}
@media (max-width:560px){.pill{right:14px;bottom:14px;padding:13px 19px;font-size:.72rem}}

/* ---------- forms ---------- */
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:1rem;transition:border-color .35s,box-shadow .35s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--flame-glow)}
.field textarea{min-height:132px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:11px 18px;border:1px solid var(--line);border-radius:40px;background:var(--surface);
  cursor:pointer;font-size:.9rem;transition:all .35s var(--ease)}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.form-note{font-size:.88rem;color:var(--muted)}
.form-ok{padding:18px 20px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--flame) 16%,transparent);
  border:1px solid var(--accent);font-size:.98rem}

/* contact cards */
.cx{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.cx a,.cx div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:30px 28px;display:grid;gap:8px;transition:transform .5s var(--ease-out),box-shadow .5s}
.cx a:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.cx svg{width:24px;color:var(--accent)}
.cx b{font-family:var(--ff-display);font-size:1.3rem;font-weight:500}
.cx span{color:var(--muted);font-size:.95rem}
@media (max-width:820px){.cx{grid-template-columns:1fr}}

/* page hero (inner pages) */
.phero{position:relative;padding:clamp(150px,20vh,210px) 0 clamp(56px,8vh,96px);
  color:#fff;overflow:hidden;isolation:isolate}
.phero .hero-media{inset:0}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,27,51,.80),rgba(14,27,51,.55) 55%,rgba(14,27,51,.82))}
.phero h1{color:#fff;max-width:16ch}
.phero .lede{color:rgba(255,255,255,.88);margin-top:1.2rem}
.crumb{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flame-lite);margin-bottom:1rem}
.crumb a:hover{text-decoration:underline}

/* timeline (life page) */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px)}
.tl-item{border-top:2px solid var(--line);padding-top:22px;position:relative}
.tl-item::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;
  background:var(--accent);transition:width 1.1s var(--ease-out)}
.tl-item.in::before{width:100%}
.tl-item .ic{width:30px;height:30px;color:var(--accent);margin-bottom:14px}
.tl-item h3{font-size:1.4rem;margin-bottom:.4rem}
.tl-item .fig{aspect-ratio:4/3;margin:16px 0 14px}
.tl-item p{font-size:.97rem;color:var(--muted)}
@media (max-width:900px){.tl{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tl{grid-template-columns:1fr}}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,22px)}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-band)}
.mosaic figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.mosaic figure:hover img{transform:scale(1.06)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;
  background:linear-gradient(to top,rgba(10,17,32,.88),transparent);
  font-family:var(--ff-display);font-size:1.16rem}
.m-a{grid-column:span 4;aspect-ratio:16/9}
.m-b{grid-column:span 2;aspect-ratio:3/4}
.m-c{grid-column:span 2;aspect-ratio:1}
.m-d{grid-column:span 2;aspect-ratio:1}
.m-e{grid-column:span 2;aspect-ratio:1}
@media (max-width:820px){.mosaic{grid-template-columns:repeat(2,1fr)}
  .m-a,.m-b,.m-c,.m-d,.m-e{grid-column:span 2;aspect-ratio:4/3}}

/* utility */
.mt-l{margin-top:clamp(38px,6vh,68px)}
.center{text-align:center}
.max-60{max-width:62ch}
.mx-auto{margin-inline:auto}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv,.clip,.rw>span{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-media img{animation:none;transform:scale(1.02)}
  .marq-in{animation:none}
  .cur,.cur-d{display:none}
  .pin-vp{position:static;height:auto}
  .pin-track{transform:none!important;overflow-x:auto}
  .pin{height:auto!important}
}

/* ==========================================================================
   v2 — expanded site components
   ========================================================================== */

/* nav needs more room for 7 links */
@media (max-width:1240px){.nav,.hdr .cta-d{display:none}.burger{display:grid}}
@media (min-width:1081px) and (max-width:1240px){.burger{display:grid}}
.nav a{font-size:.755rem;letter-spacing:.13em}

/* ---------- reassurance strip ---------- */
.strip{background:var(--navy);color:#fff;padding:26px 0}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.strip-in div{display:grid;gap:4px;padding:0 6px}
.strip-in b{font-family:var(--ff-display);font-weight:500;font-size:1.55rem;color:var(--flame-lite);line-height:1.1}
.strip-in span{font-size:.8rem;letter-spacing:.05em;color:rgba(231,238,247,.78);line-height:1.45}
@media (max-width:720px){.strip-in{grid-template-columns:repeat(2,1fr);gap:22px 12px}}

/* ---------- editor note (delete before launch) ---------- */
.editor-note{max-width:var(--wrap);margin:0 auto 26px;padding:12px 18px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--flame) 14%,transparent);border:1px dashed var(--accent);
  color:var(--accent-ink);font-size:.86rem;text-align:center}
.quote.is-placeholder p{color:var(--muted)}
.quote.is-placeholder cite{color:var(--accent-ink)}

/* ---------- values ---------- */
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px)}
.val{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:clamp(26px,3vw,40px);display:grid;gap:10px;align-content:start;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.val:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.val-n{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);font-weight:650}
.val h3{font-size:1.6rem}
.val p{color:var(--muted);font-size:1rem}
@media (max-width:760px){.vals{grid-template-columns:1fr}}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)}
.team-c .fig{aspect-ratio:4/3;margin-bottom:20px}
.team-c h3{font-size:1.45rem;margin-bottom:.5rem}
.team-c p{color:var(--muted);font-size:.99rem}
@media (max-width:860px){.team{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.8vw,40px);counter-reset:s}
.steps li{position:relative;padding-top:26px;border-top:2px solid rgba(255,255,255,.2)}
.steps li span{display:block;font-size:.78rem;letter-spacing:.2em;color:var(--flame-lite);
  font-variant-numeric:tabular-nums;margin-bottom:12px}
.steps li b{display:block;font-family:var(--ff-display);font-size:1.42rem;font-weight:500;
  color:#fff;margin-bottom:.45rem}
.steps li p{color:rgba(231,238,247,.75);font-size:.99rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- services grid ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.svc-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:clamp(26px,3vw,38px);display:grid;gap:12px;align-content:start;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .5s}
.svc-c:hover{transform:translateY(-7px);box-shadow:var(--shadow-soft);border-color:var(--accent)}
.svc-c .ic{width:34px;height:34px;color:var(--accent)}
.svc-c h3{font-size:1.45rem}
.svc-c p{color:var(--muted);font-size:1rem}
@media (max-width:980px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:660px){.svc{grid-template-columns:1fr}}

/* ---------- levels ---------- */
.lvls{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.lvl{border-top:2px solid var(--line);padding-top:22px;position:relative}
.lvl::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--accent);
  transition:width 1s var(--ease-out)}
.lvl.in::before{width:100%}
.lvl h3{font-size:1.34rem;margin-bottom:.5rem}
.lvl p{color:var(--muted);font-size:.98rem}
@media (max-width:900px){.lvls{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lvls{grid-template-columns:1fr}}

/* ---------- amenities ---------- */
.amen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,3vw,48px)}
.amen li{padding:16px 0 16px 32px;border-bottom:1px solid rgba(255,255,255,.14);
  position:relative;color:rgba(231,238,247,.9);font-size:1rem}
.amen li::before{content:"";position:absolute;left:2px;top:23px;width:9px;height:9px;
  background:var(--flame);transform:rotate(45deg)}
@media (max-width:880px){.amen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.amen{grid-template-columns:1fr}}

/* ---------- locations + maps ---------- */
.loc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
.loc-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.loc-map{aspect-ratio:16/10;background:var(--bg-band)}
.loc-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.86)}
.loc-b{padding:clamp(24px,3vw,36px);display:grid;gap:10px}
.loc-b h3{font-size:1.7rem}
@media (max-width:860px){.loc{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gal-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(30px,5vh,52px)}
.gal{columns:3;column-gap:clamp(12px,1.6vw,22px)}
.gal figure{margin:0 0 clamp(12px,1.6vw,22px);break-inside:avoid}
.gal figure[hidden]{display:none}
.gal-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;overflow:hidden;border-radius:var(--r-sm);line-height:0}
.gal-btn img{width:100%;height:auto;transition:transform 1.1s var(--ease-out),filter .5s}
.gal-btn:hover img{transform:scale(1.045)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;color:#fff;
  font-family:var(--ff-display);font-size:1.08rem;line-height:1.3;text-align:left;
  background:linear-gradient(to top,rgba(10,17,32,.9),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .45s,transform .5s var(--ease-out)}
.gal-btn:hover .gal-cap,.gal-btn:focus-visible .gal-cap{opacity:1;transform:none}
@media (max-width:980px){.gal{columns:2}}
@media (max-width:600px){.gal{columns:1}.gal-cap{opacity:1;transform:none}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,14,26,.94);display:grid;
  place-items:center;padding:clamp(16px,4vw,64px);opacity:0;transition:opacity .4s}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1100px,92vw);display:grid;gap:14px;justify-items:center}
.lb img{max-height:76svh;width:auto;max-width:100%;border-radius:4px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.lb figcaption{color:#fff;font-family:var(--ff-display);font-size:1.1rem;text-align:center}
.lb button{position:absolute;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.3);
  color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.6rem;line-height:1;
  display:grid;place-items:center;transition:background .35s,transform .35s}
.lb button:hover{background:var(--flame);color:var(--navy-deep);border-color:var(--flame)}
.lb-x{top:22px;right:22px}
.lb-p{left:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%)}
.lb-n{right:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%)}
.lb-p:hover,.lb-n:hover{transform:translateY(-50%) scale(1.06)}
@media (max-width:600px){.lb-p{left:8px}.lb-n{right:8px}.lb button{width:44px;height:44px}}

/* ---------- misc v2 ---------- */
.flabel{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--muted)}
.phero--short{padding:clamp(140px,18vh,190px) 0 clamp(48px,7vh,80px)}
.ftr .btn--ghost.btn--light{border-color:rgba(255,255,255,.4);color:#fff;padding:.85em 1.7em}
.ftr .btn--ghost.btn--light:hover{color:var(--navy-deep)}

/* header fit with seven links */
.hdr .btn{white-space:nowrap}
.hdr .row{gap:clamp(12px,1.6vw,24px)}
@media (max-width:1440px){.nav{gap:clamp(12px,1.3vw,20px)}.nav a{font-size:.72rem;letter-spacing:.11em}}

/* ==========================================================================
   v3 — client revision round
   ========================================================================== */

/* 1. Top bar stays visible the whole way down (defect #1) */
.hdr.hide{transform:none}
.hdr{border-bottom:1px solid transparent}
.hdr.solid{border-bottom-color:var(--line)}

/* 2. Schedule a Tour always visible, at every width */
.hdr-act{display:flex;align-items:center;gap:12px;flex:none}
.btn--tour{padding:.82em 1.45em;font-size:.75rem;gap:.55em}
.btn--tour svg{width:15px;flex:none}
@media (max-width:1240px){.nav{display:none}.hdr-act{display:flex}}
@media (max-width:560px){
  .btn--tour{padding:.8em .95em}
  .btn--tour span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .btn--tour svg{width:18px}
}
.hdr.on-dark:not(.solid) .btn--tour{border-color:rgba(255,255,255,.55)}

/* 3. Bolder logo */
.mark-txt b{font-weight:700;letter-spacing:.19em;font-size:1.3rem}
.mark-txt i{font-weight:700;letter-spacing:.32em}
.mark svg{width:33px}
.ftr .mark svg{width:36px}

/* 4. Softer, rounder elements */
:root{--r-sm:12px}
.btn{border-radius:6px}
.fig,.moment,.day-stage,.gal-btn{border-radius:14px}
.quote,.val,.svc-c,.home,.loc-c,.cx a,.cx div{border-radius:16px}

/* ---------- home: care grid (6 across) ---------- */
.care6{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.care6 article{padding:0 clamp(10px,1.4vw,22px);text-align:center;
  border-left:1px solid var(--line);display:grid;gap:10px;align-content:start}
.care6 article:first-child{border-left:0}
.care6 .ic{width:42px;height:42px;color:var(--accent);margin:0 auto 6px;
  transition:transform .6s var(--ease-out)}
.care6 article:hover .ic{transform:translateY(-5px) scale(1.08)}
.care6 h3{font-size:1.08rem;line-height:1.25}
.care6 p{font-size:.9rem;color:var(--muted);line-height:1.5}
@media (max-width:1080px){.care6{grid-template-columns:repeat(3,1fr);gap:36px 0}
  .care6 article:nth-child(3n+1){border-left:0}}
@media (max-width:680px){.care6{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .care6 article{border-left:0}}

/* ---------- home: welcome block ---------- */
.welcome{max-width:78ch;margin-inline:auto;text-align:center;display:grid;gap:1.15rem}
.welcome p{font-size:clamp(1.06rem,1.3vw,1.22rem);line-height:1.68;color:var(--ink-2)}
.welcome .close{font-family:var(--ff-display);font-size:clamp(1.3rem,2.1vw,1.75rem);
  line-height:1.35;color:var(--ink);margin-top:.4rem}

/* ---------- home: dining band ---------- */
.dine{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
  border-radius:18px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.dine .fig{border-radius:0;height:100%;min-height:340px}
.dine-b{padding:clamp(28px,4vw,60px);display:grid;gap:16px;align-content:center}
.dine-b .ic{width:34px;color:var(--accent)}
.dine-b h2{font-size:clamp(1.8rem,3vw,2.7rem)}
.dine-b p{color:var(--muted);font-size:1.02rem;line-height:1.62}
@media (max-width:860px){.dine{grid-template-columns:1fr}.dine .fig{min-height:240px;aspect-ratio:16/9}}

/* ---------- life values (5 across) ---------- */
.vals5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px)}
.vals5 article{text-align:center;display:grid;gap:9px;align-content:start;
  padding:clamp(20px,2.4vw,30px) clamp(12px,1.4vw,20px);
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.vals5 article:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.vals5 .ic{width:38px;height:38px;color:var(--accent);margin:0 auto 4px}
.vals5 h3{font-size:1.22rem}
.vals5 p{font-size:.92rem;color:var(--muted);line-height:1.5}
@media (max-width:1000px){.vals5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.vals5{grid-template-columns:repeat(2,1fr)}}

/* ---------- testimonial cards (static 3-up) ---------- */
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.tst blockquote{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,3vw,38px);display:grid;gap:14px;margin:0;position:relative;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.tst blockquote:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.tst .qm{font-family:var(--ff-display);font-size:3rem;line-height:.6;color:var(--accent);opacity:.45}
.tst .st{color:var(--accent);letter-spacing:.22em;font-size:.86rem}
.tst p{font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
.tst cite{font-style:normal;font-size:.86rem;letter-spacing:.06em;color:var(--muted)}
@media (max-width:900px){.tst{grid-template-columns:1fr}}

/* ---------- service list (in-house / specialized) ---------- */
.slist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px)}
.slist li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);
  position:relative;font-size:.98rem;color:var(--ink-2)}
.slist li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;
  background:var(--accent);transform:rotate(45deg)}
.sec--dark .slist li{border-bottom-color:rgba(255,255,255,.14);color:rgba(231,238,247,.9)}
@media (max-width:900px){.slist{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.slist{grid-template-columns:1fr}}

/* ---------- for families steps ---------- */
.fam{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.fam article{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,34px);display:grid;gap:10px;align-content:start}
.fam h3{font-size:1.3rem}
.fam p,.fam li{color:var(--muted);font-size:.97rem}
.fam ul{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}
@media (max-width:860px){.fam{grid-template-columns:1fr}}

/* ---------- contact detail row ---------- */
.cdet{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;
  font-size:1rem;color:var(--ink-2)}
.cdet span{display:inline-flex;align-items:center;gap:9px}
.cdet svg{width:18px;color:var(--accent)}
.cta .cdet{color:rgba(255,255,255,.86);margin-top:30px}
.cta .cdet svg{color:var(--flame-lite)}

/* hero: single column, sub under the headline (approved mock-up) */
.hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-sub{margin-top:26px;max-width:46ch;border-left-width:3px}
.hero .hero-cta{margin-top:30px}
@media (max-width:900px){.hero-sub{max-width:none}}

/* single-page preview build: one view at a time */
.pg[hidden]{display:none!important}

/* preview build only: map card in place of the embedded Google map */
.loc-map--static{display:grid;place-content:center;justify-items:center;gap:8px;
  text-align:center;background:var(--bg-band);color:var(--ink);
  transition:background-color .45s var(--ease)}
.loc-map--static svg{width:34px;color:var(--accent)}
.loc-map--static b{font-family:var(--ff-display);font-size:1.22rem;font-weight:500}
.loc-map--static span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:650}
.loc-map--static:hover{background:color-mix(in srgb,var(--accent) 16%,var(--bg-band))}

/* ==========================================================================
   v4 — real brand assets
   ========================================================================== */

/* approved logo replaces the drawn lantern in the header and footer */
.mark{gap:0}
.mark img{display:block;width:auto;height:46px;transition:height .45s var(--ease)}
.hdr.solid .mark img{height:40px}
.mark--ftr img{height:58px}
.logo-d{display:none}
/* dark grounds (hero overlay, footer) use the light-ink version */
.hdr.on-dark:not(.solid) .logo-l,.mark--ftr .logo-l{display:none}
.hdr.on-dark:not(.solid) .logo-d,.mark--ftr .logo-d{display:block}
:root[data-theme="dark"] .hdr .logo-l{display:none}
:root[data-theme="dark"] .hdr .logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .logo-l{display:none}
  :root:not([data-theme="light"]) .hdr .logo-d{display:block}
}
@media (max-width:560px){.mark img{height:38px}.hdr.solid .mark img{height:34px}}

/* footer addresses are now links */
.ftr-addr a{display:block;color:rgba(231,238,247,.8);transition:color .35s}
.ftr-addr a:hover{color:var(--flame-lite)}
.ftr-addr a b{color:#fff;font-weight:600}

/* clickable map card sitting over the embedded map */
.loc-map{position:relative}
.loc-open{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:16px;background:linear-gradient(to top,rgba(10,17,32,.55),transparent 42%);
  opacity:0;transition:opacity .4s var(--ease)}
.loc-map:hover .loc-open,.loc-open:focus-visible{opacity:1}
.loc-open span{background:var(--navy);color:#fff;padding:11px 20px;border-radius:40px;
  font-size:.76rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-soft)}
.loc-open svg{width:15px}

/* house badge on gallery + card images */
.house-tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(14,27,51,.82);
  color:#fff;font-size:.64rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;border-radius:30px;backdrop-filter:blur(6px);pointer-events:none}
.gal figure{position:relative}

/* address + phone links that shouldn't look like buttons */
.link-plain{color:inherit;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.link-plain:hover{color:var(--accent-ink);border-bottom-color:currentColor}

/* team cards without photographs */
.team-c--text{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,3vw,38px);display:grid;gap:10px;align-content:start;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.team-c--text:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}

/* form validation message */
.form-warn{color:#8E2F2F;font-size:.94rem;font-weight:600}
:root[data-theme="dark"] .form-warn{color:#F0A6A6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .form-warn{color:#F0A6A6}}

/* the approved logo carries a wide glow, so it needs more height to read */
.mark img{height:62px}
.hdr.solid .mark img{height:50px}
.mark--ftr img{height:76px}
.hdr.on-dark:not(.solid) .logo-d{filter:drop-shadow(0 2px 10px rgba(8,14,26,.55))}
@media (max-width:1240px){.mark img{height:56px}.hdr.solid .mark img{height:46px}}
@media (max-width:560px){.mark img{height:46px}.hdr.solid .mark img{height:40px}.mark--ftr img{height:64px}}

/* ---- logo variant switching (specificity fix: .mark img was out-ranking .logo-d) ---- */
.mark img.logo-l{display:block}
.mark img.logo-d{display:none}
.hdr.on-dark:not(.solid) .mark img.logo-l{display:none}
.hdr.on-dark:not(.solid) .mark img.logo-d{display:block}
.mark--ftr img.logo-l{display:none}
.mark--ftr img.logo-d{display:block}
:root[data-theme="dark"] .hdr .mark img.logo-l{display:none}
:root[data-theme="dark"] .hdr .mark img.logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .mark img.logo-l{display:none}
  :root:not([data-theme="light"]) .hdr .mark img.logo-d{display:block}
}

/* ---- location card: house photograph above its map ---- */
.loc-c{display:flex;flex-direction:column}
.loc-photo{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-band)}
.loc-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.loc-photo:hover img{transform:scale(1.045)}
.loc-photo .house-tag{top:16px;left:16px}
.loc-map{aspect-ratio:16/9;border-top:1px solid var(--line)}
.loc-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.loc-act .btn{padding:.85em 1.5em;font-size:.76rem}
@media (max-width:520px){.loc-act .btn{width:100%}}

/* the map card overlay should be visible on touch, where there is no hover */
@media (hover:none){.loc-open{opacity:1;background:linear-gradient(to top,rgba(10,17,32,.62),transparent 46%)}}

/* ==========================================================================
   v5 — header sits on its own ground; location cards get a photo backdrop
   ========================================================================== */

/* ---- the bar is always solid: the logo's starburst never competes with a photo ---- */
.hdr{background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);padding:12px 0}
.hdr.solid{padding:8px 0}
.hdr.on-dark:not(.solid) .nav a{color:var(--ink)}
.hdr.on-dark:not(.solid) .burger span{background:var(--ink)}
.hdr.on-dark:not(.solid) .btn--tour{border-color:var(--navy)}
/* always the approved (navy-ink) logo in the bar; the light-ink one is for the footer */
.hdr .mark img.logo-l{display:block}
.hdr .mark img.logo-d{display:none}
.mark img{height:54px}
.hdr.solid .mark img{height:46px}
@media (max-width:1240px){.mark img{height:50px}.hdr.solid .mark img{height:44px}}
@media (max-width:560px){.mark img{height:42px}.hdr.solid .mark img{height:38px}}
/* dark mode: the bar itself is dark, so the light-ink logo returns */
:root[data-theme="dark"] .hdr .mark img.logo-l{display:none}
:root[data-theme="dark"] .hdr .mark img.logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .mark img.logo-l{display:none}
  :root:not([data-theme="light"]) .hdr .mark img.logo-d{display:block}
}

/* heroes start below the solid bar */
.hero{padding-top:clamp(150px,18vh,210px)}
.phero{padding-top:clamp(160px,20vh,220px)}
.phero--short{padding-top:clamp(150px,18vh,200px)}

/* ---- location card: house photograph behind, map navigation as before ---- */
.loc-c{position:relative;border:0;overflow:hidden;border-radius:18px;box-shadow:var(--shadow-lift)}
.loc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.loc-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,22,42,.30) 0%,rgba(12,22,42,.58) 38%,rgba(12,22,42,.90) 100%)}
.loc-inner{position:relative;z-index:2;padding:clamp(18px,2.2vw,26px);
  display:grid;gap:clamp(16px,2vw,22px)}
.loc-c .loc-map{aspect-ratio:16/10;border:1px solid rgba(255,255,255,.28);border-radius:12px;
  overflow:hidden;background:var(--bg-band);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.loc-c .loc-b{padding:0 6px 6px;color:#fff;display:grid;gap:9px}
.loc-c .loc-b h3{color:#fff;font-size:1.85rem}
.loc-c .loc-b .home-tag{color:var(--flame-lite)}
.loc-c .loc-b .small{color:rgba(255,255,255,.82)}
.loc-addr a{color:#fff;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:2px;transition:color .3s,border-color .3s}
.loc-addr a:hover{color:var(--flame-lite);border-color:var(--flame-lite)}
.loc-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.loc-act .btn{padding:.85em 1.5em;font-size:.76rem}
@media (max-width:520px){.loc-act .btn{width:100%}}
@media (hover:none){.loc-open{opacity:1;background:linear-gradient(to top,rgba(10,17,32,.62),transparent 46%)}}

/* the bar is opaque now, so the "over a photo" treatment is retired entirely */
.hdr.on-dark:not(.solid) .mark img.logo-l{display:block}
.hdr.on-dark:not(.solid) .mark img.logo-d{display:none}
.hdr.on-dark:not(.solid) .nav a{color:var(--ink)}
.hdr.on-dark:not(.solid) .nav a[aria-current="page"]{color:var(--accent-ink)}
.hdr.on-dark:not(.solid) .burger span{background:var(--ink)}
.hdr.on-dark:not(.solid) .btn--tour{border-color:var(--navy);color:#fff}
.hdr.on-dark:not(.solid) .logo-d{filter:none}
/* dark mode keeps the light-ink mark, and must come last */
:root[data-theme="dark"] .hdr .mark img.logo-l,
:root[data-theme="dark"] .hdr.on-dark:not(.solid) .mark img.logo-l{display:none}
:root[data-theme="dark"] .hdr .mark img.logo-d,
:root[data-theme="dark"] .hdr.on-dark:not(.solid) .mark img.logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .mark img.logo-l,
  :root:not([data-theme="light"]) .hdr.on-dark:not(.solid) .mark img.logo-l{display:none}
  :root:not([data-theme="light"]) .hdr .mark img.logo-d,
  :root:not([data-theme="light"]) .hdr.on-dark:not(.solid) .mark img.logo-d{display:block}
}

/* ==========================================================================
   v6 — the approved logo, unaltered, in both light and dark mode
   ========================================================================== */

/* one file everywhere; the artwork is never recoloured */
.mark img{display:block;width:auto;height:54px}
.hdr.solid .mark img{height:46px}
.mark--ftr img{height:88px}
@media (max-width:1240px){.mark img{height:50px}.hdr.solid .mark img{height:44px}}
@media (max-width:560px){.mark img{height:42px}.hdr.solid .mark img{height:38px}.mark--ftr img{height:72px}}

/* LIGHT MODE — the bar is cream, exactly the ground the logo was drawn for */
:root{--footer-bg:#080D16}
.hdr{background:color-mix(in srgb,var(--bg) 96%,transparent)}

/* DARK MODE — the ground goes near-black, which is how the logo is supplied,
   so the navy wordmark and gold glow read the way they do on the artwork */
:root[data-theme="dark"]{--bg:#070B12;--bg-alt:#0C121C;--bg-band:#111925;
  --surface:#121A26;--footer-bg:#05080E}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#070B12;--bg-alt:#0C121C;--bg-band:#111925;
    --surface:#121A26;--footer-bg:#05080E}
}
/* the footer is near-black too, so the mark sits on its native ground */
.ftr{background:var(--footer-bg)}

/* directions links and the map overlay are gone — no click-through on maps */
.loc-open{display:none}
.loc-addr{color:#fff;font-size:1.02rem}
.loc-act{margin-top:8px}

/* the map is a locator only — clicking it no longer jumps out to Google Maps */
.loc-map iframe{pointer-events:none}

/* ==========================================================================
   v7 — theme switch, and the logo on a plate wherever the ground is dark
   ========================================================================== */

/* ---- theme toggle ---- */
.theme-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);
  cursor:pointer;padding:0;transition:background-color .35s var(--ease),color .35s,border-color .35s}
.theme-btn:hover{background:var(--flame);border-color:var(--flame);color:var(--navy-deep)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .ic-moon{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:block}
:root[data-theme="dark"] .theme-btn .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .ic-moon{display:block}
  :root:not([data-theme="light"]) .theme-btn .ic-sun{display:none}
}
@media (max-width:560px){.theme-btn{width:40px;height:40px}}

/* ---- the artwork is never altered; on dark grounds it sits on its own plate ---- */
.mark--ftr{display:inline-flex;background:var(--parchment);border-radius:14px;
  padding:14px 20px;box-shadow:0 14px 34px -20px rgba(0,0,0,.8)}
:root[data-theme="dark"] .hdr .mark{background:var(--parchment);border-radius:12px;
  padding:6px 14px;display:inline-flex}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .mark{background:var(--parchment);
    border-radius:12px;padding:6px 14px;display:inline-flex}
}
.mark--ftr img{height:74px}
@media (max-width:560px){.mark--ftr{padding:11px 15px}.mark--ftr img{height:58px}}

/* ==========================================================================
   v8 — dark-mode wordmark instead of a plate; router links behave like links
   ========================================================================== */

/* no plate: on dark grounds the wordmark itself is light, lantern untouched */
.hdr .mark,.mark--ftr{background:none;padding:0;border-radius:0;box-shadow:none;display:flex}
.mark img{display:block;width:auto}
.logo-d{display:none}
.mark--ftr .logo-l{display:none}
.mark--ftr .logo-d{display:block}
:root[data-theme="dark"] .hdr .logo-l{display:none}
:root[data-theme="dark"] .hdr .logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .logo-l{display:none}
  :root:not([data-theme="light"]) .hdr .logo-d{display:block}
}
.mark--ftr img{height:78px}
@media (max-width:560px){.mark--ftr img{height:62px}}

/* elements the single-page router drives still look and feel like links */
[data-go]{cursor:pointer}

/* preview build: plain locator panel in place of the embedded map (not a link) */
.loc-map--static{display:grid;place-content:center;justify-items:center;gap:7px;
  text-align:center;background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.28)}
.loc-map--static svg{width:30px;color:var(--flame-lite)}
.loc-map--static b{font-family:var(--ff-display);font-size:1.2rem;font-weight:500}
.loc-map--static span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}

/* retire the dark-mode plate for good — the wordmark itself carries the contrast */
:root[data-theme="dark"] .hdr .mark{background:none;padding:0;border-radius:0;box-shadow:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr .mark{background:none;padding:0;border-radius:0;box-shadow:none}
}
.mark--ftr{background:none;padding:0;border-radius:0;box-shadow:none}

/* ---- v9: lighter hero scrims so the photographs read, text stays legible ---- */
.hero::before{
  background:
    linear-gradient(100deg,rgba(11,22,42,.80) 0%,rgba(11,22,42,.52) 42%,rgba(11,22,42,.16) 70%,rgba(11,22,42,.10) 100%),
    linear-gradient(180deg,rgba(11,22,42,.34) 0%,rgba(11,22,42,0) 26%,rgba(11,22,42,.16) 62%,rgba(11,22,42,.72) 100%)}
.phero::before{
  background:
    linear-gradient(100deg,rgba(11,22,42,.84) 0%,rgba(11,22,42,.58) 44%,rgba(11,22,42,.20) 72%,rgba(11,22,42,.12) 100%),
    linear-gradient(180deg,rgba(11,22,42,.44) 0%,rgba(11,22,42,.10) 40%,rgba(11,22,42,.56) 100%)}
.phero h1,.hero h1{text-shadow:0 2px 34px rgba(8,16,30,.72),0 1px 3px rgba(8,16,30,.35)}
.phero .lede{text-shadow:0 1px 18px rgba(8,16,30,.9)}
@media (max-width:900px){
  .hero::before,.phero::before{
    background:linear-gradient(180deg,rgba(11,22,42,.62) 0%,rgba(11,22,42,.44) 45%,rgba(11,22,42,.80) 100%)}
}

/* ---- v10: day-part cards carry an icon instead of a photograph ---- */
.tl-item .ic{width:38px;height:38px;color:var(--accent);margin-bottom:14px;stroke-width:1.2}
.tl-item h3{margin-bottom:.5rem}
.tl-item p{margin-top:.2rem}
@media (max-width:900px){.tl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tl{grid-template-columns:1fr}.tl-item .ic{width:32px;height:32px}}

/* ==== v11: larger header logo, safer hero crop ==== */
.mark img{height:74px}
.hdr.solid .mark img{height:60px}
.mark--ftr img{height:88px}
@media (max-width:1240px){.mark img{height:64px}.hdr.solid .mark img{height:54px}}
@media (max-width:900px){.mark img{height:56px}.hdr.solid .mark img{height:48px}}
@media (max-width:560px){.mark img{height:48px}.hdr.solid .mark img{height:42px}.mark--ftr img{height:70px}}
/* keep faces clear of the header and of the headline block */
.hero-media img{object-position:62% 30%}
.phero .hero-media img{object-position:64% 32%}
@media (max-width:900px){.hero-media img,.phero .hero-media img{object-position:62% 26%}}

/* ==== v12: location cards without an embedded map ==== */
.loc-c .loc-inner{display:block}
.loc-b{padding:clamp(26px,3.4vw,40px)}
.loc-addr{font-size:1.02rem;color:var(--ink);opacity:.92;margin:.45rem 0 .2rem}
.loc-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn--dir{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.34);
  display:inline-flex;align-items:center;gap:8px}
.loc-c .btn--dir{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08);
  backdrop-filter:blur(3px)}
.loc-c .btn--dir:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7)}
.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}
@media (max-width:560px){.loc-act{display:grid;grid-template-columns:1fr}.loc-act .btn{width:100%;justify-content:center}}

/* ==== v13: home — care teaser with counters, phone switcher layout ==== */
.teaser{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,72px);align-items:center}
.teaser-b p{max-width:52ch}
.teaser-cta{margin-top:26px}
.teaser-l{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.teaser-l li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  border-top:1px solid var(--line);padding-top:16px}
.teaser-l li:first-child{border-top:0;padding-top:0}
.teaser-l b{font-family:var(--ff-display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500;
  color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;min-width:3.2ch}
.teaser-l span{font-size:.95rem;color:var(--muted)}
@media (max-width:860px){.teaser{grid-template-columns:1fr;gap:34px}}

.phone-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(34px,6vw,86px);align-items:center}
.phone-copy h2{color:#fff}
.sec--dark .phone-copy p{color:rgba(255,255,255,.82)}
.phone-copy .eyebrow{color:var(--flame-lite)}
@media (max-width:900px){.phone-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .phone-copy p{margin-inline:auto}}

/* ==== v14: swipeable room rails (Our Homes) ==== */
.sw{margin-top:clamp(26px,4vh,44px);outline:none}
.sw:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:8px}
.sw-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.sw-hint{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.sw-nav{display:flex;gap:9px}
.sw-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease),opacity .25s}
.sw-nav button svg{width:17px}
.sw-nav button:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.sw-nav button:disabled{opacity:.3;cursor:default}
.sw-track{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;cursor:grab}
.sw-track::-webkit-scrollbar{display:none}
.sw-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.sw-card{flex:0 0 clamp(250px,32%,380px);scroll-snap-align:start;margin:0;position:relative;
  border-radius:10px;overflow:hidden;background:var(--line)}
.sw-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .8s var(--ease);pointer-events:none}
.sw-card:hover img{transform:scale(1.045)}
.sw-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;color:#fff;
  font-size:.82rem;letter-spacing:.05em;
  background:linear-gradient(180deg,rgba(10,18,34,0),rgba(10,18,34,.82))}
.sw-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.sw-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);
  cursor:pointer;transition:width .3s var(--ease),background .3s var(--ease)}
.sw-dots button[aria-selected="true"]{background:var(--accent);width:22px;border-radius:4px}
@media (max-width:560px){.sw-card{flex:0 0 78%}.sw-nav{display:none}.sw-hint{font-size:.66rem}}

/* ==== v15: Life at Selah — day switcher with icon panels (no photos) ==== */
.day{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(22px,3.4vw,46px);align-items:start}
.day-tab{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:16px 18px;border-radius:10px;font:inherit;color:inherit;opacity:.55;
  transition:opacity .3s var(--ease),background .3s var(--ease)}
.day-tab:hover{opacity:.85}
.day-lab{display:block}
.day-stage--text{aspect-ratio:auto;min-height:clamp(260px,32vh,340px);background:var(--bg-alt);
  border:1px solid var(--line);display:grid}
.day-panel{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  display:grid;align-content:center;gap:16px;padding:clamp(28px,4vw,52px);
  transition:opacity .5s var(--ease),transform .6s var(--ease);transform:translateY(10px)}
.day-panel.on{opacity:1;visibility:visible;transform:none}
.day-panel > .ic{width:46px;height:46px;color:var(--accent)}
.day-panel figcaption{position:static;padding:0;background:none;color:inherit}
.day-panel figcaption b{display:block;font-family:var(--ff-display);font-size:clamp(1.7rem,3vw,2.2rem);
  font-weight:500;margin-bottom:.5rem;color:var(--ink)}
.day-panel figcaption p{max-width:46ch;margin:0;color:var(--muted)}
@media (max-width:860px){
  .day{grid-template-columns:1fr}
  .day-tabs{grid-template-columns:repeat(2,1fr);gap:6px}
  .day-tab{padding:12px}
  .day-stage--text{min-height:270px}
}

/* ==== v16: About story rail ==== */
.st{list-style:none;margin:0;padding:0 0 0 46px;position:relative;display:grid;gap:clamp(30px,5vh,58px)}
.st-rail{position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.16);
  border-radius:2px;overflow:hidden}
.sec:not(.sec--dark) .st-rail{background:var(--line)}
.st-rail i{display:block;width:100%;height:0;background:var(--accent);
  transition:height .25s linear;border-radius:2px}
.st-step{position:relative;opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.st-step.in{opacity:1;transform:none}
.st-dot{position:absolute;left:-40px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);transition:border-color .5s var(--ease),background .5s var(--ease)}
.sec--dark .st-dot{background:#132039;border-color:rgba(255,255,255,.25)}
.st-step.in .st-dot{border-color:var(--accent);background:var(--accent)}
.st-n{font-size:.7rem;letter-spacing:.24em;color:var(--accent);display:block;margin-bottom:.35rem}
.st-step b{display:block;font-family:var(--ff-display);font-size:clamp(1.3rem,2.2vw,1.7rem);
  font-weight:500;margin-bottom:.45rem}
.st-step p{max-width:56ch;margin:0}
@media (max-width:560px){.st{padding-left:34px}.st-rail{left:8px}.st-dot{left:-31px;width:12px;height:12px}}

/* ==== v16: Care expanding stack ==== */
.ex{display:grid;gap:10px;margin-top:clamp(24px,4vh,42px)}
.ex-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.ex-card.on{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 12px 34px -22px rgba(12,22,40,.5)}
.ex-head{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:19px clamp(16px,2.4vw,26px);background:none;border:0;cursor:pointer;font:inherit;
  color:var(--ink);text-align:left}
.ex-head .ic,.ex-head svg{width:24px;height:24px;color:var(--accent);flex:none}
.ex-t{font-family:var(--ff-display);font-size:clamp(1.08rem,1.7vw,1.3rem);font-weight:500}
.ex-i{position:relative;width:15px;height:15px;flex:none}
.ex-i::before,.ex-i::after{content:"";position:absolute;background:var(--accent);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.ex-i::before{left:0;right:0;top:6.5px;height:2px}
.ex-i::after{top:0;bottom:0;left:6.5px;width:2px}
.ex-card.on .ex-i::after{transform:scaleY(0);opacity:0}
.ex-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.ex-in{padding:0 clamp(16px,2.4vw,26px) 22px;padding-left:calc(clamp(16px,2.4vw,26px) + 40px)}
.ex-in p{max-width:62ch;margin:0 0 .7rem}
.ex-in p:last-child{margin-bottom:0}
@media (max-width:560px){.ex-in{padding-left:clamp(16px,2.4vw,26px)}}

/* ==== v17: nurse-owned block + hero eyebrow ==== */
.hero-eyebrow{color:var(--flame-lite);margin-bottom:18px}
.nurse{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,70px);align-items:center}
.nurse-b p{max-width:56ch}
.nurse-l{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.nurse-l li{border-left:2px solid var(--accent);padding-left:18px}
.nurse-l b{display:block;font-family:var(--ff-display);font-size:1.12rem;font-weight:500;margin-bottom:.3rem}
.nurse-l span{font-size:.94rem;color:var(--muted)}
@media (max-width:860px){.nurse{grid-template-columns:1fr;gap:32px}}
.ftr .tag-sub{font-size:.82rem;color:rgba(255,255,255,.62);margin-top:.5rem;letter-spacing:.01em}

/* ==== v18: location card text must read on the photograph ==== */
.loc-c .loc-b,.loc-c .loc-b h3{color:#fff}
.loc-c .loc-addr{color:#fff;opacity:1;font-size:1.06rem;
  text-shadow:0 1px 14px rgba(8,16,30,.9)}
.loc-c .loc-b .small{color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(8,16,30,.85)}
.loc-c .home-tag{color:var(--flame-lite)}
.loc-c .loc-scrim{background:linear-gradient(100deg,rgba(9,17,33,.90) 0%,rgba(9,17,33,.72) 48%,rgba(9,17,33,.42) 100%)}

/* ==== v19: hero must never crop the faces — anchor high, no vertical drift ==== */
.hero-media{inset:0 0 -6%}
.hero-media img{object-position:62% 0%;transform:scale(1.02)}
.phero .hero-media img{object-position:64% 16%;transform:scale(1.03)}
@keyframes kb{to{transform:scale(1.002) translate3d(-1.1%,0,0)}}
@media (max-width:900px){
  .hero-media img{object-position:56% 0%}
  .phero .hero-media img{object-position:58% 12%}
}

/* ==== v20: lighten the About hero scrim over the caregiver so the badge reads ==== */
.phero--about::before{
  background:
    linear-gradient(100deg,rgba(11,22,42,.86) 0%,rgba(11,22,42,.52) 38%,rgba(11,22,42,.14) 62%,rgba(11,22,42,.10) 100%),
    linear-gradient(180deg,rgba(11,22,42,.40) 0%,rgba(11,22,42,.08) 40%,rgba(11,22,42,.52) 100%)}

/* ==== v21: a wide plate to break up the text-heavy sections ==== */
.band-fig{margin:clamp(26px,4vh,44px) 0 clamp(30px,4.5vh,50px);overflow:hidden;
  border-radius:var(--r-md);box-shadow:var(--shadow-soft)}
.band-fig img{width:100%;aspect-ratio:21/7;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.band-fig:hover img{transform:scale(1.03)}
@media (max-width:700px){.band-fig img{aspect-ratio:16/9}}
.nurse-side{display:grid;gap:26px}
.nurse-fig{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.nurse-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.btn--dir-l{display:inline-flex;align-items:center;gap:8px}

/* ==== v22: slow zoom back on the headers.
   transform-origin is pinned to the TOP edge, so scaling only ever pushes
   the subject downward — faces can never drift up behind the header bar. ==== */
.hero-media img,.phero .hero-media img{
  transform-origin:50% 0%;
  animation:kbz 26s var(--ease) infinite alternate}
@keyframes kbz{
  from{transform:scale(1.005)}
  to{transform:scale(1.085)}
}
@media (prefers-reduced-motion:reduce){
  .hero-media img,.phero .hero-media img{animation:none;transform:scale(1.02)}
}
.rating-line{margin-top:1rem;font-size:.98rem;color:var(--muted);display:flex;
  align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.rating-line .st{color:var(--accent);letter-spacing:.08em}
.rating-line b{color:var(--ink);font-weight:600}

/* ==== v23: per-page header framing for the new photographs ==== */
.phero--gallery .hero-media img{object-position:56% 4%}
.phero--care    .hero-media img{object-position:60% 22%}
.phero--homes   .hero-media img{object-position:58% 18%}
.phero--life    .hero-media img{object-position:66% 14%}
.phero--contact .hero-media img{object-position:62% 12%}

/* ==== v24: page heroes tall enough that the photograph is not letterboxed.
   At 1920px the Gallery hero was 3.56:1, which threw away most of the frame. ==== */
.phero{min-height:min(76vh,740px);display:flex;flex-direction:column;justify-content:flex-end}
.phero > .wrap{width:100%}
@media (max-width:900px){.phero{min-height:min(66vh,560px)}}

/* ==== v25: hero framing solved against every face, at every viewport, at full zoom ==== */
.phero{min-height:min(84vh,900px)}
@media (max-width:900px){.phero{min-height:min(66vh,560px)}}
.phero--about   .hero-media img{object-position:62% 50%}
.phero--homes   .hero-media img{object-position:56% 52%}
.phero--care    .hero-media img{object-position:60% 80%}
.phero--life    .hero-media img{object-position:64% 50%}
.phero--gallery .hero-media img{object-position:56% 43%}
.phero--contact .hero-media img{object-position:60% 50%}

/* ==== v26: header framing solved numerically against every detected face,
   across nine viewports, at maximum zoom. Do not hand-edit these values. ==== */
.hero{min-height:min(100vh,900px)}
.phero{min-height:min(84vh,900px)}
@media (max-width:900px){.hero,.phero{min-height:min(66vh,560px)}}
.hero .hero-media img{object-position:33.2% 50.0%}
.phero--about .hero-media img{object-position:57.5% 49.2%}
.phero--homes .hero-media img{object-position:50.0% 43.4%}
.phero--care .hero-media img{object-position:81.4% 73.0%}
.phero--life .hero-media img{object-position:50.8% 50.0%}
.phero--gallery .hero-media img{object-position:46.8% 50.0%}
.phero--contact .hero-media img{object-position:59.0% 50.0%}

/* ==== v27: the dining figure was pushing past the viewport on narrow screens ==== */
.dine{min-width:0}
.dine .fig{min-width:0;overflow:hidden}
.dine .fig img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.dine .fig img{aspect-ratio:16/9;height:auto}}
/* min-height:240px + aspect-ratio:16/9 was forcing the figure to 427px wide */
@media (max-width:860px){
  .dine .fig{min-height:0;width:100%;aspect-ratio:16/9;height:auto}
  .dine .fig img{width:100%;height:100%;aspect-ratio:auto}
}

/* ==== v28: reviews as a scroll-right carousel ==== */
.sw--q .sw-track{align-items:stretch}
.sw--q .sw-card{flex:0 0 clamp(280px,33%,400px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px 26px;
  display:flex;flex-direction:column;gap:12px;position:relative;box-shadow:var(--shadow-soft)}
.sw--q .sw-card .qm{font-family:var(--ff-display);font-size:3rem;line-height:.6;color:var(--accent);opacity:.5}
.sw--q .sw-card .st{color:var(--accent);letter-spacing:.14em;font-size:.9rem}
.sw--q .sw-card p{margin:0;font-size:.99rem;line-height:1.66;color:var(--ink);flex:1}
.sw--q .sw-card cite{font-style:normal;font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.sw--q .sw-hint{color:var(--muted)}
@media (max-width:560px){.sw--q .sw-card{flex:0 0 84%;padding:24px 22px}}

/* ==== v29: band figures were cropping heads at 21:7 — looser ratio, framed on the faces ==== */
.band-fig img{aspect-ratio:21/9}
@media (max-width:700px){.band-fig img{aspect-ratio:4/3}}
.band-fig img[src*="people-couple"]{object-position:50% 0%}
.band-fig img[src*="hdr-care"]{object-position:50% 0%}
.band-fig img[src*="band-sunset"]{object-position:50% 62%}
.band-fig img[src*="band-hands"]{object-position:50% 46%}
.nurse-fig img[src*="band-hands"]{object-position:50% 46%}

/* ==== v30: the scrim now sits behind the TEXT only.
   It was carrying .58 opacity across the middle of the frame, which is what
   was dulling every face. Strong on the left column, clear over the subjects. ==== */
.phero::before{
  background:
    linear-gradient(90deg,
      rgba(9,17,33,.88) 0%, rgba(9,17,33,.80) 22%, rgba(9,17,33,.55) 40%,
      rgba(9,17,33,.22) 56%, rgba(9,17,33,.06) 70%, rgba(9,17,33,0) 84%),
    linear-gradient(180deg, rgba(9,17,33,.34) 0%, rgba(9,17,33,0) 22%,
      rgba(9,17,33,0) 68%, rgba(9,17,33,.40) 100%)}
.phero--about::before,.hero::before{
  background:
    linear-gradient(90deg,
      rgba(9,17,33,.88) 0%, rgba(9,17,33,.78) 24%, rgba(9,17,33,.50) 42%,
      rgba(9,17,33,.18) 58%, rgba(9,17,33,.04) 72%, rgba(9,17,33,0) 86%),
    linear-gradient(180deg, rgba(9,17,33,.30) 0%, rgba(9,17,33,0) 24%,
      rgba(9,17,33,0) 64%, rgba(9,17,33,.52) 100%)}
/* the headline carries its own contrast, so the scrim does not have to */
.hero h1,.phero h1{text-shadow:0 2px 26px rgba(6,12,24,.85),0 1px 2px rgba(6,12,24,.55)}
.hero .hero-sub,.phero .lede,.phero .crumb{text-shadow:0 1px 14px rgba(6,12,24,.95),0 1px 3px rgba(6,12,24,.6)}
@media (max-width:900px){
  .hero::before,.phero::before,.phero--about::before{
    background:linear-gradient(180deg,rgba(9,17,33,.52) 0%,rgba(9,17,33,.30) 42%,rgba(9,17,33,.80) 100%)}
}

/* ==== v31: every header is now one canvas — 3200x1495, aspect 2.14.
   That is wider than the widest hero container (1920/900 = 2.13), so the frame
   is never cropped vertically on any screen: heads sit at a fixed 0.20-0.22 of
   the image and cannot be cut. Only the horizontal anchor varies, set to each
   photograph’s own face centre. ==== */
.hero,.phero{min-height:min(84vh,900px)}
@media (max-width:900px){.hero,.phero{min-height:min(66vh,560px)}}
.hero .hero-media img,.phero .hero-media img{object-position:50% 50%}
.hero .hero-media img{object-position:56% 46%}
.phero--about .hero-media img{object-position:52% 44%}
.phero--homes .hero-media img{object-position:50% 56%}
.phero--care .hero-media img{object-position:34% 46%}
.phero--life .hero-media img{object-position:40% 48%}
.phero--gallery .hero-media img{object-position:64% 50%}
.phero--contact .hero-media img{object-position:58% 46%}

/* ==== v33: named review cards ==== */
.sw--q .sw-card{flex:0 0 clamp(300px,32%,420px)}
.rv-by{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:2px}
.rv-by cite{font-style:normal;font-weight:600;font-size:.92rem;color:var(--ink);letter-spacing:.01em}
.rv-by span{font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.sw--q .sw-card p{overflow:visible}

/* fig-paint and fig-walk are now pre-cropped to 21:9 around the faces,
   so they need no object-position nudge at all. */
.band-fig img[src*="fig-paint"],.band-fig img[src*="fig-walk"]{object-position:50% 50%}

/* one header height across all seven pages (kept from the previous round —
   this was an explicit request, not a layout change) */
.hero,.phero{height:min(84vh,900px);min-height:0}
.hero .wrap,.phero .wrap{max-height:100%;overflow:visible}
@media (max-width:900px){.hero,.phero{height:min(70vh,600px)}}
@media (max-width:560px){
  .hero,.phero{height:min(76vh,620px);min-height:0}
  .hero-sub,.phero .lede{font-size:.95rem}
}

/* About Us carries a three-line headline plus a three-line lede; at the shared
   header height its last line was being clipped. */
.phero--about{padding-top:clamp(118px,13vh,150px)}
@media (max-width:900px){.phero--about{padding-top:clamp(104px,12vh,132px)}}

/* ---- header content fit --------------------------------------------------
   With one shared header height, the pages carrying the longest headlines
   (Life at Selah, About Us) and the home page's two buttons were running past
   the bottom edge. The header bar is 99px, so the heroes only need ~115px of
   top padding; the rest was dead space. */
.hero,.phero{padding-top:clamp(112px,12.5vh,158px)}
.phero--short{padding-top:clamp(108px,12vh,150px)}
.phero--about{padding-top:clamp(112px,12.5vh,150px)}

@media (max-width:1280px){
  .hero{padding-bottom:clamp(26px,4vh,50px)}
  .hero-cta{margin-top:20px}
  .hero-sub{font-size:1rem}
}
@media (max-width:900px){
  .hero,.phero{padding-top:clamp(100px,11vh,128px)}
}

/* ---- v35 : the four steps become an interactive stepper ------------------ */
.st{list-style:none;margin:0;padding:0 0 0 46px;position:relative;display:grid;gap:10px}
.st-step{position:relative;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  border-bottom:1px solid rgba(255,255,255,.12)}
.st-step:last-child{border-bottom:0}
.st-step.in{opacity:1;transform:none}
.st-h{margin:0;font-size:inherit;font-weight:inherit}
.st-head{width:100%;background:none;border:0;padding:20px 40px 20px 0;text-align:left;
  color:inherit;cursor:pointer;display:block;position:relative;font:inherit;
  transition:opacity .3s var(--ease)}
.st-head:hover{opacity:.82}
.st-head:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.st-head .st-n{font-size:.7rem;letter-spacing:.24em;color:var(--accent);display:block;
  margin-bottom:.4rem;transition:opacity .3s var(--ease)}
.st-head b{display:block;font-family:var(--ff-display);
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;color:#fff}
.st-chev{position:absolute;right:4px;top:50%;width:13px;height:13px;margin-top:-9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .45s var(--ease);opacity:.85}
.st-step.is-open .st-chev{transform:rotate(-135deg)}
.st-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease),
  opacity .4s var(--ease);opacity:0}
.st-step.is-open .st-body{grid-template-rows:1fr;opacity:1}
.st-body-in{overflow:hidden;min-height:0}
.st-body-in p{max-width:60ch;margin:0 0 22px}
.st-dot{position:absolute;left:-40px;top:26px;width:14px;height:14px;border-radius:50%;
  background:transparent;border:2px solid rgba(255,255,255,.3);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.st-step.is-open .st-dot{border-color:var(--accent);background:var(--accent);transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(201,162,77,.16)}
.st-rail{position:absolute;left:13px;top:8px;bottom:8px;width:2px;
  background:rgba(255,255,255,.14);overflow:hidden}
.st-rail i{display:block;width:100%;height:0;background:var(--accent);
  transition:height .55s var(--ease)}

.st-bar{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,4vh,38px);
  padding-left:46px;flex-wrap:wrap}
.st-nav{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.26);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.st-nav:hover:not(:disabled){border-color:var(--accent);background:rgba(201,162,77,.14);transform:translateY(-2px)}
.st-nav:disabled{opacity:.3;cursor:default}
.st-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.st-count{font-size:.86rem;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.st-count b{color:var(--accent);font-weight:600}
.st-count i{font-style:normal;opacity:.5;margin:0 4px}
.st-hint{font-size:.82rem;color:rgba(255,255,255,.42);margin-left:6px}
@media (max-width:560px){
  .st{padding-left:34px}.st-rail{left:8px}.st-dot{left:-31px;width:12px;height:12px}
  .st-bar{padding-left:34px}.st-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .st-body,.st-rail i,.st-chev,.st-dot{transition:none}
}

/* ---- v36 : ONE header type scale across all seven pages ------------------
   Life at Selah was running at 48px while every other page ran at 102px,
   because of a per-page override added to stop its headline overflowing.
   The real fix is a single scale that the longest headline fits inside,
   plus a slightly wider measure so long headlines break over fewer lines. */
.hero h1,.phero h1,.hero .t-hero,.phero .t-hero{
  font-size:clamp(2.15rem,5.7vw,5.1rem);line-height:1.06}
.phero h1{max-width:19ch}
.hero h1{max-width:17ch}
@media (max-width:900px){
  .hero h1,.phero h1,.hero .t-hero,.phero .t-hero{font-size:clamp(2.05rem,6.4vw,3.4rem)}
  .phero h1,.hero h1{max-width:21ch}
}
@media (max-width:560px){
  .hero h1,.phero h1,.hero .t-hero,.phero .t-hero{font-size:clamp(1.92rem,7.4vw,2.45rem)}
  .phero h1,.hero h1{max-width:24ch}
}

/* very narrow phones (320px): the home hero's second button was running past
   the bottom edge — tighten the spacing rather than shrink the headline. */
@media (max-width:380px){
  .hero{padding-bottom:14px}
  .hero-sub{font-size:.88rem;padding-left:13px;margin-top:.45rem}
  .hero-cta{margin-top:12px;gap:8px}
  .hero-cta .btn{padding-top:12px;padding-bottom:12px;font-size:.78rem}
  .phero .lede{font-size:.9rem}
}

/* ---- v37 : the founder ---------------------------------------------------
   Portrait beside the story on About Us, and a condensed version on the home
   page. The portrait frame doubles as a clearly-marked placeholder until the
   professional photograph arrives. */
.fdr{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4.5vw,66px);align-items:start}
.fdr--home{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center}
@media (max-width:860px){.fdr,.fdr--home{grid-template-columns:1fr}}

.fdr-side{position:sticky;top:120px}
@media (max-width:860px){.fdr-side{position:static;max-width:420px}}
.fdr-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--shadow-soft);background:var(--bg-band)}
.fdr-photo img{width:100%;height:100%;object-fit:cover}
/* placeholder state — no photograph supplied yet */
.fdr-photo--todo{display:grid;place-items:center;text-align:center;padding:30px;
  border:1px dashed var(--accent);background:
    repeating-linear-gradient(135deg,transparent 0 12px,rgba(198,149,47,.05) 12px 24px),
    var(--bg-alt)}
.fdr-photo--todo svg{width:44px;height:68px;color:var(--accent);opacity:.65;margin-inline:auto}
.fdr-photo--todo b{display:block;margin-top:16px;font-family:var(--ff-display);
  font-size:1.02rem;color:var(--ink)}
.fdr-photo--todo span{display:block;margin-top:6px;font-size:.84rem;color:var(--muted);
  max-width:26ch;margin-inline:auto;line-height:1.5}
.fdr-name{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.fdr-name b{display:block;font-family:var(--ff-display);font-size:1.22rem;color:var(--ink)}
.fdr-name span{display:block;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-top:4px}
.fdr-body > p{margin-bottom:1.15rem;color:var(--ink-2)}
.fdr-body > p:last-child{margin-bottom:0}
.fdr-body .lede{color:var(--ink)}
.fdr-h{font-family:var(--ff-display);font-size:clamp(1.25rem,2.3vw,1.7rem);
  margin:clamp(30px,4vh,46px) 0 .9rem;color:var(--ink)}
.fdr-mission{margin:clamp(24px,3.4vh,36px) 0;padding:22px 26px;border-left:3px solid var(--accent);
  background:var(--bg-alt);border-radius:0 var(--r-md) var(--r-md) 0}
.fdr-mission b{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.5rem}
.fdr-mission p{font-family:var(--ff-display);font-size:clamp(1.08rem,2vw,1.35rem);
  line-height:1.45;color:var(--ink)}
.fdr-quote{margin:clamp(30px,4vh,46px) 0 0;padding:0}
.fdr-quote blockquote{margin:0;font-family:var(--ff-display);
  font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.42;color:var(--ink)}
.fdr-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.editor-note{background:rgba(198,149,47,.10);border:1px dashed var(--accent);
  border-radius:var(--r-md);padding:14px 18px;font-size:.88rem;color:var(--ink-2);
  max-width:74ch;margin:0 auto clamp(24px,3.5vh,38px)}


/* ---- v38 : 'An ordinary Tuesday' — the day scrubber, from concept C ---- */
.day-rail{position:relative;padding:34px 0 10px}
.day-track{position:relative;height:3px;background:var(--line);border-radius:2px}
.day-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);
  border-radius:2px;transition:width .5s var(--ease)}
.day-ticks{position:absolute;inset:0;display:flex;justify-content:space-between}
.day-tick{position:relative;transform:translateY(-50%);top:50%;appearance:none;background:none;
  border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:0}
.day-tick i{display:block;width:13px;height:13px;border-radius:50%;background:var(--bg);
  border:2px solid var(--line);transition:transform .35s var(--ease),
  border-color .35s var(--ease),background .35s var(--ease)}
.day-tick b{position:absolute;top:20px;font-size:.74rem;letter-spacing:.1em;font-weight:500;
  color:var(--muted);white-space:nowrap;transition:color .35s var(--ease)}
.day-tick:hover i{border-color:var(--accent)}
.day-tick[aria-selected="true"] i{background:var(--accent);border-color:var(--accent);
  transform:scale(1.5);box-shadow:0 0 0 6px rgba(198,149,47,.16)}
.day-tick[aria-selected="true"] b{color:var(--accent);font-weight:600}
.cday-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
  align-items:center;margin-top:58px}
.cday-panel figure{margin:0;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:16/10;box-shadow:var(--shadow-soft)}
.cday-panel figure img{width:100%;height:100%;object-fit:cover}
.day-clock{font-family:var(--ff-display);font-size:clamp(2.6rem,6vw,4.6rem);
  color:var(--accent);line-height:1}
.cday-panel h3{font-size:clamp(1.4rem,2.6vw,2.1rem);margin:.5rem 0 .8rem}
.cday-panel p{color:var(--ink-2);max-width:48ch}
.day-note{margin-top:20px;padding-left:18px;border-left:2px solid var(--accent);
  color:var(--muted);font-size:.94rem}
@media (max-width:860px){
  .cday-panel{grid-template-columns:1fr;margin-top:70px}
  .day-tick b{font-size:.66rem}
}
@media (max-width:560px){
  .day-tick:nth-child(even) b{display:none}
}

/* ---- v39 : the founder's portrait and credentials ----------------------- */
.fdr-photo{background:linear-gradient(170deg,var(--bg-alt) 0%,var(--bg-band) 100%)}
.fdr-photo img{object-position:50% 12%}
.fdr-cred{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.fdr-cred li{position:relative;padding-left:16px;font-size:.86rem;color:var(--muted);line-height:1.45}
.fdr-cred li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.75}

/* ---- v40 : the header mark now matches the footer mark ------------------ */
.mark img{height:76px}
.hdr.solid .mark img{height:62px}
@media (max-width:1240px){.mark img{height:70px}.hdr.solid .mark img{height:58px}}
@media (max-width:560px){
  .mark img{height:64px}
  .hdr.solid .mark img{height:54px}
  .mark--ftr img{height:64px}
}
/* the bar is taller now, so the headers need a little more clearance */
.hero,.phero{padding-top:clamp(126px,13.5vh,172px)}
.phero--short{padding-top:clamp(122px,13vh,164px)}
.phero--about{padding-top:clamp(124px,13vh,162px)}
@media (max-width:900px){.hero,.phero{padding-top:clamp(112px,12vh,140px)}}

/* ---- v41 : a star rating on each review card --------------------------- */
.sw--q .sw-card .rv-stars{display:block;color:var(--accent);letter-spacing:.16em;
  font-size:.96rem;line-height:1;margin:-4px 0 4px}
/* 320px: the taller mark leaves the hero a little less room */
@media (max-width:380px){
  .hero,.phero{padding-top:clamp(100px,11vh,126px)}
  .hero-cta .btn{padding-top:11px;padding-bottom:11px}
}

/* ---- v42 : a larger header mark, and larger stars on the reviews -------- */
.mark img{height:92px}
.hdr.solid .mark img{height:74px}
@media (max-width:1240px){.mark img{height:84px}.hdr.solid .mark img{height:68px}}
@media (max-width:900px){.mark img{height:78px}.hdr.solid .mark img{height:64px}}
@media (max-width:560px){
  .mark img{height:70px}
  .hdr.solid .mark img{height:58px}
}
/* the taller bar wants a little more clearance again */
.hero,.phero{padding-top:clamp(142px,15vh,190px)}
.phero--short{padding-top:clamp(138px,14.5vh,182px)}
.phero--about{padding-top:clamp(140px,14.5vh,180px)}
@media (max-width:900px){.hero,.phero{padding-top:clamp(124px,13vh,152px)}}
@media (max-width:380px){.hero,.phero{padding-top:clamp(108px,12vh,134px)}}

.sw--q .sw-card .rv-stars{font-size:1.18rem;letter-spacing:.14em;margin:-2px 0 6px}
/* short laptop screens: the hero has less vertical room, so trim the clearance */
@media (min-width:901px) and (max-height:820px){
  .hero,.phero{padding-top:clamp(124px,15vh,190px)}
  .phero--short{padding-top:clamp(120px,14.5vh,182px)}
  .phero--about{padding-top:clamp(122px,14.5vh,180px)}
}