/* Olam by Plasseril — cinematic scroll storytelling.
   Warm off-white ground, teak and gold accents, green only from the photos. */

:root{
  --gold:#C09A5B;
  --gold-deep:#A67C3D;
  --gold-ink:#7E5C25;      /* brand gold, darkened for text on light grounds */
  --ink:#1A1712;
  --teak:#6A4B25;
  --teak-deep:#4C2E1A;
  --paper:#FBF8F3;
  --cream:#F3EEE4;
  --sand:#B5A188;
  --rule:rgba(76,46,26,.16);

  --display:"Marcellus",Georgia,serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:clamp(20px,5vw,80px);
  --max:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--teak-deep);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.05vw,17px);line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--teak-deep);color:var(--paper);padding:.8em 1.4em}
.skip:focus{left:12px;top:12px}
:where(a,button):focus-visible{outline:2px solid var(--teak);outline-offset:4px;border-radius:2px}

/* ---- motion base ---- */
html.has-motion [data-split-reveal],
html.has-motion [data-hero-line],
html.has-motion [data-reveal-item]{visibility:hidden}

.split-word-mask,.line-mask{display:inline-block;overflow:hidden;vertical-align:top}
.split-word,.line{display:inline-block;will-change:transform,opacity,filter}

/* ---- preloader ---- */
.preloader{
  position:fixed;inset:0;z-index:9000;background:var(--ink);
  display:grid;place-content:center;justify-items:center;gap:32px;
}
.preloader__mark{width:76px;height:auto}
.preloader__rail{width:min(220px,42vw);height:1px;background:rgba(243,238,228,.22)}
.preloader__bar{height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ---- shared type ---- */
.label{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--teak);margin:0 0 1.4em;font-weight:500;
}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.14;
  color:var(--teak-deep);margin:0;
}

/* ---- 1. hero ---- */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;
}
.hero__frame{position:absolute;inset:-8% 0;overflow:hidden}
.hero__img{width:100%;height:116%;object-fit:cover}
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(26,23,18,.90) 0%,
    rgba(26,23,18,.66) 26%,
    rgba(26,23,18,.30) 52%,
    rgba(26,23,18,.34) 78%,
    rgba(26,23,18,.62) 100%);
}
.hero__copy{
  position:relative;z-index:2;align-self:end;
  padding:0 var(--gutter) clamp(60px,10vh,120px);
}
.hero__wordmark{width:clamp(120px,13vw,190px);height:auto;margin:0 0 clamp(20px,3vh,36px)}
.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,7.4vw,6.2rem);line-height:1.02;
  color:var(--paper);margin:0 0 1rem;
}
.hero__title .line-mask{display:block}
.hero__sub{
  color:var(--cream);margin:0;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
}
.scrollcue{
  position:relative;z-index:2;justify-self:center;
  padding:0 0 26px;color:var(--cream);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
}
.scrollcue::after{
  content:"";display:block;width:1px;height:34px;margin:10px auto 0;
  background:linear-gradient(var(--gold),transparent);
}

/* ---- 2. intro ---- */
.intro{
  max-width:var(--max);margin:0 auto;
  padding:clamp(90px,16vh,190px) var(--gutter) clamp(50px,8vh,100px);
}
.intro__text{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.28;
  color:var(--teak-deep);margin:0;max-width:24ch;
}

/* ---- 3. story ---- */
.story{
  max-width:var(--max);margin:0 auto;
  padding:clamp(40px,7vh,90px) var(--gutter) clamp(70px,11vh,140px);
  border-bottom:1px solid var(--rule);
}
.story__text{font-size:clamp(1.05rem,1.5vw,1.24rem);max-width:52ch;margin:0 0 2.4rem;color:#4A3A29}
.story__brand{
  font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.9rem);
  color:var(--gold-ink);margin:0;
}

/* ---- 4. scrubbed scene ---- */
.scene{position:relative;height:100svh;overflow:hidden;background:var(--ink)}
.scene__media{position:absolute;inset:0;margin:0}
.scene__media img{width:100%;height:100%;object-fit:cover}
.scene__media::after{content:"";position:absolute;inset:0;background:rgba(26,23,18,.52)}
.scene__copy{
  position:relative;z-index:2;height:100%;
  display:grid;align-content:center;gap:.4em;
  padding:0 var(--gutter);
}
.scene__line{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,4.6vw,3.6rem);line-height:1.16;
  color:var(--paper);margin:0;max-width:18ch;
}

