/* ==========================================================================
   OLAM by Plasseril — awwwards build
   Dark warm ground, brand gold accent, photography as the light source.
   Palette sampled from the real logo (see BRIEF.md §12).
   ========================================================================== */

:root{
  /* brand */
  --gold-dark:#9E7D45;
  --gold:#BCA36D;
  --gold-light:#DAC28A;
  --teak:#6A4B25;
  --teak-deep:#4C2E1A;
  --cream:#F3EEE4;
  --sand:#B5A188;
  --sage:#A29369;
  --green-deep:#454736;
  --ink:#1A1712;

  /* derived surfaces */
  --ink-2:#221E18;
  --ink-3:#2B261E;
  --cream-dim:#C9C1B2;      /* 10.0:1 on --ink */
  --hair:rgba(188,163,109,.20);
  --hair-strong:rgba(188,163,109,.42);

  /* type */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* rhythm */
  --gutter:clamp(20px,5vw,72px);
  --wrap:1440px;
  --sec-pad:clamp(88px,13vh,180px);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html[data-anim] , html.lenis{scroll-behavior:auto}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,.42vw + 14px,17.5px);
  line-height:1.72;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

::selection{background:var(--gold);color:var(--ink)}

/* ---------- a11y primitives ---------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:fixed;top:12px;left:12px;z-index:1000;
  transform:translateY(-160%);
  background:var(--gold);color:#14110D;
  padding:.7rem 1.2rem;border-radius:2px;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:transform .25s var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}

.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.015em;
  margin:0;
  color:var(--cream);
  text-wrap:balance;
}
.display em{font-style:italic;color:var(--gold-light)}
.display-xl{font-size:clamp(2.35rem,5.4vw,5rem)}
.display-lg{font-size:clamp(2.5rem,5.9vw,5.4rem)}
.display-md{font-size:clamp(2rem,4vw,3.4rem)}

.eyebrow{
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 clamp(20px,3vh,38px);
}

.prose p{margin:0 0 1.15em;color:var(--cream-dim);max-width:46ch}
.prose p:last-child{margin-bottom:0}

.sec-lead{color:var(--cream-dim);max-width:44ch;margin:1.6rem 0 0;font-size:1.05em}

/* line-mask primitive: the whole animation vocabulary of this page */
.line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line-i{display:block}
.mask-box{display:block;overflow:hidden}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(14px,2vh,22px) var(--gutter);
  mix-blend-mode:normal;
  transition:background .4s var(--ease-out),backdrop-filter .4s var(--ease-out);
}
.nav.is-stuck{
  background:rgba(18,15,11,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
.nav-brand{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light);
}
.nav-brand img{width:26px;height:26px;object-fit:contain}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2.4rem)}
.nav-links a{
  position:relative;display:inline-block;text-decoration:none;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);padding:.35rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  text-decoration:none;white-space:nowrap;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);
  padding:.72rem 1.35rem;border-radius:999px;
  transition:background .35s var(--ease-out),color .35s var(--ease-out);
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--gold-light)}
@media (max-width:860px){.nav-links{display:none}}

/* ==========================================================================
   BUTTONS / LINKS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  padding:1.05rem 2rem;border-radius:999px;
  transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.btn-primary{background:var(--gold);color:#14110D}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--gold-light);color:#14110D}
.btn-ghost{border-color:var(--hair-strong);color:var(--cream);background:transparent}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--gold);color:var(--gold-light)}
.btn-lg{padding:1.2rem 2.4rem;font-size:.8rem}
.btn-block{width:100%}

.link-gold{
  display:inline-block;color:var(--gold-light);text-decoration:none;
  border-bottom:1px solid var(--hair-strong);padding-bottom:.15rem;
  transition:border-color .35s var(--ease-out),color .35s var(--ease-out);
}
.link-gold:hover,.link-gold:focus-visible{border-color:var(--gold-light);color:var(--cream)}

/* ==========================================================================
   LOADER — the mark is a ring of interlaced waves, so the intro is a ripple
   ========================================================================== */
