/* Typeface pairing: Fraunces for display, Inter for text - the same pairing the
   client pointed at. Both are OFL, self-hosted as latin variable subsets. */
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Metric-matched fallbacks so the swap does not move the layout. Overrides are
   measured from the real font files against Arial and Times New Roman:
   Inter lowercase advance 0.5363 em, Fraunces 0.5979 em. */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:110.1%;ascent-override:88%;descent-override:21.9%;line-gap-override:0%;
}
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Times New Roman"),local("Liberation Serif"),local("Georgia");
  size-adjust:129.1%;ascent-override:75.8%;descent-override:19.8%;line-gap-override:0%;
}

/* ---------- tokens ---------- */
:root{
  /* primitives */
  --p-ivory:#F8F3E9;
  --p-cream:#FDFBF4;
  --p-sand:#EFE5D2;
  --p-ink:#152A2E;
  --p-ink-soft:#3C5257;
  --p-teal:#0F6673;
  --p-teal-text:#0B4A54;
  --p-teal-deep:#0D2A2F;
  --p-teal-floor:#081D21;
  --p-gold:#C99A2E;
  --p-gold-text:#7C5D18;
  --p-gold-bright:#E7C05A;
  --p-gold-pale:#F3E3B5;
  /* semantic */
  --surface:var(--p-ivory);
  --surface-raised:var(--p-cream);
  --surface-mid:var(--p-sand);
  --surface-dark:var(--p-teal-deep);
  --surface-floor:var(--p-teal-floor);
  --text:var(--p-ink);
  --text-soft:var(--p-ink-soft);
  --text-on-dark:#F6F1E6;
  --text-soft-on-dark:#BFD2CF;
  --accent:var(--p-gold);
  --accent-text:var(--p-gold-text);
  --accent-on-dark:var(--p-gold-bright);
  --teal:var(--p-teal);
  --teal-text:var(--p-teal-text);
  --border-hair:rgba(21,42,46,.14);
  --border-hair-dark:rgba(246,241,230,.16);
  /* component */
  --btn-radius:999px;
  --card-radius:20px;
  --btn-grad:linear-gradient(150deg,#E7C05A 0%,#CE9F31 55%,#B88923 100%);
  --btn-text:#231A05;
  --shadow-1:0 1px 2px rgba(21,42,46,.05),0 6px 18px rgba(21,42,46,.07);
  --shadow-2:0 2px 4px rgba(21,42,46,.06),0 14px 34px rgba(21,42,46,.12);
  --la-accent:#C99A2E;
  --wrap:1240px;
  --sec-pad:clamp(4rem,8vw,8.75rem);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface);color:var(--text);
  font-family:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.125rem);line-height:1.65;
  font-weight:400;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-optical-sizing:auto;color:inherit;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.6rem + 3.2vw,4.5rem);line-height:1.13;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,1.4rem + 1.8vw,3rem);line-height:1.2;letter-spacing:-.015em}
h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem);line-height:1.28}
h4{font-family:"Inter","Inter Fallback",sans-serif;font-weight:700;font-size:1.06rem;line-height:1.35}
p{margin:0 0 1.1em;max-width:66ch}
a{color:var(--teal-text);text-underline-offset:3px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--p-ink);outline-offset:3px;border-radius:6px;
  box-shadow:0 0 0 6px rgba(201,154,46,.85);
}
.sec--dark a:focus-visible,.sec--dark button:focus-visible,.vsec a:focus-visible,.vsec button:focus-visible,
.foot a:focus-visible,.foot button:focus-visible,.links-page a:focus-visible,.drawer a:focus-visible,.drawer button:focus-visible{
  outline-color:var(--accent-on-dark);box-shadow:0 0 0 6px rgba(8,29,33,.9);
}
::selection{background:var(--p-gold-pale);color:var(--p-ink)}
img,video{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin-inline:0 auto;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.25rem)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:var(--p-ink);color:#fff;padding:.7rem 1.2rem;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
[id]{scroll-margin-top:110px}

