/* =====================================================================
   STUDIO — Rebuild stylesheet
   Hand-written from design tokens. No external libraries.
   ===================================================================== */

/* ---------- Local display typeface ---------- */
@font-face{
  font-family:'Display Sans';
  font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
      url('fonts/NeueHaasDisplay-Light.woff')  format('woff');
}
@font-face{
  font-family:'Display Sans';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
      url('fonts/NeueHaasDisplay-Roman.woff')  format('woff');
}
@font-face{
  font-family:'Display Sans';
  font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/NeueHaasDisplay-Mediu.woff2') format('woff2'),
      url('fonts/NeueHaasDisplay-Mediu.woff')  format('woff');
}
@font-face{
  font-family:'Display Sans';
  font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/NeueHaasDisplay-Bold.woff2')  format('woff2'),
      url('fonts/NeueHaasDisplay-Bold.woff')   format('woff');
}

/* ============================================================
   DESIGN SYSTEM — single source of truth for the page.
   Anything visual on the rebuild reads from these tokens.
   ============================================================ */
:root{
  /* ---- color ---- */
  --c-bg:        #e9e7e2;            /* warm beige, page surface */
  --c-bg-2:      #efece6;            /* alt panel, 1 step lighter */
  --c-fg:        #1e1d20;            /* near-black text */
  --c-fg-50:     rgba(30,29,32,.5);
  --c-fg-15:     rgba(30,29,32,.15);
  --c-rust:      #8c4e39;            /* accent (marquee, eyebrows) */
  --c-gray:      #858680;            /* footer surface, mobile drawer */
  --c-gray-light:#b6b3ab;            /* image placeholders, hairlines */

  /* ---- grid (mobile / desktop columns) ---- */
  --col-numb:26;
  --col-numb-vert:18;
  --grid-val:calc(100 / var(--col-numb));
  --grid-val-vertical:calc(100 / var(--col-numb-vert));

  /* ---- spacing scale (svh-based for vertical, vw-based for horizontal) ---- */
  --pad-x:    calc(var(--grid-val)          * 1vw);
  --pad-x-2:  calc(var(--grid-val)          * 2vw);
  --pad-y:    calc(var(--grid-val-vertical) * 1svh);
  --pad-y-2:  calc(var(--grid-val-vertical) * 2svh);
  --pad-y-3:  calc(var(--grid-val-vertical) * 3svh);
  --pad-y-4:  calc(var(--grid-val-vertical) * 4svh);
  --pad-y-5:  calc(var(--grid-val-vertical) * 5svh);

  /* ---- type scale (fluid, mobile floor + desktop ceiling at @48em) ---- */
  --fs-eyebrow:max(11px, .72vw);
  --fs-meta:   max(12px, .85vw);
  --fs-body:   max(14px, 1.10vw);
  --fs-lead:   max(15px, 1.25vw);
  --fs-h3:     max(20px, 1.65vw);
  --fs-h2:     max(28px, 3.6vw);
  --fs-h1:     max(36px, 7.5vw);
  --fs-display:max(56px, 9.5vw);

  /* ---- motion ---- */
  --easing:    cubic-bezier(.215, .61, .355, 1);
  --easing-in: cubic-bezier(.55, .055, .675, .19);
  --t-xfast: .25s;
  --t-fast:  .35s;
  --t-mid:   .6s;
  --t-slow:  1s;
  --t-xslow: 1.4s;

  /* ---- layout chrome ---- */
  --header-height: calc(var(--grid-val-vertical) * 1.6svh);
  --marquee-height:calc(var(--grid-val-vertical) * .5svh);
  --hairline:      1px solid var(--c-fg-15);
}
@media (min-width:48em){
  :root{ --col-numb:32; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-fg);
  font-family:'Display Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  line-height:1;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p,h1,h2,h3,h4,h5,h6,figure{margin:0}
input{font:inherit;color:inherit}
em{font-style:normal}

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

/* ============================================================
   TYPOGRAPHY (fluid)
   ============================================================ */
.title{font-weight:400}
.title--small{
  font-size:max(12px, 7.6923076923vw);
  line-height:1;
  font-weight:400;
}
.title--base{
  font-size:max(12px, 12.8205128205vw);
  line-height:1;
}
.title--big{
  font-size:max(12px, 10.2564102564vw);
  line-height:.875;
  font-weight:300;
  letter-spacing:-.02em;
}
.paragraph--small{font-size:max(12px,6.1538461538vw);line-height:1.2}
.paragraph--base{font-size:max(12px,5.1282051282vw);line-height:1.2}
.paragraph--big {font-size:max(12px,6.1538461538vw);line-height:1.25;font-weight:300}

@media (min-width:48em){
  .title--small{font-size:max(12px,3.6458333333vw); line-height:1.0857}
  .title--base {font-size:max(12px,6.25vw); line-height:1}
  .title--big  {font-size:max(12px,8.3333333333vw); line-height:.90625}
  .paragraph--small{font-size:max(12px,1.25vw)}
  .paragraph--base {font-size:max(12px,1.5625vw)}
  .paragraph--big  {font-size:max(12px,2.0833333333vw); line-height:1.125}
}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;
  width:100vw;
  height:var(--header-height);
  min-height:54px;
  z-index:101;
  display:flex;
  align-items:flex-end;
  padding:0 calc(var(--grid-val) * 1vw);
  transition:transform .5s var(--easing);
  will-change:transform;
}
.header.is-hidden{ transform:translateY(-110%); }

.header__bg{
  position:absolute;inset:0;
  background:var(--c-bg);
  transform:translateY(-100%);
  transition:transform .8s var(--easing), background-color 1s var(--easing);
  z-index:0;
}
.header.is-scrolled .header__bg{ transform:translateY(0); }

/* --- marquee bar --- */
.marquee{
  position:absolute;top:0;left:0;width:100vw;
  height:var(--marquee-height);
  min-height:24px;
  background:var(--c-rust);
  color:var(--c-bg);
  overflow:hidden;
  display:flex;align-items:center;
  font-size:max(12px,3.0769230769vw);
  z-index:2;
}
.marquee__track{
  display:flex; gap:0;
  white-space:nowrap;
  animation:marqueeScroll 28s linear infinite;
  will-change:transform;
}
.marquee__row{display:inline-flex;align-items:center;padding-right:0}
.marquee__text{padding:0 calc(var(--grid-val) * .25vw)}
.marquee__sep{padding:0 calc(var(--grid-val) * 1vw)}
.marquee:hover .marquee__track{ animation-play-state:paused; }

