/* ============================================================
   RUGS DE INDISKA — Home
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:        #241a12;
  --ink-soft:   rgba(115, 102, 88, 1);
  --muted:      #7e6f5e;
  --muted-lt:   #9b8d7c;

  --cream:      #faf7f1;
  --cream-2:    rgba(244, 237, 216, 0.3);
  --sand:       #ece4d5;
  --hair:       #ded3c0;

  --gold:       #b08d4f;
  --gold-lt:    #c9a86a;
  --gold-pale:  #e3d2ae;

  --navy:       #0f1a30;
  --navy-2:     #16233d;

  --shell:      1320px;
  --gut:        clamp(20px, 5vw, 64px);

  /* Cormorant Garamond carries every heading; Public Sans every body copy,
     label, and UI string. */
  --ff-display: var(--font-display), "Times New Roman", serif;
  --ff-ui:      var(--font-ui), "Helvetica Neue", Arial, sans-serif;

  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --header-h:   84px;

  /* Colour the hero fades down into — must match the background of the
     section directly below it, as bare RGB components so it can be used
     at partial alpha. */
  --page-bg-rgb: 255, 255, 255;

  /* Vector.png ships as black line art; this chain retints it to --gold.
     Calibrated against #b08d4f — resolves to #aa8c4c. */
  --tint-gold: brightness(0) saturate(100%) invert(58%) sepia(38%)
               saturate(520%) hue-rotate(3deg) brightness(90%) contrast(88%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  /* background:var(--cream); */
  color:var(--ink);
  font-family:var(--ff-ui);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--cream); padding:12px 20px;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

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

/* ============================================================
   PAGE LOADER
   Covers first paint and every internal navigation.

   Only shown once the inline <head> script has set .has-loader on <html>,
   so a browser with scripting off never meets an overlay it cannot dismiss.
   The failsafe keyframe is the second half of that guarantee: if script.js
   fails to load, it lifts the overlay at 8s anyway. script.js sets .is-ready
   the moment it runs, which cancels the failsafe and takes ownership.
   ============================================================ */
.loader{ display:none; }

.has-loader .loader{
  display:grid;
  place-items:center;
  position:fixed;
  inset:0;
  z-index:9999;
  background:radial-gradient(120% 90% at 50% 44%, #241a12 0%, #120d07 64%);
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
  animation:loaderFailsafe 1ms linear 8s forwards;
}
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; } }

.loader.is-ready{ animation:none; }
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
/* re-shown on the way out of the page */
.loader.is-leaving{ opacity:1; visibility:visible; pointer-events:auto; }

.loader__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  transition:transform .8s var(--ease), opacity .6s var(--ease);
}
.loader.is-done .loader__inner{ transform:translateY(-10px); opacity:0; }

.loader__logo{
  width:clamp(112px, 13vw, 152px);
  height:auto;
  opacity:0;
  transform:translateY(12px) scale(.96);
  animation:loaderLogo 1.1s var(--ease) .08s forwards;
}
@keyframes loaderLogo{ to{ opacity:1; transform:none; } }

.loader__bar{
  position:relative;
  width:132px; height:1px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
  opacity:0;
  animation:loaderLogo .6s var(--ease) .22s forwards;
}
.loader__bar i{
  position:absolute; inset:0 auto 0 0;
  width:40%;
  background:var(--gold-lt);
  animation:loaderRun 1.3s var(--ease-soft) infinite;
}
@keyframes loaderRun{
  0%  { transform:translateX(-110%); }
  100%{ transform:translateX(360%); }
}
/* the run resolves into a full bar as the overlay lifts */
.loader.is-done .loader__bar i{ animation:none; width:100%; transform:none; }

/* Hold the entrance animations until the overlay has lifted, so the hero
   is not already half-played by the time anyone can see it. */
.has-loader:not(.loaded) .hero__media img,
.has-loader:not(.loaded) .hero__title .line > span,
.has-loader:not(.loaded) .hero__eyebrow,
.has-loader:not(.loaded) .hero__copy,
.has-loader:not(.loaded) .hero__actions,
.has-loader:not(.loaded) .scroll-cue,
.has-loader:not(.loaded) .page-banner__media img{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .loader__bar{ display:none; }
}

