/* ==========================================================================
   CLÉO ROME — cleorome.com
   Beautifully considered. Effortlessly experienced.

   Brand Book v7. Palette p17, colour behaviour p18, typography p19.

   FONT SWAP — when the licensed WOFF2 files arrive, drop them into
   assets/fonts/, uncomment the @font-face block below, and change the two
   stand-ins in --display and --accent. Nothing else changes anywhere.
       The Seasons  (My Creative Land) → replaces Marcellus
       Circe        (ParaType)         → replaces Mulish
   ========================================================================== */

/* --- Uncomment when the licensed files land ------------------------------
@font-face{font-family:"The Seasons";src:url("../fonts/theseasons-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"The Seasons";src:url("../fonts/theseasons-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"The Seasons";src:url("../fonts/theseasons-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Circe";src:url("../fonts/circe-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Circe";src:url("../fonts/circe-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
-------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1 · TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Palette — Brand Book v7, p17 */
  --plum:#1A0F16;
  --plum-deep:#120A0F;
  --plum-lift:#2A1A24;
  --gold:#C9A47A;
  --champagne:#EADCC6;
  --pearl:#F2EFE8;
  --greige:#A8988E;
  --rose:#E7CBC2;

  /* Light-ground variants. Brushed Gold and Stone Greige are specified for
     dark grounds; on Ice Pearl / Soft Champagne they fall below WCAG AA
     (2.02 and 2.42). These are the same hues darkened until they pass. */
  --gold-ink:#705B44;    /* 5.59 on Pearl, 4.76 on Champagne */
  --greige-ink:#645B55;  /* 5.77 on Pearl, 4.91 on Champagne */

  /* Type — stand-ins named first so the swap is one word each */
  --display:"The Seasons","Marcellus","Didot",Georgia,serif;
  --editorial:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --accent:"Circe","Mulish",-apple-system,"Segoe UI",Helvetica,sans-serif;

  /* Scale — display at tight leading, tracked in (p19) */
  --fs-hero:clamp(3.2rem,9.5vw,8.5rem);
  --fs-mega:clamp(2.7rem,6.8vw,5.8rem);
  --fs-h2:clamp(2.1rem,4.6vw,4rem);
  --fs-h3:clamp(1.45rem,2.5vw,2.2rem);
  --fs-quote:clamp(1.6rem,3.4vw,2.9rem);
  --fs-lead:clamp(1.1rem,1.5vw,1.42rem);
  --fs-body:clamp(1.04rem,1.1vw,1.16rem);
  --fs-label:.7rem;

  --lh-body:1.62;      /* p19 — editorial leading */
  --lh-display:.99;
  --track-label:.32em; /* p19 — accent tracking */

  --wrap:1360px;
  --wrap-mid:1040px;
  --wrap-narrow:760px;
  --gut:clamp(1.35rem,4.5vw,4rem);
  --bay:clamp(5rem,11vw,11rem);

  --rule:rgba(201,164,122,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--pearl);
  color:var(--plum);
  font-family:var(--editorial);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block;}

a{color:inherit;}

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

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--plum);color:var(--champagne);
  padding:.9rem 1.4rem;font-family:var(--accent);
  font-size:var(--fs-label);letter-spacing:var(--track-label);
  text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0;}

/* --------------------------------------------------------------------------
   2 · LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.wrap--mid{max-width:var(--wrap-mid);}
.wrap--narrow{max-width:var(--wrap-narrow);}

.bay{padding-block:var(--bay);}
.bay--half{padding-block:calc(var(--bay) * .55);}

/* Colour grounds — Brand Book v7, p18 */
.ground-plum{background:var(--plum);color:var(--champagne);}
.ground-deep{background:var(--plum-deep);color:var(--champagne);}
.ground-pearl{background:var(--pearl);color:var(--plum);}
.ground-champagne{background:var(--champagne);color:var(--plum);}
.ground-rose{background:var(--rose);color:var(--plum);}

/* --------------------------------------------------------------------------
   3 · TYPE
   -------------------------------------------------------------------------- */