@keyframes marqueeScroll{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@media (min-width:48em){
  .marquee{font-size:max(12px,.625vw)}
}

/* --- header inner row --- */
.header__inner{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:calc(var(--grid-val)*2vw);
  padding-bottom:calc(var(--grid-val-vertical)*.25svh);
  z-index:1;
}
.header__logo{
  display:block;
  width:calc(var(--grid-val)*5.5vw);
  min-width:120px;
  color:var(--c-fg);
  transition:color var(--t-mid) var(--easing);
}
.wordmark{ width:100%; height:auto; display:block; }

/* --- main navbar --- */
.navbar{ display:flex; justify-content:center; }
.navbar__list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  font-size:max(12px,1.5625vw);
  line-height:1;
}
.navbar__item{ position:relative; }
.navbar__link{
  position:relative;
  display:inline-block;
  padding:.4em 0;
  transition:opacity var(--t-fast) var(--easing);
}
.navbar__link::after{
  content:"";
  position:absolute;left:0;bottom:1px;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .5s var(--easing);
}
.navbar__link:hover::after,
.navbar__link.is-active::after{
  transform:scaleX(1);
  transform-origin:left center;
}
.navbar__sep{user-select:none;opacity:.6}

/* --- products submenu --- */
.submenu{
  position:absolute;
  top:100%; left:50%;
  transform:translate(-50%,-12px);
  width:min(80vw, calc(var(--grid-val)*55vw));
  padding:calc(var(--grid-val-vertical)*1.5svh) calc(var(--grid-val)*1.5vw);
  background:var(--c-bg);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.18);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--t-fast) var(--easing), transform var(--t-fast) var(--easing), visibility 0s linear var(--t-fast);
  z-index:5;
}
.navbar__item--has-submenu:hover .submenu,
.navbar__item--has-submenu:focus-within .submenu{
  opacity:1; pointer-events:auto; visibility:visible;
  transform:translate(-50%, 0);
  transition-delay:0s;
}
.submenu__list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(var(--grid-val)*1vw);
  margin-bottom:calc(var(--grid-val-vertical)*1svh);
}
.submenu__link{
  display:grid;
  grid-template-rows:calc(var(--grid-val-vertical)*9svh) auto;
  gap:.6rem;
}
.submenu__img{
  position:relative;
  overflow:hidden;
  background:var(--c-gray-light);
}
.submenu__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--easing);
}
.submenu__link:hover .submenu__img img{ transform:scale(1.06); }
.submenu__name{
  font-size:max(12px,.9375vw);
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.02em;
}
.submenu__usage{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.4rem;
  font-size:max(12px,.95vw);
  border-top:1px solid var(--c-fg-50);
  padding-top:.9rem;
}
.submenu__usage a{position:relative}
.submenu__usage a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--easing);
}
.submenu__usage a:hover::after{transform:scaleX(1);transform-origin:left}

/* --- right cluster --- */
.header__right{
  display:flex; align-items:center;
  gap:calc(var(--grid-val)*1.2vw);
  font-size:max(12px,.9375vw);
}
.langs{ position:relative; }
.langs__active{
  text-decoration:underline;
  text-underline-offset:3px;
  text-transform:lowercase;
  cursor:pointer;
}
.langs__submenu{
  position:absolute;
  right:0; top:calc(100% + 6px);
  display:flex; flex-direction:column;
  gap:.25rem;
  text-align:right;
  opacity:0; pointer-events:none;
  transform:translateY(-6px);
  transition:opacity var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}
.langs.is-open .langs__submenu{
  opacity:1; pointer-events:auto; transform:translateY(0);
}

.header__nav-trigger{
  position:relative;
  display:none;
  overflow:hidden;
  text-transform:lowercase;
}
.header__nav-trigger > *{
  display:block;
  transition:transform .4s var(--easing);
}
.trigger-label--close{ position:absolute; inset:0; transform:translateY(110%); }
.header__nav-trigger.is-open .trigger-label--open{  transform:translateY(-110%); }
.header__nav-trigger.is-open .trigger-label--close{ transform:translateY(0); }

@media (max-width:47.99em){
  .navbar{ display:none; }
  .header__nav-trigger{ display:block; font-size:1rem; }
  .header__inner{ grid-template-columns:auto 1fr; }
  .header__right{ justify-content:flex-end; }
}

/* mobile drawer (rebuilt navbar shown when trigger is open) */
@media (max-width:47.99em){
  .navbar.is-open{
    display:flex;
    position:fixed;
    inset:var(--header-height) 0 0 0;
    background:var(--c-gray);
    color:var(--c-bg);
    padding:6vh 5vw;
    z-index:100;
    overflow-y:auto;
  }
  .navbar.is-open .navbar__list{
    flex-direction:column;
    align-items:flex-start;
    gap:1.4rem;
    font-size:max(28px, 8vw);
    line-height:1;
  }
  .navbar.is-open .navbar__sep{ display:none; }
  .navbar.is-open .submenu{ display:none; }
}

/* ============================================================
   HERO INTRO
   ============================================================ */
.hp-intro{
  position:relative;
  width:100vw;
  height:100svh;
  max-height:920px;       /* cap hero on tall screens — keeps proportion */
  overflow:hidden;
  margin-top:0;
}
.hp-intro__picture{
  width:100%; height:100%;
  overflow:hidden;
  position:relative;
}
.hp-intro__picture img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.6s var(--easing);
}
.hp-intro.is-revealed .hp-intro__picture img{ transform:scale(1); }

/* ============================================================
   INTRO TEXT
   ============================================================ */
.intro-text{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--grid-val-vertical)*2svh);
  padding:
    calc(var(--grid-val-vertical)*4svh)
    calc(var(--grid-val)*1vw);
}
.intro-text__main-title{ position:relative; }
.intro-text__main-label{
  display:inline-block;
  font-size:max(12px,3.5897435897vw);
  font-weight:500;
  vertical-align:super;
  margin-right:.5em;
  text-transform:none;
  line-height:1;
}
.intro-text__content{
  max-width:100%;
}
@media (min-width:48em){
  .intro-text{
    grid-template-columns:1fr 1fr;
    align-items:end;
    padding:
      calc(var(--grid-val-vertical)*4svh)
      calc(var(--grid-val)*1vw)
      calc(var(--grid-val-vertical)*2svh);
  }
  .intro-text__main-label{
    font-size:max(12px,1.0416666667vw);
    font-weight:500;
  }
  .intro-text__content{
    max-width:calc(var(--grid-val)*20vw);
  }
}

/* ============================================================
   PANELS LIST (Form / Folio / Crest)
   ============================================================ */
