/* ═══════════════════════════════════════════════════════════
   GILDED GATHERINGS
   bone · ink · taupe · clay · sage · gold
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#03090d;
  --ink-70:rgba(3,9,13,.66);
  --ink-45:rgba(3,9,13,.45);
  --bone:#f8f2e5;
  --bone-70:rgba(248,242,229,.72);
  --bone-45:rgba(248,242,229,.46);
  --taupe:#b3aea5;
  --taupe-lt:#c6c2ba;
  --clay:#b66955;          /* brand clay — backgrounds */
  --clay-dk:#a05a48;
  --clay-ink:#8f4c3b;      /* darker sibling for clay text on bone (contrast) */
  --sage:#779580;
  --sage-dk:#4f6857;       /* founders panel — deep enough for cream body copy */
  --gold:#b08f57;

  --display:'Outfit',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.9,.28,1);

  --pad:clamp(20px,5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--clay);color:var(--bone)}

/* ─────────────── type ─────────────── */
.eyebrow{
  font-family:var(--display);font-weight:500;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);opacity:.72;
}
.eyebrow-bone{color:var(--bone);opacity:.8}
.eyebrow-clay{color:var(--clay-ink);opacity:1}

.display{
  font-family:var(--display);font-weight:300;
  text-transform:uppercase;letter-spacing:.022em;
  line-height:1.04;
}
.d-xl{font-size:clamp(2.5rem,6.6vw,5.6rem)}
.d-lg{font-size:clamp(2.1rem,4.9vw,4.1rem)}
.d-md{font-size:clamp(1.7rem,3.3vw,2.7rem)}
.d-sm{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.05em}

.lede{font-size:1.06rem;line-height:1.66;max-width:46ch}
.small{font-size:.95rem;line-height:1.62;max-width:42ch;opacity:.86}

/* ─────────────── links & buttons ─────────────── */
.arrow-link{
  display:inline-flex;align-items:center;gap:.85rem;
  font-family:var(--display);font-weight:500;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;
  transition:opacity .4s var(--ease);
}
.arrow-link .circ{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 30px;
  background:var(--ink);color:var(--bone);
  transition:transform .5s var(--ease),background .4s;
}
.arrow-link .circ svg{width:12px;height:12px;transition:transform .5s var(--ease)}
.arrow-link:hover .circ{transform:scale(1.12)}
.arrow-link:hover .circ svg{transform:translateX(3px)}
.arrow-link-bone{color:var(--bone)}
.arrow-link-bone .circ{background:var(--bone);color:var(--ink)}

