/* =========================================================================
   THE LEISURE ROOM CO. — brand stylesheet
   Palette: Navy #0F2337 · Taupe #A6907A · Stone #D8CFC4 · Ivory #F5F3EE
   Mobile-first. Breakpoints: 560px (large phone) · 768px (tablet) · 1024px (desktop)
   ========================================================================= */

/* ---------- 0. Fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#0F2337;
  --navy-deep:#0A1826;
  --navy-soft:#16324B;
  --taupe:#A6907A;
  --taupe-bright:#C0A98F;
  --stone:#D8CFC4;
  --ivory:#F5F3EE;
  --white:#FFFFFF;
  --ink:#1B2733;
  --muted:#5C6874;

  --font-display:"Playfair Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-ui:"Jost","Futura","Century Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --maxw:1200px;
  --gutter:20px;
  --radius:2px;
  --shadow-sm:0 2px 10px rgba(15,35,55,.08);
  --shadow-md:0 10px 40px rgba(15,35,55,.14);
  --shadow-lg:0 24px 70px rgba(10,24,38,.28);
  --header-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:768px){ :root{ --gutter:32px; --header-h:78px; } }
@media (min-width:1024px){ :root{ --gutter:40px; --header-h:92px; } }

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.nav-open{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,figcaption{ margin:0; }
hr{ border:0; border-top:1px solid rgba(15,35,55,.12); margin:0; }

::selection{ background:var(--taupe); color:#fff; }

:focus-visible{ outline:2px solid var(--taupe-bright); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:12px 20px; font-size:14px;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- 3. Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }
.section{ padding:64px 0; }
@media (min-width:768px){ .section{ padding:88px 0; } }
@media (min-width:1024px){ .section{ padding:110px 0; } }
.section--tight{ padding-top:44px; padding-bottom:44px; }
.section--ivory{ background:var(--ivory); }
.section--navy{ background:var(--navy); color:var(--stone); }
.section--navy h2,.section--navy h3{ color:#fff; }

/* ---------- 4. Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--navy);
}
h1.display{ font-size:clamp(2.1rem,7.2vw,4.2rem); }
h2.display{ font-size:clamp(1.75rem,4.6vw,2.9rem); }
h3.display{ font-size:clamp(1.3rem,3vw,1.7rem); }
.display em{ font-style:normal; color:var(--taupe); }
.on-dark .display,.section--navy .display,.hero .display{ color:#fff; }

.eyebrow{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; color:var(--taupe); margin-bottom:14px;
}
.lede{ font-size:1.03rem; color:var(--muted); max-width:62ch; }
.section--navy .lede,.on-dark .lede{ color:rgba(216,207,196,.85); }
@media (min-width:768px){ .lede{ font-size:1.12rem; } }

.section-head{ text-align:center; margin-bottom:40px; }
.section-head .lede{ margin:14px auto 0; }
@media (min-width:768px){ .section-head{ margin-bottom:56px; } }

.rule-title{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family:var(--font-ui); font-size:.78rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--navy); font-weight:500;
}
.rule-title::before,.rule-title::after{
  content:""; height:1px; width:clamp(28px,10vw,90px); background:var(--taupe); opacity:.65;
}
.section--navy .rule-title{ color:#fff; }

.prose p+p{ margin-top:1.1em; }
.prose p{ color:var(--muted); }
.section--navy .prose p{ color:rgba(216,207,196,.85); }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; min-height:48px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  border:1px solid transparent; border-radius:var(--radius);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--taupe); color:#fff; }
.btn--primary:hover{ background:#96806a; }
.btn--outline{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn--outline:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:#0a1826; }
.btn--dark-outline{ border-color:var(--navy); color:var(--navy); }
.btn--dark-outline:hover{ background:var(--navy); color:#fff; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- 6. Logo ---------- */
.logo{ display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.logo__frame{
  border:1px solid var(--taupe); padding:6px 12px 7px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.logo__the{ font-family:var(--font-display); font-size:.6rem; letter-spacing:.34em; color:var(--stone); text-indent:.34em; }
.logo__name{ font-family:var(--font-display); font-size:.98rem; letter-spacing:.09em; color:#fff; white-space:nowrap; font-weight:500; }
.logo__co{ font-family:var(--font-display); font-size:.58rem; letter-spacing:.3em; color:var(--stone); text-indent:.3em; }
.logo__tag{ font-size:.42rem; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe); margin-top:6px; text-indent:.24em; }
@media (min-width:768px){
  .logo__name{ font-size:1.14rem; }
  .logo__the{ font-size:.66rem; }
  .logo__tag{ font-size:.47rem; }
}
.logo--ink .logo__name{ color:var(--navy); }
.logo--ink .logo__the,.logo--ink .logo__co{ color:var(--taupe); }

/* ---------- 7. Header & navigation ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),height .35s var(--ease);
}
.site-header::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,24,38,.75),rgba(10,24,38,0));
  transition:opacity .35s var(--ease);
}
.site-header.is-solid{ background:var(--navy); box-shadow:0 2px 24px rgba(10,24,38,.35); }
.site-header.is-solid::after{ opacity:0; }
body.header-static .site-header{ background:var(--navy); }
body.header-static .site-header::after{ opacity:0; }

.nav{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
      display:flex; align-items:center; justify-content:space-between; gap:20px; }

.nav__links{ display:none; }
.nav__cta{ display:none; }

@media (min-width:1180px){
  .nav__links{ display:flex; align-items:center; gap:22px; }
  .nav__cta{ display:inline-flex; }
}
@media (min-width:1320px){ .nav__links{ gap:30px; } }

.nav__link{
  position:relative; font-size:.71rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.86); padding:8px 0; transition:color .2s var(--ease); white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--taupe);
  transition:width .3s var(--ease);
}
.nav__link:hover{ color:#fff; }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ width:100%; }
.nav__link[aria-current="page"]{ color:#fff; }

.has-drop{ position:relative; }
.has-drop>.nav__link::before{
  content:""; display:inline-block; width:5px; height:5px; margin-right:7px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.7;
}
.drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,10px);
  min-width:220px; background:var(--navy-deep); border:1px solid rgba(166,144,122,.3);
  padding:10px 0; opacity:0; visibility:hidden; transition:all .25s var(--ease);
  box-shadow:var(--shadow-lg);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.drop a{
  display:block; padding:9px 22px; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(216,207,196,.85); transition:all .2s var(--ease);
}
.drop a:hover{ color:#fff; background:rgba(166,144,122,.16); }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; background:none; border:0; margin-right:-10px;
}
.burger span{ display:block; height:1.5px; background:#fff; transition:transform .3s var(--ease),opacity .2s; }
.burger span:nth-child(2){ width:70%; margin-left:auto; }
body.nav-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (min-width:1180px){ .burger{ display:none; } }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--navy);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); transition:transform .4s var(--ease);
  visibility:hidden;
}
body.nav-open .drawer{ transform:translateX(0); visibility:visible; }
@media (min-width:1180px){ .drawer{ display:none; } }
.drawer a{ display:block; color:#fff; }
.drawer__link{
  font-family:var(--font-display); font-size:1.5rem; padding:13px 0;
  border-bottom:1px solid rgba(166,144,122,.2);
}
.drawer__sub{ padding:4px 0 10px; }
.drawer__sub a{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(216,207,196,.8); padding:9px 0 9px 16px; border-left:1px solid rgba(166,144,122,.35);
  margin-left:2px;
}
.drawer__foot{ margin-top:28px; display:grid; gap:12px; }
.drawer__contact{ margin-top:26px; font-size:.85rem; color:rgba(216,207,196,.8); display:grid; gap:8px; }
.drawer__contact a{ color:var(--stone); }

/* ---------- 8. Hero ---------- */
.hero{ position:relative; display:flex; align-items:flex-end; isolation:isolate; color:#fff;
       min-height:78svh; padding-top:calc(var(--header-h) + 40px); padding-bottom:52px; }
.hero--home{ min-height:88svh; }
.hero--page{ min-height:52svh; padding-bottom:44px; align-items:flex-end; }
@media (min-width:768px){
  .hero{ align-items:center; padding-bottom:60px; min-height:74svh; }
  .hero--home{ min-height:88svh; }
  .hero--page{ min-height:46svh; align-items:flex-end; }
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--navy-deep); }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:62% 56%; }
@media (min-width:768px){ .hero__media img{ object-position:center; } }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,24,38,.42) 0%,rgba(10,24,38,.5) 40%,rgba(10,24,38,.88) 100%);
}
@media (min-width:768px){
  .hero__media::after{
    background:linear-gradient(100deg,rgba(10,24,38,.88) 0%,rgba(10,24,38,.62) 46%,rgba(10,24,38,.2) 100%);
  }
}
.hero__inner{ max-width:640px; }
.hero .lede{ color:rgba(255,255,255,.86); margin-top:16px; }
.hero .btn-row{ margin-top:28px; }
.hero__breadcrumb{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(216,207,196,.7); margin-bottom:12px; }
.hero__breadcrumb a:hover{ color:#fff; }

.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  width:1px; height:44px; background:linear-gradient(180deg,rgba(255,255,255,0),var(--taupe)); display:none; }
@media (min-width:1024px){ .scroll-cue{ display:block; } }