.panels-list{
  display:flex; flex-direction:column;
  gap:calc(var(--grid-val-vertical)*3svh);
  padding:calc(var(--grid-val-vertical)*3svh) 0;
}
.panel{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--grid-val-vertical)*1svh);
  padding:0 calc(var(--grid-val)*1vw);
}
.panel__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--c-gray-light);
}
.panel__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--easing);
}
.panel:hover .panel__media img{ transform:scale(1.04); }
.panel__body{
  display:flex; flex-direction:column;
  gap:.8rem;
  padding-top:.6rem;
}
.panel__title{
  font-size:max(20px,3.6vw);
  font-weight:400;
  line-height:1;
}
.panel__desc{
  font-size:max(14px,1.25vw);
  line-height:1.35;
  max-width:38ch;
}
.panel__link{
  align-self:flex-start;
  position:relative;
  font-size:max(14px,1vw);
  padding-bottom:3px;
}
.panel__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:currentColor;
  transform:scaleX(1); transform-origin:right;
  transition:transform .6s var(--easing);
}
.panel__link:hover::after{ transform:scaleX(0); transform-origin:left; }

@media (min-width:48em){
  .panel{
    grid-template-columns:1.4fr 1fr;
    gap:calc(var(--grid-val)*2vw);
    align-items:end;
  }
  .panel__media{ aspect-ratio:5/4; }
  .panel--reverse{ grid-template-columns:1fr 1.4fr; }
  .panel--reverse .panel__media{ order:2; }
}

/* ============================================================
   PRODUCTS MENU LIST
   ============================================================ */
.menu-list{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--grid-val-vertical)*2svh);
  padding:calc(var(--grid-val-vertical)*4svh) calc(var(--grid-val)*1vw);
}
.menu-list__products{
  display:flex; flex-direction:column;
}
.menu-list__products li{
  border-top:1px solid var(--c-fg-50);
}
.menu-list__products li:last-child{ border-bottom:1px solid var(--c-fg-50); }
.menu-list__products a{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:1.1rem 0;
  font-size:max(28px,5vw);
  line-height:1;
  font-weight:300;
  letter-spacing:-.01em;
  transition:padding-left .5s var(--easing), color .5s var(--easing);
}
.menu-list__products a em{
  font-size:max(14px,1.1vw);
  font-weight:500;
  opacity:.6;
}
.menu-list__products a:hover{ padding-left:1.2rem; }
.menu-list__usage{
  margin-top:calc(var(--grid-val-vertical)*2svh);
}
.menu-list__usage-label{
  font-size:max(12px,.95vw);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.8rem;
  opacity:.7;
}
.menu-list__usage ul{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size:max(14px,1.15vw);
}
.menu-list__usage a{ position:relative; }
.menu-list__usage a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--easing);
}
.menu-list__usage a:hover::after{ transform:scaleX(1); transform-origin:left; }
.menu-list__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--c-gray-light);
}
.menu-list__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--easing); }
.menu-list:hover .menu-list__media img{ transform:scale(1.03); }

@media (min-width:48em){
  .menu-list{
    grid-template-columns:1.5fr 1fr;
    gap:calc(var(--grid-val)*2vw);
    align-items:end;
  }
  .menu-list__products a{ font-size:max(28px,3.6vw); padding:1.3rem 0; }
}

/* ============================================================
   PROJECTS LIST
   ============================================================ */
.projects-list{
  padding:calc(var(--grid-val-vertical)*4svh) 0
          calc(var(--grid-val-vertical)*3svh);
}
.projects-list__head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:0 calc(var(--grid-val)*1vw);
  margin-bottom:calc(var(--grid-val-vertical)*1.5svh);
}
.projects-list__head h2 em{
  font-size:.5em; font-weight:500; opacity:.6; margin-left:.2em;
}
.projects-list__cta{
  position:relative;
  font-size:max(14px,1.1vw);
}
.projects-list__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform .5s var(--easing);
}
.projects-list__cta:hover::after{ transform:scaleX(0); transform-origin:left; }

.projects-list__rail{
  display:flex; gap:calc(var(--grid-val)*1vw);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 calc(var(--grid-val)*1vw)
          calc(var(--grid-val-vertical)*.6svh);
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  user-select:none;
  -webkit-user-select:none;
}
.projects-list__rail.is-dragging{
  scroll-behavior:auto;     /* drag must be 1:1 with cursor */
  scroll-snap-type:none;    /* don't fight the drag */
}
.projects-list__rail.is-dragging *{
  pointer-events:none;      /* avoid hover/click trigger during drag */
}
.projects-list__rail::-webkit-scrollbar{ height:6px; }
.projects-list__rail::-webkit-scrollbar-thumb{ background:var(--c-fg-50); border-radius:3px; }

.project-card{
  flex:0 0 auto;
  width:80vw; max-width:330px;
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:.7rem;
}
.project-card__media{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--c-gray-light);
}
.project-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--easing); }
.project-card:hover .project-card__media img{ transform:scale(1.05); }
.project-card__name{
  font-size:max(16px,1.25vw); font-weight:400;
}
.project-card__loc{
  font-size:max(12px,.9375vw);
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.6;
}
@media (min-width:48em){
  .project-card{ width:calc(var(--grid-val)*9vw); max-width:none; }
}

/* ============================================================
   STORIES LIST
   ============================================================ */
.stories-list{
  padding:calc(var(--grid-val-vertical)*4svh) calc(var(--grid-val)*1vw)
          calc(var(--grid-val-vertical)*3svh);
}
.stories-list__head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:calc(var(--grid-val-vertical)*1.5svh);
}
.stories-list__head em{
  font-size:.5em; font-weight:500; opacity:.6; margin-left:.2em;
}
.stories-list__cta{
  position:relative;
  font-size:max(14px,1.1vw);
}
.stories-list__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform .5s var(--easing);
}
.stories-list__cta:hover::after{ transform:scaleX(0); transform-origin:left; }