.pill{
  display:inline-block;
  font-family:var(--display);font-weight:500;font-size:.7rem;
  letter-spacing:.17em;text-transform:uppercase;
  padding:1.05em 2em;border:1px solid currentColor;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.pill-ink{color:var(--ink)}
.pill-ink:hover{background:var(--ink);color:var(--bone)}
.pill-bone{color:var(--bone)}
.pill-bone:hover{background:var(--bone);color:var(--ink)}
.pill-solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pill-solid:hover{background:var(--clay);border-color:var(--clay)}

/* ─────────────── nav (floating capsule, always blurred) ─────────────── */
.nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;
  width:min(760px,calc(100% - 32px));height:66px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,9,13,.20);
  backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border-radius:6px;overflow:hidden;
  transition:background .5s var(--ease);
}
.nav.solid{background:rgba(3,9,13,.34)}
.nav-quote{
  align-self:stretch;display:flex;align-items:center;
  padding:0 1.5rem;border:0;border-right:1px solid rgba(248,242,229,.18);
  font-size:.62rem;letter-spacing:.15em;white-space:nowrap;color:var(--bone);
}
.nav-quote:hover{background:rgba(248,242,229,.12);color:var(--bone)}
.nav-quote,.nav-toggle span{text-shadow:0 1px 4px rgba(3,9,13,.5)}
.nav-toggle span{box-shadow:0 1px 4px rgba(3,9,13,.45)}
.nav-wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center}
.nav-wordmark img{height:42px;width:auto;opacity:.97;filter:drop-shadow(0 1px 5px rgba(3,9,13,.55))}
.nav-toggle{
  display:flex;flex-direction:column;gap:6px;
  padding:0 1.4rem;height:100%;justify-content:center;position:relative;z-index:70;
}
.nav-toggle span{display:block;width:26px;height:1px;background:var(--bone);transition:transform .5s var(--ease),opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* drop-down menu panel */
.menu{
  position:fixed;top:88px;left:50%;transform:translateX(-50%);z-index:55;
  width:min(760px,calc(100% - 32px));
  background:var(--bone);color:var(--ink);border-radius:6px;
  box-shadow:0 30px 70px -30px rgba(3,9,13,.45);
  padding:2.2rem clamp(1.6rem,3vw,2.6rem) 2rem;
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .7s var(--ease);
}
.menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu-links{display:flex;flex-direction:column}
.menu-links a{
  font-family:var(--display);font-weight:400;font-size:.94rem;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.72rem 0;border-bottom:1px solid rgba(3,9,13,.12);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.menu.open .menu-links a{opacity:1;transform:none}
.menu-links a:hover{color:var(--clay-ink)}
.menu-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:1.6rem;
  opacity:0;transition:opacity .6s .35s var(--ease);
}
.menu.open .menu-foot{opacity:1}
.menu-foot .ext{
  font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
}
.menu-foot .ext:hover{color:var(--clay-ink)}
.menu-scrim{
  position:fixed;inset:0;z-index:54;background:rgba(3,9,13,.4);
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease);
}
.menu-scrim.on{opacity:1;pointer-events:auto}

/* ─────────────── hero ─────────────── */
.hero{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);z-index:0}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(3,9,13,.5) 0%,rgba(3,9,13,.12) 34%,rgba(3,9,13,.22) 62%,rgba(3,9,13,.72) 100%);
}
.hero-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 var(--pad);color:var(--bone);text-align:center;
}
.hero h1{max-width:15ch;margin:0 auto}

/* page hero (subpages) — matched to Ballena's block-hero-simple:
   copy sits at the BOTTOM, page name 14px sitting 16px above a tight 0.9 headline */
.phero{height:100svh;min-height:600px}
.phero .hero-media::after{
  background:linear-gradient(to bottom,
    rgba(3,9,13,.34) 0%,
    rgba(3,9,13,.05) 26%,
    rgba(3,9,13,.08) 50%,
    rgba(3,9,13,.40) 78%,
    rgba(3,9,13,.72) 100%);
}
.phero .hero-inner{
  justify-content:flex-end;text-align:center;gap:16px;
  padding-bottom:clamp(3rem,10vh,8.5rem);
}
.phero .eyebrow{
  font-size:.875rem;letter-spacing:.044em;line-height:1;opacity:1;
  margin:0;text-shadow:0 1px 10px rgba(3,9,13,.7);
}
.phero h1{
  font-size:clamp(2.2rem,3.5vw,3.6rem);
  line-height:.9;letter-spacing:.025em;
  max-width:768px;margin:0 auto;
  text-shadow:0 2px 26px rgba(3,9,13,.5);
}

/* intro below a subpage hero */
.intro{background:var(--bone);padding:clamp(4.5rem,11vh,8rem) var(--pad)}
.intro-grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:minmax(140px,1fr) 3.1fr;gap:clamp(1.5rem,5vw,4rem);
}
.intro-grid h2{max-width:20ch}
.intro-body{margin-top:clamp(2rem,4vw,3rem);max-width:52ch}
.intro-body p{font-size:1.05rem;line-height:1.7;color:var(--ink-70)}

/* ─────────────── word reveal ─────────────── */
.rv{display:inline-block;overflow:hidden;vertical-align:top}
.rv > span{display:inline-block;will-change:transform}
/* per-line mask reveal */
.ln{display:block;overflow:hidden}
.ln > span{display:block;will-change:transform}
.split-word{display:inline-block}