/* section rhythm */
.sec{padding-block:var(--sec-pad);position:relative}
.sec--cream{background:linear-gradient(180deg,var(--p-cream) 0%,#FAF6EC 100%)}
.sec--ivory{background:linear-gradient(178deg,var(--p-ivory) 0%,#F4EDDF 100%)}
.sec--sand{background:linear-gradient(180deg,#F2E9D8 0%,var(--p-sand) 100%)}
.sec--dark{background:
  radial-gradient(120% 90% at 15% 0%,#12363C 0%,var(--p-teal-deep) 55%,#0A2226 100%);
  color:var(--text-on-dark)}
.sec--dark p{color:var(--text-soft-on-dark)}
.sec--dark a{color:var(--accent-on-dark)}
.sec-head{max-width:820px;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head p{color:var(--text-soft);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.sec--dark .sec-head p{color:var(--text-soft-on-dark)}
.hairline{border:0;border-top:1px solid var(--border-hair);margin:0}

/* ---------- reveal engine (gated behind .js) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal="left"]{transform:translateX(-24px)}
.js [data-reveal="right"]{transform:translateX(24px)}
.js [data-reveal][data-shown]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset-inline:0;top:0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;
}
.hdr[data-stuck]{
  background:rgba(251,247,238,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--border-hair);
  box-shadow:0 4px 24px rgba(21,42,46,.06);
}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:88px}
.brand{display:inline-flex;align-items:center;flex:none}
.brand-img{width:236px;height:auto}
.nav{display:flex;gap:clamp(.6rem,1.6vw,1.5rem)}
.nav a{
  font-size:15.5px;font-weight:500;color:var(--text);text-decoration:none;
  padding:.6rem .35rem;border-radius:8px;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:.35rem;right:.35rem;bottom:.3rem;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:.9rem}
.hdr-tel{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:15.5px;
  color:var(--teal-text);text-decoration:none;padding:.55rem .4rem;border-radius:8px;
}
.hdr-tel svg{width:19px;height:19px}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:0 2rem;border-radius:var(--btn-radius);
  background:var(--btn-grad);color:var(--btn-text);
  font-family:"Inter","Inter Fallback",sans-serif;font-weight:700;font-style:normal;
  font-size:1.02rem;line-height:1;letter-spacing:.005em;white-space:nowrap;
  text-decoration:none;border:0;cursor:pointer;overflow:hidden;isolation:isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -2px 0 rgba(104,72,8,.30) inset,
    0 0 0 1px rgba(120,84,10,.30),
    0 10px 24px -8px rgba(120,84,10,.55);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1),filter .2s ease;
}
.btn>span{position:relative;z-index:1}
.btn svg{width:20px;height:20px;flex:none;position:relative;z-index:1}
.btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px rgba(120,84,10,.34),0 4px 12px -6px rgba(120,84,10,.5);
}
/* the shine: one sweep per interaction, never a loop */
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.30) 47%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.30) 53%,
    rgba(255,255,255,0) 62%);
  background-size:260% 100%;background-position:170% 0;background-repeat:no-repeat;
}
.btn[data-shine]::before{animation:btn-shine .85s cubic-bezier(.34,.02,.2,1) 1}
@keyframes btn-shine{from{background-position:170% 0}to{background-position:-70% 0}}
@media (hover:hover) and (pointer:fine){
  .btn:hover{
    transform:translateY(-2px);filter:saturate(1.06);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 -2px 0 rgba(104,72,8,.30) inset,
      0 0 0 1px rgba(120,84,10,.34),
      0 18px 34px -10px rgba(120,84,10,.62);
  }
}
.btn--ghost{
  background:transparent;color:var(--teal-text);
  box-shadow:0 0 0 1.5px rgba(15,102,115,.42) inset;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1),background-color .2s ease,color .2s ease;
}
.btn--ghost::before{
  background:linear-gradient(105deg,
    rgba(201,154,46,0) 38%,rgba(201,154,46,.14) 47%,
    rgba(201,154,46,.34) 50%,rgba(201,154,46,.14) 53%,rgba(201,154,46,0) 62%);
  background-size:260% 100%;background-position:170% 0;background-repeat:no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{
    background:rgba(15,102,115,.06);color:var(--p-ink);
    box-shadow:0 0 0 1.5px rgba(15,102,115,.75) inset,0 12px 26px -14px rgba(15,102,115,.6);
    transform:translateY(-2px);
  }
}
.sec--dark .btn--ghost,.vsec .btn--ghost,.hero-dark .btn--ghost{
  color:var(--text-on-dark);box-shadow:0 0 0 1.5px rgba(246,241,230,.42) inset;
}
@media (hover:hover) and (pointer:fine){
  .sec--dark .btn--ghost:hover,.vsec .btn--ghost:hover{
    background:rgba(246,241,230,.10);color:#fff;
    box-shadow:0 0 0 1.5px rgba(246,241,230,.85) inset,0 12px 26px -14px rgba(0,0,0,.6);
  }
}
.btn--sm{min-height:48px;padding:0 1.4rem;font-size:.96rem;gap:.5rem}
.btn--sm svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
  .btn,.btn--ghost{transition:none}
  .btn::before{display:none}
  .btn:hover{transform:none}
}

/* burger + drawer */
.burger{
  display:none;background:transparent;border:0;cursor:pointer;color:var(--text);
  width:48px;height:48px;align-items:center;justify-content:center;border-radius:10px;
}
.burger svg{width:26px;height:26px}
.drawer{
  position:fixed;inset:0;z-index:150;background:var(--p-teal-deep);color:var(--text-on-dark);
  display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1),visibility 0s linear .3s;
}
.drawer[data-open]{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1.1rem,4vw,2.25rem);height:80px}
.drawer-top .brand-img{width:190px}
.drawer-top .burger{display:inline-flex;color:var(--text-on-dark)}
.drawer-body{display:flex;flex-direction:column;overflow-y:auto;padding:0 clamp(1.1rem,4vw,2.25rem);flex:1}
.drawer-body a{
  color:var(--text-on-dark);text-decoration:none;font-size:1.25rem;font-weight:600;
  padding:.85rem .25rem;min-height:48px;display:flex;align-items:center;
  border-bottom:1px solid var(--border-hair-dark);
}
.drawer-body a[aria-current]{color:var(--accent-on-dark)}
.drawer-foot{padding:1.1rem clamp(1.1rem,4vw,2.25rem) calc(1.4rem + env(safe-area-inset-bottom));display:grid;gap:.8rem}
.drawer-foot .btn{width:100%}

/* ---------- hero (home, split arch) ---------- */
.hero{
  position:relative;min-height:90vh;min-height:90svh;
  display:grid;align-items:center;
  background:
    radial-gradient(90% 70% at 8% 10%,#FDF9F0 0%,rgba(253,249,240,0) 60%),
    linear-gradient(165deg,var(--p-ivory) 55%,#F1E8d6 100%);
  padding-top:110px;padding-bottom:clamp(2rem,4vw,3rem);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,251,244,0) 0%,rgba(253,251,244,.9) 100%);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.hero-copy .lede{
  font-size:clamp(1.08rem,1rem + .45vw,1.3rem);color:var(--text-soft);max-width:54ch;margin:1.2rem 0 1.9rem;
}
.hero-copy h1 .h1-line{display:block}
.js .h1-line{opacity:0;transform:translateY(26px)}
.js [data-shown] .h1-line{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.js [data-shown] .h1-line:nth-child(2){transition-delay:.12s}
.js [data-shown] .h1-line:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .h1-line{opacity:1;transform:none;transition:none}
}
.h1-accent{color:var(--teal-text)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-note{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:1.9rem;padding:0;list-style:none}
.hero-note li{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;color:var(--teal-text)}
.hero-note svg{width:19px;height:19px;flex:none;color:var(--accent-text)}
.hero-media{position:relative;align-self:stretch;display:flex;align-items:flex-end;min-height:420px}
.arch{
  position:relative;width:100%;height:min(72vh,640px);
  border-radius:calc(50vw) calc(50vw) 26px 26px;
  border-radius:999px 999px 26px 26px;
  overflow:hidden;background:#274E52;
  box-shadow:var(--shadow-2);
}
.arch video,.arch img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.arch::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(13,42,47,.18) 0%,rgba(13,42,47,0) 40%);
  border-radius:inherit;
}
.arch-heart{
  position:absolute;top:clamp(1.4rem,3vh,2.4rem);left:50%;transform:translateX(-50%);
  width:54px;height:54px;z-index:2;border-radius:50%;
  background:rgba(253,251,244,.92);box-shadow:var(--shadow-1);
  display:flex;align-items:center;justify-content:center;
}
.arch-heart svg{width:28px;height:28px;color:#B88923}
.js .arch-heart{transform:translateX(-50%) scale(.6);opacity:0;transition:opacity .6s ease .5s,transform .6s cubic-bezier(.16,1,.3,1) .5s}
.js [data-shown] .arch-heart,.js .arch-wrap[data-shown] .arch-heart{opacity:1;transform:translateX(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.js .arch-heart{opacity:1;transform:translateX(-50%)}}

/* interior page hero */
.phero{
  position:relative;padding-top:150px;padding-bottom:clamp(2.6rem,5vw,4.2rem);
  background:linear-gradient(168deg,#FBF7EE 0%,var(--p-ivory) 70%,#F2E9d8 100%);
  overflow:hidden;
}
.phero::before{
  content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(201,154,46,.14) 0%,rgba(201,154,46,0) 62%);
  pointer-events:none;
}
.phero .lede{font-size:clamp(1.05rem,1rem + .4vw,1.28rem);color:var(--text-soft);max-width:60ch}
.phero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.phero-fig{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:4/3;background:#274E52}
.phero-fig img{width:100%;height:100%;object-fit:cover}
.phero-fig--arch{border-radius:999px 999px 24px 24px;aspect-ratio:5/6}
.kenburns img{transform:scale(1.06);animation:kb 26s linear infinite alternate}
@keyframes kb{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.6%,1.2%,0)}}
@media (prefers-reduced-motion:reduce){.kenburns img{animation:none;transform:none}}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem)}
.stat{
  background:var(--surface-raised);border-radius:var(--card-radius);
  padding:1.6rem 1.4rem;box-shadow:var(--shadow-1);
  border:1px solid rgba(201,154,46,.45);
}
.stat b{
  display:block;font-family:"Fraunces","Fraunces Fallback",Georgia,serif;font-weight:600;font-optical-sizing:auto;
  font-size:clamp(2.1rem,1.6rem + 1.6vw,3.2rem);color:var(--teal-text);line-height:1.05;
  font-variant-numeric:lining-nums;
}
.stat span{color:var(--text-soft);font-size:.98rem;line-height:1.45;display:block;margin-top:.4rem}