.stories-list__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--grid-val-vertical)*2svh) calc(var(--grid-val)*1vw);
}
.story-card{
  display:flex; flex-direction:column; gap:.8rem;
  position:relative;
}
.story-card__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--c-gray-light);
}
.story-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--easing); }
.story-card:hover .story-card__media img{ transform:scale(1.05); }
.story-card__tag{
  display:inline-block;
  align-self:flex-start;
  padding:.25em .7em;
  border:1px solid var(--c-fg);
  border-radius:999px;
  font-size:max(11px,.7vw);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.story-card__title{
  font-size:max(18px,1.6vw);
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.01em;
}
.story-card__date{
  font-size:max(12px,.85vw);
  opacity:.6;
  letter-spacing:.05em;
}
@media (min-width:48em){
  .stories-list__grid{ grid-template-columns:repeat(4, 1fr); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--c-gray);
  color:var(--c-bg);
  padding:calc(var(--grid-val-vertical)*4svh) calc(var(--grid-val)*1vw)
          calc(var(--grid-val-vertical)*1.2svh);
  display:flex; flex-direction:column;
  gap:calc(var(--grid-val-vertical)*2svh);
  margin-top:calc(var(--grid-val-vertical)*4svh);
}
.footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--grid-val-vertical)*2svh) calc(var(--grid-val)*2vw);
}
.footer__logo{
  display:block;
  width:calc(var(--grid-val)*8vw);
  min-width:140px;
  color:var(--c-bg);
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:calc(var(--grid-val-vertical)*2svh) calc(var(--grid-val)*1.5vw);
}
.footer__col-label{
  font-size:max(12px,.85vw);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.8rem;
  opacity:.7;
  font-weight:500;
}
.footer__col p, .footer__col a, .footer__col li{
  font-size:max(14px,1.1vw);
  line-height:1.5;
}
.footer__col ul{ display:flex; flex-direction:column; gap:.3rem; }
.footer__col a{ position:relative; }
.footer__col a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--easing);
}
.footer__col a:hover::after{ transform:scaleX(1); transform-origin:left; }

.newsletter{
  display:flex;
  border-bottom:1px solid var(--c-bg);
  padding-bottom:.4rem;
  gap:.5rem;
}
.newsletter input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  font-size:max(14px,1vw);
  color:var(--c-bg);
  padding:.4rem 0;
}
.newsletter input::placeholder{ color:rgba(233,231,226,.5); }
.newsletter button{
  text-transform:uppercase;
  font-size:max(12px,.8vw);
  letter-spacing:.08em;
  font-weight:500;
  position:relative;
  padding:.4rem 0;
}
.newsletter button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform .5s var(--easing);
}
.newsletter button:hover::after{ transform:scaleX(0); transform-origin:left; }

.footer__navbar{
  border-top:1px solid rgba(233,231,226,.25);
  padding-top:calc(var(--grid-val-vertical)*1.2svh);
}
.footer__navbar ul{
  display:flex; flex-wrap:wrap; gap:0 .6rem;
  font-size:max(14px,1.2vw);
}
.footer__navbar a{ position:relative; }
.footer__navbar a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--easing);
}
.footer__navbar a:hover::after{ transform:scaleX(1); transform-origin:left; }

.footer__bottom{
  display:flex; justify-content:space-between;
  font-size:max(12px,.8vw);
  opacity:.7;
  letter-spacing:.04em;
  padding-top:.5rem;
  flex-wrap:wrap;
  gap:.5rem;
}

@media (min-width:48em){
  .footer__top{
    grid-template-columns:auto 1fr;
    align-items:start;
  }
  .footer__cols{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--easing), transform .9s var(--easing);
  will-change:opacity, transform;
}
.reveal.is-revealed{
  opacity:1;
  transform:none;
}

/* Stagger children inside revealed sections */
.panels-list .panel{ transition-delay:0s; }
.panels-list .panel:nth-child(2){ transition-delay:.1s; }
.panels-list .panel:nth-child(3){ transition-delay:.2s; }

.story-card,.project-card{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--easing), transform .8s var(--easing);
}
.is-revealed .story-card,
.is-revealed .project-card{
  opacity:1; transform:none;
}
.is-revealed .story-card:nth-child(1),
.is-revealed .project-card:nth-child(1){ transition-delay:.05s; }
.is-revealed .story-card:nth-child(2),
.is-revealed .project-card:nth-child(2){ transition-delay:.15s; }
.is-revealed .story-card:nth-child(3),
.is-revealed .project-card:nth-child(3){ transition-delay:.25s; }
.is-revealed .story-card:nth-child(4),
.is-revealed .project-card:nth-child(4){ transition-delay:.35s; }
.is-revealed .project-card:nth-child(5){ transition-delay:.45s; }

/* ============================================================
   PANELS LIST — pinned stack-scroll, layered bg + main image
   Structure (1:1 with source):
     .panels-list           height:225svh, the scroll runway
     .panels-list__inner    sticky, 100svh, holds the stacked items
     .panels-list__item     absolute fill, z-index 20/19/18 (top first)
       .panels-list__bg     full-bleed background photo
       .panels-list__main   featured foreground photo
       .panels-list__content  label + paragraph (over both images)
   Scroll progress through 225svh drives:
     - bg parallax (translateY)
     - main image scale + slide
     - content fade in/out per panel slot
     - active item: scale-down + fade-out as scroll passes its slot
   ============================================================ */
.panels-list{
  position:relative;
  width:100vw;
}
.panels-list__inner{
  position:sticky;
  top:0;
  height:100svh;
  width:100vw;
  overflow:hidden;
}
.panels-list__item{
  position:absolute;
  inset:0;
  display:block;
  /* Diagonal wipe via clip-path polygon — bottom-right rises 100→0, bottom-left
     rises 125→0, so the diagonal's slope naturally changes during the wipe
     (matches the original source). The mix-blend-mode and bg-image height
     fixes keep this performant on big screens. */
  --p:0;
  /* Reference values: brY 100→0, blY 125→-20 (range 145%).
     Bottom-left passing through -20 makes the diagonal sweep above
     the top edge at the end of the wipe — full clear. */
  clip-path:polygon(
    0% 0%,
    100% 0%,
    100% calc((1 - var(--p)) * 100%),
    0%   calc(125% - var(--p) * 145%)
  );
  -webkit-clip-path:polygon(
    0% 0%,
    100% 0%,
    100% calc((1 - var(--p)) * 100%),
    0%   calc(125% - var(--p) * 145%)
  );
  transform:translateZ(0);   /* compositor layer */
  will-change:clip-path, transform;
  isolation:isolate;
}
.panels-list__item:last-child{
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
.panels-list__item:last-child::after{
  /* corner shade only on panels that wipe — last (the floor) keeps the
     photo clean, text-shadow on the content handles legibility */
  display:none;
}

/* full-bleed background image */
.panels-list__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.panels-list__bg .picture,
.panels-list__bg figure{
  margin:0;
  width:100%;
  height:100%;
}
.panels-list__bg img{
  width:100%;
  /* was height:115% + scale(1.1) — double-enlargement that ate ~13% extra
     texture memory per panel. Keep just the GPU-free transform scale. */
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translate3d(0, var(--bg-y, 0px), 0) scale(var(--bg-s, 1.1));
  will-change:transform;
}

/* foreground featured photo — smaller, anchored, minimal scroll drift */
.panels-list__main{
  position:absolute;
  right:calc(var(--grid-val) * 3vw);
  bottom:calc(var(--grid-val-vertical) * 4svh);
  width:calc(var(--grid-val) * 9vw);
  min-width:180px;
  aspect-ratio:3/4;
  z-index:1;
  overflow:hidden;
  /* --m-y: very subtle parallax drift only */
  transform:translate3d(0, var(--m-y, 0px), 0);
  will-change:transform;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.35);
}
.panels-list__main .picture,
.panels-list__main figure{
  margin:0;
  width:100%;
  height:100%;
}
.panels-list__main img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.05);
}