/* sections that slide over sticky media */
.feature,.split,.services,.strip,.cta,.intro,.founders,.qwrap,.footer{position:relative;z-index:1}

/* ─────────────── split panel ─────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:88vh}
.split-media{position:relative;overflow:hidden;background:var(--ink)}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* copy sits high and tight to the photo edge, as Ballena's
   block-split-content does (34px top / 22px sides / 64px bottom) */
.split-panel{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(1.7rem,2.5vw,2.2rem) clamp(1.1rem,1.6vw,1.5rem) clamp(2.6rem,4.4vw,4rem);
}
.split-panel .eyebrow{font-size:.875rem;letter-spacing:.044em;line-height:1}
.panel-clay{background:var(--clay);color:var(--bone)}
.panel-clay .eyebrow{color:var(--bone);opacity:.82}
.panel-clay .small{opacity:1}
.panel-taupe{background:var(--taupe);color:var(--ink)}
.panel-ink{background:var(--ink);color:var(--bone)}
.panel-ink .eyebrow{color:var(--bone);opacity:.66}
.panel-bone{background:var(--bone);color:var(--ink)}
.split-panel h2{
  margin:clamp(1.3rem,2.1vw,30px) 0 0;
  font-size:clamp(2rem,3.5vw,3.6rem);line-height:.9;letter-spacing:.025em;
}
.split-panel .small{margin-top:auto;padding-top:3.2rem}
.split-panel .arrow-link{margin-top:1.5rem;align-self:flex-start}
.split-rev .split-media{order:2}

/* ─────────────── founders ───────────────
   the portrait is inset on a colour field rather than bled to the edge,
   so it reads as a placed object with a caption, not a bare slab. */
.founders{
  background:var(--sage-dk);color:var(--bone);
  padding:clamp(4rem,8vw,110px) var(--pad);
}
.founders-grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center;
}
.founders-figure{margin:0}
.founders-figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  box-shadow:0 40px 70px -40px rgba(3,9,13,.55);
}
.founders-figure figcaption{
  margin-top:1.15rem;display:flex;align-items:center;gap:.85rem;
  font-family:var(--display);font-weight:500;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);opacity:.88;
}
.founders-figure figcaption::before{
  content:"";flex:0 0 34px;height:1px;background:currentColor;opacity:.55;
}
.founders-body{max-width:46ch}
.founders-body .eyebrow{color:var(--bone);opacity:.82}
.founders-body h2{
  margin:clamp(1.1rem,2vw,1.6rem) 0 0;
  font-size:clamp(2.1rem,3.5vw,3.6rem);line-height:.9;letter-spacing:.025em;
}
.founders-body p{
  margin-top:clamp(1.5rem,2.6vw,2.2rem);
  font-size:1.02rem;line-height:1.74;color:rgba(248,242,229,.88);
}
.founders-body .arrow-link{margin-top:clamp(1.8rem,3vw,2.4rem)}

/* ─────────────── full-bleed band ─────────────── */
.band{position:sticky;top:0;height:78svh;min-height:420px;overflow:hidden;z-index:0}
.band img,.band video{width:100%;height:112%;object-fit:cover;position:absolute;top:-6%;left:0}
.band-quote{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 var(--pad);color:var(--bone);
  background:linear-gradient(to bottom,rgba(3,9,13,.34),rgba(3,9,13,.42));
}
.band-quote p{font-family:var(--display);font-weight:300;font-size:clamp(2rem,4.6vw,4rem);
  text-transform:uppercase;letter-spacing:.022em;line-height:1.06;max-width:18ch}

/* ─────────────── feature (calm editorial) ───────────────
   proportions taken from Ballena's block-content-intro:
   120px block padding, 0.56fr / 1fr columns at a 40px gutter,
   14px eyebrow, 0.9 line-height title, 56px title→body gap. */