/* ---------- cards, generic ---------- */
.card{
  background:var(--surface-raised);border-radius:var(--card-radius);box-shadow:var(--shadow-1);
  padding:clamp(1.4rem,2.5vw,2rem);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
}
.icon-plate{
  width:58px;height:58px;flex:none;border-radius:16px 16px 14px 14px;position:relative;
  background:linear-gradient(160deg,#F6EFDE 0%,#EFE3C8 100%);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(21,42,46,.08);
}
.icon-plate{border:1px solid rgba(201,154,46,.28)}
.icon-plate svg{width:28px;height:28px;color:var(--teal-text)}
.sec--dark .icon-plate{background:linear-gradient(160deg,#12393F 0%,#0E2E33 100%);box-shadow:inset 0 1px 0 rgba(246,241,230,.12)}
.sec--dark .icon-plate{border-color:rgba(231,192,90,.26)}
.sec--dark .icon-plate svg{color:var(--accent-on-dark)}

/* photo frames */
.frame{border-radius:var(--card-radius);overflow:hidden;position:relative;background:#2A4A4E;box-shadow:var(--shadow-1)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover) and (pointer:fine){
  .frame:hover img{transform:scale(1.05)}
}
.frame--arch{border-radius:999px 999px 20px 20px}
.frame-cap{
  position:absolute;inset-inline:0;bottom:0;padding:2rem 1.2rem .9rem;color:#fff;font-weight:600;font-size:.95rem;
  background:linear-gradient(180deg,rgba(8,29,33,0) 0%,rgba(8,29,33,.55) 42%,rgba(8,29,33,.9) 100%);
  text-shadow:0 1px 2px rgba(8,29,33,.55);
}

/* who we serve mosaic */
.serve-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,2vw,1.4rem)}
.serve-card{
  grid-column:span 4;display:flex;flex-direction:column;gap:.4rem;
  background:rgba(246,241,230,.05);border:1px solid var(--border-hair-dark);
  border-radius:var(--card-radius);padding:1.5rem 1.4rem;
  transition:background-color .25s ease,transform .25s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .serve-card:hover{background:rgba(246,241,230,.09);transform:translateY(-2px)}
}
.serve-card h3{font-size:1.22rem;margin:0}
.serve-card p{font-size:.97rem;margin:0}
.serve-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,2vw,1.4rem)}

/* rooms gallery */
.rooms{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,1.6rem);align-items:stretch}
.rooms .frame--tall{grid-column:span 4;aspect-ratio:3/4}
.rooms .frame--wide{grid-column:span 8;aspect-ratio:16/10}
.room-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.fact-tag{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface-raised);border:1px solid var(--border-hair);
  padding:.5rem .95rem;border-radius:999px;font-size:.92rem;font-weight:600;color:var(--teal-text);
}
.fact-tag svg{width:16px;height:16px;color:var(--accent-text)}

/* services list */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.8vw,1.25rem);align-items:stretch}
/* Amenity and service items read as cards. On the dark sections these used to be
   a bare icon and two lines of text floating on the ground, which looked like an
   unstyled list rather than a designed grid. */
.svc{
  display:flex;flex-direction:column;
  background:var(--surface-raised);
  border:1px solid rgba(21,42,46,.06);
  border-radius:var(--card-radius);
  padding:clamp(1.2rem,1.9vw,1.55rem);
  box-shadow:var(--shadow-1);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease,background-color .28s ease;
}
.sec--dark .svc{
  background:linear-gradient(160deg,rgba(246,241,230,.06) 0%,rgba(246,241,230,.022) 100%);
  border-color:rgba(231,192,90,.17);
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(201,154,46,.3)}
  .sec--dark .svc:hover{border-color:rgba(231,192,90,.4);background:linear-gradient(160deg,rgba(246,241,230,.1) 0%,rgba(246,241,230,.04) 100%)}
}
.svc .icon-plate{width:50px;height:50px;border-radius:14px;margin-bottom:.85rem}
.svc .icon-plate svg{width:25px;height:25px}
.svc h3{font-size:1.12rem;line-height:1.24;margin:0 0 .35rem}
.svc p{font-size:.95rem;color:var(--text-soft);margin:0}
.svc h3{letter-spacing:-.005em}