/* ---------- Layout ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{ padding-block:clamp(72px, 9vw, 140px); position:relative; }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--ff-ui);
  font-size:11px;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:22px;
}
.eyebrow .dash{ color:var(--gold); padding-inline:2px; }
.eyebrow--gold{ color:var(--gold); }
.eyebrow--light{ color:rgba(255,255,255,.78); }

.h2{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(30px, 4vw, 54px);
  line-height:1.16;
  letter-spacing:.005em;
}
.h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(24px, 2.7vw, 38px);
  line-height:1.2;
}
.lede{
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.9;
  max-width:52ch;
  margin-bottom:20px;
}

/* Gold rule under the closing word of a section heading. A pseudo-element
   rather than text-decoration so it can draw in with the heading's reveal. */
.uline{ position:relative; white-space:nowrap; }
.uline::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-.06em;
  height:1px;
  background:var(--gold-pale);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--ease) .35s;
}
.is-visible .uline::after{ transform:scaleX(1); }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid currentColor;
  overflow:hidden;
  isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--btn-bg);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scaleX(1); }
.btn--sm{ padding:11px 22px; font-size:10px; }

.btn--solid{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  --btn-bg:#fff;
}
.btn--solid:hover, .btn--solid:focus-visible{ color:var(--ink); }

.btn--ghost{
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.45);
  --btn-bg:#fff;
}
.btn--ghost:hover, .btn--ghost:focus-visible{ color:var(--ink); border-color:#fff; }

.btn--outline{
  color:currentColor;
  border-color:currentColor;
  --btn-bg:var(--gold);
}
.btn--outline:hover, .btn--outline:focus-visible{ color:#fff; border-color:var(--gold); }

/* Navy button — used by the collections volumes and the contact form,
   so it lives here rather than in either page stylesheet. */
.btn--navy{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  --btn-bg:var(--navy-2);
}
.btn--navy:hover,
.btn--navy:focus-visible{ color:#fff; border-color:var(--navy-2); }
.btn--navy svg{
  width:20px; height:10px;
  transition:transform .5s var(--ease);
}
.btn--navy:hover svg{ transform:translateX(5px); }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  padding-bottom:6px;
  border-bottom:1px solid var(--gold-pale);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.link-arrow svg{ width:22px; height:11px; transition:transform .5s var(--ease); }
.link-arrow:hover{ color:var(--ink); border-color:var(--ink); }
.link-arrow:hover svg{ transform:translateX(6px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  color:#fff;
  transition:height .5s var(--ease), background-color .5s var(--ease),
             color .5s var(--ease), box-shadow .5s var(--ease),
             transform .55s var(--ease);
  will-change:transform;
}
.site-header::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(18,12,7,.55), rgba(18,12,7,0));
  opacity:1;
  transition:opacity .5s var(--ease);
}
.site-header.is-stuck{
  height:70px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:none;
}
.site-header.is-stuck::after{ opacity:0; }
.site-header.is-hidden{ transform:translateY(-100%); }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
}

.brand{
  display:flex; align-items:center; gap:12px;
  flex:0 0 auto; position:relative; z-index:3;
}
.brand__mark{
  width:86px; height:auto;
  transition:filter .5s var(--ease);
}
/* The mark is 110x78, so 106px wide stands 75px tall — taller than the 70px
   compact header. Scale it down with the header so it never overhangs. */
.site-header.is-stuck .brand__mark{
  width:84px;
  filter:brightness(0) opacity(.78);
}
.brand__name{
  font-family:var(--ff-display);
  font-size:15px;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav__list{ display:flex; gap:clamp(18px, 2.4vw, 40px); }
.nav__list a{
  position:relative;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.86;
  padding-block:6px;
  transition:opacity .4s var(--ease);
}
.nav__list a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold-lt);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .5s var(--ease);
}
.nav__list a:hover{ opacity:1; }
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left center; }
.nav__list a[aria-current="page"]{ opacity:1; }
.nav__list a[aria-current="page"]::after{
  transform:scaleX(1);
  transform-origin:left center;
}