.feature{padding:clamp(4.5rem,9vw,120px) var(--pad)}
.feature-taupe{background:var(--taupe)}
.feature-bone{background:var(--bone)}
.feature-ink{background:var(--ink);color:var(--bone)}
.feature-grid{
  display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,1fr);
  gap:clamp(1.4rem,2.6vw,40px);max-width:1500px;margin:0 auto;
}
.feature-grid > .eyebrow{font-size:.875rem;letter-spacing:.044em;line-height:1;padding-top:.4rem}
.feature-grid h2{
  max-width:16ch;font-size:clamp(2.1rem,3.5vw,3.6rem);
  line-height:.9;letter-spacing:.025em;
}
.feature-body{margin-top:clamp(1.9rem,3.6vw,56px);max-width:38ch}
.feature-body p{font-size:1.02rem;line-height:1.72}
.feature-body .arrow-link{margin-top:1.8rem}

/* ─────────────── large cards carousel ─────────────── */
.services{background:var(--bone);padding:clamp(4rem,9vh,7rem) 0 clamp(5rem,11vh,8rem)}
.services-head{
  max-width:1500px;margin:0 auto clamp(2.4rem,5vw,3.6rem);padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
}
.cards{
  display:flex;gap:1.15rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad) .5rem;scroll-padding-left:var(--pad);scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.cards::-webkit-scrollbar{display:none}
.card{
  flex:0 0 auto;scroll-snap-align:start;
  width:clamp(260px,32vw,552px);aspect-ratio:552/690;
  position:relative;border-radius:8px;overflow:hidden;background:var(--ink);
  display:block;container-type:inline-size;
}
.card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--ease);
}
.card:hover img{transform:scale(1.05)}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(3,9,13,.5) 0%,rgba(3,9,13,.1) 34%,rgba(3,9,13,.15) 55%,rgba(3,9,13,.72) 100%);
}
.card-in{
  position:absolute;inset:0;z-index:2;color:var(--bone);text-align:center;
}
/* offsets mirror the reference exactly, expressed against card width
   (552x690 there): label 20px from top, caption 63px from bottom,
   link 22px from bottom. */
.card-in h3{
  position:absolute;top:3.62cqw;left:4cqw;right:4cqw;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,4.35cqw,24px);
  letter-spacing:.025em;line-height:1;
}
.card-foot p{
  position:absolute;bottom:11.41cqw;left:6cqw;right:6cqw;
  font-size:clamp(13px,3.26cqw,18px);
  font-weight:500;line-height:1.2;margin:0;
}
.card-foot .arrow-link{
  position:absolute;bottom:3.99cqw;left:50%;transform:translateX(-50%);
  font-size:clamp(10px,2.54cqw,14px);letter-spacing:.06em;white-space:nowrap;
}
.card-foot .arrow-link .circ{width:2.1em;height:2.1em;flex-basis:2.1em}
.card-foot .arrow-link .circ svg{width:.85em;height:.85em}

.cards-nav{
  max-width:1500px;margin:clamp(2rem,4vw,2.8rem) auto 0;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:center;gap:1.6rem;
}
.cards-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(3,9,13,.28);
  display:grid;place-items:center;transition:all .35s var(--ease);
}
.cards-btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.cards-btn svg{width:15px;height:15px}
.cards-bar{position:relative;width:min(240px,38vw);height:1px;background:rgba(3,9,13,.2)}
.cards-bar i{position:absolute;left:0;top:0;height:100%;background:var(--ink);width:35%;transition:all .35s var(--ease)}

/* ─────────────── gallery ─────────────── */
.strip{background:var(--bone);padding:clamp(4.5rem,10vh,8rem) var(--pad) clamp(5.5rem,12vh,9rem)}
.strip-head{max-width:1500px;margin:0 auto clamp(2.6rem,5vw,3.8rem)}
.gal{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.7rem,1.5vw,1.25rem);
}
.gal figure{margin:0;overflow:hidden;background:var(--taupe)}
.gal img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease);
}
.gal figure:hover img{transform:scale(1.045)}