.label{
  font-family:var(--accent);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
  line-height:1.9;
}

.display,h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:var(--lh-display);
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}

h1{font-size:var(--fs-mega);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);line-height:1.1;}

.lead{font-size:var(--fs-lead);line-height:1.55;}

p{margin:0 0 1.15rem;}
p:last-child{margin-bottom:0;}

.measure{max-width:34em;}
.measure--tight{max-width:28em;}

.caption{
  font-family:var(--editorial);
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--greige);
  line-height:1.9;
}

.quote{
  font-family:var(--display);
  font-size:var(--fs-quote);
  line-height:1.14;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}

.numeral{
  font-family:var(--accent);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:var(--track-label);
  color:var(--gold);
  display:block;
  margin-bottom:1rem;
}

.rule{height:1px;background:var(--rule);border:0;margin:0;}

/* Light grounds carry the darkened variants so labels and captions stay
   legible. Dark grounds keep the true brand colours. */
.ground-pearl .label,
.ground-champagne .label,
.ground-rose .label,
.ground-pearl .numeral,
.ground-champagne .numeral,
.ground-rose .numeral{color:var(--gold-ink);}

.ground-pearl .caption,
.ground-champagne .caption,
.ground-rose .caption{color:var(--greige-ink);}

.ground-pearl .arrow,
.ground-champagne .arrow,
.ground-rose .arrow{color:var(--gold-ink);}

/* Inline greige on a light ground, used for supporting paragraphs */
.ground-pearl [style*="--greige"],
.ground-champagne [style*="--greige"]{color:var(--greige-ink) !important;}

/* --------------------------------------------------------------------------
   4 · BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--accent);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  text-decoration:none;
  padding:1.15em 2.4em;
  border:1px solid currentColor;
  transition:background-color .45s var(--ease),color .45s var(--ease);
}
.btn--gold{color:var(--gold);border-color:var(--gold);}
.btn--gold:hover,.btn--gold:focus-visible{background:var(--gold);color:var(--plum);}
.btn--plum{color:var(--plum);border-color:var(--plum);}
.btn--plum:hover,.btn--plum:focus-visible{background:var(--plum);color:var(--champagne);}

.arrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--accent);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  padding-bottom:.4em;
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease),gap .45s var(--ease);
}
.arrow::after{content:"";width:1.6em;height:1px;background:currentColor;transition:width .45s var(--ease);}
.arrow:hover,.arrow:focus-visible{border-color:currentColor;}
.arrow:hover::after{width:2.4em;}

/* --------------------------------------------------------------------------
   5 · HEADER & MENU
   -------------------------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto;z-index:120;
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
  transition:background-color .5s var(--ease),padding .5s var(--ease);
}
.header.is-stuck{background:rgba(18,10,15,.93);backdrop-filter:blur(9px);padding-block:.85rem;}

.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}

.header__logo{display:block;flex:none;}
.header__logo img{width:clamp(150px,17vw,240px);height:auto;transition:width .5s var(--ease);}
.header.is-stuck .header__logo img{width:clamp(130px,13vw,180px);}

.header__side{flex:1 1 0;display:flex;align-items:center;min-width:0;}
.header__side--end{justify-content:flex-end;}

.header__cta{
  font-family:var(--accent);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--champagne);text-decoration:none;
  padding-bottom:.35em;border-bottom:1px solid transparent;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.header__cta:hover,.header__cta:focus-visible{color:var(--gold);border-color:var(--gold);}

.burger{
  appearance:none;background:none;border:0;cursor:pointer;
  width:46px;height:34px;padding:0;position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
}
.burger span{
  display:block;height:1px;width:100%;background:var(--champagne);
  transition:transform .5s var(--ease),opacity .3s var(--ease);
  transform-origin:center;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg);}

/* Full-screen menu — Expresso Plum, pillars set large */
.menu{
  position:fixed;inset:0;z-index:110;
  background:var(--plum);
  display:flex;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s var(--ease);
  overflow-y:auto;
  padding-block:clamp(6rem,14vh,9rem);
}
.menu.is-open{opacity:1;visibility:visible;}