#loader{display:none}
html[data-loader] #loader{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:900;
  background:var(--ink);
}
html[data-loader] body{overflow:hidden}
.loader-stage{position:relative;width:min(38vmin,260px);aspect-ratio:1;display:grid;place-items:center}
.loader-mark{width:52%;height:auto;opacity:0}
.ripple{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ripple .rr{
  fill:none;stroke:var(--gold);stroke-width:1.1;
  transform-origin:center;transform-box:fill-box;opacity:0;
}

/* ==========================================================================
   HERO — bottom-left lockup so the type never fights the bright facade
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute;inset:-6% 0;z-index:-2;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 46%}
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(18,15,11,.74) 0%,rgba(18,15,11,.20) 24%,rgba(18,15,11,.16) 40%,rgba(18,15,11,.80) 76%,var(--ink) 100%),
    linear-gradient(90deg,rgba(18,15,11,.86) 0%,rgba(18,15,11,.46) 42%,rgba(18,15,11,0) 76%);
}
.hero-inner{
  position:relative;
  width:min(100% - (var(--gutter) * 2),var(--wrap));
  margin-inline:auto;
  padding-block:clamp(120px,16vh,180px) clamp(96px,15vh,160px);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
.hero-eyebrow{color:var(--gold-light);margin-bottom:clamp(20px,3.5vh,38px)}
.hero-mark{margin:0;width:min(64vw,470px)}
.hero-mark img{width:100%;height:auto}
.hero-tagline{
  font-family:var(--serif);
  font-size:clamp(1.28rem,2.3vw,2.05rem);
  font-weight:300;line-height:1.34;
  color:var(--cream);
  margin:clamp(24px,4vh,42px) 0 0;
  max-width:none;
  text-shadow:0 1px 26px rgba(18,15,11,.85);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(28px,4.5vh,48px)}

.scroll-cue{
  position:absolute;right:var(--gutter);bottom:clamp(24px,5vh,52px);
  display:grid;place-items:center;
  width:112px;height:112px;text-decoration:none;
}
.ripple-sm .rr-cue{stroke-width:1;opacity:.5}
.scroll-cue-label{
  position:relative;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);
}
/* narrow screens: the crop puts the bright facade behind the lockup, so the
   scrim has to carry more of the contrast */
@media (max-width:820px){
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(18,15,11,.72) 0%,rgba(18,15,11,.30) 16%,rgba(18,15,11,.66) 38%,
      rgba(18,15,11,.88) 70%,var(--ink) 100%);
  }
  .hero-media img{object-position:56% 40%}
}
@media (max-width:640px){
  .scroll-cue{right:auto;left:50%;transform:translateX(-50%);bottom:clamp(12px,2.5vh,24px);width:92px;height:92px}
  .hero-inner{padding-bottom:clamp(120px,20vh,180px)}
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--hair);
  background:var(--ink);
  padding:clamp(14px,2.2vh,26px) 0;
}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-row{
  flex:0 0 auto;
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.4vw,3rem);
  line-height:1.1;color:var(--gold);white-space:nowrap;
  letter-spacing:.02em;
}
.marquee-row i{font-style:normal;color:var(--gold-dark);padding-inline:.35em}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{padding-block:var(--sec-pad);position:relative}
.sec-head{max-width:70ch}
.sec-head-split{
  max-width:none;display:grid;gap:clamp(28px,4vw,64px);
  grid-template-columns:1fr;align-items:end;
}
@media (min-width:960px){
  .sec-head-split{grid-template-columns:1.15fr .85fr}
  .sec-head-split .sec-lead{margin-top:0;padding-bottom:.6rem}
}