/* ─────────────── detail list (packages/inclusions) ─────────────── */
.rows{max-width:1180px;margin:0 auto}
.row{
  display:grid;grid-template-columns:minmax(120px,.55fr) 2fr auto;gap:clamp(1rem,3vw,2.6rem);
  align-items:baseline;padding:1.65rem 0;border-top:1px solid rgba(3,9,13,.16);
}
.row:last-child{border-bottom:1px solid rgba(3,9,13,.16)}
.row-n{font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;opacity:.5}
.row h3{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.045em;font-size:clamp(1.15rem,2vw,1.5rem)}
.row p{font-size:.92rem;color:var(--ink-70);margin-top:.45rem;max-width:52ch}
.row .price{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,2vw,1.6rem);white-space:nowrap}
.rows-bone .row{border-color:rgba(248,242,229,.2)}
.rows-bone .row p{color:var(--bone-70)}

/* ─────────────── cta band ─────────────── */
.cta{background:var(--clay);color:var(--bone);padding:clamp(4.5rem,11vh,8rem) var(--pad);text-align:center}
.cta h2{max-width:18ch;margin:1.2rem auto 2.4rem}
.cta .eyebrow{color:var(--bone);opacity:.82}

/* ─────────────── footer ─────────────── */
.footer{background:var(--bone);color:var(--ink);padding:clamp(4rem,8vh,6rem) var(--pad) 1.6rem}
.foot-cols{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.fcol{padding:0 clamp(1.4rem,3vw,3rem);border-left:1px solid rgba(3,9,13,.16)}
.fcol:first-child{padding-left:0;border-left:0}
.foot-thumb{width:min(30%,200px);aspect-ratio:4/5;object-fit:cover;margin-bottom:1.4rem}
.fcol p{font-size:.94rem;color:var(--ink-70);max-width:34ch;line-height:1.6}
.fcol h4{
  font-family:var(--display);font-weight:500;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:1.3rem;
}
.fcol li{margin-bottom:.6rem}
.fcol li a,.fcol .ext{
  font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:.05em;
  text-transform:uppercase;transition:color .3s;
}
.fcol li a:hover,.fcol .ext:hover{color:var(--clay-ink)}
.fcol .ext{display:inline-block;margin:.9rem 1.3rem 0 0}
.fcol .arrow-link{margin-top:1.3rem}

/* giant wordmark across the bottom */
.foot-mark{
  max-width:1500px;margin:0 auto;padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(3,9,13,.2);
}
.foot-mark img{width:100%;height:auto;display:block}
.foot-legal{
  max-width:1500px;margin:0 auto;padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--display);color:var(--ink-45);
}

/* ─────────────── plate accents ─────────────── */
.plate{
  position:absolute;pointer-events:none;z-index:1;
  width:clamp(130px,19vw,320px);
  filter:drop-shadow(0 26px 40px rgba(3,9,13,.28));
  will-change:transform;
}
.plate-tr{top:-9%;right:-7%}
.plate-bl{bottom:-10%;left:-6%}
.plate-br{bottom:-10%;right:-6%}
.plate-tl{top:-9%;left:-7%}
.feature,.cta{position:relative;overflow:hidden}
.feature-grid,.rows,.cta > *:not(.plate){position:relative;z-index:2}

/* ─────────────── page transition ───────────────
   a bone veil fades out on arrival and back in on departure —
   the same 0.6s ease-in-out crossfade the reference uses. */
.pt-veil{
  position:fixed;inset:0;z-index:200;background:var(--bone);
  pointer-events:none;opacity:0;
  animation:veilOut .6s ease-in-out both;
}
@keyframes veilOut{from{opacity:1}to{opacity:0}}
html.is-leaving .pt-veil{animation:none;opacity:1;transition:opacity .42s ease-in-out}