/* corner shade — toned WAY down. Smaller pocket, lower alpha, only enough
   to keep the white text readable without leaving a visible blob. */
.panels-list__item::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:42%;
  height:38%;
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.18) 40%,
      rgba(0,0,0,0)   78%);
  z-index:2;
  pointer-events:none;
}

/* text content (label + paragraph) */
.panels-list__content{
  position:absolute;
  left:calc(var(--grid-val) * 2vw);
  bottom:calc(var(--grid-val-vertical) * 3svh);
  max-width:calc(var(--grid-val) * 18vw);
  z-index:3;
  color:#fff;
  display:grid;
  gap:1rem;
  /* --c-op: opacity, --c-ty: vertical lift */
  opacity:var(--c-op, 1);
  transform:translate3d(0, var(--c-ty, 0px), 0);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.panels-list__content-label{
  display:block;
  font-size:max(36px, 7.5vw);
  line-height:1;
  font-weight:300;
  letter-spacing:-.02em;
}
.panels-list__content-text{
  font-size:max(14px, 1.2vw);
  line-height:1.45;
  font-weight:300;
  max-width:42ch;
}

/* ============================================================
   PANELS-CURSOR — a big soft circle that follows the mouse while
   hovering the panels-list. Shows "Go to {product} →" and clicks
   through to the product page.
   ============================================================ */
.panels-cursor{
  position:fixed;
  top:0; left:0;
  width:128px; height:128px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.45);
  z-index:200;
  pointer-events:none;
  opacity:0;
  /* transform is applied per-frame by JS — only opacity transitions in CSS */
  transition:opacity .35s cubic-bezier(.215,.61,.355,1);
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.3;
  padding:0 1rem;
  will-change:transform, opacity;
}
.panels-cursor.is-active{ opacity:1; }
.panels-cursor__arrow{
  display:block;
  font-size:16px;
  margin-top:6px;
  font-weight:300;
}
/* hide the site-wide cursor (dot+ring) while inside panels-list */
html.panels-cursor-on .cursor{ opacity:0 !important; }
html.panels-cursor-on .panels-list__item{ cursor:none; }

/* subtle scroll hint on the very first panel */
.panels-list__hint{
  position:absolute;
  bottom:calc(var(--grid-val-vertical) * 2svh);
  right:calc(var(--grid-val) * 2vw);
  z-index:3;
  font-size:max(11px,.7vw);
  text-transform:uppercase;
  letter-spacing:.32em;
  color:#fff;
  opacity:.7;
}
.panels-list__hint::after{
  content:"";
  display:block;
  width:1px; height:30px;
  background:#fff;
  margin:8px auto 0;
  transform-origin:top;
  animation:hintLine 1.6s var(--easing) infinite;
}
@keyframes hintLine{
  0%   {transform:scaleY(0); transform-origin:top;}
  50%  {transform:scaleY(1); transform-origin:top;}
  51%  {transform-origin:bottom;}
  100% {transform:scaleY(0); transform-origin:bottom;}
}