/* ---------- WELCOME ---------- */
.welcome-grid{display:grid;gap:clamp(48px,7vw,110px);align-items:center}
@media (min-width:960px){.welcome-grid{grid-template-columns:1.06fr .94fr}}
.welcome-copy .prose{margin-top:clamp(28px,4vh,46px)}
.aside{
  display:flex;gap:1rem;align-items:flex-start;
  margin:clamp(30px,4.5vh,52px) 0 0;padding-top:1.6rem;
  border-top:1px solid var(--hair);
  color:var(--cream-dim);font-size:.94em;max-width:46ch;
}
.aside > span:first-child{
  font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--gold);flex:0 0 auto;
}
.welcome-figure{margin:0}
.welcome-figure figcaption{
  margin-top:1.1rem;font-size:.86rem;color:var(--sand);letter-spacing:.02em;max-width:40ch;
}

/* image mask primitive */
.img-mask{overflow:hidden;background:var(--ink-2);position:relative}
.img-mask img{width:100%;height:100%;object-fit:cover}
.welcome-figure .img-mask{aspect-ratio:4/3}

/* ==========================================================================
   ROOMS — pinned horizontal on desktop, honest vertical stack on small screens
   ========================================================================== */
.rooms{
  position:relative;
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg,var(--ink) 0%,#191611 50%,var(--ink) 100%);
}
.h-viewport{padding-block:var(--sec-pad)}
.h-track{display:grid;gap:clamp(56px,9vw,90px);padding-inline:var(--gutter)}
.panel{margin:0}
.panel-intro .panel-lead,.panel-end .panel-lead{color:var(--cream-dim);margin:1.8rem 0 0;max-width:40ch}
.panel-note{color:var(--sand);font-size:.9rem;margin:1.2rem 0 0;max-width:38ch}
.panel-hint{
  display:none;margin:2.4rem 0 0;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.panel-end .btn{margin-top:2.2rem}
.panel-cap{display:flex;gap:1rem;align-items:flex-start;margin-top:1.15rem}
.panel-cap .idx{
  flex:0 0 auto;font-size:.68rem;letter-spacing:.2em;color:var(--gold);
  padding-top:.35em;font-variant-numeric:tabular-nums;
}
.panel-cap p{margin:0;color:var(--cream-dim);font-size:.92rem;max-width:34ch;line-height:1.6}
.panel-img .img-mask{aspect-ratio:4/3}
.p-tall .img-mask{aspect-ratio:3/4}

@media (min-width:900px){
  .h-viewport{
    height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;padding-block:0;
  }
  .h-track{
    display:flex;align-items:center;
    gap:clamp(40px,4.5vw,80px);
    padding-inline:clamp(48px,8vw,140px);
    grid-template-columns:none;
  }
  .panel{flex:0 0 auto}
  .panel-intro,.panel-end{width:min(40vw,560px)}
  .panel-img{display:flex;flex-direction:column}
  .panel-img .img-mask{height:58svh;aspect-ratio:auto;width:100%}
  .p-wide{width:min(calc(58svh * 4 / 3),62vw)}
  .p-tall{width:min(calc(58svh * 3 / 4),40vw)}
  .panel-hint{display:block}
}

/* ==========================================================================
   COMMON SPACES — asymmetric editorial grid
   ========================================================================== */
.spaces{border-top:1px solid var(--hair)}
.spaces-grid{
  margin-top:clamp(52px,8vh,110px);
  display:grid;gap:clamp(38px,5vw,78px);
  grid-template-columns:1fr;
}
.sp{margin:0}
.sp figcaption{
  margin-top:1rem;display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
}
.sp-label{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.sp-note{font-size:.9rem;color:var(--cream-dim)}
.sp .img-mask{aspect-ratio:4/3}
.sp-e .img-mask{aspect-ratio:3/4}

@media (min-width:900px){
  .spaces-grid{grid-template-columns:repeat(12,1fr);align-items:start}
  .sp-a{grid-column:1 / 8}
  .sp-b{grid-column:9 / 13;margin-top:14vh}
  .sp-c{grid-column:1 / 6;margin-top:6vh}
  .sp-d{grid-column:7 / 13}
  .sp-e{grid-column:2 / 6;margin-top:4vh}
  .sp-f{grid-column:7 / 12;margin-top:12vh}
}

/* ==========================================================================
   FACILITIES — numbered editorial list, no icons
   ========================================================================== */
.facilities{border-top:1px solid var(--hair);background:#171410}
.fac-list{
  list-style:none;margin:clamp(52px,8vh,100px) 0 0;padding:0;
  counter-reset:fac;
  border-top:1px solid var(--hair);
}
.fac{
  counter-increment:fac;
  position:relative;
  display:grid;
  grid-template-columns:3.6rem 1fr;
  gap:clamp(.8rem,2vw,2rem);
  align-items:baseline;
  padding:clamp(1.1rem,2.4vh,1.6rem) 0;
  border-bottom:1px solid var(--hair);
}
.fac::before{
  content:counter(fac,decimal-leading-zero);
  font-size:.72rem;letter-spacing:.16em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.fac-txt{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.9vw,2.4rem);
  line-height:1.15;font-weight:300;color:var(--cream);
  display:block;
  transition:color .45s var(--ease-out),transform .55s var(--ease-out);
}
@media (hover:hover){
  .fac:hover .fac-txt{color:var(--gold-light);transform:translateX(.6rem)}
}
@media (min-width:900px){
  .fac{grid-template-columns:5rem 1fr}
}

/* ==========================================================================
   MUNROE ISLAND — no photography exists, so the type carries it
   ========================================================================== */
.island{
  position:relative;overflow:hidden;
  border-top:1px solid var(--hair);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(69,71,54,.42) 0%,rgba(26,23,18,0) 62%),
    var(--ink);
}
.island-ripple{
  position:absolute;left:50%;top:46%;
  width:min(150vw,1500px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;overflow:visible;
}
.island-ripple .ir{
  fill:none;stroke:var(--gold);stroke-width:.9;
  transform-origin:center;transform-box:fill-box;opacity:.10;
}
.island-wrap{position:relative;z-index:1}

.kinetic{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3.2rem,13vw,12rem);
  line-height:.86;letter-spacing:-.03em;margin:0;
  color:var(--cream);
}
.kinetic .k-out{
  color:transparent;
  -webkit-text-stroke:1px var(--gold);
  paint-order:stroke fill;
}
.kinetic .k-mal{
  font-family:var(--sans);font-weight:200;
  font-size:.3em;line-height:1.4;letter-spacing:.02em;
  color:var(--gold-light);
  padding-top:.35em;
}
.island-lead{
  margin:clamp(34px,5vh,58px) 0 0;
  font-size:clamp(1.1rem,1.9vw,1.5rem);
  color:var(--cream-dim);max-width:34ch;line-height:1.55;
}
.island-lead strong{color:var(--cream);font-weight:400}

.island-grid{
  margin-top:clamp(56px,8vh,110px);
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
}
@media (min-width:720px){.island-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.island-grid{grid-template-columns:repeat(3,1fr)}}
.isl{border-top:1px solid var(--hair);padding-top:1.4rem}
.isl h3{
  margin:0 0 .9rem;font-family:var(--sans);font-weight:400;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.isl p{margin:0 0 .8rem;color:var(--cream-dim);font-size:.98em}
.isl p:last-of-type{margin-bottom:0}
.isl-note{color:var(--sand)!important;font-style:italic}
.isl-arrange .link-gold{margin-top:1rem}

.photo-gap{
  margin-top:clamp(56px,8vh,100px);
  border:1px dashed var(--hair-strong);
  padding:clamp(28px,4vw,52px);
  display:grid;gap:1rem;
  background:rgba(43,38,30,.35);
}
.photo-gap-tag{
  margin:0;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.photo-gap-body{margin:0;color:var(--cream-dim);max-width:56ch}

/* ==========================================================================
   GETTING HERE
   ========================================================================== */
.getting{border-top:1px solid var(--hair)}
.dist-list{list-style:none;margin:clamp(52px,8vh,100px) 0 0;padding:0;border-top:1px solid var(--hair)}
.dist{
  display:grid;gap:.4rem clamp(1.5rem,4vw,4rem);
  grid-template-columns:1fr;
  align-items:baseline;
  padding:clamp(1.6rem,3.4vh,2.6rem) 0;
  border-bottom:1px solid var(--hair);
}
@media (min-width:760px){.dist{grid-template-columns:minmax(0,10rem) 1fr}}
.dist-num{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;color:var(--gold-light);
  display:flex;align-items:baseline;gap:.06em;
  font-variant-numeric:tabular-nums;
}
.dist-num .tilde{font-size:.42em;color:var(--gold-dark);transform:translateY(-.15em)}
.dist-num .unit{font-family:var(--sans);font-size:.24em;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-left:.4em}
.dist-body{display:block}
.dist-body strong{display:block;font-weight:400;font-size:1.06em;color:var(--cream);margin-bottom:.25rem}
.dist-body span{color:var(--cream-dim);font-size:.94em}

.getting-foot{
  margin-top:clamp(44px,6vh,80px);
  display:grid;gap:clamp(24px,4vw,64px);
}
@media (min-width:760px){.getting-foot{grid-template-columns:1fr 1fr;align-items:start}}
.addr{font-style:normal;color:var(--cream-dim);line-height:1.75;margin:0}
.getting-links{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.pluscode{margin:0;font-size:.85rem;color:var(--sand);letter-spacing:.06em}
.pluscode span{color:var(--gold-light)}

/* ==========================================================================
   ENQUIRE
   ========================================================================== */
.enquire{border-top:1px solid var(--hair);background:#171410}
.enquire-grid{display:grid;gap:clamp(52px,7vw,110px);align-items:start}
@media (min-width:960px){.enquire-grid{grid-template-columns:1fr .9fr}}
.enquire-cta{
  margin-top:clamp(36px,5vh,60px);
  display:flex;flex-wrap:wrap;gap:2rem 2.6rem;align-items:center;
}
.call-block{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.call-label{margin:0;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sand)}

.enquire-foot{
  margin-top:clamp(44px,7vh,90px);
  padding-top:clamp(24px,3.5vh,38px);
  border-top:1px solid var(--hair);
  max-width:46ch;
}
.enquire-note{margin:0;color:var(--cream-dim);font-size:.92rem;line-height:1.7}

.enq-form{
  border:1px solid var(--hair);
  padding:clamp(26px,3.4vw,44px);
  background:rgba(26,23,18,.6);
  display:grid;gap:1.15rem;
}
.form-intro{margin:0 0 .4rem;font-size:.88rem;color:var(--sand);max-width:44ch}
.field{display:grid;gap:.45rem}
.field-row{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media (min-width:520px){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.field input,.field textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:.85rem 1rem;
  color:var(--cream);
  font-size:.98rem;font-weight:300;
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#8C8375;opacity:1}
.field input:hover,.field textarea:hover{border-color:var(--hair-strong)}
.field input:focus,.field textarea:focus{border-color:var(--gold);outline:2px solid var(--gold-light);outline-offset:2px}
.form-status{margin:0;font-size:.86rem;color:var(--gold-light);min-height:1.2em}
.form-noscript{margin:0;font-size:.88rem;color:var(--cream-dim)}
.form-noscript a{color:var(--gold-light)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  border-top:1px solid var(--hair);
  padding-block:clamp(64px,9vh,120px) clamp(32px,5vh,56px);
  background:var(--ink);
}
.footer-top{
  display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between;
  padding-bottom:clamp(44px,6vh,80px);
}
.footer-mark{width:min(46vw,240px);height:auto}
.signoff{
  margin:0;font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:300;color:var(--gold-light);font-style:italic;
}
.footer-grid{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
  padding-block:clamp(40px,5vh,64px);
  border-top:1px solid var(--hair);
}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.fh{margin:0 0 1.1rem;font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.fcol .link-gold{margin-top:1rem}
.flist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.flist a{color:var(--cream-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.flist a:hover,.flist a:focus-visible{color:var(--gold-light);border-color:var(--hair-strong)}
.badge{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;
  border:1px solid var(--hair-strong);border-radius:999px;
  padding:.5rem 1rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);
}
.fnote{margin:0 0 .7rem;font-size:.86rem;color:var(--cream-dim)}
.footer-base{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  padding-top:clamp(24px,3vh,40px);border-top:1px solid var(--hair);
  font-size:.78rem;letter-spacing:.08em;color:var(--sand);
}
.footer-base p{margin:0}

/* ==========================================================================
   CUSTOM CURSOR — fine pointers only, created by JS
   ========================================================================== */
.cursor{
  position:fixed;top:0;left:0;z-index:800;
  pointer-events:none;border-radius:50%;
  will-change:transform;
}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid var(--gold);
  transition:opacity .3s var(--ease-out);
}
.cursor-dot{
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:var(--gold-light);
}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor input,
html.has-cursor textarea,html.has-cursor label{cursor:none}

/* ==========================================================================
   ANIMATED-MODE INITIAL STATES
   Only applied when JS ran AND motion is welcome AND GSAP actually loaded.
   Without this block every element above is already in its final state.
   ========================================================================== */
html[data-anim] .line-i{transform:translate3d(0,115%,0)}
html[data-anim] .reveal{opacity:0;transform:translate3d(0,26px,0)}
html[data-anim] .img-mask{clip-path:inset(0 0 100% 0)}
html[data-anim] .img-mask img{transform:scale(1.18)}
html[data-anim] .hero-mark .mask-box img{transform:translate3d(0,108%,0)}
html[data-anim] .fac{opacity:0}
html[data-anim] .dist{opacity:0}
html[data-anim] .scroll-cue{opacity:0}
html[data-anim] .hero-actions{opacity:0}

/* Safety valve: if scripting stalls, nothing stays hidden for more than 4s. */
html[data-anim].anim-failed .line-i,
html[data-anim].anim-failed .hero-mark .mask-box img{transform:none!important}
html[data-anim].anim-failed .reveal,
html[data-anim].anim-failed .fac,
html[data-anim].anim-failed .dist,
html[data-anim].anim-failed .scroll-cue,
html[data-anim].anim-failed .hero-actions{opacity:1!important;transform:none!important}
html[data-anim].anim-failed .img-mask{clip-path:none!important}
html[data-anim].anim-failed .img-mask img{transform:none!important}

/* ==========================================================================
   REDUCED MOTION — belt and braces. Nothing scrubs, nothing pins, nothing moves.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  #loader{display:none!important}
  .cursor{display:none!important}
  html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:auto}
  .line-i,.reveal,.img-mask,.img-mask img,.hero-mark .mask-box img,
  .fac,.dist,.scroll-cue,.hero-actions{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  .hero-media{position:absolute;inset:0}
  .h-viewport{height:auto!important;display:block!important;overflow:visible!important;padding-block:var(--sec-pad)!important}
  .h-track{display:grid!important;gap:clamp(56px,9vw,90px)!important;transform:none!important;padding-inline:var(--gutter)!important}
  .panel{width:auto!important}
  .panel-img .img-mask{height:auto!important;aspect-ratio:4/3!important}
  .p-tall .img-mask{aspect-ratio:3/4!important}
  .panel-hint{display:none!important}
  .marquee-track{transform:none!important}
  .marquee-row + .marquee-row{display:none}
  .island-ripple .ir{opacity:.08}
}