/* ─────────────── reveal defaults ─────────────── */
.fade{opacity:0;transform:translateY(28px)}

/* giant footer wordmark wipes up into view */
.foot-mark{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pt-veil{display:none}
  .fade{opacity:1!important;transform:none!important}
  .rv > span{transform:none!important}
  .menu{transition:none}
}

/* ═════════════ responsive ═════════════ */
@media (max-width:1080px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .intro-grid{grid-template-columns:1fr;gap:1.2rem}
  .foot-cols{grid-template-columns:1fr 1fr}
  .fcol:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;padding-top:2.4rem;margin-top:2.4rem;border-top:1px solid rgba(3,9,13,.16)}
  .feature-grid{grid-template-columns:1fr;gap:1.2rem}

}
@media (max-width:760px){
  body{font-size:16px}

  /* nav: readable label, comfortable tap area */
  .nav{top:12px;width:calc(100% - 24px);height:56px}
  .nav-wordmark img{height:26px}
  .nav-quote{font-size:.6rem;padding:0 .85rem;letter-spacing:.09em;border-right:0}
  .nav-toggle{padding:0 .9rem}
  .nav-toggle span{width:22px}

  /* menu: 44px tap targets */
  .menu{top:78px;width:calc(100% - 24px);padding:1.1rem 1.3rem 1.4rem}
  .menu-links a{font-size:1rem;padding:1.05rem 0}
  .menu-foot{margin-top:1.2rem;font-size:.8rem}
  .menu-foot .ext{font-size:.7rem;display:inline-block;padding:.45rem 0}

  /* hero */
  .hero{height:100svh}
  .hero-inner{padding:0 var(--pad)}

  /* feature: editorial stack — rule-tipped label, tight headline,
     rule above the body copy, and one large plate bleeding off the corner */
  .feature{padding:4.5rem var(--pad) 5rem}
  .feature-grid{grid-template-columns:1fr;gap:0}
  .feature-grid > .eyebrow{
    font-size:.7rem;letter-spacing:.2em;padding-top:0;
    display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;
  }
  .feature-grid > .eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}
  .feature-grid h2{font-size:2.4rem;line-height:.94;max-width:13ch}
  .feature-body{
    margin-top:1.9rem;max-width:none;
    padding-top:1.6rem;border-top:1px solid rgba(3,9,13,.2);
  }
  .feature-body p{font-size:1rem;line-height:1.75}
  .feature-taupe{padding-bottom:11.5rem}
  .feature-taupe .plate-tr{width:60vw;top:auto;bottom:-7%;right:-17%}
  .feature-taupe .plate-bl{display:none}

  /* stacking — the photo pins and the colour panel scrolls up over it */
  .split{display:block;min-height:0;position:relative}
  .split-media{position:sticky;top:0;height:74svh;aspect-ratio:auto;z-index:0}
  .split-panel{position:relative;z-index:2;padding:3.2rem 1.5rem 3.6rem}
  .split-panel .small{padding-top:1.6rem;margin-top:1.2rem}
  .band{height:52vh}
  .packages,.rentals,.quote{padding:6rem 0 5rem}
  .extras{padding:5.5rem 0 5rem}
  .ex-grid{grid-template-columns:1fr;padding:0 24px}
  .ex-item{padding:1.8rem .6rem}
  .pkg-grid,.qb,.menu-grid,.look-grid{padding:0 24px}
  .qb-pkgs{grid-template-columns:1fr;gap:1.2rem}

  /* cards */
  .card{width:80vw}
  .cards-nav{gap:1.1rem}
  .cards-btn{width:46px;height:46px}

  /* founders */
  .founders{padding:3.8rem var(--pad) 4.4rem}
  .founders-grid{grid-template-columns:1fr;gap:2.4rem}
  .founders-figure img{aspect-ratio:4/5}
  .founders-figure figcaption{font-size:.64rem;letter-spacing:.17em;margin-top:1rem;gap:.7rem}
  .founders-figure figcaption::before{flex-basis:26px}
  .founders-body{max-width:none}
  .founders-body h2{font-size:2.4rem;line-height:.94}
  .founders-body p{font-size:1rem}

  /* gallery */
  .gal{grid-template-columns:repeat(2,1fr);gap:.55rem}
  .strip{padding:4rem var(--pad) 5rem}
  .intro{padding:3.5rem var(--pad) 4rem}
  .intro-grid{grid-template-columns:1fr;gap:1.2rem}
  .phero{height:100svh;min-height:0}
  .phero .hero-inner{gap:12px;padding-bottom:3.4rem}
  .phero .eyebrow{font-size:.78rem}

  /* rows */
  .row{grid-template-columns:1fr;gap:.35rem}
  .row-n{margin-bottom:.15rem}
  .row h3{font-size:1.15rem}

  /* quote builder */
  .qpkgs{grid-template-columns:1fr}
  .qsum{position:relative;top:0;padding:2rem 1.4rem}
  .qqb{width:36px;height:36px;font-size:1.1rem}
  .qgb{width:54px;height:54px}
  .qcat{font-size:.72rem}
  .qrname{font-size:.95rem}
  .qchip{padding:1em 1.4em;font-size:.72rem}
  .qsum .pill,.qsum button.pill{padding:1.15em 1.6em}

  /* footer: tap-friendly, readable */
  .foot-cols{grid-template-columns:1fr;gap:0}
  .fcol{border-left:0;padding:0}
  .fcol:nth-child(n+2){padding-top:2rem;margin-top:2rem;border-top:1px solid rgba(3,9,13,.16)}
  .fcol li{margin-bottom:0}
  .fcol li a{display:block;padding:.7rem 0;font-size:1rem}
  .fcol .ext{display:inline-block;padding:.7rem 0;margin:.3rem 1.4rem 0 0;font-size:.85rem}
  .foot-thumb{width:min(46%,220px)}
  .foot-legal{font-size:.72rem;gap:.5rem}
  .foot-mark{padding-top:1.4rem}

  /* accents */
  .plate{width:clamp(96px,26vw,150px)}

  /* links stay tappable */
  .arrow-link{padding:.55rem 0}
  .qsocial{line-height:2.4}
  .qsocial a{display:inline-block;padding:.5rem 0}
}