.menu__inner{
  width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:flex;flex-wrap:wrap;gap:clamp(2.5rem,7vw,6rem);align-items:flex-start;
}
.menu__nav{flex:1 1 30rem;min-width:0;}
.menu__aside{flex:0 1 18rem;min-width:0;}

.menu__item{
  border-bottom:1px solid rgba(201,164,122,.16);
  padding-block:clamp(.7rem,1.6vw,1.05rem);
  opacity:0;transform:translateY(18px);
}
.menu.is-open .menu__item{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.menu__item > a{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.6vw,3.2rem);
  line-height:1.08;
  color:var(--champagne);
  text-decoration:none;
  display:inline-block;
  transition:color .4s var(--ease);
}
.menu__item > a:hover,.menu__item > a:focus-visible{color:var(--gold);}

.menu__sub{display:flex;flex-wrap:wrap;gap:.4rem 1.9rem;margin-top:.5rem;}
.menu__sub a{
  font-family:var(--accent);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--greige);text-decoration:none;
  transition:color .4s var(--ease);
}
.menu__sub a:hover,.menu__sub a:focus-visible{color:var(--gold);}

.menu__aside p:not(.label){color:var(--greige);font-size:.98rem;}
.menu__aside a{color:var(--champagne);text-decoration:none;border-bottom:1px solid rgba(201,164,122,.3);}
.menu__aside a:hover,.menu__aside a:focus-visible{color:var(--gold);border-color:var(--gold);}

body.is-locked{overflow:hidden;}

/* --------------------------------------------------------------------------
   6 · HERO — full bleed still, slow zoom
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  background:var(--plum-deep);
  overflow:hidden;
}
.hero--short{min-height:68svh;}

.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.02);}
  to{transform:scale(1.13);}
}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none;transform:scale(1.02);}
}

.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(18,10,15,.62) 0%,rgba(18,10,15,.26) 38%,rgba(18,10,15,.78) 100%);
}

.hero__inner{position:relative;z-index:2;text-align:center;color:var(--champagne);}
.hero__mark{width:clamp(230px,34vw,470px);margin:0 auto;}
.hero__tag{
  font-family:var(--accent);font-size:var(--fs-label);font-weight:400;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold);margin-top:2rem;
}
.hero__title{color:var(--champagne);margin-top:.6rem;}

.cue{
  position:absolute;left:50%;bottom:clamp(1.8rem,4vh,3rem);
  transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-family:var(--accent);font-size:.6rem;font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--greige);text-decoration:none;
}
.cue__line{display:block;width:1px;height:52px;background:linear-gradient(var(--gold),transparent);}
@media (prefers-reduced-motion:no-preference){
  .cue__line{animation:cue 2.6s var(--ease) infinite;transform-origin:top;}
  @keyframes cue{0%,100%{transform:scaleY(.35);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}
}

/* Page head — for interior pages */
.phead{position:relative;z-index:2;text-align:center;color:var(--champagne);padding-inline:var(--gut);}
.phead h1{color:var(--champagne);}
.phead .label{margin-bottom:1.1rem;}

/* --------------------------------------------------------------------------
   7 · ACCOLADES — rotating single lines
   -------------------------------------------------------------------------- */
.accolades{position:relative;min-height:8.5em;display:flex;align-items:center;justify-content:center;text-align:center;}
.acc-item{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  opacity:0;transition:opacity 1.1s var(--ease);
  pointer-events:none;
}
.acc-item.is-live{opacity:1;}
.acc-item p{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.5vw,2rem);
  line-height:1.24;color:var(--champagne);
  max-width:24em;margin:0;text-wrap:balance;
}
.acc-item .caption{color:var(--gold);}

/* --------------------------------------------------------------------------
   8 · PILLAR BLOCKS — alternating image / text
   -------------------------------------------------------------------------- */