.header-actions{ display:flex; align-items:center; gap:22px; flex:0 0 auto; }
.nav__bespoke{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.86; transition:opacity .4s var(--ease), color .4s var(--ease);
}
.nav__bespoke:hover{ opacity:1; color:var(--gold-lt); }
.nav__actions-mobile{ display:none; }

/* Burger */
.burger{
  display:none;
  width:30px; height:20px;
  position:relative;
  z-index:3;
  flex:0 0 auto;
}
.burger span{
  position:absolute; left:0;
  width:100%; height:1px;
  background:currentColor;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:2px; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:16px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  /* --hero-fade-h:clamp(56px, 7vh, 108px); */
  position:relative;
  min-height:clamp(600px, 100vh, 100dvh);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
}

/* Dissolves the hard bottom edge of the banner into the section below.
   Stops are explicit rgba rather than `transparent`, which interpolates
   through black and would leave a grey haze across the middle of the fade.
   Sits at z-index 1: above the image and scrim, below .hero__inner (2). */
/* .hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--hero-fade-h);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(var(--page-bg-rgb), 0)    0%,
    rgba(var(--page-bg-rgb), .08) 42%,
    rgba(var(--page-bg-rgb), .34) 70%,
    rgba(var(--page-bg-rgb), .76) 89%,
    rgba(var(--page-bg-rgb), 1)  100%
  );
} */
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:68% center;
  transform:scale(1.14);
  animation:heroZoom 2.4s var(--ease) .1s forwards;
  will-change:transform;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,13,7,.82) 0%, rgba(20,13,7,.55) 42%, rgba(20,13,7,.08) 78%),
    linear-gradient(180deg, rgba(20,13,7,.35) 0%, rgba(20,13,7,0) 35%, rgba(20,13,7,.35) 100%);
}

.hero__inner{ position:relative; z-index:2; padding-top:var(--header-h); }
.hero__eyebrow{
  font-size:10.5px;
  letter-spacing:.32em;
  margin-bottom:26px;
}

.hero__title{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(42px, 6.6vw, 92px);
  line-height:1.06;
  letter-spacing:-.005em;
  margin-bottom:26px;
  text-shadow:0 2px 40px rgba(0,0,0,.28);
}
.hero__title em{ font-style:italic; font-weight:300; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  animation:lineUp 1.15s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.30s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.44s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero__copy{
  max-width:46ch;
  color:rgba(255,255,255,.82);
  font-size:15.5px;
  line-height:1.9;
  margin-bottom:38px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* staged fade-ins */
.hero__eyebrow,
.hero__copy,
.hero__actions{
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp 1s var(--ease) forwards;
}
.hero__eyebrow{ animation-delay:.18s; }
.hero__copy{    animation-delay:.72s; }
.hero__actions{ animation-delay:.88s; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* Held above the bottom fade — inside it the white track would disappear
   and only the travelling gold dash would read. */
.scroll-cue{
  position:absolute;
  left:50%; 
  bottom:20px;
  transform:translateX(-50%);
  z-index:2;
  width:28px; height:68px;
  opacity:0;
  animation:fadeUp 1s var(--ease) 1.3s forwards;
}
.scroll-cue__line{
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1.8px;
  overflow:hidden;
  background:rgba(255,255,255,.35);
}
.scroll-cue__line::after{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:26px;
  background:var(--gold-lt);
  animation:cueRun 2.4s var(--ease-soft) infinite;
}
@keyframes cueRun{
  0%{ transform:translateY(-30px); }
  100%{ transform:translateY(64px); }
}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head{
  display:grid;
  grid-template-columns:1fr minmax(0, 360px);
  align-items:end;
  padding-bottom:44px;
  margin-bottom:clamp(34px, 4vw, 56px);
  border-bottom:1px solid var(--hair);
}
.sec-head__note{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.85;
}
.sec-head--center{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:clamp(44px, 5vw, 76px);
}
/* .sec-head--center .h2{ max-width:18ch; } */

/* line — rosette — line */
.ornament{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:26px;
}
.ornament::before,
.ornament::after{
  content:"";
  width:clamp(34px, 6vw, 62px);
  height:1px;
  background:var(--gold-pale);
}
.ornament img{
  width:26px; height:26px;
  filter:var(--tint-gold);
}

/* ============================================================
   01 · COLLECTION
   ============================================================ */
.grid-4{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(14px, 1.6vw, 24px);
}
.card{ position:relative; }
.card__link{ display:block; position:relative; overflow:hidden; }
.card__media{
  position:relative;
  aspect-ratio:784 / 907;
  overflow:hidden;
  background:var(--sand);
}
.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.5s var(--ease), filter 1s var(--ease);
  will-change:transform;
}
.card__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,13,7,0) 38%, rgba(20,13,7,.72) 100%);
  transition:opacity .7s var(--ease);
}
.card__link:hover .card__media img{ transform:scale(1.09); filter:brightness(1.04); }
.card__link:hover .card__media::after{ opacity:.88; }