@media (max-width:400px){
  .card{width:84vw}
  .hero h1{max-width:100%}
}

/* ═══════════════════════════════════════════
   QUOTE BUILDER
   ═══════════════════════════════════════════ */
.qwrap{background:var(--bone);padding:clamp(3.5rem,8vh,6rem) var(--pad) clamp(5rem,10vh,8rem)}
.qb{
  position:relative;z-index:2;
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.qstep{padding:clamp(2.2rem,4vw,3rem) 0;border-top:1px solid rgba(3,9,13,.16)}
.qstep:first-child{border-top:0;padding-top:0}
.qstep-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.qstep-n{font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.45}
.qstep-head h2{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.045em;font-size:clamp(1.3rem,2.4vw,1.85rem)}
.qstep-head .opt{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;font-family:var(--display)}

/* packages */
.qpkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.qpkg{
  text-align:left;padding:1.7rem 1.4rem 1.5rem;border:1px solid rgba(3,9,13,.2);
  background:transparent;transition:all .4s var(--ease);position:relative;
}
.qpkg:hover{border-color:var(--clay)}
.qpkg.on{background:var(--clay);border-color:var(--clay);color:var(--bone)}
.qpkg .flag{
  position:absolute;top:-.62rem;left:1.2rem;background:var(--ink);color:var(--bone);
  font-family:var(--display);font-weight:500;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:.42em 1em;
}
.qpkg .nm{display:block;font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:.16em;text-transform:uppercase}
.qpkg .pr{display:block;font-family:var(--display);font-weight:200;font-size:2.1rem;margin:.35rem 0 .3rem;line-height:1}
.qpkg .ds{display:block;font-size:.83rem;opacity:.72;line-height:1.5}

/* guests */
.qguest{display:flex;align-items:center;gap:1.8rem}
.qgb{
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(3,9,13,.3);
  display:grid;place-items:center;font-size:1.3rem;font-family:var(--display);font-weight:200;
  transition:all .3s;
}
.qgb:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.qgc{text-align:center;min-width:96px}
.qgc span{display:block;font-family:var(--display);font-weight:200;font-size:2.9rem;line-height:1}
.qgc small{font-family:var(--display);font-weight:500;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.55}
.qgnote{margin-top:1.1rem;font-size:.9rem;opacity:.7}
.qgnote.over{color:var(--clay-ink);opacity:1}

/* chips */
.qchips{display:flex;flex-wrap:wrap;gap:.7rem}
.qchip{
  font-family:var(--display);font-weight:500;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.95em 1.5em;border:1px solid rgba(3,9,13,.24);transition:all .35s var(--ease);
}
.qchip:hover{border-color:var(--clay);color:var(--clay-ink)}
.qchip.on{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* rental rows */
.qcat{font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-ink);margin:2rem 0 .5rem}
.qcat:first-child{margin-top:0}
.qrow{display:flex;align-items:center;gap:1rem;padding:.72rem 0;border-bottom:1px solid rgba(3,9,13,.12)}
.qrow.on{background:rgba(182,105,85,.09)}
.qrname{flex:1;font-size:.98rem}
.qrname small{opacity:.5;font-size:.78em;margin-left:.4em}
.qrprice{font-family:var(--display);font-weight:400;min-width:56px;text-align:right;font-size:.95rem}
.qqty{display:flex;align-items:center;gap:.55rem}
.qqb{width:32px;height:32px;border-radius:50%;border:1px solid rgba(3,9,13,.28);display:grid;place-items:center;
  font-size:.95rem;line-height:1;transition:all .25s}
.qqb:hover{background:var(--ink);color:var(--bone)}
.qqv{min-width:22px;text-align:center;font-family:var(--display);font-size:.95rem}

/* summary */
.qsum{position:sticky;top:96px;background:var(--ink);color:var(--bone);padding:2.2rem 1.9rem}
.qsum h3{font-family:var(--display);font-weight:400;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-45);margin-bottom:1.5rem}
.qsrow{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;font-size:.92rem;
  border-bottom:1px solid rgba(248,242,229,.14)}