/* ---- 5. sticky card stack ---- */
.stack{position:relative;padding:clamp(80px,14vh,170px) var(--gutter) clamp(40px,8vh,90px);max-width:var(--max);margin:0 auto}
.stack__head{margin:0 0 clamp(40px,7vh,90px)}
.card{
  position:sticky;top:12vh;
  transform-origin:center top;will-change:transform,opacity;
  background:var(--cream);border:1px solid var(--rule);border-radius:3px;
  display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;
  margin:0 0 clamp(28px,5vh,64px);
}
@media (min-width:901px){.card{grid-template-columns:1.25fr .75fr}}
.card__fig{margin:0;aspect-ratio:4/3;overflow:hidden}
.card__fig img{width:100%;height:100%;object-fit:cover}
.card__body{padding:clamp(24px,3.4vw,48px);align-self:center}
.card__n{
  font-size:11px;letter-spacing:.22em;color:var(--gold-ink);
  margin:0 0 1.2em;font-weight:500;
}
.card__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.12;
  margin:0 0 .6em;color:var(--teak-deep);
}
.card__text{margin:0;color:#4A3A29;max-width:34ch}

/* ---- 6. proof grid ---- */
.proof{max-width:var(--max);margin:0 auto;padding:clamp(80px,13vh,160px) var(--gutter)}
.proof__grid{display:grid;gap:clamp(12px,1.8vw,26px);grid-template-columns:1fr}
@media (min-width:820px){
  .proof__grid{grid-template-columns:repeat(6,1fr)}
  .proof__item{grid-column:span 3}
  .proof__item--wide{grid-column:span 6}
}
.proof__item{margin:0;overflow:hidden;border-radius:2px}
.proof__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.proof__item--wide img{aspect-ratio:16/9}

/* ---- 7. facilities ---- */
.facilities{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--gutter) clamp(90px,15vh,180px);
}
.facilities__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;grid-template-columns:1fr;
  border-top:1px solid var(--rule);
}
@media (min-width:700px){.facilities__list{grid-template-columns:1fr 1fr}}
.facilities__list li{
  padding:1.05em .2em;border-bottom:1px solid var(--rule);
  font-size:clamp(.95rem,1.2vw,1.05rem);color:#4A3A29;
}
.facilities__list li:last-child{grid-column:1/-1}

/* ---- 8. footer ---- */
.foot{
  background:var(--ink);color:var(--cream);
  padding:clamp(80px,14vh,170px) var(--gutter);
  display:grid;justify-items:start;gap:0;
}
.foot__label{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.4em;font-weight:500;
}
.foot__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5vw,4rem);line-height:1.08;
  color:var(--paper);margin:0 0 1rem;
}
.foot__text{max-width:48ch;color:#DED6C8;margin:0 0 2.4rem}
.foot__actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 2.6rem}
.btn{
  display:inline-flex;align-items:center;
  padding:.95em 1.7em;border-radius:999px;text-decoration:none;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(243,238,228,.4);color:var(--cream);
  transition:background .4s,color .4s,border-color .4s;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn--solid{background:var(--gold);border-color:var(--gold);color:#231C11;font-weight:500}
.btn--solid:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#231C11}
.foot__addr{font-style:normal;color:var(--sand);margin:0 0 1.4rem;line-height:1.9}
.foot__links{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 3rem}
.foot__links a{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-decoration:none;border-bottom:1px solid rgba(192,154,91,.35);padding-bottom:4px;
}
.foot__links a:hover{border-bottom-color:var(--gold)}
.foot__signoff{
  font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--gold);margin:0;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html.has-motion [data-split-reveal],
  html.has-motion [data-hero-line],
  html.has-motion [data-reveal-item]{visibility:visible!important}
  .preloader{display:none}
  .hero__img{height:100%}
  .card{position:static}
  *{scroll-behavior:auto!important}
}