.card__body{
  position:absolute;
  left:clamp(18px, 2vw, 32px);
  right:clamp(18px, 2vw, 32px);
  bottom:clamp(20px, 2.2vw, 34px);
  color:#fff;
  z-index:2;
}
.card__chapter{
  font-size:9.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin-bottom:8px;
}
.card__title{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(20px, 2.1vw, 30px);
  line-height:1.2;
  transition:transform .7s var(--ease);
}
.card__cta{
  display:block;
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-top:10px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.card__link:hover .card__title{ transform:translateY(-4px); }
.card__link:hover .card__cta{ opacity:1; transform:none; }

/* thin inner frame that draws on hover */
.card__link::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.35);
  opacity:0;
  transform:scale(1.03);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
  pointer-events:none;
  z-index:3;
}
.card__link:hover::after{ opacity:1; transform:scale(1); }

/* ============================================================
   02 · ATELIER
   ============================================================ */
.atelier{ 
  /* background:var(--cream);  */
  overflow:hidden; 
  padding-top: 0;
}
/* pattern.png is black line art baked at 3% alpha over white. Multiplying
   keeps that white ground invisible against the section colour, so no square
   edge shows — only the linework darkens, at its native 3%. Deliberately a
   single layer: stacking the image compounds the alpha and the watermark
   stops reading as a ghost. It sits centred behind whichever editorial text
   block it belongs to. */
.watermark{
  position:absolute;
  top:50%; left:50%;
  width:min(660px, 132%);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  pointer-events:none;
  mix-blend-mode:multiply;
  background:url("images/pattern.avif") center / contain no-repeat;
}

/* No z-index here: it would create a stacking context and isolate the
   .watermark child's multiply blend from the section background, leaving the
   pattern's white ground visible as a pale square. See .timeline for the same
   constraint. */
.split{
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:clamp(36px, 5vw, 80px);
  align-items:center;
  position:relative;
  padding-top:clamp(40px, 5vw, 64px);
  border-top:1px solid var(--hair);
}
.split__media{
  position:relative;
  aspect-ratio:842 / 847;
  overflow:hidden;
  background:var(--sand);
}
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__text{ position:relative; }
.split__text > *:not(.watermark){ position:relative; z-index:1; }
.split__text .eyebrow{ margin-bottom:18px; }
.split__text .h2{ margin-bottom:26px; }
.split__text .lede:last-child{ margin-bottom:0; }

/* Process */
.process{
  position:relative;
  z-index:1;
  /* margin-top:clamp(64px, 8vw, 116px); */
  padding-top:clamp(40px, 5vw, 64px);
  /* border-top:1px solid var(--hair); */
}
.process__head{ margin-bottom:clamp(30px, 3.6vw, 48px); }
.process__head .eyebrow{ margin-bottom:14px; color:var(--gold); }

/* One continuous rail with a ring node per stage sitting on it.
   The rail draws left-to-right once the heading above has revealed,
   which is why it hangs off a sibling selector rather than its own observer. */
.process__grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
}
.process__grid::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:4px;
  height:1px;
  background:var(--gold-pale);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.4s var(--ease) .1s;
}
.process__head.is-visible ~ .process__grid::before{ transform:scaleX(1); }