.band{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(2rem,6vw,5.5rem);}
.band + .band{margin-top:clamp(4rem,9vw,8.5rem);}
.band--flip{flex-direction:row-reverse;}

.band__media{flex:1 1 24rem;min-width:0;}
.band__copy{flex:1 1 21rem;min-width:0;}
.band__copy h2{margin-bottom:1.5rem;}
.band__copy .arrow{margin-top:1.9rem;}

.frame{position:relative;overflow:hidden;background:var(--plum-lift);}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);}
.frame:hover img{transform:scale(1.035);}
.ratio-45{aspect-ratio:4/5;}
.ratio-32{aspect-ratio:3/2;}
.ratio-11{aspect-ratio:1/1;}
.ratio-219{aspect-ratio:21/9;}

/* Pinned media — image holds while text scrolls */
@media (min-width:900px){
  .band--pin .band__media{position:sticky;top:14vh;}
}

/* --------------------------------------------------------------------------
   9 · CARDS
   -------------------------------------------------------------------------- */
.cards{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,2.6vw,2.2rem);}
.cards > *{flex:1 1 20rem;min-width:0;}

.card{
  position:relative;display:block;text-decoration:none;
  overflow:hidden;background:var(--plum);
  color:var(--champagne);
}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);}
.card:hover img,.card:focus-visible img{transform:scale(1.05);}
.card__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,10,15,.15) 30%,rgba(18,10,15,.82) 100%);
}
.card__body{
  position:absolute;inset:auto 0 0;
  padding:clamp(1.4rem,3vw,2.3rem);
}
.card__body h3{color:var(--champagne);margin-bottom:.55rem;}
.card__body .label{margin-bottom:.7rem;}
.card__body p{color:var(--greige);font-size:.98rem;margin:0;}

/* Icon boxes — plain, no imagery */
.boxes{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,3.4vw,3rem);}
.boxes > *{flex:1 1 15rem;min-width:0;}
.box .numeral{margin-bottom:.9rem;}
.box h3{margin-bottom:.9rem;}
.box p{font-size:1rem;margin:0;}

/* Columns — the four principles */
.cols{display:flex;flex-wrap:wrap;gap:clamp(1.8rem,3.6vw,3.2rem);}
.cols > *{flex:1 1 14rem;min-width:0;}

/* --------------------------------------------------------------------------
   10 · ACCORDION
   -------------------------------------------------------------------------- */
.acc{border-top:1px solid var(--rule);}
.acc details{border-bottom:1px solid var(--rule);}
.acc summary{
  list-style:none;cursor:pointer;
  padding-block:clamp(1.1rem,2.4vw,1.7rem);
  display:flex;align-items:baseline;gap:1.2rem;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .numeral{margin:0;flex:none;}
.acc summary h3{flex:1 1 auto;transition:color .4s var(--ease);}
.acc summary::after{
  content:"";flex:none;width:13px;height:13px;align-self:center;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .45s var(--ease);
}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.acc summary:hover h3,.acc details[open] summary h3{color:var(--gold);}
.acc__body{padding:0 0 clamp(1.3rem,2.6vw,2rem) calc(var(--fs-label) + 5.2em);}
.acc__body p{max-width:36em;}
@media (max-width:620px){.acc__body{padding-left:0;}}

/* --------------------------------------------------------------------------
   11 · GALLERY & PARTNERS
   -------------------------------------------------------------------------- */
.gallery{display:flex;flex-wrap:wrap;gap:clamp(.6rem,1.4vw,1.1rem);}
.gallery > *{flex:1 1 18rem;min-width:0;}

.partners{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;justify-content:center;}
.partners > *{flex:0 1 8.5rem;min-width:0;}

/* --------------------------------------------------------------------------
   12 · SPLIT — two facing lists
   -------------------------------------------------------------------------- */
.split{display:flex;flex-wrap:wrap;gap:clamp(2rem,6vw,5rem);}
.split > *{flex:1 1 16rem;min-width:0;}
.plain{list-style:none;margin:0;padding:0;}
.plain li{
  font-family:var(--display);
  font-size:clamp(1.35rem,2.4vw,1.95rem);
  line-height:1.55;
}

/* --------------------------------------------------------------------------
   13 · FORM
   -------------------------------------------------------------------------- */
.form{display:flex;flex-wrap:wrap;gap:1.5rem 1.7rem;}
.field{flex:1 1 17rem;min-width:0;display:flex;flex-direction:column;gap:.6rem;}
.field--full{flex:1 1 100%;}
.field label{
  font-family:var(--accent);font-size:.63rem;font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--greige);
}
.field input,.field select,.field textarea{
  font-family:var(--editorial);font-size:1.05rem;color:var(--plum);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.7em 0;border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:6.5em;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--gold);
}