/* ---------- 9. Trust strip ---------- */
.trust{ background:var(--ivory); border-bottom:1px solid rgba(15,35,55,.07); }
.trust__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 12px;
  padding:26px 0; text-align:center;
}
@media (min-width:768px){ .trust__grid{ grid-template-columns:repeat(4,1fr); gap:20px; padding:30px 0; } }
.trust__item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.trust__item svg{ width:24px; height:24px; stroke:var(--taupe); fill:none; stroke-width:1.4; }
.trust__item span{ font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); line-height:1.5; }

/* ---------- 10. Spaces grid ---------- */
.spaces{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px){ .spaces{ gap:14px; } }
@media (min-width:768px){ .spaces{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:1024px){ .spaces{ grid-template-columns:repeat(6,1fr); gap:14px; } }
.spaces--roomy{ grid-template-columns:repeat(1,1fr); gap:20px; }
@media (min-width:640px){ .spaces--roomy{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .spaces--roomy{ grid-template-columns:repeat(3,1fr); gap:26px; } }

.space-card{ display:block; background:var(--navy); overflow:hidden; box-shadow:var(--shadow-sm); }
.space-card__img{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.spaces--roomy .space-card__img{ aspect-ratio:4/3; }
.space-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.space-card:hover .space-card__img img{ transform:scale(1.07); }
.space-card__body{ padding:14px 10px 16px; text-align:center; }
.spaces--roomy .space-card__body{ padding:20px 18px 24px; text-align:left; }
.space-card__icon{ width:22px; height:22px; margin:0 auto 8px; stroke:var(--taupe); fill:none; stroke-width:1.3; }
.spaces--roomy .space-card__icon{ margin:0 0 10px; }
.space-card__name{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; line-height:1.5; }
.spaces--roomy .space-card__name{ font-family:var(--font-display); font-size:1.35rem; letter-spacing:0; text-transform:none; }
.space-card__meta{ display:block; margin-top:8px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
.space-card__desc{ margin-top:10px; font-size:.92rem; color:rgba(216,207,196,.8); line-height:1.65; }
.space-card__more{ display:inline-block; margin-top:14px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); border-bottom:1px solid rgba(166,144,122,.5); padding-bottom:3px; }
.space-card:hover .space-card__more{ color:#fff; border-color:#fff; }
@media (min-width:560px){ .space-card__name{ font-size:.7rem; } }

/* ---------- 11. Process ---------- */
.steps{ display:grid; gap:14px; counter-reset:step; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1024px){ .steps--5{ grid-template-columns:repeat(5,1fr); gap:16px; } }
.step{ position:relative; padding:26px 20px; text-align:center; border:1px solid rgba(166,144,122,.26); background:rgba(255,255,255,.02); }
.step__icon{ width:34px; height:34px; margin:0 auto 14px; stroke:var(--taupe); fill:none; stroke-width:1.2; }
.step__num{ font-family:var(--font-display); font-size:.9rem; color:var(--taupe); letter-spacing:.1em; }
.step__title{ margin-top:6px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; }
.step__text{ margin-top:10px; font-size:.88rem; line-height:1.65; color:rgba(216,207,196,.78); }

/* Journey (numbered vertical list) */
.journey{ display:grid; gap:0; counter-reset:j; }
.journey__row{
  display:grid; grid-template-columns:52px 1fr; gap:16px;
  padding:22px 0; border-bottom:1px solid rgba(15,35,55,.1);
}
@media (min-width:768px){ .journey__row{ grid-template-columns:90px 1fr 1.1fr; gap:26px; align-items:baseline; padding:26px 0; } }
.journey__num{ font-family:var(--font-display); font-size:1.6rem; color:var(--taupe); line-height:1; }
.journey__title{ font-family:var(--font-display); font-size:1.2rem; color:var(--navy); }
.journey__text{ font-size:.94rem; color:var(--muted); margin-top:6px; }
@media (min-width:768px){ .journey__text{ margin-top:0; } }

/* ---------- 12. Work / gallery ---------- */
.rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
       padding-bottom:8px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.rail::-webkit-scrollbar{ height:4px; }
.rail::-webkit-scrollbar-thumb{ background:rgba(166,144,122,.5); }
.rail>*{ flex:0 0 78%; scroll-snap-align:center; }
@media (min-width:640px){ .rail>*{ flex-basis:46%; } .rail{ gap:16px; } }
@media (min-width:1024px){ .rail>*{ flex-basis:calc(25% - 12px); } }
.rail-wrap{ position:relative; }
.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(15,35,55,.2);
  background:rgba(255,255,255,.92); display:none; align-items:center; justify-content:center;
  transition:all .25s var(--ease);
}
.rail-btn svg{ width:14px; height:14px; stroke:var(--navy); fill:none; stroke-width:1.6; }
.rail-btn:hover{ background:var(--navy); border-color:var(--navy); }
.rail-btn:hover svg{ stroke:#fff; }
.rail-btn--prev{ left:-8px; }
.rail-btn--next{ right:-8px; }
@media (min-width:1024px){ .rail-btn{ display:flex; } }

.shot{ position:relative; display:block; overflow:hidden; background:var(--navy); }
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }
.shot:hover img{ transform:scale(1.06); }
.shot__cap{
  position:absolute; inset:auto 0 0 0; padding:34px 16px 14px; color:#fff;
  background:linear-gradient(180deg,rgba(10,24,38,0),rgba(10,24,38,.9));
}
.shot__cap strong{ display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:500; }
.shot__cap span{ font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); }

.gallery{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .gallery{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1024px){ .gallery{ grid-template-columns:repeat(3,1fr); gap:22px; } }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:32px; }
.filter{
  padding:9px 16px; min-height:40px; background:none; border:1px solid rgba(15,35,55,.18);
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:all .25s var(--ease);
}
.filter:hover{ border-color:var(--navy); color:var(--navy); }
.filter.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---------- 13. Feature list / why ---------- */
.why{ display:grid; gap:34px; }
@media (min-width:1024px){ .why{ grid-template-columns:1fr 1fr; gap:60px; align-items:center; } }
.features{ display:grid; gap:22px; }
.feature{ display:grid; grid-template-columns:36px 1fr; gap:16px; align-items:start; }
.feature svg{ width:28px; height:28px; stroke:var(--taupe); fill:none; stroke-width:1.2; }
.feature__title{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; }
.feature__text{ font-size:.92rem; color:rgba(216,207,196,.78); margin-top:6px; line-height:1.65; }
.on-light .feature__title{ color:var(--navy); }
.on-light .feature__text{ color:var(--muted); }

.pillars{ display:grid; gap:16px; }
@media (min-width:640px){ .pillars{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:1024px){ .pillars{ grid-template-columns:repeat(4,1fr); } }
.pillar{ padding:28px 22px; background:var(--white); border:1px solid rgba(15,35,55,.09); box-shadow:var(--shadow-sm); }
.pillar svg{ width:30px; height:30px; stroke:var(--taupe); fill:none; stroke-width:1.2; margin-bottom:14px; }
.pillar h3{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); }
.pillar p{ margin-top:10px; font-size:.92rem; color:var(--muted); line-height:1.7; }

/* ---------- 14. Panels, quotes, tables ---------- */
.panel{ background:var(--ivory); border-left:2px solid var(--taupe); padding:24px 22px; }
.section--navy .panel{ background:rgba(255,255,255,.05); }
.panel__label{ font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin-bottom:8px; }
.panel p{ font-size:.98rem; color:var(--muted); }
.section--navy .panel p{ color:rgba(216,207,196,.88); }

.pull{ font-family:var(--font-display); font-size:clamp(1.3rem,3.4vw,2rem); line-height:1.4; color:var(--navy); font-style:italic; }
.section--navy .pull{ color:#fff; }

.tiers{ display:grid; gap:18px; }
@media (min-width:768px){ .tiers{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.tier{ padding:32px 26px; border:1px solid rgba(15,35,55,.12); background:#fff; display:flex; flex-direction:column; }
.tier--featured{ background:var(--navy); border-color:var(--navy); color:var(--stone); position:relative; }
.tier--featured .tier__name,.tier--featured .tier__price{ color:#fff; }
.tier--featured .tier__text,.tier--featured li{ color:rgba(216,207,196,.85); }
.tier__flag{ position:absolute; top:0; right:0; background:var(--taupe); color:#fff; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; padding:6px 12px; }
.tier__name{ font-family:var(--font-display); font-size:1.5rem; color:var(--navy); }
.tier__price{ margin-top:6px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
.tier__text{ margin-top:14px; font-size:.94rem; color:var(--muted); line-height:1.7; }
.tier ul{ margin-top:18px; display:grid; gap:9px; }
.tier li{ position:relative; padding-left:22px; font-size:.9rem; color:var(--muted); line-height:1.6; }
.tier li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-left:1px solid var(--taupe); border-bottom:1px solid var(--taupe); transform:rotate(-45deg); }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid rgba(15,35,55,.1); }
table{ width:100%; border-collapse:collapse; min-width:460px; }
th,td{ text-align:left; padding:14px 16px; font-size:.92rem; border-bottom:1px solid rgba(15,35,55,.08); }
th{ background:var(--navy); color:#fff; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; }
td{ color:var(--muted); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:nth-child(even) td{ background:rgba(245,243,238,.6); }

/* Included list */
.ticks{ display:grid; gap:12px; }
@media (min-width:640px){ .ticks{ grid-template-columns:repeat(2,1fr); gap:12px 28px; } }
.ticks li{ position:relative; padding-left:28px; font-size:.95rem; color:var(--muted); line-height:1.6; }
.ticks li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:6px;
  border-left:1.5px solid var(--taupe); border-bottom:1.5px solid var(--taupe); transform:rotate(-45deg); }
.section--navy .ticks li{ color:rgba(216,207,196,.85); }

/* ---------- 15. Split media ---------- */
.split{ display:grid; gap:28px; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:60px; } .split--wide-left{ grid-template-columns:1.15fr 1fr; } }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow-md); }
@media (min-width:900px){ .split--rev .split__media{ order:2; } }

/* ---------- 16. CTA band ---------- */
.cta-band{ background:var(--taupe); color:#fff; }
.cta-band__inner{ display:grid; gap:20px; padding:44px 0; align-items:center; text-align:center; }
@media (min-width:900px){ .cta-band__inner{ grid-template-columns:1fr auto; text-align:left; padding:52px 0; gap:36px; } }
.cta-band h2{ font-family:var(--font-display); font-size:clamp(1.5rem,3.6vw,2.2rem); color:#fff; line-height:1.2; }
.cta-band p{ margin-top:8px; color:rgba(255,255,255,.9); font-size:1rem; }
.cta-band .btn-row{ justify-content:center; }
@media (min-width:900px){ .cta-band .btn-row{ justify-content:flex-end; } }

/* ---------- 17. Accordion ---------- */
.acc{ border-top:1px solid rgba(15,35,55,.12); }
.acc__item{ border-bottom:1px solid rgba(15,35,55,.12); }
.acc__btn{
  width:100%; background:none; border:0; text-align:left; padding:20px 44px 20px 0;
  position:relative; font-family:var(--font-display); font-size:1.08rem; color:var(--navy); line-height:1.4;
}
.acc__btn::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--taupe); border-bottom:1.5px solid var(--taupe);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.acc__btn[aria-expanded="true"]::after{ transform:translateY(-30%) rotate(-135deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.acc__panel>div{ overflow:hidden; }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel p{ padding:0 0 22px; color:var(--muted); font-size:.96rem; }

/* ---------- 18. Forms ---------- */
.form-card{ background:#fff; padding:28px 22px; box-shadow:var(--shadow-md); border-top:2px solid var(--taupe); }
@media (min-width:768px){ .form-card{ padding:40px 38px; } }
.form-grid{ display:grid; gap:18px; }
@media (min-width:640px){ .form-grid--2{ grid-template-columns:1fr 1fr; } .form-grid .full{ grid-column:1/-1; } }
.field{ display:grid; gap:7px; }
.field label{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); }
.field .req{ color:var(--taupe); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:16px; padding:13px 14px; min-height:50px;
  border:1px solid rgba(15,35,55,.2); border-radius:var(--radius); background:#fff; color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F2337' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px; padding-right:38px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--taupe); box-shadow:0 0 0 3px rgba(166,144,122,.18); }
.field .err{ font-size:.78rem; color:#b3261e; display:none; letter-spacing:.02em; text-transform:none; }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:#b3261e; }
.field.is-invalid .err{ display:block; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:var(--muted); line-height:1.6; }
.check input{ width:19px; height:19px; min-height:0; margin-top:2px; flex:0 0 auto; accent-color:var(--taupe); }
.form-note{ font-size:.8rem; color:var(--muted); margin-top:14px; line-height:1.6; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ display:none; padding:16px 18px; margin-bottom:20px; font-size:.92rem; border-left:2px solid; }
.form-status.is-error{ display:block; background:#fdecea; border-color:#b3261e; color:#8c1d18; }
.form-success{ display:none; text-align:center; padding:20px 0; }
.form-success.is-visible{ display:block; }
.form-success svg{ width:52px; height:52px; stroke:var(--taupe); fill:none; stroke-width:1.2; margin:0 auto 18px; }

/* Contact info cards */
.contact-info{ display:grid; gap:16px; }
.info-card{ display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start;
  padding:20px 18px; background:rgba(255,255,255,.05); border:1px solid rgba(166,144,122,.25); }
.info-card svg{ width:24px; height:24px; stroke:var(--taupe); fill:none; stroke-width:1.3; }
.info-card h3{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.info-card p,.info-card a{ font-size:.98rem; color:#fff; margin-top:5px; display:block; line-height:1.6; word-break:break-word; }
.info-card a:hover{ color:var(--taupe-bright); }

/* ---------- 19. Footer ---------- */
.site-footer{ background:var(--navy-deep); color:rgba(216,207,196,.75); padding:52px 0 0; }
.footer-grid{ display:grid; gap:32px; }
@media (min-width:640px){ .footer-grid{ grid-template-columns:repeat(2,1fr); gap:34px; } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1.4fr; gap:44px; } }
.footer-brand .logo{ align-items:flex-start; }
.footer-brand p{ margin-top:18px; font-size:.9rem; line-height:1.75; max-width:34ch; }
.footer h4{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.footer-links{ display:grid; gap:10px; }
.footer-links a{ font-size:.9rem; transition:color .2s var(--ease); }
.footer-links a:hover{ color:#fff; }
.footer-contact{ display:grid; gap:12px; font-size:.9rem; }
.footer-contact div{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; }
.footer-contact svg{ width:16px; height:16px; stroke:var(--taupe); fill:none; stroke-width:1.4; margin-top:4px; }
.footer-contact a:hover{ color:#fff; }
.socials{ display:flex; gap:12px; margin-top:20px; }
.socials a{ width:38px; height:38px; border:1px solid rgba(166,144,122,.4); display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease); }
.socials svg{ width:16px; height:16px; fill:var(--stone); }
.socials a:hover{ background:var(--taupe); border-color:var(--taupe); }
.socials a:hover svg{ fill:#fff; }
.footer-bottom{ margin-top:44px; border-top:1px solid rgba(166,144,122,.2); padding:20px 0 28px;
  display:grid; gap:8px; font-size:.76rem; text-align:center; }
@media (min-width:768px){ .footer-bottom{ grid-template-columns:1fr auto; text-align:left; align-items:center; } }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
@media (min-width:768px){ .footer-legal{ justify-content:flex-end; } }

/* ---------- 20. Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover,.space-card:hover .space-card__img img,.shot:hover img{ transform:none; }
}

/* ---------- 21. Misc ---------- */
.center{ text-align:center; }
.mt-s{ margin-top:16px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:44px; }
.stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:32px; }
@media (min-width:768px){ .stat-row{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:center; }
.stat strong{ display:block; font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.3rem); color:var(--taupe); line-height:1; }
.stat span{ display:block; margin-top:8px; font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(216,207,196,.8); }
.on-light .stat span{ color:var(--muted); }
.areas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.areas span{ padding:7px 14px; border:1px solid rgba(166,144,122,.4); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); }
.on-light .areas span{ color:var(--navy); border-color:rgba(15,35,55,.16); }

/* ---------- 22. Article / guide typography ---------- */
.article{ max-width:70ch; }
.article h2.display{ font-size:clamp(1.35rem,3.2vw,1.9rem); margin-top:2.2em; margin-bottom:.55em; text-wrap:balance; }
.article h3.display{ font-size:clamp(1.08rem,2.2vw,1.28rem); margin-top:1.7em; margin-bottom:.45em; color:var(--navy); }
.article h2.display:first-child{ margin-top:0; }
.article p{ color:var(--muted); margin-bottom:1.05em; }
.article p strong{ color:var(--navy); font-weight:500; }
.article em{ font-style:italic; }
.article .panel{ margin:1.8em 0; }
.article .panel p{ margin-bottom:0; }
.article .table-wrap{ margin:1.6em 0; }
.article .ticks{ margin:1.2em 0 1.8em; }
.article .ticks li{ margin-bottom:.2em; }
.article .form-note{ margin-top:-.6em; }
.article table{ min-width:380px; }

/* long titles inside roomy cards (guides, areas) */
.spaces--roomy .space-card__name{ text-wrap:balance; line-height:1.25; }