.step{
  position:relative;
  text-align:center;
  padding:0 clamp(12px, 1.6vw, 26px);
}
.step__node{
  display:block;
  width:9px; height:9px;
  margin:0 auto 12px;
  border:1px solid var(--gold);
  border-radius:50%;
  background:var(--cream);
  position:relative;
  z-index:1;
  transition:background-color .5s var(--ease), transform .5s var(--ease);
}
.step__num{
  display:block;
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
  transition:color .5s var(--ease);
}
.step__title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:18px;
  letter-spacing:.01em;
  margin-bottom:9px;
}
.step__copy{
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
  max-width:24ch;
  margin-inline:auto;
}
.step:hover .step__node{ background:var(--gold); transform:scale(1.25); }

/* ============================================================
   03 · OUR WORLD
   ============================================================ */
.world{ background:var(--cream-2); overflow:hidden; }
.world .shell{ position:relative; z-index:1; }

.editorial{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  align-items:center;
  gap:clamp(30px, 5vw, 80px);
}
.editorial + .editorial{ margin-top:clamp(48px, 6vw, 96px); }
.editorial--flip{ grid-template-columns:1.08fr 1fr; }

.editorial__media{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--sand);
}
.editorial__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.editorial__media.is-visible:hover img{ transform:scale(1.05); }
.split__media.is-visible:hover img{ transform:scale(1.05); }
.split__media img{ transition:transform 1.4s var(--ease); }

.editorial__text{ position:relative; }
.editorial__text > *:not(.watermark){ position:relative; z-index:1; }
.editorial__text .eyebrow{ margin-bottom:16px; }
.editorial__text .h3{ margin-bottom:22px; }
.editorial__text .lede{ font-size:14.5px; }

/* ============================================================
   04 · HERITAGE
   ============================================================ */
.heritage{ 
  /* background:var(--cream);  */
  overflow:hidden; 
}

/* No z-index here on purpose: it would create a stacking context and isolate
   the .watermark child's multiply blend from the section background, which
   makes the pattern's white ground show as a pale square. Paint order is
   handled by DOM order instead — watermark first, then rail, then the list. */
.timeline{ position:relative; max-width:1000px; margin-inline:auto; }
.timeline__list{ position:relative; }
.timeline .watermark{ width:min(700px, 88%); }
.timeline__rail{
  position:absolute;
  left:50%; top:6px; bottom:6px;
  width:1px;
  transform:translateX(-50%);
  background:var(--hair);
}
.timeline__rail i{
  position:absolute; inset:0 auto auto 0;
  width:100%; height:0;
  background:var(--gold);
  transition:height .25s linear;
}

.tl{ position:relative; width:50%; padding-block:clamp(18px, 2.4vw, 34px); }
.tl--left{
  margin-right:auto;
  padding-right:clamp(30px, 4vw, 66px);
  text-align:right;
}
.tl--right{
  margin-left:auto;
  padding-left:clamp(30px, 4vw, 66px);
}
.tl__inner{ transition:transform .6s var(--ease); }
.tl:hover .tl__inner{ transform:translateY(-4px); }

/* node */
.tl::before{
  content:"";
  position:absolute;
  top:calc(clamp(18px, 2.4vw, 34px) + 22px);
  width:9px; height:9px;
  border:1px solid var(--gold);
  background:var(--cream);
  transform:rotate(45deg) scale(.4);
  opacity:0;
  transition:transform .7s var(--ease) .15s, opacity .5s var(--ease) .15s, background-color .5s var(--ease);
}
.tl--left::before{ right:-4.5px; }
.tl--right::before{ left:-4.5px; }
.tl.is-visible::before{ transform:rotate(45deg) scale(1); opacity:1; }
.tl:hover::before{ background:var(--gold); }

.tl__year{
  display:block;
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(34px, 4.4vw, 56px);
  line-height:1;
  color:var(--gold-pale);
  margin-bottom:12px;
  transition:color .6s var(--ease);
}
.tl:hover .tl__year{ color:var(--gold); }
.tl__year--now{ color:var(--gold); }
.tl__title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(18px, 1.9vw, 24px);
  margin-bottom:10px;
}
.tl__copy{
  font-size:13.5px;
  line-height:1.85;
  color:var(--muted);
  max-width:40ch;
}
.tl--left .tl__copy{ margin-left:auto; }

/* ============================================================
   05 · VOICES
   ============================================================ */
.voices{ 
  /* background:var(--cream);  */
  padding-top:0; 
}