.qsrow.main span:first-child{font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;font-size:.86rem}
.qsextra{color:var(--taupe);font-size:.86rem}
.qstotal{display:flex;justify-content:space-between;align-items:baseline;padding:1.4rem 0 .3rem}
.qstotal span:first-child{font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-45)}
.qstotal span:last-child{font-family:var(--display);font-weight:200;font-size:2.3rem;line-height:1}
.qsnote{font-size:.76rem;color:var(--bone-45);margin-bottom:1.5rem;line-height:1.55}
.qsum .pill{display:block;text-align:center;margin-bottom:.7rem}
.qsocial{font-size:.78rem;color:var(--bone-45);margin-top:1.1rem;text-align:center}
.qsocial a{color:var(--taupe);border-bottom:1px solid rgba(179,174,165,.4)}

@media (max-width:1080px){
  .qb{grid-template-columns:1fr}
  .qsum{position:relative;top:0}
  .qpkgs{grid-template-columns:1fr}
}
@media (max-width:760px){
  .qwrap{padding:3.2rem var(--pad) 4.5rem}
  .qguest{gap:1.1rem}
  .qgb{width:54px;height:54px}
  .qchip{font-size:.7rem;padding:1em 1.4em}
  .qrow{flex-wrap:wrap;gap:.5rem 1rem}
  .qrname{flex:1 1 100%}
  .qrprice{margin-left:auto}
}