/* --------------------------------------------------------------------------
   14 · FOOTER
   -------------------------------------------------------------------------- */
.footer{background:var(--plum-deep);color:var(--greige);padding-block:clamp(3.5rem,7vw,6rem) 2.5rem;}
.footer a{text-decoration:none;color:var(--champagne);transition:color .4s var(--ease);}
.footer a:hover,.footer a:focus-visible{color:var(--gold);}
.footer__top{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4rem);justify-content:space-between;}
.footer__brand{flex:1 1 16rem;min-width:0;}
.footer__brand img{width:190px;margin-bottom:1.4rem;}
.footer__nav{flex:1 1 9rem;min-width:0;}
.footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.footer__nav a{font-family:var(--accent);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;}
.footer__base{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.8rem;
  border-top:1px solid rgba(201,164,122,.16);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
}
.footer__base p{
  font-family:var(--accent);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--greige);margin:0;line-height:2;
}

/* --------------------------------------------------------------------------
   15 · IMAGE SLOT PLACEHOLDERS
   Every slot is labelled with its name and ratio until real photography
   arrives. Delete this block once images are in.
   -------------------------------------------------------------------------- */
.slot{
  position:relative;
  background:
    repeating-linear-gradient(45deg,rgba(201,164,122,.05) 0 12px,transparent 12px 24px),
    var(--plum-lift);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,164,122,.2);
}
.slot::after{
  content:attr(data-slot);
  font-family:var(--accent);font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);text-align:center;padding:1rem;line-height:2;
}
/* ==========================================================================
   16 · MOTION — scroll-driven

   Two layers. Native scroll-linked animation where the browser supports
   animation-timeline (Chrome, Edge, Safari 26+); IntersectionObserver
   reveals everywhere else. Both collapse under prefers-reduced-motion.

   Only transform and opacity animate, so every effect stays on the
   compositor and never triggers layout.
   ========================================================================== */