/* ---------- signature: journey heartbeat ---------- */
.journey{position:relative}
.journey-line{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.journey-line svg{width:100%;height:100%;overflow:hidden}
.journey-line path{
  fill:none;stroke:url(#goldgrad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.js .journey-line path{stroke-dasharray:var(--path-len,4000);stroke-dashoffset:var(--path-len,4000)}
@media (prefers-reduced-motion:reduce){.js .journey-line path{stroke-dashoffset:0}}
.journey-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(2.4rem,5vw,4rem)}
.jstep{position:relative;padding-top:3.4rem}
.jstep-node{
  position:absolute;top:0;left:0;width:52px;height:52px;border-radius:50%;
  background:var(--surface-raised);box-shadow:var(--shadow-1);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--p-gold-pale);
}
.jstep-node svg{width:24px;height:24px;color:#B88923}
.jstep[data-pulse] .jstep-node{animation:pulse 1.1s cubic-bezier(.16,1,.3,1) 1}
@keyframes pulse{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.jstep[data-pulse] .jstep-node{animation:none}}
.jstep-k{
  font-family:"Fraunces","Fraunces Fallback",Georgia,serif;font-size:.95rem;color:var(--accent-text);
  display:block;margin-bottom:.35rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:"Inter","Inter Fallback",sans-serif;font-weight:700;
}
.jstep h3{font-size:1.3rem;margin-bottom:.35rem}
.jstep p{font-size:.98rem;color:var(--text-soft);margin:0}
.jstep a{font-weight:600}

/* payments band */
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.4rem)}
.pay{
  display:flex;align-items:center;gap:.9rem;background:var(--surface-raised);
  border-radius:var(--card-radius);padding:1.2rem 1.3rem;box-shadow:var(--shadow-1);
}
.pay svg{width:26px;height:26px;flex:none;color:var(--teal-text)}
.pay b{font-size:1.02rem}
.pay span{display:block;font-size:.88rem;color:var(--text-soft);font-weight:400}

/* cost factors visual */
.cost{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.cost-item{background:var(--surface-raised);border-radius:var(--card-radius);padding:1.5rem;box-shadow:var(--shadow-1)}
.cost-item h3{font-family:"Inter","Inter Fallback",sans-serif;font-weight:700;font-size:1.06rem;margin-bottom:.4rem}
.cost-item p{font-size:.96rem;color:var(--text-soft);margin:0}
/* A short accent rule. This used to be a progress bar filled to an arbitrary
   percentage, which implied a number the business does not publish. */
.cost-rule{display:block;width:52px;height:3px;border-radius:3px;background:var(--btn-grad);margin:.85rem 0 .75rem}


/* comparison table + cards */
.compare-wrap{margin-top:1rem}
table.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface-raised);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow-1);font-size:.97rem}
.compare th,.compare td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-hair)}
.compare thead th{background:var(--p-teal-deep);color:var(--text-on-dark);font-weight:600;font-size:.95rem}
.compare thead th.win{background:#11444d;color:#F6E9C8}
.compare td.win{background:rgba(201,154,46,.09);font-weight:600}
.compare tbody tr:last-child td{border-bottom:0}
.compare-cards{display:none}
@media (max-width:767px){
  table.compare{display:none}
  .compare-cards{display:grid;gap:1rem}
  .compare-card{background:var(--surface-raised);border-radius:var(--card-radius);padding:1.3rem;box-shadow:var(--shadow-1)}
  .compare-card h3{font-family:"Inter","Inter Fallback",sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:.8rem}
  .compare-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
  .compare-card li{font-size:.95rem;color:var(--text-soft)}
  .compare-card li b{color:var(--text)}
  .compare-card--win{border:1px solid rgba(201,154,46,.5)}
}

/* FAQ */
.faq-list{max-width:860px}
.faq-i{border-bottom:1px solid var(--border-hair)}
.faq-i[data-more]{display:none}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:"Inter","Inter Fallback",sans-serif;font-weight:600;font-size:1.08rem;color:var(--text);
  padding:1.15rem .2rem;min-height:48px;
}
.faq-q svg{width:22px;height:22px;flex:none;color:var(--accent-text);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.faq-q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq-a[hidden],html.js .faq-a:not([data-show]){display:none}
.faq-a-in{padding:0 .2rem 1.3rem;color:var(--text-soft);max-width:64ch;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.faq-a[data-open] .faq-a-in,html:not(.js) .faq-a-in{opacity:1;transform:none}
.faq-a-in p{margin:0 0 .8em}
.faq-more{margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){.faq-a-in{transition:none;transform:none}.faq-q svg{transition:none}}

/* video section / final cta */
.vsec{position:relative;overflow:hidden;color:var(--text-on-dark)}
.vsec-media{position:absolute;inset:0}
.vsec-media video,.vsec-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.vsec-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,29,33,.9) 0%,rgba(8,29,33,.72) 55%,rgba(8,29,33,.56) 100%)}
/* On phones the copy runs the full width, so the light end of the horizontal
   veil sat under the text. Below 900px the scrim goes near-uniform. */