.quotes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 28px);
}
.quote{
  position:relative;
  background:var(--cream-2);
  /* border:1px solid var(--hair); */
  padding:clamp(28px, 3vw, 42px) clamp(24px, 2.6vw, 38px);
  text-align:center;
  overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease),
             background-color .6s var(--ease), border-color .6s var(--ease);
}
.quote::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s var(--ease);
}
.quote:hover{
  transform:translateY(-8px);
  background:#fffdf8;
  border-color:var(--gold-pale);
  box-shadow:0 24px 50px -30px rgba(36,26,18,.35);
}
.quote:hover::before{ transform:scaleX(1); }

/* Vector.png is a black rosette on transparency — masked so it takes the
   brand gold rather than printing as grey. */
.quote__mark{
  display:block;
  width:32px; height:32px;
  margin:0 0 20px;
  /* filter:var(--tint-gold); */
  transition:transform .7s var(--ease);
}
.quote:hover .quote__mark{ transform:rotate(45deg) scale(1.08); }
.quote blockquote{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(16px, 1.5vw, 19px);
  line-height:1.65;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.quote figcaption{
  font-size:9.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-lt);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{
  position:relative;
  min-height:clamp(420px, 46vw, 620px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.cta__media{ position:absolute; inset:-8% 0; }
.cta__media img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
.cta__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,15,7,.34), rgba(24,15,7,.62));
}
.cta__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(60px, 7vw, 90px);
}
.cta__logo{
  width:clamp(170px, 15vw, 220px);
  max-width:70vw;
  height:auto;
  object-fit:contain;
  margin-bottom:clamp(12px, 1.6vw, 20px);
}
.cta__title{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(28px, 4vw, 54px);
  line-height:1.2;
  margin-bottom:22px;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.cta__copy{
  max-width:62ch;
  font-size:14.5px;
  line-height:1.95;
  color:rgba(255,255,255,.8);
}


.cta__inner img {
  width: 300px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  background:var(--navy);
  color:rgba(255,255,255,.72);
  overflow:hidden;
  padding-top:clamp(56px, 6vw, 92px);
}
.footer__media{ position:absolute; inset:0; opacity:.85; }
.footer__media img{
  width:100%; height:100%;
  object-fit:cover;
}
.footer__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,26,48,.62), rgba(15,26,48,.92));
}