/* --- Scroll progress hairline ------------------------------------------- */
.progress{
  position:fixed;inset:0 auto auto 0;z-index:140;
  height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--rose) 60%,var(--champagne));
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .progress{
    animation:cr-progress linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes cr-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- Base reveal (JS fallback) ------------------------------------------ */
.js .reveal{opacity:0;transform:translate3d(0,30px,0);}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.js .reveal--d1.is-in{transition-delay:.1s;}
.js .reveal--d2.is-in{transition-delay:.2s;}
.js .reveal--d3.is-in{transition-delay:.3s;}
.js .reveal--d4.is-in{transition-delay:.4s;}

/* --- Word-by-word display reveal ---------------------------------------- */
.js .split .word{
  display:inline-block;
  opacity:0;transform:translate3d(0,.6em,0) rotate(1.4deg);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.js .split.is-in .word{opacity:1;transform:none;}

/* --- Keyframes ----------------------------------------------------------- */
@keyframes cr-rise{
  from{opacity:0;transform:translate3d(0,52px,0)}
  to  {opacity:1;transform:none}
}
@keyframes cr-wipe{
  from{clip-path:inset(0 0 100% 0);transform:scale(1.16)}
  to  {clip-path:inset(0 0 0 0);   transform:scale(1.06)}
}
@keyframes cr-drift{
  from{transform:translate3d(0,-3.2%,0) scale(1.14)}
  to  {transform:translate3d(0, 3.2%,0) scale(1.14)}
}
@keyframes cr-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cr-heroOut{
  from{opacity:1;transform:none}
  to  {opacity:0;transform:translate3d(0,-70px,0) scale(.96)}
}
@keyframes cr-kern{
  from{opacity:0;letter-spacing:.22em}
  to  {opacity:1;letter-spacing:-.012em}
}

/* --- Native scroll-linked layer ----------------------------------------- */
@supports (animation-timeline:view()){
  .js .reveal{opacity:1;transform:none;transition:none;}

  main h2,
  main .quote{
    animation:cr-rise linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 24%;
  }

  .band__copy,
  .box,
  .card,
  .acc details{
    animation:cr-rise linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 22%;
  }

  /* Media wipes up as it enters, then drifts through */
  .frame .slot,
  .frame img{
    animation:cr-wipe linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 34%;
    will-change:transform,clip-path;
  }

  .hero__media .slot,
  .hero__media img{
    animation:cr-drift linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }

  /* Hero recedes as you leave it */
  .hero__inner{
    animation:cr-heroOut linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 90%;
  }

  .rule{
    transform-origin:0 50%;
    animation:cr-draw linear both;
    animation-timeline:view();
    animation-range:entry 8% cover 28%;
  }

  /* Section labels track in from wide */
  .label{
    animation:cr-kern linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 18%;
  }
}

/* --- Pinned pillar bands ------------------------------------------------- */
@media (min-width:900px){
  .band--pin .band__media{
    position:sticky;top:11vh;height:78vh;
  }
  .band--pin .band__media .frame{height:100%;}
  .band--pin .band__copy{padding-block:15vh;}
}

/* --- Marquee ------------------------------------------------------------- */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee__track{display:flex;width:max-content;animation:cr-marquee 46s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{
  font-family:var(--display);
  font-size:clamp(1.05rem,2vw,1.55rem);
  color:var(--champagne);white-space:nowrap;
  display:inline-flex;align-items:center;gap:4rem;padding-right:4rem;
}
.marquee__item::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--rose);flex:none;
}
@keyframes cr-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- Hover ---------------------------------------------------------------- */
.card{transition:transform .8s var(--ease-out);}
.card:hover,.card:focus-visible{transform:translate3d(0,-8px,0);}

.arrow::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s var(--ease-out);
}
.arrow{position:relative;}
.arrow:hover::before,.arrow:focus-visible::before{transform:scaleX(1);transform-origin:0 50%;}

/* --- Hero entrance -------------------------------------------------------- */
.js .hero__mark{opacity:0;transform:translate3d(0,22px,0) scale(.985);}
.js .hero__mark.is-in{opacity:1;transform:none;
  transition:opacity 1.6s var(--ease-out),transform 1.6s var(--ease-out);}
.js .hero__tag{opacity:0;transform:translate3d(0,14px,0);}
.js .hero__tag.is-in{opacity:1;transform:none;
  transition:opacity 1.3s var(--ease-out) .5s,transform 1.3s var(--ease-out) .5s;}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .progress{display:none;}
  .js .reveal,.js .split .word,.js .hero__mark,.js .hero__tag{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  *,*::before,*::after{animation:none!important;}
  .frame .slot,.frame img,.hero__media .slot,.hero__media img{
    clip-path:none!important;transform:none!important;
  }
  .band--pin .band__media{position:static;height:auto;}
  .rule{transform:none!important;}
  .card:hover{transform:none;}
}
/* --------------------------------------------------------------------------
   17 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .header__side--start{display:none;}
  .header__side{flex:0 0 auto;}
  .header__inner{justify-content:space-between;}
  .band--pin .band__media{position:static;}
}

@media (max-width:620px){
  :root{--fs-label:.64rem;}
  .menu__inner{flex-direction:column;gap:2.5rem;}
  .footer__top{flex-direction:column;}
}