@media (max-width:900px){
  .vsec-veil{background:linear-gradient(180deg,rgba(8,29,33,.82) 0%,rgba(8,29,33,.78) 45%,rgba(8,29,33,.86) 100%)}
}
.vsec .wrap{position:relative;z-index:1}
.vsec p{color:#D6E1DE}

/* footer */
.foot{background:radial-gradient(140% 100% at 50% 0%,#0B272C 0%,var(--p-teal-floor) 70%);color:var(--text-on-dark)}
.foot a{color:var(--text-on-dark);text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,3fr);gap:clamp(1.6rem,3.5vw,3rem);padding-block:clamp(3rem,6vw,4.5rem)}
.foot-brand img{width:264px;height:auto}
.foot-brand p{color:var(--text-soft-on-dark);font-size:.98rem;max-width:34ch;margin-top:1.1rem}
.foot .foot-h{color:#EAD9A8;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.98rem}
.foot .contact-l{display:flex;align-items:flex-start;gap:.6rem}
.foot .contact-l svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent-on-dark)}
.foot-social{display:flex;gap:.8rem;margin-top:1.2rem}
.foot-social a{
  width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(246,241,230,.08);transition:background-color .25s ease;
}
.foot-social a:hover{background:rgba(246,241,230,.16);text-decoration:none}
.foot-social svg{width:21px;height:21px}
.foot-bottom{border-top:1px solid var(--border-hair-dark);padding-block:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:center;justify-content:space-between;font-size:.9rem;color:var(--text-soft-on-dark)}
.foot-bottom a{display:inline-block;padding-block:.55rem}
.foot-bottom p{margin:0;padding-block:.55rem}
.foot-legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot-legal a{color:var(--text-soft-on-dark)}
.la-attr{
  color:var(--la-accent);text-decoration:none;font-weight:600;
  text-shadow:0 0 8px color-mix(in srgb,var(--la-accent) 55%,transparent);
  transition:text-shadow .3s ease,filter .3s ease;
}
.la-attr:hover,.la-attr:focus-visible{
  text-shadow:0 0 16px color-mix(in srgb,var(--la-accent) 85%,transparent);filter:brightness(1.15);text-decoration:none;
}
@media (prefers-reduced-motion:reduce){.la-attr{transition:none}}

/* sticky mobile cta */
.mcta{
  position:fixed;inset-inline:0;bottom:0;z-index:90;display:none;
  background:rgba(13,42,47,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-hair-dark);
  grid-template-columns:1fr 1fr;gap:.7rem;
}
.mcta a{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;
  border-radius:12px;text-decoration:none;font-weight:700;font-size:.98rem;
}
.mcta svg{width:19px;height:19px}
.mcta-call{background:rgba(246,241,230,.12);color:var(--text-on-dark)}
.mcta-apply{background:var(--btn-grad);color:var(--btn-text)}

/* links page */
.links-page{min-height:100svh;background:radial-gradient(120% 80% at 50% 0%,#12363C 0%,var(--p-teal-deep) 60%,#081D21 100%);color:var(--text-on-dark);padding:3.5rem 1.2rem 4rem}
.links-card{max-width:520px;margin-inline:auto;text-align:center}
.links-card .brand-img{width:min(300px,80%);margin-inline:auto}
.links-id{color:var(--text-soft-on-dark);margin:.9rem auto 2rem;max-width:40ch}
.links-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;text-align:left}
.links-list a{
  display:flex;align-items:center;gap:1rem;background:rgba(246,241,230,.18);
  border:1px solid rgba(231,192,90,.4);border-radius:16px;padding:1.05rem 1.2rem;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  color:var(--text-on-dark);text-decoration:none;font-weight:600;min-height:56px;
  transition:background-color .25s ease,transform .25s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .links-list a:hover{background:rgba(246,241,230,.2);border-color:rgba(231,192,90,.6);transform:translateY(-1px)}
}
.links-list svg{width:22px;height:22px;flex:none;color:var(--accent-on-dark)}
.links-list small{display:block;font-weight:400;color:rgba(246,241,230,.86);font-size:.86rem}
.links-qr{margin:2.4rem auto 0;background:#FDFBF4;border-radius:20px;padding:1.2rem;width:210px}
.links-qr img,.links-qr svg{width:100%;height:auto}
.links-qr p{color:#4b4534;font-size:.8rem;margin:.6rem 0 0;text-align:center}

/* insights */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,1.8rem)}
.post-card{display:flex;flex-direction:column;background:var(--surface-raised);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow-1);transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover) and (pointer:fine){.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}}
.post-card .frame{border-radius:0;box-shadow:none;aspect-ratio:16/9}
.post-card-in{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}
.post-card h2,.post-card h3{font-size:1.25rem;line-height:1.3;margin:0}
.post-card h2 a,.post-card h3 a{color:inherit;text-decoration:none}
.post-card p{font-size:.95rem;color:var(--text-soft);margin:0}
.post-date{font-size:.85rem;color:var(--text-soft)}
.article{max-width:60ch;margin-inline:auto}
.article h2{margin-top:2.2em}
.article ul{padding-left:1.2rem}
.article li{margin-bottom:.5em}
.article .frame{margin:2rem 0}

/* checklist page */
.check-group{max-width:760px;margin-bottom:2rem}
.check-group h3{margin-bottom:.8rem}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.check-list li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:6px;
  border:2px solid var(--accent);background:var(--surface-raised);
}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
.contact-card{background:var(--surface-raised);border-radius:var(--card-radius);box-shadow:var(--shadow-1);padding:clamp(1.5rem,3vw,2.2rem)}
.contact-rows{display:grid;gap:1.1rem;margin:1.4rem 0}
.contact-row{display:flex;align-items:flex-start;gap:.85rem}
.contact-row svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--teal-text)}
.contact-row b{display:block;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);font-weight:700}
.contact-row a{font-weight:600;font-size:1.08rem;text-decoration:none}
.contact-row span{font-size:1.02rem}
.hours{display:grid;gap:.4rem;font-size:1rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--border-hair);padding-bottom:.4rem}
.sms-note{font-size:.85rem;color:var(--text-soft);border-left:1px solid var(--accent);padding-left:.9rem;margin-top:1.2rem}