@media (max-width:47.99em){
  .panels-list__main{
    right:calc(var(--grid-val) * 1vw);
    width:calc(var(--grid-val) * 18vw);
  }
  .panels-list__content{
    left:calc(var(--grid-val) * 1vw);
    right:calc(var(--grid-val) * 1vw);
    max-width:none;
    bottom:calc(var(--grid-val-vertical) * 2svh);
  }
  .panels-list__content-label{ font-size:max(32px, 12vw); }
  .panels-list__content-text { font-size:max(14px, 4vw); }
  /* panels-mobile-unpin: statische stapel i.p.v. pinned scroll-wipe */
  .panels-list{ height:auto !important; }
  .panels-list__inner{ position:static; height:auto; overflow:visible; }
  .panels-list__item{ position:relative; inset:auto; height:auto; clip-path:none !important; -webkit-clip-path:none !important; transform:none !important; opacity:1 !important; }
  .panels-list__bg{ position:relative; height:64svh; }
  .panels-list__bg img{ transform:none !important; height:100%; }
  .panels-list__main{ display:none; }
  .panels-list__content{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   ===========  SIGNATURE ANIMATIONS  =========================
   ============================================================ */

/* ---------- Smooth-scroll wrapper (JS lerps the transform) ---------- */
.smooth{
  position:relative;
  width:100%;
  will-change:transform;
}
html.has-smooth, html.has-smooth body{
  height:auto;
  overflow:hidden;          /* native scroll handled by spacer + transform */
}
html.has-smooth body{
  position:fixed;
  inset:0;
}

/* ============================================================
   1. PAGE INTRO  (header expands to full-viewport, then collapses)
   ============================================================ */
body.is-loading{ overflow:hidden; }

/* Header takes the full screen during the intro; logo is huge & centered */
body.is-loading .header{
  height:100svh;
  align-items:center;
  justify-content:center;
}
body.is-loading .header__inner{
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
  padding-bottom:0;
}
body.is-loading .header__logo{
  width:min(70vw, 720px);
  transform:translateY(0);
}
body.is-loading .navbar,
body.is-loading .header__right,
body.is-loading .marquee{
  opacity:0;
  pointer-events:none;
}
body.is-loading .header__bg{
  transform:translateY(0);   /* full-screen bg during load */
}

/* Animate everything to its final position */
.header,
.header__logo,
.header__inner,
.header__bg,
.navbar,
.header__right,
.marquee{
  transition:
    height        1.2s var(--easing),
    width         1.2s var(--easing),
    transform     1.2s var(--easing),
    opacity        .9s var(--easing) .35s,
    grid-template-columns 1.2s var(--easing),
    padding-bottom 1.2s var(--easing);
}
body.is-loaded .header__bg{
  transform:translateY(-100%);  /* hides the bg until scrolled */
}

/* Subtle "Loading…" tick under the wordmark while we wait */
.header__loader-tag{
  position:absolute;
  bottom:8svh;
  left:50%; transform:translateX(-50%);
  font-size:max(11px,.7vw);
  text-transform:uppercase;
  letter-spacing:.3em;
  opacity:.6;
  transition:opacity .4s var(--easing);
}
body.is-loaded .header__loader-tag{ opacity:0; pointer-events:none; }

/* ============================================================
   2. IMAGE CLIP-PATH MASK REVEAL
   ============================================================ */
.mask{
  overflow:hidden;
  position:relative;
  clip-path:inset(0 0 100% 0);
  -webkit-clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--easing), -webkit-clip-path 1.1s var(--easing);
}
.mask > img{
  transform:translateY(8%) scale(1.06);
  transition:transform 1.4s var(--easing);
  will-change:transform;
}
.mask.is-in{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}
.mask.is-in > img{
  transform:translateY(0) scale(1);
}

/* Hero gets a slightly slower, reverse-direction reveal */
.hp-intro__picture.mask{
  clip-path:inset(100% 0 0 0);
  -webkit-clip-path:inset(100% 0 0 0);
  transition-duration:1.6s;
}
.hp-intro__picture.mask > img{ transform:translateY(-6%) scale(1.08); }
.hp-intro__picture.mask.is-in{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}
.hp-intro__picture.mask.is-in > img{ transform:translateY(0) scale(1); }

/* ============================================================
   3. TEXT LINE-MASK REVEAL  (JS wraps each line in .split-line)
   ============================================================ */
.split-line{
  display:block;
  overflow:hidden;
  position:relative;
  /* counteract descender clipping a bit */
  padding-bottom:.04em;
  margin-bottom:-.04em;
}
.split-line__inner{
  display:block;
  transform:translateY(110%);
  transition:transform 1s var(--easing);
  will-change:transform;
}
[data-split].is-in .split-line__inner{ transform:translateY(0); }

/* Stagger by index (set as inline custom property by JS) */
.split-line__inner{ transition-delay:calc(var(--i,0) * 90ms); }

/* ============================================================
   4. CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed;
  top:0; left:0;
  width:0; height:0;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
}
.cursor__dot,
.cursor__ring{
  position:absolute;
  top:0; left:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  will-change:transform, width, height;
}
.cursor__dot{
  width:6px; height:6px;
  background:#fff;
  transition:transform .25s var(--easing), opacity .25s var(--easing);
}
.cursor__ring{
  width:36px; height:36px;
  border:1px solid #fff;
  transition:width .35s var(--easing), height .35s var(--easing), border-color .35s var(--easing), opacity .25s var(--easing);
  opacity:.65;
}
.cursor.is-hidden .cursor__dot,
.cursor.is-hidden .cursor__ring{ opacity:0; }
.cursor.is-hover .cursor__ring{
  width:64px; height:64px;
}
.cursor.is-hover .cursor__dot{ transform:translate(-50%,-50%) scale(0); }

@media (hover:none){ .cursor{ display:none; } }

/* hide native cursor on hover targets when JS is on */
html.cursor-on a,
html.cursor-on button,
html.cursor-on [data-cursor]{ cursor:none; }

/* ============================================================
   5. MAGNETIC HOVER (project & story cards)
   ============================================================ */
.project-card, .story-card{
  transition:transform .6s var(--easing);
  will-change:transform;
}

/* ============================================================
   6. MARQUEE — refine
   ============================================================ */
.marquee__track{
  animation-duration:32s;
}

/* ============================================================
   7. NAV underline — scope tighter origin for the flip
   ============================================================ */

/* ============================================================
   NEW CONTENT SECTIONS — match the existing token language
   ============================================================ */

/* ---------- shared eyebrow label ---------- */
.metrics__eyebrow,
.process__eyebrow,
.materials__eyebrow,
.press__eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:.32em;
  color:var(--c-rust);
  margin-bottom:.9rem;
  font-weight:500;
}
.metrics__head,
.process__head,
.materials__head,
.press__head{
  margin-bottom:var(--pad-y-2);
}
.metrics__head h2,
.process__head h2,
.materials__head h2,
.press__head h2{
  max-width:18ch;
}

/* ---------- METRICS ---------- */
.metrics{
  padding:var(--pad-y-4) var(--pad-x-2);
  border-top:var(--hairline);
}
.metrics__list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:var(--hairline);
  margin-top:var(--pad-y-2);
}
.metric{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  padding:1.4rem 0;
  border-bottom:var(--hairline);
  position:relative;
}
.metric__value{
  font-size:var(--fs-display);
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.metric__suffix{
  font-size:max(20px, 2vw);
  font-weight:300;
  line-height:1;
  margin-left:-.15em;
  opacity:.6;
}
.metric__label{
  grid-column:2;
  font-size:var(--fs-meta);
  text-transform:uppercase;
  letter-spacing:.18em;
  text-align:right;
  opacity:.7;
}
@media (min-width:48em){
  .metrics__list{ grid-template-columns:repeat(4, 1fr); }
  .metric{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    border-bottom:0;
    border-right:var(--hairline);
    padding:var(--pad-y-2) var(--pad-x);
    align-content:end;
    min-height:18svh;
  }
  .metric:last-child{ border-right:0; }
  .metric__label{
    grid-column:1;
    text-align:left;
    margin-top:.6rem;
  }
}

/* ---------- PROCESS ---------- */
.process{
  padding:var(--pad-y-4) var(--pad-x-2);
  background:var(--c-bg-2);
}
.process__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pad-y-2) var(--pad-x-2);
  counter-reset:none;
  list-style:none;
}
.process__step{
  position:relative;
  padding-top:1.4rem;
  border-top:var(--hairline);
  display:grid;
  gap:.8rem;
}
.process__num{
  font-size:var(--fs-eyebrow);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-rust);
  font-weight:500;
}
.process__title{
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
}
.process__desc{
  font-size:var(--fs-body);
  line-height:1.5;
  max-width:38ch;
  font-weight:300;
  opacity:.85;
}
@media (min-width:48em){
  .process__grid{ grid-template-columns:repeat(3, 1fr); }
}

/* ---------- PULL QUOTE ---------- */
.pullquote{
  padding:var(--pad-y-5) var(--pad-x-2);
  display:grid;
  gap:var(--pad-y);
  text-align:left;
}
.pullquote blockquote{
  font-size:max(28px, 4.4vw);
  line-height:1.15;
  font-weight:300;
  letter-spacing:-.015em;
  max-width:22ch;
  font-style:italic;
}
.pullquote__attr{
  font-size:var(--fs-meta);
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.6;
  font-style:normal;
}

/* ---------- MATERIALS ---------- */
.materials{
  padding:var(--pad-y-4) var(--pad-x-2);
  border-top:var(--hairline);
}
.materials__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--pad-y) var(--pad-x);
  margin-top:var(--pad-y-2);
}
.material{
  display:grid;
  gap:.6rem;
  position:relative;
  cursor:pointer;
}
.material__swatch{
  aspect-ratio:1 / 1;
  background:var(--m-c, var(--c-gray-light));
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:transform var(--t-mid) var(--easing);
}
.material__swatch::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(255,255,255,.10) 0%,
    rgba(0,0,0,0)         50%,
    rgba(0,0,0,.08)       100%);
  pointer-events:none;
}
.material:hover .material__swatch{ transform:scale(1.03); }
.material__name{
  font-size:var(--fs-body);
  font-weight:400;
}
.material__meta{
  font-size:var(--fs-meta);
  letter-spacing:.06em;
  opacity:.55;
}
@media (min-width:48em){
  .materials__grid{ grid-template-columns:repeat(6, 1fr); }
}