.footer__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.25fr .8fr .95fr 1.15fr;
  gap:clamp(28px, 4vw, 60px);
  padding-bottom:clamp(44px, 5vw, 70px);
}
.footer__logo{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(18px, 2.2vw, 22px);
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.footer__blurb{
  font-size:13px;
  line-height:1.85;
  max-width:30ch;
  color:rgba(255,255,255,.6);
}
.footer__brand .footer__blurb{ margin-bottom:26px; }

.socials{ display:flex; gap:10px; }
.socials a{
  display:grid; place-items:center;
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:rgba(255,255,255,.72);
  transition:background-color .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.socials svg{ width:15px; height:15px; }
.socials a:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  transform:translateY(-3px);
}

.footer__head{
  font-family:var(--ff-ui);
  font-size:10px;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.95);
  margin-bottom:22px;
}
.footer__col ul li + li{ margin-top:12px; }
.footer__col a{
  position:relative;
  font-size:13.5px;
  color:rgba(255,255,255,.62);
  transition:color .4s var(--ease), padding-left .4s var(--ease);
}
.footer__col a::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:0; height:1px;
  background:var(--gold-lt);
  transition:width .4s var(--ease);
}
.footer__col a:hover{ color:#fff; padding-left:18px; }
.footer__col a:hover::before{ width:12px; }

.footer__col--news .footer__blurb{ margin-bottom:22px; }
.news{ position:relative; display:flex; align-items:center; max-width:320px; }
.news input{
  flex:1;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  padding:12px 34px 12px 0;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  transition:border-color .45s var(--ease);
}
.news input::placeholder{ color:rgba(255,255,255,.42); }
.news input:focus{ outline:none; border-color:var(--gold-lt); }
.news button{
  position:absolute; right:0;
  display:grid; place-items:center;
  width:26px; height:26px;
  color:rgba(255,255,255,.7);
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.news button svg{ width:22px; height:11px; }
.news button:hover{ color:var(--gold-lt); transform:translateX(4px); }
.news__msg{
  position:absolute; left:0; top:100%;
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-lt);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.news__msg.is-on{ opacity:1; transform:none; }

.footer__bar{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:12px 28px;
  align-items:center; justify-content:space-between;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.footer__bar ul{ display:flex; gap:26px; }
.footer__bar a{ transition:color .4s var(--ease); }
.footer__bar a:hover{ color:var(--gold-lt); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  filter:blur(3px);
  transition:opacity 1s var(--ease) var(--d, 0ms),
             transform 1s var(--ease) var(--d, 0ms),
             filter 1s var(--ease) var(--d, 0ms);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; filter:none; }

/* NOTE: the clip-path lives on the <img>, never on the observed element —
   Blink folds a target's own clip-path into its intersection rect, so a
   fully-clipped target would never reach the observer threshold. */
.reveal-img img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.18);
  transition:clip-path 1.3s var(--ease), transform 1.7s var(--ease);
  will-change:clip-path, transform;
}
.reveal-img.is-visible img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Public Sans runs wider than a geometric sans, so the five nav labels stop
   fitting alongside the full wordmark well before the burger takes over at
   960px. Drop to the mark alone and tighten the tracking through that band. */
@media (max-width:1180px){
  .brand__name{ display:none; }
  .nav__list{ gap:clamp(14px, 1.8vw, 26px); }
  .nav__list a,
  .nav__bespoke{ letter-spacing:.14em; }
  .header-actions{ gap:18px; }
}

@media (max-width:1080px){
  .footer__inner{ grid-template-columns:1fr 1fr; row-gap:44px; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:960px){
  :root{ --header-h:70px; }

  .nav{
    position:fixed;
    inset:0 0 auto 0;
    z-index:2;
    padding:calc(var(--header-h) + 30px) var(--gut) 44px;
    background:rgba(19,13,8,.97);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    color:#fff;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .65s var(--ease);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list li{
    border-bottom:1px solid rgba(255,255,255,.12);
    opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav.is-open .nav__list li{ opacity:1; transform:none; }
  .nav.is-open .nav__list li:nth-child(1){ transition-delay:.14s; }
  .nav.is-open .nav__list li:nth-child(2){ transition-delay:.20s; }
  .nav.is-open .nav__list li:nth-child(3){ transition-delay:.26s; }
  .nav.is-open .nav__list li:nth-child(4){ transition-delay:.32s; }
  .nav.is-open .nav__list li:nth-child(5){ transition-delay:.38s; }
  .nav__list a{
    display:block;
    padding-block:18px;
    font-size:12px;
    letter-spacing:.24em;
  }
  .nav__actions-mobile{
    display:flex; align-items:center; gap:24px;
    margin-top:30px;
    opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease) .44s, transform .5s var(--ease) .44s;
  }
  .nav.is-open .nav__actions-mobile{ opacity:1; transform:none; }

  .header-actions{ display:none; }
  .burger{ display:block; }
  body.nav-open{ overflow:hidden; }

  .sec-head{ grid-template-columns:1fr; align-items:start; gap:20px; }
  .sec-head__note{ max-width:56ch; }

  .split{ grid-template-columns:1fr; gap:36px; }
  .split__media{ aspect-ratio:16 / 11; }

  /* the rail turns vertical and the stages read as a list */
  .process__grid{ grid-template-columns:1fr; }
  .process__grid::before{
    left:4px; right:auto; top:0; bottom:0;
    width:1px; height:auto;
    transform:scaleY(0);
    transform-origin:top center;
  }
  .process__head.is-visible ~ .process__grid::before{ transform:scaleY(1); }

  .step{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:22px;
    text-align:left;
    padding:0 0 clamp(26px, 4vw, 38px);
  }
  .step:last-child{ padding-bottom:0; }
  .step__node{ grid-column:1; grid-row:1; margin:0; }
  .step__num,
  .step__title,
  .step__copy{ grid-column:2; }
  .step__num{ margin-top:-4px; }
  .step__copy{ max-width:46ch; margin-inline:0; }

  .editorial,
  .editorial--flip{ grid-template-columns:1fr; gap:28px; }
  .editorial--flip .editorial__media{ order:-1; }
  .editorial__media{ aspect-ratio:16 / 11; }

  /* timeline -> single rail on the left */
  .timeline__rail{ left:5px; transform:none; }
  .tl,
  .tl--left,
  .tl--right{
    width:100%;
    margin:0;
    text-align:left;
    padding-left:34px;
    padding-right:0;
  }
  .tl--left::before,
  .tl--right::before{ left:.5px; right:auto; }
  .tl--left .tl__copy{ margin-left:0; }

  .quotes{ grid-template-columns:1fr; }
  .quote{ text-align:left; }
  .quote__mark{ margin-inline:0; }
}

@media (max-width:720px){
  .brand__name{ display:none; }
  .brand__mark{ width:30px; }
  .hero{ min-height:auto; padding-block:clamp(130px, 22vw, 170px) 96px; }
  .hero__media img{ object-position:72% center; }
  .hero__scrim{
    background:linear-gradient(180deg, rgba(20,13,7,.6) 0%, rgba(20,13,7,.5) 40%, rgba(20,13,7,.78) 100%);
  }
  .hero__actions .btn{ width:100%; }
  .scroll-cue{ display:none; }

  .grid-4{ grid-template-columns:1fr; }
  .card__media{ aspect-ratio:4 / 3.4; }

  .step:hover .step__node{ transform:none; }

  .footer__inner{ grid-template-columns:1fr; row-gap:38px; }
  .footer__bar{ justify-content:flex-start; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  .reveal-img{ clip-path:none; }
  .reveal-img img{ transform:none; }
  .hero__title .line > span{ transform:none; }
  .hero__media img{ transform:none; }
}



/* Footer tribute: align with the existing four-column footer grid. */
footer.footer {
  padding-top: clamp(38px, 3.2vw, 58px) !important;
}

/* The tribute is now the FIRST CHILD of .footer__inner. */
footer.footer .footer__inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  row-gap: 0 !important;
}

footer.footer .footer__dedication {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27%);
  column-gap: 40px;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0 0 clamp(32px, 3vw, 45px) !important;
  padding: 0 0 clamp(26px, 2.5vw, 34px) !important;
  border: 0;
  border-bottom: 1px solid rgba(211, 194, 163, .24);
  background: transparent;
}

/* Modern browsers: reuse the footer's actual four column tracks.
   Heading begins exactly at the logo; copy begins at the newsletter. */
@supports (grid-template-columns: subgrid) {
  footer.footer .footer__dedication {
    grid-template-columns: subgrid;
    column-gap: inherit; /* Match the footer grid gap exactly. */
  }
  footer.footer .footer__dedication-intro {
    grid-column: 1 / 4;
  }
  footer.footer .footer__dedication-copy {
    grid-column: 4;
  }
}

footer.footer .footer__dedication::before,
footer.footer .footer__dedication::after,
footer.footer .footer__dedication-eyebrow {
  display: none !important;
  content: none !important;
}

footer.footer .footer__dedication-intro { min-width: 0; }

footer.footer .footer__dedication-title {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #f0ebe3;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(29px, 2.45vw, 40px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.14;
  text-transform: none;
}

footer.footer .footer__dedication-title em {
  display: inline !important;
  color: #ccb18a;
  font-style: italic;
  font-weight: 400;
}

footer.footer .footer__dedication-copy {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #a7adb8;
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.75;
}

@media (max-width: 850px) {
  footer.footer { padding-top: 36px !important; }
  footer.footer .footer__inner { row-gap: 28px !important; }
  footer.footer .footer__dedication {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0;
    row-gap: 12px;
    margin-bottom: 8px !important;
    padding-bottom: 26px !important;
  }
  footer.footer .footer__dedication-intro,
  footer.footer .footer__dedication-copy {
    grid-column: 1 / -1 !important;
  }
  footer.footer .footer__dedication-title {
    font-size: clamp(29px, 6.5vw, 37px);
    line-height: 1.12;
  }
  footer.footer .footer__dedication-copy {
    font-size: 12.5px;
    line-height: 1.75;
  }
}