/* misc */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3.5vw,3.2rem);align-items:center}
.notfor{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.notfor-col{border-radius:var(--card-radius);padding:clamp(1.4rem,2.6vw,2rem);box-shadow:var(--shadow-1)}
.notfor-col.yes{background:var(--surface-raised);border:1px solid rgba(13,42,47,.22)}
.notfor-col.no{background:#F6EFE2;border:1px solid rgba(181,169,143,.6)}
.notfor-col ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.6rem}
.notfor-col li{display:flex;gap:.6rem;align-items:flex-start;font-size:.99rem}
.notfor-col li svg{width:20px;height:20px;flex:none;margin-top:2px}
.notfor-col.yes li svg{color:var(--teal-text)}
.notfor-col.no li svg{color:#8d7f5c}
.qr-block{display:flex;align-items:center;gap:1.4rem;background:var(--surface-raised);border-radius:var(--card-radius);padding:1.4rem;box-shadow:var(--shadow-1)}
.qr-block img{width:120px;height:120px;flex:none;border-radius:12px}
.qr-block p{margin:0;font-size:.95rem;color:var(--text-soft)}
.qr-block b{display:block;font-size:1.04rem;color:var(--text)}

/* 404 */
.err{min-height:70svh;display:grid;place-items:center;text-align:center;padding-block:8rem 4rem}

/* print, contact + checklist */
@media print{
  .hdr,.mcta,.drawer,.foot-social,.btn,.vsec-media video{display:none !important}
  body{background:#fff;color:#000}
  .sec{padding-block:1.2rem}
  a[href^="tel"],a[href^="mailto"]{color:#000;text-decoration:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hdr-tel span{display:none}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .serve-card{grid-column:span 6}
  .posts{grid-template-columns:1fr 1fr}
  .journey-steps{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .foot-grid{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);row-gap:2.2rem}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero-grid,.phero-grid,.two-col,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:0;padding-top:120px}
  .hero-media{min-height:0;margin-top:.5rem}
  .arch{height:min(52vh,440px)}
  .phero-fig{order:-1}
  .phero-fig,.phero-fig--arch{aspect-ratio:16/10;border-radius:20px}
  .rooms .frame--tall{grid-column:span 6;aspect-ratio:3/4}
  .rooms .frame--wide{grid-column:span 12;aspect-ratio:16/10}
  .pay-grid,.cost{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .notfor{grid-template-columns:1fr}
  .serve-figs{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .mcta{display:grid}
  .foot{padding-bottom:calc(76px + .5rem)}
}
@media (max-width:640px){
  .hdr .wrap{height:76px}
  .brand-img{width:176px}
  .stats{grid-template-columns:1fr 1fr;gap:.8rem}
  .stat{padding:1.2rem 1rem}
  .svc-grid,.pay-grid,.cost,.posts{grid-template-columns:1fr}
  .serve-card{grid-column:span 12}
  .journey-steps{grid-template-columns:1fr;row-gap:2.2rem}
  .jstep{padding-top:0;padding-left:4.2rem;min-height:56px}
  .jstep-node{top:-2px}
  .rooms .frame--tall{grid-column:span 12;aspect-ratio:4/5}
  .foot-grid{grid-template-columns:1fr}
  .actions{width:100%}
  .actions .btn{width:100%}
  .serve-figs{grid-template-columns:1fr}
}

/* ---------- tap target floor ---------- */
.foot ul a{display:inline-block;padding-block:.62rem}
.foot .contact-l a{padding-block:.5rem}
main p a,main li a,.jstep a,.sms-note a,.links-id a{padding-block:.34rem}

/* ---------- dark-section text overrides ----------
   .svc p and friends are declared after .sec--dark p at equal specificity, so on a
   dark section they were resolving to the light-background body color. */
.sec--dark .svc p,.sec--dark .card p,.sec--dark .jstep p,.sec--dark .cost-item p,
.sec--dark .serve-card p,.sec--dark .post-card p,.sec--dark .stat span{color:var(--text-soft-on-dark)}
.sec--dark .svc h3,.sec--dark .card h3,.sec--dark .jstep h3,.sec--dark .cost-item h3{color:var(--text-on-dark)}
.sec--dark .jstep-k{color:var(--accent-on-dark)}

/* screen-reader-only, 1x1 so it is never sampled as visible text */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* hero media that carries video on an interior page */
.phero-fig video{width:100%;height:100%;object-fit:cover;object-position:50% 42%}

/* ---------- light surfaces nested inside a dark section ----------
   A component that paints its own light background must reassert dark text, or it
   inherits the section's light-on-dark color and becomes light text on a light card. */
.sec--dark .notfor-col,.sec--dark .notfor-col h3,.sec--dark .notfor-col p,
.sec--dark .notfor-col li,.sec--dark .notfor-col li span,
.sec--dark .stat,.sec--dark .stat span,.sec--dark .pay,.sec--dark .pay span,
.sec--dark .qr-block,.sec--dark .qr-block p,
.sec--dark .contact-card,.sec--dark .post-card,.sec--dark .post-card p,
.sec--dark .fact-tag,.sec--dark .compare-card,.sec--dark .compare-card li{color:var(--text)}
.sec--dark .notfor-col p,.sec--dark .notfor-col li span,.sec--dark .stat span,
.sec--dark .pay span,.sec--dark .post-card p,.sec--dark .qr-block p{color:var(--text-soft)}
.sec--dark .notfor-col.yes li svg,.sec--dark .fact-tag{color:var(--teal-text)}
.sec--dark .notfor-col.no li svg{color:#8d7f5c}
.sec--dark .stat b,.sec--dark .compare-card h3{color:var(--teal-text)}

/* contact card phone and email were 20px tall */
.contact-row a{display:inline-block;padding-block:.36rem}

/* At 320px the header could not hold logo, phone, CTA and burger at once.
   The drawer already pins the primary CTA and the phone number at the bottom. */
@media (max-width:600px){
  .hdr-cta .btn--sm{display:none}
}
@media (max-width:400px){
  .brand-img{width:150px}
  .hdr-tel{padding-inline:.2rem}
}

/* The email address is one unbreakable token and overflowed a 320px card. */
.contact-row a,.foot .contact-l a,.links-list small{overflow-wrap:anywhere}
.contact-row,.contact-rows,.contact-card{min-width:0}
@media (max-width:400px){
  .contact-card{padding:1.15rem}
}

/* Two-up card grid. An inline grid-template overrode every breakpoint below. */
.svc-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){ .svc-grid--2{grid-template-columns:1fr} }

/* links page imagery */
.links-banner{border-radius:20px;overflow:hidden;margin-bottom:1.6rem;aspect-ratio:16/9;background:#274E52}
.links-banner img{width:100%;height:100%;object-fit:cover}
.links-banner--room{margin:2rem 0 0;aspect-ratio:16/10}

.check-group h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem);margin-bottom:.8rem}

/* ---------- polish pass, from the screenshot review ---------- */

/* D. Header: nav labels and the phone number were wrapping onto two lines at 1440. */
.nav a,.hdr-tel .num{white-space:nowrap}
.hdr .wrap{gap:.75rem}
@media (max-width:1240px){ .nav{gap:.55rem} .nav a{font-size:15px} }

/* E. Footer: the contact column was too narrow, orphaning the last letter of the email.
   This override MUST stay inside a min-width query - unscoped it beat every
   responsive collapse below and pinned the footer at four columns on phones. */
@media (min-width:1081px){
  .foot-grid{grid-template-columns:minmax(0,3.6fr) minmax(0,2.1fr) minmax(0,2.5fr) minmax(0,3.8fr)}
}
.foot .contact-l a{font-size:.94rem}

/* A. Home: four stat columns beside an image left each one about 110px wide. */
.stats{grid-template-columns:repeat(2,1fr)}

/* B. The journey section is dark now, so its nodes and rule need the dark treatment. */
.sec--dark .jstep-node{background:#0F3339;border-color:rgba(231,192,90,.45)}
.sec--dark .jstep-node svg{color:var(--accent-on-dark)}

/* C. Veterans card carries a portrait photograph beside its copy. */
.card--photo{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:1.1rem;align-items:start}
.card--photo .frame{border-radius:14px}
@media (max-width:520px){ .card--photo{grid-template-columns:1fr} }

/* F. FAQ page: a companion column so the desktop layout is not one narrow list. */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.faq-aside{display:grid;gap:1.2rem;position:sticky;top:118px}
.faq-aside .card{display:grid;gap:.2rem}
.faq-aside .btn{width:100%}
@media (max-width:900px){
  .faq-wrap{grid-template-columns:1fr}
  .faq-aside{position:static}
}

/* ---------- signature line, corrected placement ----------
   The band now sits on the node row instead of stretching over the whole section,
   where it cut straight through the step headings. */
.journey-steps{position:relative}
.journey-line{position:absolute;top:0;left:0;right:0;height:52px;overflow:hidden;z-index:0}
.journey-line svg{width:100%;height:100%;display:block}
.jstep{z-index:1}
.jstep-node{z-index:2}
@media (max-width:640px){
  /* Vertical variant: the pulse runs down the rail of nodes instead of across. */
  .journey-line{display:none}
  /* The rail is drawn per step, so it stops at the last node instead of running
     on past it to the bottom of the last step's paragraph. */
  .jstep::before{
    content:"";position:absolute;left:25px;top:26px;bottom:calc(-2.2rem - 26px);width:2px;z-index:0;
    background:linear-gradient(180deg,#E7C05A 0%,#B88923 100%);opacity:.55;
  }
  .jstep:last-child::before{content:none}
}

/* ================= polish round: headline pop, footer icons, motion ================= */

/* --- the keyword pop --------------------------------------------------------
   One word per headline carries the brand gold. The color stays an OPAQUE token
   so it passes the contrast gate. The rule under the word is a real underline
   with skip-ink, not a drawn box: a background rule sat at a fixed offset and
   struck straight through the descenders of words like "pay" and "community",
   and an absolutely positioned ::after stretched from the first line fragment to
   the block edge whenever a headline wrapped. The glow sweep stays a background
   layer with box-decoration-break so it follows each fragment. */
.pop{
  color:#966D0E;                 /* 4.45:1 ivory, 3.74:1 on the darkest sand ground */
  text-decoration:underline;
  text-decoration-color:#C99A2E;
  text-decoration-thickness:.05em;
  text-underline-offset:.28em;   /* clears the descenders, so the rule stays whole */
  text-decoration-skip-ink:none;
  background-image:linear-gradient(100deg,
      rgba(231,192,90,0) 34%,
      rgba(231,192,90,.28) 44%,
      rgba(240,213,131,.58) 50%,
      rgba(231,192,90,.28) 56%,
      rgba(231,192,90,0) 66%);
  background-repeat:no-repeat;
  background-position:185% 0;
  background-size:260% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.sec--dark .pop,.vsec .pop,.links-page .pop,.foot .pop{
  color:#E7C05A;
  text-decoration-color:#E7C05A;
  background-image:linear-gradient(100deg,
      rgba(231,192,90,0) 34%,
      rgba(231,192,90,.24) 44%,
      rgba(240,213,131,.46) 50%,
      rgba(231,192,90,.24) 56%,
      rgba(231,192,90,0) 66%);
}
.js .pop{text-decoration-color:transparent;transition:text-decoration-color .7s ease .25s}
.js .pop[data-lit]{text-decoration-color:#C99A2E}
.js .sec--dark .pop[data-lit],.js .vsec .pop[data-lit],.js .links-page .pop[data-lit],.js .foot .pop[data-lit]{text-decoration-color:#E7C05A}
.pop[data-lit]{animation:pop-glow 1.2s cubic-bezier(.32,.06,.24,1) 1}
@keyframes pop-glow{
  from{background-position:185% 0}
  to{background-position:-65% 0}
}
@media (prefers-reduced-motion:reduce){
  .pop[data-lit]{animation:none}
  .js .pop{text-decoration-color:#C99A2E;transition:none}
  .js .sec--dark .pop,.js .vsec .pop,.js .links-page .pop,.js .foot .pop{text-decoration-color:#E7C05A}
}

/* --- footer link icons ------------------------------------------------------ */
.foot .foot-nav a{display:inline-flex;align-items:flex-start;gap:.62rem;padding-block:.55rem}
.foot .foot-nav svg{margin-top:.15em}
.foot-nav svg{
  width:18px;height:18px;flex:none;color:var(--accent-on-dark);opacity:.75;
  transition:opacity .25s ease,transform .25s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .foot-nav a:hover svg{opacity:1;transform:translateX(2px)}
}
.foot-nav a:hover{text-decoration:none}
.foot-nav a:hover span{text-decoration:underline;text-underline-offset:3px}

/* --- scroll progress -------------------------------------------------------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;transform-origin:left;
  transform:scaleX(0);background:linear-gradient(90deg,#C99A2E,#E7C05A,#0F6673);
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.progress{display:none}}

/* --- richer reveals --------------------------------------------------------- */
.js [data-reveal]{transform:translateY(20px) scale(.995)}
.js [data-reveal][data-shown]{transform:none}
.js .sec-head [data-reveal]{transition-duration:.75s}

/* section heading rule that draws in */
.sec-head{position:relative}
.sec-head::after{
  content:"";display:block;width:76px;height:3px;border-radius:3px;margin-top:1.15rem;
  background:linear-gradient(90deg,var(--accent),rgba(201,154,46,.15));
  transform:scaleX(0);transform-origin:left;
}
.js .sec-head::after{transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s}
.sec-head[data-shown]::after,html:not(.js) .sec-head::after{transform:scaleX(1)}
.sec--dark .sec-head::after{background:linear-gradient(90deg,var(--accent-on-dark),rgba(231,192,90,.14))}

/* cards lift with a warmer shadow */
@media (hover:hover) and (pointer:fine){
  .card:hover,.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(21,42,46,.35),0 2px 6px rgba(21,42,46,.06)}
  .svc:hover .icon-plate{transform:translateY(-2px) rotate(-2deg)}
}
.icon-plate{transition:transform .3s cubic-bezier(.16,1,.3,1)}

/* hero media drifts slowly as you scroll */
.arch{will-change:transform}
@media (prefers-reduced-motion:reduce){.arch{will-change:auto;transform:none!important}}

/* nav gets a gold underline that grows from the center (transform only) */
.nav a::after{transform-origin:center}

/* header CTA gets a soft halo so it reads as the one primary action */
.hdr-cta .btn--sm{box-shadow:
  0 1px 0 rgba(255,255,255,.55) inset,
  0 -2px 0 rgba(104,72,8,.30) inset,
  0 0 0 1px rgba(120,84,10,.30),
  0 8px 22px -10px rgba(120,84,10,.7);}

/* sticky mobile CTA matches the new button language */
.mcta-apply{
  background:var(--btn-grad);color:var(--btn-text);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 0 rgba(104,72,8,.28) inset;
}

/* Grid and flex children default to min-content width, so one wide child (the QR
   block) was pushing a whole row past a 320px viewport. */
.hero-grid>*,.phero-grid>*,.two-col>*,.contact-grid>*,.faq-wrap>*{min-width:0}
.qr-block{flex-wrap:wrap}
.qr-block p{min-width:0;flex:1 1 12rem}
@media (max-width:420px){
  .btn{padding:0 1.3rem;font-size:.96rem;gap:.5rem}
  .btn svg{width:18px;height:18px}
  .qr-block{padding:1.1rem;gap:1rem}
  .qr-block img{width:96px;height:96px}
}

/* A long label (the FAQ reveal) may wrap rather than push the viewport. */
.btn--wrap{white-space:normal;text-align:center;line-height:1.28;min-height:52px;padding-block:.85rem}

/* ---------- who-we-serve: six equal cards ----------
   This was a two-column masonry where a single card carried a portrait, so the
   columns never balanced and the grid ended with a hole in the bottom right. */
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.5rem);align-items:stretch}
.who-grid .card{display:flex;flex-direction:column}
@media (max-width:1080px){.who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.who-grid{grid-template-columns:1fr}}

/* a closing sub-head that needs to read as a real heading, not a card title */
.h3-lead{font-size:clamp(1.5rem,1.25rem + .9vw,2.05rem);line-height:1.22;margin-bottom:.55rem}
.h3-lead::after{content:"";display:block;width:56px;height:3px;border-radius:3px;margin:.9rem 0 1.1rem;background:linear-gradient(90deg,var(--accent),rgba(201,154,46,.15))}

/* ---------- second audit pass ---------- */

/* Payment cards sat on different baselines because one description wrapped. */
.pay-grid{align-items:stretch}
.pay{height:100%}

/* Business hours squeezed into two columns at 390px. */
@media (max-width:430px){
  .hours div{display:grid;gap:.1rem;justify-content:start}
  .hours div span:last-child{color:var(--text-soft)}
}

/* The mobile step rail ran past the final node into empty space. */
@media (max-width:640px){
  .journey-steps{position:relative}
  .jstep:last-child::after{content:none}
}

/* The "show more questions" pill was 4px shorter than every other button. */
.faq-more .btn{min-height:56px}

/* Long-form pages: the column is centered rather than pinned left, so a 1440px
   window does not read as a half-empty page. */
.article,.check-group{margin-inline:auto}

/* 404 gets the brand mark so the page is not type on an empty field. */
.err-mark{
  display:block;width:78px;height:78px;margin:0 auto 1.6rem;border-radius:22px;
  background:linear-gradient(160deg,#F6EFDE 0%,#EFE3C8 100%);
  border:1px solid rgba(201,154,46,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 24px -14px rgba(21,42,46,.4);
}
.err-mark svg{width:40px;height:40px;margin:19px auto;color:var(--accent)}

/* ---------- audit fixes: paint, focus and tap targets ---------- */

/* The reveal engine started the first screen at opacity 0, which pushed the home
   page LCP from 212ms to 1140ms. Above the fold, elements paint immediately and
   animate on transform only. */
.js .hero [data-reveal],.js .phero [data-reveal],.js .err [data-reveal]{opacity:1}
.js .hero [data-reveal]:not([data-shown]),.js .phero [data-reveal]:not([data-shown]){transform:translateY(10px)}

/* The header phone link was a 25x37 tap target on a phone. */
.hdr-tel{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Footer and drawer links to a 44px floor. */
.foot ul a,.foot .contact-l a,.drawer a{min-height:44px;display:inline-flex;align-items:center}
.foot .foot-nav a{align-items:flex-start;padding-block:.62rem}


/* FAQ questions carry a heading level; the button keeps its own type scale. */
.faq-h{margin:0;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}

/* Form validation needs more than a red border. */
.field-err{margin:.35rem 0 0;font-size:.9rem;font-weight:600;color:#8C3F30;min-height:0}
.field-err:empty{display:none}

/* Without JavaScript, 21 of the 26 questions were unreachable, and printing the
   page produced five. Both now show every question. */
html:not(.js) .faq-i[data-more]{display:block}
html:not(.js) .faq-more{display:none}
@media print{
  .faq-i[data-more]{display:block !important}
  .faq-a{display:block !important}.faq-a-in{opacity:1 !important;transform:none !important}
  .faq-more{display:none}
}

/* The closing band's headline ran across a face, and the veil was much denser on
   the left than the right. */
.vsec-media video{object-position:72% 50%}