/* ---------- PRESS / AWARDS MARQUEE ---------- */
.press{
  padding:var(--pad-y-4) 0;
  border-top:var(--hairline);
  border-bottom:var(--hairline);
  overflow:hidden;
}
.press__head{
  padding:0 var(--pad-x-2);
  margin-bottom:var(--pad-y-2);
}
.press__rail{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.press__track{
  display:flex;
  gap:0;
  white-space:nowrap;
  animation:pressScroll 50s linear infinite;
  width:max-content;
}
.press__track li{
  padding:0 2.6rem;
  border-right:var(--hairline);
  font-size:var(--fs-meta);
  letter-spacing:.16em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  height:3rem;
  white-space:nowrap;
  font-weight:500;
}
.press__rail:hover .press__track{ animation-play-state:paused; }
@keyframes pressScroll{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

/* ============================================================
   RVS-SLIDER — horizontal collection slider
     - native horizontal flex track, drag-to-scroll + wheel→horizontal
     - per-item wave Y-offset based on viewport-center distance
     - per-image scale based on the same → subtle depth/parallax
     - title letters wrapped in spans by JS for potential anim
   ============================================================ */
.rvs-slider{
  position:relative;
  width:100vw;
  height:90svh;
  max-height:840px;       /* cap on tall screens */
  overflow:hidden;
  background:var(--c-bg);
  display:flex;
  align-items:center;
  user-select:none;
  -webkit-user-select:none;
  padding:6svh 0;
}
.rvs-stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.rvs-track{
  display:flex;
  align-items:center;
  height:100%;
  gap:calc(var(--grid-val) * 1.5vw);
  padding:0 calc(var(--grid-val) * 2vw);
  cursor:grab;
  will-change:transform;
  width:max-content;
}
.rvs-track.is-dragging{ cursor:grabbing; }
.rvs-track.is-dragging *{ pointer-events:none; }

.rvs-item{
  flex:0 0 auto;
  width:18vw;
  min-width:240px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  will-change:transform;
  position:relative;
}

.rvs-head{
  display:grid;
  gap:.55rem;
}
.rvs-no{
  font-size:max(11px, .8vw);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-rust);
  font-weight:500;
}
.rvs-ttl{
  font-size:max(20px, 1.55vw);
  font-weight:400;
  line-height:1;
  letter-spacing:-.005em;
  margin:0;
  display:inline-flex;
  flex-wrap:wrap;
}
.rvs-ttl span{
  display:inline-block;
  transition:transform .35s cubic-bezier(.215,.61,.355,1);
}
.rvs-item:hover .rvs-ttl span{
  transform:translateY(-3px);
}
.rvs-item:hover .rvs-ttl span:nth-child(2n){ transform:translateY(-5px); }
.rvs-item:hover .rvs-ttl span:nth-child(3n){ transform:translateY(-2px); }
.rvs-text{
  font-size:max(11px, .8vw);
  line-height:1.5;
  opacity:.65;
  letter-spacing:.02em;
}

.rvs-bg-wrap{
  width:100%;
  aspect-ratio:259 / 412;
  position:relative;
  overflow:hidden;
}
.rvs-bg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  will-change:transform;
}
.rvs-bg img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
  -webkit-user-drag:none;
}

@media (max-width: 47.99em){
  .rvs-item{ width:62vw; }
  .rvs-slider{ height:auto; padding:8svh 0; }
}

/* ============================================================
   ATELIER — asymmetric history grid, parallax images, click-tips
   Layout pattern: 12-col × 11-row aspect-ratio frame with three
   image cards at varying scales, a portrait top-right and a paired
   detail loop in the middle right.
   ============================================================ */
.atelier{
  padding:10rem 4rem 8rem;
  color:var(--c-fg);
}
.atelier__upper{
  display:flex;
  align-items:flex-start;
  gap:3.5rem 8.5rem;
  margin:5rem 5rem 5rem 5.5rem;
}
.atelier__intro{
  flex:1;
  font-size:max(28px, 2vw);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.01em;
  text-transform:uppercase;
  font-family:'Display Sans', system-ui, sans-serif;
}
.atelier__lede{
  flex:1;
  font-size:max(15px, 1.05vw);
  font-weight:300;
  line-height:1.5;
}

/* the asymmetric grid — same aspect-ratio + cell math as the source pattern */
.atelier__grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:repeat(11, 1fr);
  gap:4rem 0;
  aspect-ratio: 1440 / 1700;
  margin-top:5rem;
}

.atelier-card:nth-child(1){
  order:1;
  grid-column:1 / span 5;
  grid-row:1 / span 7;
  text-align:right;
}
.atelier-card:nth-child(1) .atelier-card__image{ aspect-ratio: 35.94 / 47.88; }

.atelier-card:nth-child(2){
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  order:4;
  grid-column:1 / span 3;
  grid-row:6 / span 4;
  text-align:right;
}
.atelier-card:nth-child(2) .atelier-card__image{ aspect-ratio: 21.56 / 28.69; }

.atelier-card:nth-child(3){
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  order:5;
  grid-column:7 / span 6;
  grid-row:8 / span 4;
}
.atelier-card:nth-child(3) .atelier-card__image{ aspect-ratio: 42.88 / 32.19; }

.atelier-card__image{
  position:relative;
  overflow:hidden;
  background:#ddd6cb;
}
.atelier-card__image img{
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:120%;
  object-fit:cover;
  transition:.4s transform ease-out;
  will-change:transform;
}
.atelier-card:hover .atelier-card__image img,
.atelier-card__image[data-open] img{
  transform:scale(1.1);
}
.atelier-card__title{
  margin-top:.7em;
  color:var(--c-fg);
  font-size:.78rem;
  font-weight:600;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.atelier-card__title span{
  color:rgba(30, 29, 32, .55);
  font-weight:300;
  margin-right:.4em;
}

.atelier-portrait{
  order:2;
  grid-column:8 / span 5;
  grid-row:1 / span 4;
  font-size:.78rem;
  font-weight:600;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.atelier-portrait__image{
  aspect-ratio: 571 / 428;
  position:relative;
  overflow:hidden;
  background:#ddd6cb;
}
.atelier-portrait__image img{
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:120%;
  object-fit:cover;
  will-change:transform;
}
.atelier-portrait__title{ margin-top:1em; }
.atelier-portrait__meta{
  color:rgba(30, 29, 32, .55);
  font-weight:300;
}

.atelier-loop{
  order:3;
  grid-column:8 / span 4;
  grid-row:5 / span 2;
  display:flex;
  background:#ebe7df;
  overflow:hidden;
}
.atelier-loop__item{
  flex:0 0 50%;
  width:50%;
  height:100%;
  object-fit:cover;
}

/* tip — click-to-open content overlay */
.tip{ position:relative; }
.tip-wrapper{
  position:absolute;
  top:0; left:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:4em;
  background:#fff;
  color:#000;
  font-size:1.05rem;
  font-weight:300;
  line-height:1.4;
  text-align:left;
  /* hidden initial state — collapsed at bottom-right */
  clip-path:polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
}
.tip-wrapper .cms p + p{ margin-top:1em; }
.tip-trigger{
  position:absolute;
  right:1rem; bottom:1rem;
  z-index:2;
  width:1.875em;
  aspect-ratio:1;
  color:#000;
  background:#fff;
  border:0;
  border-radius:50%;
  cursor:pointer;
  transition:background-color .25s, color .25s;
}
.tip-trigger::before,
.tip-trigger::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:.875em;
  height:1px;
  background:currentColor;
  border-radius:1em;
  transform:translate(-50%, -50%);
}
.tip-trigger::after{ transform:translate(-50%, -50%) rotate(90deg); }
.tip[data-open] .tip-trigger{ color:#fff; background:#000; }

/* atelier custom cursor (desktop only) */
.atelier-cursor{
  position:fixed;
  top:0; left:0;
  z-index:999;
  width:0; height:0;
  pointer-events:none;
  transform:translate3d(-50%, -50%, 0);
  opacity:0;
  transition:opacity .2s;
}
@media (min-width: 1024px){ .atelier-cursor{ opacity:1; } }
.atelier-cursor__label{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  padding:.4em .9em;
  background:var(--c-fg);
  color:var(--c-bg);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:2em;
  white-space:nowrap;
  opacity:0;
  transition:opacity .25s;
}
.atelier-cursor[data-hover] .atelier-cursor__label{ opacity:1; }
[data-hover]{ cursor:crosshair; }

@media (max-width: 1023.98px){
  .atelier{ padding:6rem 1.25rem; }
  .atelier__upper{
    flex-direction:column;
    margin:5rem 0 0;
    gap:2rem;
  }
  .atelier__intro{ font-size:1.5rem; line-height:1.33; }
  .atelier__lede{ margin-left:25%; font-size:1rem; }
  .atelier__grid{
    display:flex;
    flex-direction:column;
    gap:5rem 0;
    margin-top:6rem;
    aspect-ratio:auto;
  }
  .atelier-card:nth-child(1){ width:62.5%; }
  .atelier-card:nth-child(2){ position:static; width:75%; }
  .atelier-portrait{ width:62.5%; margin-left:auto; font-size:.75rem; }
  .atelier-loop{ aspect-ratio: 20.94 / 13.94; }
  .tip-wrapper{
    align-items:flex-start;
    padding:1rem;
    font-size:.875rem;
    overflow-y:auto;
  }
}

/* ============================================================
   PAGE THEME — body fades between cream (light) and charcoal (dark)
   based on which section is dominant in view. Dark sections have
   data-theme="dark" and the JS toggles body.is-dark accordingly.
   ============================================================ */
body{
  transition:
    background-color .9s cubic-bezier(.215, .61, .355, 1),
    color           .9s cubic-bezier(.215, .61, .355, 1);
}
body.is-dark{
  --c-bg:        #1e1d20;
  --c-fg:        #e9e7e2;
  --c-fg-50:     rgba(233, 231, 226, .5);
  --c-fg-15:     rgba(233, 231, 226, .15);
}

/* Sections marked dark also get an immediate inner background so the
   transition doesn't expose mismatched colours at section edges. */
[data-theme="dark"]{
  background:#1e1d20;
  color:#e9e7e2;
}
[data-theme="dark"] .metrics__eyebrow,
[data-theme="dark"] .process__eyebrow,
[data-theme="dark"] .materials__eyebrow,
[data-theme="dark"] .press__eyebrow,
[data-theme="dark"] .footer__col-label{
  color:#c89776;            /* slightly warmer rust on dark for contrast */
}
[data-theme="dark"] .process__step,
[data-theme="dark"] .metrics__list,
[data-theme="dark"] .metric{
  border-color:rgba(233, 231, 226, .15);
}
[data-theme="dark"] .footer{
  background:#1e1d20;
  color:#e9e7e2;
}
[data-theme="dark"] .pullquote blockquote{
  color:#e9e7e2;
}
[data-theme="dark"] .pullquote__attr{
  color:rgba(233, 231, 226, .55);
}

/* ============================================================
   READ-TEXT — subtle marble-grey on scroll, fills to full color
   The element fades its text from a warm grey-marble tone (unread)
   to the page's full text colour (read), driven by --read 0..1
   set per-element by the scroll handler.
   No font changes, no extra weight, just a vertical gradient with
   slight tonal variation in the unread portion for a marble feel.
   ============================================================ */
/* Read-text — five soft radial "blobs" of warm/cool tone overlaid on a
   charcoal base. GSAP drifts each blob's position independently and very
   slowly → letters look like they have living marble grain that subtly
   shifts. No visible band, no stripes, no scroll-jank — the variation is
   on the pixel level inside the letters. */
.read-text,
.read-text .split-line__inner{
  --p1x:25%; --p1y:30%;
  --p2x:72%; --p2y:62%;
  --p3x:48%; --p3y:82%;
  --p4x:84%; --p4y:18%;
  --p5x:14%; --p5y:74%;
  background:
    radial-gradient(ellipse 42% 46% at var(--p1x) var(--p1y), rgba(220,195,158, .55), transparent 60%),
    radial-gradient(ellipse 36% 42% at var(--p2x) var(--p2y), rgba(70, 58, 48, .60), transparent 60%),
    radial-gradient(ellipse 30% 36% at var(--p3x) var(--p3y), rgba(228,205,170, .42), transparent 60%),
    radial-gradient(ellipse 26% 32% at var(--p4x) var(--p4y), rgba(56, 48, 40, .50), transparent 60%),
    radial-gradient(ellipse 28% 34% at var(--p5x) var(--p5y), rgba(208,182,148, .38), transparent 60%),
    rgb(30, 29, 32);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  .marquee__track{ animation:none; }
  .reveal,.mask,[data-split]{opacity:1; transform:none; clip-path:none; -webkit-clip-path:none;}
  .split-line__inner{transform:none}
  .cursor{ display:none; }
}