/* ============================================================
   The Leather Restorators / Hospitality Atelier
   Light, editorial, atelier-grade. No SaaS gradients.
   Tokens:
     ink         #0E0E0E    body type and rules
     ink-soft    #4A4744    secondary type
     ink-mute    #8A8580    captions, meta
     paper       #FFFFFF    primary ground
     paper-2     #F6F4F0    quiet panel
     tan         #8B5A2B    accent
     tan-deep    #5E3C18    accent text
     hair        rgba(14,14,14,0.10)  hairlines
   Easing:
     --e1  cubic-bezier(.6,.01,0,1)   primary
     --e2  cubic-bezier(.2,.7,.2,1)   exit/return
   Durations:
     --d1 220ms  micro
     --d2 640ms  medium
     --d3 1400ms cinematic
   ============================================================ */

:root{
  --ink:#0E0E0E;
  --ink-soft:#4A4744;
  --ink-mute:#8A8580;
  --paper:#FFFFFF;
  --paper-2:#F6F4F0;
  --tan:#8B5A2B;
  --tan-deep:#5E3C18;
  --hair:rgba(14,14,14,0.10);
  --hair-strong:rgba(14,14,14,0.22);
  --e1:cubic-bezier(.6,.01,0,1);
  --e2:cubic-bezier(.2,.7,.2,1);
  --d1:220ms;
  --d2:640ms;
  --d3:1400ms;
  --display:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter:clamp(20px, 4vw, 56px);
  --max:1480px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
}
body{
  background:var(--paper);
  color:var(--ink);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Hide native cursor when our custom one is active */
.is-custom-cursor,
.is-custom-cursor a,
.is-custom-cursor button,
.is-custom-cursor [data-hover]{ cursor:none; }
.is-custom-cursor input,
.is-custom-cursor textarea{ cursor:text; }

/* Selection */
::selection{background:var(--ink);color:var(--paper);}

/* Typography spine */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.02;
}
em{font-style:italic;font-weight:400;color:var(--tan-deep);}
p{color:var(--ink-soft);font-size:clamp(15px,1.05vw,17px);line-height:1.6;}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;}

/* Hairline rule used in tags + sections */
.section-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.section-tag::before{
  content:"";
  display:inline-block;
  width:38px;height:1px;
  background:var(--ink);
}

.section-h{
  font-size:clamp(34px, 5.4vw, 86px);
  letter-spacing:-0.02em;
  line-height:1.02;
  margin-top:22px;
  max-width:18ch;
}
.section-p{
  margin-top:18px;
  max-width:46ch;
  font-size:clamp(15px,1.1vw,18px);
}

/* ============================================================
   Anchor visibility (per project rule)
   Global links stay clean, but inline body links get a
   visible tan underline so they read as links.
   ============================================================ */
a{color:inherit;text-decoration:none;}

/* in-content links inside long-form paragraphs */
.manifesto__body p a,
.stage__desc a,
.feature__copy p a,
.quiet__cell p a,
.atelier__copy p a{
  color:var(--tan-deep);
  text-decoration:underline;
  text-decoration-color:rgba(139,90,43,0.45);
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  transition:color var(--d1) var(--e1), text-decoration-color var(--d1) var(--e1);
}
.manifesto__body p a:hover,
.stage__desc a:hover,
.feature__copy p a:hover,
.quiet__cell p a:hover,
.atelier__copy p a:hover{
  color:var(--ink);
  text-decoration-color:var(--ink);
}

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor{
  position:fixed;
  pointer-events:none;
  top:0;left:0;
  width:0;height:0;
  z-index:1200;
}
.cursor__dot,
.cursor__ring{
  position:fixed;
  pointer-events:none;
  top:0;left:0;
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  will-change:transform,width,height;
  mix-blend-mode:difference;
}
.cursor__dot{
  width:6px;height:6px;
  background:#ffffff;
}
.cursor__ring{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,0.85);
  background:transparent;
  transition:width var(--d1) var(--e1), height var(--d1) var(--e1),
             border-color var(--d1) var(--e1), background var(--d1) var(--e1);
}
.cursor.is-hover .cursor__ring{
  width:78px;height:78px;
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.7);
}
.cursor.is-text .cursor__dot{width:2px;height:16px;border-radius:0;}
.cursor.is-text .cursor__ring{opacity:0;}
.cursor__label{
  position:fixed;
  top:0;left:0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#ffffff;
  opacity:0;
  mix-blend-mode:difference;
  transition:opacity var(--d1) var(--e1);
  white-space:nowrap;
}
.cursor.is-hover .cursor__label{opacity:1;}

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

/* ============================================================
   Preloader
   ============================================================ */
.preload{
  position:fixed;inset:0;
  background:var(--paper);
  z-index:1100;
  display:grid;place-items:end stretch;
  padding:var(--gutter);
}
.preload__inner{
  width:100%;
}
.preload__mark{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(140px,28vw,420px);
  line-height:0.78;
  letter-spacing:-0.04em;
  color:var(--ink);
  transform:translateY(0);
}
.preload__meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:28px;
  border-top:1px solid var(--hair);
  padding-top:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.preload__count{color:var(--ink);font-variant-numeric:tabular-nums;}
.preload__bar{
  margin-top:12px;
  height:1px;
  background:var(--hair);
  position:relative;
  overflow:hidden;
}
.preload__fill{
  position:absolute;inset:0 100% 0 0;
  background:var(--ink);
  transform-origin:left;
  transition:right 80ms linear;
}
.is-preloaded .preload{
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1100ms var(--e1);
}

/* ============================================================
   Topnav
   ============================================================ */
.topnav{
  position:fixed;
  inset:0 0 auto 0;
  padding:20px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:80;
  pointer-events:none;
  background:var(--paper);
  border-bottom:1px solid var(--hair);
  transition:border-color var(--d2) var(--e1), padding var(--d2) var(--e1);
}
.topnav.is-scrolled{
  border-bottom-color:var(--hair-strong);
  padding-top:14px;
  padding-bottom:14px;
}
/* push the hero down so the nav doesn't crash into the eyebrow */
.hero{padding-top:120px;}
.topnav > *{pointer-events:auto;}
.topnav__brand{
  display:inline-flex;
  align-items:center;
  line-height:1;
  color:var(--ink);
}
.topnav__brand-mark{
  font-family:'Syne', system-ui, sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
.topnav__nav{
  display:flex;align-items:center;gap:34px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.topnav__nav a{color:var(--ink);position:relative;padding:6px 0;}
.topnav__nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d2) var(--e1);
}
.topnav__nav a:hover::after{transform:scaleX(1);}
.topnav__cta{
  border:1px solid var(--ink);
  padding:10px 16px !important;
  border-radius:999px;
}
.topnav__cta::after{display:none;}
.topnav__cta:hover{background:var(--ink);color:var(--paper);}

@media (max-width:720px){
  .topnav__nav{gap:14px;}
  .topnav__nav a:not(.topnav__cta){display:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100dvh;
  padding:100px var(--gutter) 40px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:var(--gutter);
}
.hero__inner{
  display:flex;flex-direction:column;
  justify-content:flex-start;
  gap:clamp(28px, 3.4vw, 48px);
}
.hero__scroll{margin-top:auto;}
.hero__eyebrow{
  display:flex;align-items:center;gap:18px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero__eyebrow-num{
  border:1px solid var(--hair-strong);
  padding:5px 10px;border-radius:999px;color:var(--ink);
}
.hero__head{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px, 5.6vw, 96px);
  line-height:0.96;
  letter-spacing:-0.022em;
  color:var(--ink);
}
.hero__head em{
  font-style:italic;
  font-weight:300;
  color:var(--tan-deep);
}
.hero__support{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  border-top:1px solid var(--hair);
  padding-top:22px;
}
.hero__sub{
  font-size:clamp(15px,1.1vw,18px);
  color:var(--ink-soft);
  max-width:40ch;
}
.hero__meta{
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);
}
.hero__meta i{color:var(--ink-mute);font-style:normal;margin-right:8px;}
.hero__scroll{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  width:max-content;
  color:var(--ink);
}
.hero__scroll-line{
  display:inline-block;
  width:60px;height:1px;background:var(--ink);
  transform-origin:left;animation:scrollHint 2.6s var(--e1) infinite;
}
@keyframes scrollHint{
  0%{transform:scaleX(0);transform-origin:left;}
  45%{transform:scaleX(1);transform-origin:left;}
  55%{transform:scaleX(1);transform-origin:right;}
  100%{transform:scaleX(0);transform-origin:right;}
}

.hero__plate{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:var(--paper-2);
  align-self:stretch;
  min-height:60vh;
}
.hero__plate img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.06);
  transition:transform 9s var(--e1);
}
.is-revealed .hero__plate img{transform:scale(1);}

/* Image reveal via clip-path */
[data-reveal] img{
  clip-path:inset(102% 0 0 0);
  transition:clip-path 1400ms var(--e1);
}
[data-reveal].is-in img{clip-path:inset(0 0 0 0);}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;}
  .hero__plate{min-height:48vh;order:-1;}
  .hero__support{grid-template-columns:1fr;gap:20px;}
}

/* ============================================================
   Generic fade
   ============================================================ */
[data-fade]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--d3) var(--e1), transform var(--d3) var(--e1);
}
[data-fade].is-in{opacity:1;transform:none;}

/* split text masks - JS wraps chars/words in spans
   .split-line  : whole-line block mask (used by data-split with <br>)
   .split-mask  : inline-block per-word mask (used by data-split-words)
   .split-word  : the animated element that translates inside the mask
   Descender room: padding-bottom + negative margin keeps p/g/y from clipping
   without affecting layout flow. */
.split-line{
  display:block;
  overflow:hidden;
  padding-bottom:0.16em;
  margin-bottom:-0.16em;
}
.split-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.16em;
  margin-bottom:-0.16em;
  line-height:inherit;
}
.split-char,.split-word{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1200ms var(--e1);
  will-change:transform;
}
.is-in .split-char,
.is-in .split-word{transform:translateY(0);}

/* ============================================================
   Manifesto
   ============================================================ */
.manifesto{
  padding:clamp(56px,7vw,96px) var(--gutter);
  border-top:1px solid var(--hair);
  display:flex;
  flex-direction:column;
  gap:clamp(28px,3.5vw,48px);
}
.manifesto__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--hair);
}
.manifesto__index{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.manifesto__lead{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(34px,4.8vw,84px);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--ink);
  max-width:24ch;
}
.manifesto__lead em{color:var(--tan-deep);}
.manifesto__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.manifesto__col{display:flex;flex-direction:column;gap:14px;}
.manifesto__col-tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--tan-deep);
  padding-bottom:10px;
  border-bottom:1px solid var(--hair-strong);
}
.manifesto__body p{
  font-size:clamp(15px,1.05vw,17px);
  color:var(--ink-soft);
  line-height:1.65;
}
.manifesto__stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--hair);
  margin-top:8px;
}
.manifesto__stats > div{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 36px 24px 0;
  border-right:1px solid var(--hair);
}
.manifesto__stats > div + div{padding-left:36px;}
.manifesto__stats > div:last-child{border-right:0;padding-right:0;}
.manifesto__stats dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  line-height:1.45;
  min-height:2.6em;
}
.manifesto__stats dd{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px,3.6vw,58px);
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.manifesto__stats dd span{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--tan-deep);
  text-transform:uppercase;
  font-weight:500;
}
@media (max-width:980px){
  .manifesto__stats{grid-template-columns:repeat(2,1fr);}
  .manifesto__stats > div:nth-child(2){border-right:0;}
  .manifesto__stats > div:nth-child(1),
  .manifesto__stats > div:nth-child(2){border-bottom:1px solid var(--hair);}
}
@media (max-width:640px){
  .manifesto__body{grid-template-columns:1fr;gap:36px;}
  .manifesto__stats{grid-template-columns:1fr;}
  .manifesto__stats > div{border-right:0;border-bottom:1px solid var(--hair);}
  .manifesto__stats > div:last-child{border-bottom:0;}
  .manifesto__stats dt{min-height:auto;}
}

/* ============================================================
   SECTION 03 - ATLAS (the atelier's case book)
   Asymmetric two-column: persistent index left, active case right.
   Motion verb: leaf. Three layered transitions per swap -
     numeral flip, plate clip-wipe, meta+title+desc fade-translate.
   ============================================================ */
.atlas{
  padding:clamp(56px,7vw,96px) var(--gutter);
  border-top:1px solid var(--hair);
  position:relative;
}
.atlas__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(40px,6vw,80px);
}
.atlas__count{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.atlas__h{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px,5.4vw,92px);
  letter-spacing:-0.025em;
  line-height:1.02;
  max-width:22ch;
  margin-bottom:clamp(36px,5vw,64px);
}
.atlas__grid{
  display:grid;
  grid-template-columns:0.82fr 1.4fr;
  gap:clamp(40px,5vw,72px);
  align-items:start;
  position:relative;
}

/* --- LEFT : index rail ---------------------------------------- */
.atlas__left{position:sticky; top:96px;}
.atlas__rail{
  list-style:none;
  border-top:1px solid var(--ink);
}
.atlas__item{
  display:grid;
  grid-template-columns:18px 48px 1fr;
  gap:18px;
  align-items:baseline;
  padding:22px 0 22px 0;
  border-bottom:1px solid var(--hair);
  cursor:pointer;
  position:relative;
  transition:padding-left var(--d2) var(--e1);
}
.atlas__item:hover{padding-left:10px;}
.atlas__item.is-active{padding-left:14px;}
.atlas__diamond{
  width:7px;height:7px;
  background:var(--tan-deep);
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform var(--d2) var(--e1), background var(--d2) var(--e1);
  margin-top:0.65em;
}
.atlas__item.is-active .atlas__diamond{transform:rotate(45deg) scale(1);}
.atlas__rnum{
  font-family:var(--display);
  font-weight:300;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
  transition:color var(--d2) var(--e1), font-weight var(--d2) var(--e1);
}
.atlas__item:hover .atlas__rnum{color:var(--ink-soft);font-weight:400;}
.atlas__item.is-active .atlas__rnum{color:var(--ink);font-weight:600;}
.atlas__rtitle{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(19px,1.8vw,26px);
  letter-spacing:-0.01em;
  line-height:1.12;
  color:var(--ink-mute);
  transition:color var(--d2) var(--e1), transform var(--d2) var(--e1);
}
.atlas__item:hover .atlas__rtitle{color:var(--ink-soft);transform:translateX(4px);}
.atlas__item.is-active .atlas__rtitle{color:var(--ink);}
.atlas__note{
  margin-top:30px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  line-height:1.8;
  max-width:38ch;
  padding-left:14px;
  border-left:1px solid var(--hair-strong);
}

/* --- RIGHT : case panel --------------------------------------- */
.atlas__case{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "num   meta"
    "plate plate"
    "title title"
    "desc  cta";
  column-gap:30px;
  row-gap:28px;
  align-items:start;
}

.atlas__numeral{
  grid-area:num;
  position:relative;
  overflow:hidden;
  height:clamp(120px,14vw,200px);
  line-height:0.82;
}
.atlas__numeral-stack{
  position:absolute;
  top:0;left:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(120px,13vw,200px);
  letter-spacing:-0.05em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:inline-block;
  transform:translateY(108%);
  opacity:0;
  transition:transform 900ms var(--e1), opacity 700ms var(--e1);
  will-change:transform,opacity;
}
.atlas__numeral-stack.is-out{
  transform:translateY(-108%);
  opacity:0;
}
.atlas__numeral-stack.is-settle{
  transform:translateY(0);
  opacity:1;
}

.atlas__meta{
  grid-area:meta;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 28px;
  padding-top:14px;
  border-top:1px solid var(--ink);
}
.atlas__meta > div{display:flex;flex-direction:column;gap:6px;}
.atlas__meta dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.atlas__meta dd{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(17px,1.4vw,22px);
  color:var(--ink);
  letter-spacing:-0.01em;
  transition:opacity 360ms var(--e1), transform 360ms var(--e1);
}
.atlas__meta.is-swap dd{opacity:0;transform:translateY(8px);}

.atlas__plate{
  grid-area:plate;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper-2);
  position:relative;
}
.atlas__plate img{
  width:100%;height:100%;object-fit:cover;display:block;
  clip-path:inset(0 0 0 0);
  transition:clip-path 700ms var(--e1);
  will-change:clip-path;
}
.atlas__plate.is-out img{clip-path:inset(0 0 0 100%);}
.atlas__plate.is-incoming img{
  clip-path:inset(0 100% 0 0);
  transition:none;
}

.atlas__title{
  grid-area:title;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(30px,3.2vw,54px);
  letter-spacing:-0.02em;
  line-height:1.04;
  color:var(--ink);
  max-width:24ch;
  transition:opacity 360ms var(--e1), transform 360ms var(--e1);
}
.atlas__title.is-swap{opacity:0;transform:translateY(10px);}

.atlas__desc{
  grid-area:desc;
  font-size:clamp(15px,1.05vw,17px);
  color:var(--ink-soft);
  line-height:1.65;
  max-width:54ch;
  transition:opacity 360ms var(--e1), transform 360ms var(--e1);
}
.atlas__desc.is-swap{opacity:0;transform:translateY(10px);}

.atlas__cta{
  grid-area:cta;
  justify-self:end;
  align-self:end;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink);
  padding:14px 0;
  border-bottom:1px solid var(--ink);
  transition:gap var(--d2) var(--e1), color var(--d2) var(--e1);
  will-change:transform;
}
.atlas__cta:hover{gap:18px;color:var(--tan-deep);}
.atlas__cta svg{display:block;}

@media (max-width:1080px){
  .atlas__grid{grid-template-columns:1fr;}
  .atlas__left{position:relative;top:auto;}
}
@media (max-width:680px){
  .atlas__case{
    grid-template-columns:1fr;
    grid-template-areas:
      "num"
      "plate"
      "meta"
      "title"
      "desc"
      "cta";
  }
  .atlas__cta{justify-self:start;}
  .atlas__meta{grid-template-columns:1fr 1fr;}
  .atlas__rtitle{font-size:clamp(20px,4vw,28px);}
}

/* ============================================================
   Service Index (project list with hover image floater)
   ============================================================ */
.service-index{
  position:relative;
  padding:clamp(56px,7vw,96px) var(--gutter) 40px;
  border-top:1px solid var(--hair);
}
.service-index__head{
  max-width:62ch;
  margin-bottom:40px;
}

.service-index__list{
  list-style:none;
  border-top:1px solid var(--hair);
}
.srv{
  position:relative;
  display:grid;
  grid-template-columns:80px 1fr minmax(260px, 1.1fr) 120px;
  align-items:baseline;
  gap:24px;
  padding:34px 0;
  border-bottom:1px solid var(--hair);
  cursor:pointer;
  transition:padding var(--d2) var(--e1);
}
.srv:hover{padding-left:14px;padding-right:14px;}
.srv__num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--ink-mute);
}
.srv__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,3.4vw,52px);
  letter-spacing:-0.015em;
  line-height:1.05;
  color:var(--ink);
  transition:color var(--d2) var(--e1), transform var(--d2) var(--e1);
}
.srv:hover .srv__title{color:var(--tan-deep);}
.srv__desc{
  font-size:14px;line-height:1.55;
  color:var(--ink-soft);
  max-width:44ch;
}
.srv__cue{
  justify-self:end;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-mute);
  opacity:0.7;
  transition:opacity var(--d2) var(--e1), color var(--d2) var(--e1);
}
.srv:hover .srv__cue{opacity:1;color:var(--ink);}
.srv::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d2) var(--e1);
}
.srv:hover::before{transform:scaleX(1);}

.service-index__floater{
  position:fixed;
  top:0;left:0;
  width:340px;height:430px;
  pointer-events:none;
  overflow:hidden;
  background:var(--paper-2);
  z-index:60;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(0.94);
  transition:opacity var(--d2) var(--e1), transform var(--d2) var(--e1);
  border-radius:2px;
}
.service-index__floater.is-show{
  opacity:1;
  transform:translate3d(-50%,-50%,0) scale(1);
}
.service-index__floater img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:880px){
  .srv{
    grid-template-columns:50px 1fr;
    grid-template-areas:
      "num title"
      ". desc"
      ". cue";
    gap:6px 18px;
  }
  .srv__num{grid-area:num;}
  .srv__title{grid-area:title;}
  .srv__desc{grid-area:desc;margin-top:10px;}
  .srv__cue{grid-area:cue;justify-self:start;margin-top:14px;}
  .service-index__floater{display:none;}
}

/* ============================================================
   Method - sticky stacked cards
   ============================================================ */
.method{
  padding:clamp(56px,7vw,96px) var(--gutter) clamp(40px,5vw,72px);
  border-top:1px solid var(--hair);
}
.method__head{margin-bottom:40px;max-width:62ch;}
.method__stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.stage{
  position:sticky;
  top:96px;
  background:var(--paper);
  border:1px solid var(--hair);
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:62vh;
  overflow:hidden;
  border-radius:2px;
}
.stage:nth-child(2){top:112px;}
.stage:nth-child(3){top:128px;}
.stage:nth-child(4){top:144px;}
.stage__text{
  padding:clamp(28px,4vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:30px;
}
.stage__num{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--tan-deep);
}
.stage__title{
  font-family:var(--display);
  font-size:clamp(34px,4.4vw,68px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-0.02em;
}
.stage__desc{
  font-size:clamp(15px,1.05vw,17px);
  color:var(--ink-soft);
  max-width:46ch;
}
.stage__list{
  list-style:none;
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink);
  border-top:1px solid var(--hair);
  padding-top:18px;
}
.stage__list li{padding-left:18px;position:relative;}
.stage__list li::before{
  content:"";
  position:absolute;left:0;top:7px;
  width:8px;height:1px;background:var(--ink);
}
.stage__plate{
  background:var(--paper-2);
  overflow:hidden;
}
.stage__plate img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:880px){
  .stage{grid-template-columns:1fr;min-height:auto;position:relative;top:auto !important;}
  .stage__plate{aspect-ratio:4/3;}
}

/* ============================================================
   Marquee rail
   ============================================================ */
.rail{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:26px 0;
  overflow:hidden;
  background:var(--paper);
}
.rail__track{
  display:flex;
  width:max-content;
  gap:36px;
  will-change:transform;
}
.rail__row{
  display:flex;
  align-items:center;
  gap:36px;
  font-family:var(--display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(38px,6vw,86px);
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  letter-spacing:-0.02em;
}
.rail__row span{display:inline-block;}
.rail__dot{color:var(--tan-deep);font-style:normal;}

/* ============================================================
   Featured restoration
   ============================================================ */
.feature{
  padding:clamp(56px,7vw,96px) var(--gutter);
  border-top:1px solid var(--hair);
}
.feature__grid{
  display:grid;
  grid-template-columns:0.95fr 1fr;
  gap:60px;
  align-items:center;
}
.feature__title{
  font-size:clamp(40px,5.2vw,92px);
  letter-spacing:-0.02em;
  line-height:1.02;
  margin-top:18px;
  max-width:14ch;
}
.feature__title em{font-style:italic;color:var(--tan-deep);font-weight:300;}
.feature__copy p{margin-top:18px;color:var(--ink-soft);font-size:clamp(15px,1.1vw,18px);max-width:48ch;}

.feature__stats{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair);
}
.feature__stats div{
  padding:18px 28px 0 0;
  border-right:1px solid var(--hair);
}
.feature__stats div + div{padding-left:28px;}
.feature__stats div:last-child{border-right:0;padding-right:0;}
.feature__stats dt{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-mute);
}
.feature__stats dd{
  font-family:var(--display);
  font-size:clamp(28px,3.4vw,46px);
  color:var(--ink);
  margin-top:6px;font-weight:500;
  letter-spacing:-0.015em;
}

.feature__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-2);
}
.feature__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.feature__media figcaption{
  position:absolute;
  left:18px;right:18px;bottom:18px;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}
@media (max-width:880px){
  .feature__grid{grid-template-columns:1fr;}
  .feature__stats{grid-template-columns:repeat(2,1fr);}
  .feature__stats div:nth-child(2){border-right:0;}
}

/* ============================================================
   Quiet operations
   ============================================================ */
.quiet{
  padding:clamp(56px,7vw,96px) var(--gutter);
  border-top:1px solid var(--hair);
  background:var(--paper-2);
}
.quiet__head{
  font-family:var(--display);
  font-size:clamp(34px,5.2vw,84px);
  letter-spacing:-0.02em;
  line-height:1.02;
  margin-top:22px;
}
.quiet__grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--hair);
}
.quiet__cell{
  padding:32px 36px 32px 0;
  border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:14px;
}
.quiet__cell + .quiet__cell{
  padding-left:36px;
}
.quiet__cell:last-child{border-right:0;padding-right:0;}
.quiet__cell-num{
  font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--tan-deep);
}
.quiet__cell h3{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px,2vw,30px);
  line-height:1.05;
  letter-spacing:-0.01em;
}
.quiet__cell p{font-size:14px;line-height:1.6;color:var(--ink-soft);}

@media (max-width:880px){
  .quiet__grid{grid-template-columns:1fr;}
  .quiet__cell{border-right:0;border-bottom:1px solid var(--hair);padding:24px 0;}
  .quiet__cell:last-child{border-bottom:0;}
}

/* ============================================================
   Atelier
   ============================================================ */
.atelier{
  padding:clamp(56px,7vw,96px) var(--gutter);
}
.atelier__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:center;
}
.atelier__plate{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-2);
}
.atelier__plate img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.atelier__plate figcaption{
  position:absolute;left:18px;bottom:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;
}
.atelier__title{
  font-size:clamp(44px,5.6vw,100px);
  letter-spacing:-0.025em;
  line-height:1;
  margin-top:18px;
}
.atelier__title em{color:var(--tan-deep);font-style:italic;font-weight:300;}
.atelier__copy p{margin-top:18px;color:var(--ink-soft);font-size:clamp(15px,1.1vw,18px);max-width:48ch;}
.atelier__creds{
  list-style:none;
  margin-top:34px;
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;
}
.atelier__creds li{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px;
  padding:14px 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink);
}
.atelier__creds li span{color:var(--tan-deep);}
@media (max-width:880px){
  .atelier__grid{grid-template-columns:1fr;}
}

/* ============================================================
   Inquire
   ============================================================ */
.inquire{
  padding:clamp(56px,7vw,96px) var(--gutter);
  background:var(--paper-2);
  border-top:1px solid var(--hair);
}
.inquire__inner{max-width:1100px;margin:0 auto;}
.inquire__head{
  font-family:var(--display);
  font-size:clamp(38px,5.2vw,86px);
  letter-spacing:-0.02em;
  line-height:1.02;
  margin-top:22px;
  max-width:20ch;
}
.inquire__head em{color:var(--tan-deep);font-style:italic;font-weight:300;}
.inquire__copy{margin-top:22px;max-width:54ch;font-size:clamp(15px,1.1vw,17px);}
.inquire__form{
  margin-top:54px;
  display:flex;flex-direction:column;gap:18px;
}
.inquire__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.inquire__form label{
  display:flex;flex-direction:column;gap:8px;
}
.inquire__form label > span{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-mute);
}
.inquire__form input,
.inquire__form textarea{
  font-family:var(--sans);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink);
  padding:10px 0 12px;
  font-size:16px;
  color:var(--ink);
  outline:none;
  width:100%;
  resize:vertical;
  transition:border-color var(--d1) var(--e1);
}
.inquire__form input::placeholder,
.inquire__form textarea::placeholder{color:var(--ink-mute);}
.inquire__form input:focus,
.inquire__form textarea:focus{border-bottom-color:var(--tan-deep);}

.inquire__actions{
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.inquire__submit{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  padding:18px 26px;border-radius:999px;
  transition:background var(--d1) var(--e1), color var(--d1) var(--e1);
  will-change:transform;
}
.inquire__submit:hover{background:var(--tan-deep);}
.inquire__alt{
  font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
}
@media (max-width:720px){
  .inquire__row{grid-template-columns:1fr;}
}

/* ============================================================
   Footer
   ============================================================ */
.foot{
  padding:clamp(56px,7vw,96px) var(--gutter) 30px;
  background:var(--paper);
  border-top:1px solid var(--hair);
}
.foot__signoff{margin-bottom:60px;}
.foot__big{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(72px,14vw,260px);
  line-height:0.86;
  letter-spacing:-0.035em;
  color:var(--ink);
}
.boil-text{
  filter:url(#boil);
  will-change:filter;
}
.foot__caption{
  display:block;
  margin-top:18px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-mute);
  max-width:60ch;
}
.foot__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding:40px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.foot__col{display:flex;flex-direction:column;gap:10px;}
.foot__h{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:8px;
}
.foot__col a{
  color:var(--ink);
  font-size:14px;
  padding:2px 0;
  position:relative;
  width:max-content;
}
.foot__col a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d2) var(--e1);
}
.foot__col a:hover::after{transform:scaleX(1);}
.foot__base{
  margin-top:24px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-mute);
}
@media (max-width:720px){
  .foot__cols{grid-template-columns:1fr;}
}

/* ============================================================
   SECTION 04.5 - THE NIGHT SHIFT
   Scroll-scrubbed pin. Section height = N viewports; sticky inner
   pins to top:0 100vh; JS translates the horizontal track and
   advances the clock in lockstep with section scroll progress.
   ============================================================ */
.nightshift{
  position:relative;
  /* total scroll budget for the pin - tuned to make all six beats
     pass in a calm pace without feeling endless */
  min-height:520vh;
  background:var(--paper);
  border-top:1px solid var(--hair);
}
.nightshift__sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:grid;
  grid-template-columns:0.95fr 1.65fr;
  align-items:stretch;
}
.nightshift__panel{
  padding:clamp(60px,8vw,110px) clamp(24px,3.5vw,56px);
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3vw,40px);
  border-right:1px solid var(--hair);
  background:var(--paper);
  position:relative;
}
.nightshift__topbar{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-bottom:18px;
  border-bottom:1px solid var(--hair);
  gap:18px;
  flex-wrap:wrap;
}
.nightshift__hint{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.nightshift__head{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px,5.6vw,96px);
  letter-spacing:-0.025em;
  line-height:1.02;
  color:var(--ink);
}
.nightshift__head em{color:var(--tan-deep);font-style:italic;font-weight:300;}
.nightshift__clock{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(80px,11vw,180px);
  letter-spacing:-0.035em;
  line-height:0.92;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:baseline;
  gap:0.04em;
  margin-top:auto;
}
.nightshift__clock-sep{
  color:var(--tan-deep);
  animation:nightblink 1.6s steps(1) infinite;
}
@keyframes nightblink{
  0%, 50%{opacity:1;}
  51%, 100%{opacity:0.35;}
}
.nightshift__clock-cap{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-top:1px solid var(--hair);
  padding-top:10px;
}
.nightshift__rail{
  overflow:hidden;
  position:relative;
  background:var(--paper-2);
}
.nightshift__track{
  list-style:none;
  display:flex;
  height:100%;
  align-items:stretch;
  width:max-content;
  padding:clamp(40px,5vw,80px);
  gap:clamp(28px,3.5vw,56px);
  will-change:transform;
}
.beat{
  width:clamp(280px, 30vw, 440px);
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:18px;
  background:var(--paper);
  border:1px solid var(--hair);
  padding:24px;
}
.beat__meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--hair);
  padding-bottom:12px;
}
.beat__time{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(28px,3.2vw,44px);
  letter-spacing:-0.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.beat__phase{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--tan-deep);
}
.beat__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--paper-2);
}
.beat__media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s var(--e1);
}
.beat:hover .beat__media img{transform:scale(1.05);}
.beat__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px,1.8vw,26px);
  letter-spacing:-0.01em;
  line-height:1.1;
  color:var(--ink);
}
.beat__desc{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
}

@media (max-width:980px){
  .nightshift{min-height:auto;}
  .nightshift__sticky{
    position:relative;
    height:auto;
    grid-template-columns:1fr;
  }
  .nightshift__panel{border-right:0;border-bottom:1px solid var(--hair);}
  .nightshift__rail{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .nightshift__track{transform:none !important;padding:32px;}
}


/* ============================================================
   SECTION 06.5 - THE VERBAL DOSSIER
   Three typographic pull-quotes at editorial scale.
   Each quote is a sticky-pinned panel that briefly holds the
   viewport before scrolling on to the next.
   ============================================================ */
.dossier{
  padding:clamp(56px,7vw,96px) var(--gutter) clamp(32px,4vw,56px);
  border-top:1px solid var(--hair);
  background:var(--paper);
  position:relative;
}
.dossier__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(40px,5vw,72px);
}
.dossier__count{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.dossier__head{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px,5.4vw,92px);
  letter-spacing:-0.025em;
  line-height:1.02;
  color:var(--ink);
  margin-bottom:clamp(60px,8vw,100px);
  max-width:22ch;
}
.dossier__head em{color:var(--tan-deep);font-style:italic;font-weight:300;}
.dossier__list{
  list-style:none;
}
.quote{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:clamp(28px,4vw,60px);
  padding:clamp(40px,5vw,72px) 0;
  border-top:1px solid var(--hair);
  align-items:start;
  position:sticky;
  top:64px;
  background:var(--paper);
}
.quote:last-child{border-bottom:1px solid var(--hair);}
.quote:nth-child(2){top:88px;}
.quote:nth-child(3){top:112px;}
.quote__glyph{
  width:clamp(64px,7vw,112px);
  height:auto;
  color:var(--tan-deep);
  margin-top:8px;
}
.quote__text{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px,3.6vw,60px);
  letter-spacing:-0.02em;
  line-height:1.06;
  color:var(--ink);
  max-width:24ch;
}
.quote__text em{font-style:italic;color:var(--tan-deep);font-weight:300;}
.quote__sig{
  grid-column:2;
  margin-top:36px;
  padding-top:18px;
  border-top:1px solid var(--ink);
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.quote__role{color:var(--ink);}
.quote__org{color:var(--ink-soft);}
.quote__seal{color:var(--ink-mute);margin-top:6px;}

@media (max-width:860px){
  .quote{
    grid-template-columns:1fr;
    position:relative;top:auto !important;
  }
  .quote__sig{grid-column:1;}
  .quote__glyph{width:60px;}
}


/* ============================================================
   SECTION 08.5 - STANDARDS & CADENCE
   Draggable horizontal inertia gallery. Five cards with giant
   Roman numerals. Drag bar at the bottom tracks progress.
   ============================================================ */
.standards{
  padding:clamp(56px,7vw,96px) 0 clamp(36px,4.5vw,60px);
  border-top:1px solid var(--hair);
  background:var(--paper);
  position:relative;
}
.standards .section-ornament{margin-left:var(--gutter);}
.standards__top,
.standards__head{margin-left:var(--gutter);margin-right:var(--gutter);}
.standards__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(40px,5vw,72px);
}
.standards__hint{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.standards__hint svg{color:var(--tan-deep);}
.standards__head{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px,5.4vw,92px);
  letter-spacing:-0.025em;
  line-height:1.02;
  color:var(--ink);
  max-width:22ch;
  margin-bottom:clamp(50px,7vw,90px);
}
.standards__head em{color:var(--tan-deep);font-style:italic;font-weight:300;}

.standards__viewport{
  overflow:hidden;
  cursor:grab;
  padding-left:var(--gutter);
  padding-right:0;
  user-select:none;
}
.standards__viewport.is-dragging{cursor:grabbing;}
.standards__track{
  list-style:none;
  display:flex;
  width:max-content;
  gap:clamp(20px,2.5vw,36px);
  will-change:transform;
  padding-right:var(--gutter);
}
.std{
  width:clamp(280px, 28vw, 420px);
  min-height:480px;
  background:var(--paper);
  border:1px solid var(--hair);
  padding:clamp(28px,3vw,40px);
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:18px;
  position:relative;
  transition:border-color var(--d2) var(--e1), box-shadow var(--d2) var(--e1);
}
.std:hover{border-color:var(--ink);}
.std__num{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(72px,9vw,150px);
  letter-spacing:-0.04em;
  line-height:0.88;
  color:var(--tan-deep);
  font-feature-settings:"smcp";
}
.std__caption{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:14px;
  border-top:1px solid var(--hair);
}
.std__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px,2vw,30px);
  letter-spacing:-0.01em;
  line-height:1.1;
  color:var(--ink);
}
.std__desc{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
}
.std__sla{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--tan-deep);
  padding-top:14px;
  border-top:1px solid var(--hair-strong);
}

.standards__bar{
  margin:clamp(40px,5vw,72px) var(--gutter) 0;
  display:flex;
  align-items:center;
  gap:18px;
}
.standards__bar-track{
  flex:1;
  height:1px;
  background:var(--hair);
  position:relative;
}
.standards__bar-fill{
  position:absolute;
  top:0;left:0;
  height:1px;
  background:var(--ink);
  width:0;
  transition:width 120ms var(--e1);
}

@media (max-width:720px){
  .standards__viewport{cursor:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .standards__track{transform:none !important;}
  .standards__bar{display:none;}
  .std{min-height:auto;}
}


/* ============================================================
   SVG LAYER (Phase 2)
   Stroke-draw system, ornaments, glyphs, boil filter, progress ring.
   ============================================================ */

/* Base stroke-draw: paths start hidden, transition to revealed.
   JS sets --len to the path's getTotalLength() per element. */
[data-draw]{
  stroke-dasharray:var(--len, 1200);
  stroke-dashoffset:var(--len, 1200);
  transition:stroke-dashoffset 1500ms var(--e1);
  will-change:stroke-dashoffset;
}
[data-draw].is-drawn{stroke-dashoffset:0;}
[data-atlas-draw]{
  stroke-dasharray:var(--len, 60);
  stroke-dashoffset:var(--len, 60);
  transition:stroke-dashoffset 700ms var(--e1);
}
.atlas__item.is-active [data-atlas-draw]{stroke-dashoffset:0;}

/* SVG defs container : kept out of layout */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

/* ============================================================
   01 / TLR monogram in preloader
   ============================================================ */
.preload__monogram{
  display:block;
  width:min(72vw, 540px);
  height:auto;
  color:var(--ink);
  margin-bottom:10px;
}
.preload__monogram [data-draw]{transition-duration:1800ms;}

/* ============================================================
   02 / Page-progress ring (fixed)
   ============================================================ */
.prog{
  position:fixed;
  right:22px;
  bottom:22px;
  width:54px;height:54px;
  z-index:70;
  display:grid;
  place-items:center;
  color:var(--ink);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 600ms var(--e1), transform 600ms var(--e1);
  pointer-events:none;
}
.prog.is-on{opacity:1;transform:translateY(0);}
.prog__svg{width:100%;height:100%;}
.prog__track{stroke-opacity:0.16;}
.prog__bar{
  stroke-dasharray:106.8;       /* 2*pi*17 */
  stroke-dashoffset:106.8;
  transition:stroke-dashoffset 80ms linear;
}
.prog__pct{
  position:absolute;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.16em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
@media (max-width:720px){.prog{display:none;}}

/* ============================================================
   03 / Boil filter on hero italic
   ============================================================ */
em.is-boil{
  filter:url(#boil);
  /* fallback if SVG filter not supported */
  display:inline-block;
}

/* ============================================================
   04 / Hero scroll arrow
   ============================================================ */
.hero__scroll-svg{
  display:block;
  width:68px;height:18px;
  color:var(--ink);
}
.hero__scroll-svg [data-draw]{transition-duration:1200ms;}
.hero__scroll:hover .hero__scroll-svg [data-draw]{stroke:var(--tan-deep);}
/* hide the old animated CSS line if any remains */
.hero__scroll-line{display:none;}

/* ============================================================
   05 / Section ornament
   ============================================================ */
.section-ornament{
  display:block;
  width:clamp(20px, 1.4vw, 28px);
  height:auto;
  color:var(--tan-deep);
  margin:0 0 28px 0;
}

/* ============================================================
   06 / Atlas active diamond (SVG replaces CSS rotated square)
   ============================================================ */
.atlas__diamond{
  width:14px;height:14px;
  background:transparent !important;       /* override the original CSS square */
  transform:none !important;
  margin-top:0.45em;
  display:inline-block;
  color:var(--tan-deep);
}
.atlas__diamond svg{width:100%;height:100%;display:block;}

/* ============================================================
   07-10 / Quiet-ops glyphs
   ============================================================ */
.quiet__glyph{
  display:block;
  width:36px;height:36px;
  color:var(--tan-deep);
  margin-bottom:6px;
}

/* ============================================================
   11 / Marquee separator glyph (replaces "/")
   ============================================================ */
.rail__dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--tan-deep);
  font-style:normal !important;
}
.rail__dot svg{
  width:clamp(14px, 1.4vw, 22px);
  height:clamp(14px, 1.4vw, 22px);
  display:block;
}

/* ============================================================
   12 / Tyson signature
   ============================================================ */
.atelier__signature{
  margin:30px 0 10px 0;
  padding:18px 0 14px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:380px;
}
.atelier__signature svg{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  color:var(--ink);
}
.atelier__signature figcaption{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ============================================================
   SVG ATMOSPHERE LAYER (Phase 2.5)
   Section-fill watermark SVGs sitting behind / beside content
   in sections that previously felt empty. Low-opacity tan-deep
   stroke art - never compete with the type.
   ============================================================ */

/* 13 / Manifesto Roman numeral watermark */
.manifesto{position:relative;overflow:hidden;}
.manifesto__mark{
  position:absolute;
  right:clamp(-20px, 2vw, 40px);
  top:50%;
  transform:translateY(-50%);
  width:clamp(180px, 18vw, 280px);
  height:auto;
  color:var(--tan-deep);
  opacity:0.38;
  pointer-events:none;
  z-index:0;
}
.manifesto > *:not(.manifesto__mark){position:relative;z-index:1;}
@media (max-width:760px){.manifesto__mark{display:none;}}

/* 14 / Atelier workshop floor plan */
.atelier{position:relative;overflow:hidden;}
.atelier__plan{
  position:absolute;
  left:0;
  top:clamp(40px, 6vw, 80px);
  width:clamp(260px, 44vw, 600px);
  height:auto;
  color:var(--ink);
  opacity:0.20;
  pointer-events:none;
  z-index:0;
}
.atelier__plan text{opacity:0.7;}
.atelier > *:not(.atelier__plan){position:relative;z-index:1;}
@media (max-width:980px){
  .atelier__plan{display:none;}
}

/* 15 / Inquire ornamental sidebar */
.inquire{position:relative;}
.inquire__inner{position:relative;}
.inquire__rule{
  position:absolute;
  left:-58px;
  top:0;
  height:100%;
  width:40px;
  color:var(--tan-deep);
  opacity:0.7;
  pointer-events:none;
}
@media (max-width:1100px){.inquire__rule{display:none;}}

/* 16 / Footer flourish */
.foot__signoff{position:relative;}
.foot__flourish{
  display:block;
  width:100%;
  height:clamp(60px, 8vw, 120px);
  color:var(--tan-deep);
  opacity:0.5;
  margin:clamp(20px, 3vw, 36px) 0;
}

/* ============================================================
   Reduced motion fallback (parallel still version)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition-duration:0.001ms !important;
  }
  .cursor{display:none;}
  [data-reveal] img{clip-path:none !important;}
  [data-fade]{opacity:1 !important;transform:none !important;}
  .split-char,.split-word{transform:none !important;}
  .hero__plate img{transform:none !important;}
  .preload{display:none;}
  [data-draw],[data-atlas-draw]{stroke-dashoffset:0 !important;stroke-dasharray:none !important;}
  .hero__head em.is-boil{filter:none !important;}
  /* Night Shift : drop pin, stack beats vertically, hide clock blink */
  .nightshift{min-height:auto !important;}
  .nightshift__sticky{position:relative;height:auto;grid-template-columns:1fr;}
  .nightshift__panel{border-right:0;border-bottom:1px solid var(--hair);}
  .nightshift__rail{overflow:visible;}
  .nightshift__track{flex-direction:column;width:auto;transform:none !important;}
  .nightshift__clock-sep{animation:none !important;opacity:1 !important;}
  .beat{width:100%;}
  /* Verbal Dossier : drop sticky pins, normal flow */
  .quote{position:relative;top:auto !important;}
  /* Standards : drop drag, normal scroll */
  .standards__viewport{overflow-x:auto;}
  .standards__track{transform:none !important;}
}

/* ============================================================
   MOBILE RECOMPOSITION (<= 720px)
   Re-art-directed for phone. Not a stripped desktop.
   Tighter scale, fewer pins, single-column rhythm, touch targets.
   ============================================================ */
@media (max-width:720px){
  :root{
    --gutter:18px;
  }
  html,body{overflow-x:hidden;}

  /* TOPNAV */
  .topnav{padding:12px var(--gutter);}
  .topnav.is-scrolled{padding-top:10px;padding-bottom:10px;}
  .topnav__brand-mark{
    font-size:12px;
    letter-spacing:0.14em;
  }
  .topnav__cta{
    padding:8px 12px !important;
    font-size:10px;
    letter-spacing:0.14em;
  }
  .topnav__nav{gap:10px;}

  /* HERO */
  .hero{
    padding:84px var(--gutter) 36px;
    grid-template-columns:1fr;
    gap:26px;
    min-height:auto;
  }
  .hero__inner{gap:24px;}
  .hero__plate{
    min-height:46dvh;
    order:-1;
    aspect-ratio:4/5;
  }
  .hero__eyebrow{gap:10px;flex-wrap:wrap;font-size:10px;}
  .hero__head{
    font-size:clamp(34px, 11vw, 64px);
    line-height:1;
    letter-spacing:-0.022em;
  }
  .hero__support{
    grid-template-columns:1fr;
    gap:16px;
    padding-top:18px;
  }
  .hero__sub{font-size:15px;line-height:1.55;}
  .hero__meta{font-size:10px;}
  .hero__scroll{
    margin-top:18px;
    padding:10px 0;
    font-size:10px;
  }

  /* MANIFESTO */
  .manifesto{padding:52px var(--gutter);gap:26px;}
  .manifesto__head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-bottom:14px;
  }
  .manifesto__lead{
    font-size:clamp(28px, 9vw, 48px);
    line-height:1.06;
    max-width:none;
  }
  .manifesto__body{gap:28px;}
  .manifesto__stats dd{font-size:clamp(30px, 9vw, 44px);}
  .manifesto__stats > div{padding:18px 0;}
  .manifesto__stats > div + div{padding-left:0;}

  /* ATLAS */
  .atlas{padding:52px var(--gutter);}
  .atlas__head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:28px;
  }
  .atlas__h{
    font-size:clamp(30px, 9.4vw, 52px);
    line-height:1.04;
    margin-bottom:24px;
  }
  .atlas__grid{gap:32px;}
  .atlas__item{
    grid-template-columns:14px 36px 1fr;
    gap:12px;
    padding:18px 0;
  }
  .atlas__rnum{font-size:18px;}
  .atlas__rtitle{font-size:clamp(18px, 5.4vw, 24px);}
  .atlas__numeral{height:clamp(80px, 18vw, 120px);}
  .atlas__numeral-stack{font-size:clamp(80px, 18vw, 120px);}
  .atlas__title{font-size:clamp(26px, 7.4vw, 40px);}
  .atlas__case{column-gap:18px;row-gap:20px;}
  .atlas__meta{gap:14px 18px;padding-top:10px;}
  .atlas__meta dd{font-size:clamp(15px,4.4vw,20px);}

  /* METHOD */
  .method{padding:52px var(--gutter);}
  .method__head{margin-bottom:26px;}
  .stage{min-height:auto;}
  .stage__text{padding:24px;gap:18px;}
  .stage__title{font-size:clamp(28px, 8vw, 48px);}
  .stage__list{padding-top:14px;font-size:10px;}

  /* NIGHTSHIFT */
  .nightshift__panel{padding:36px 20px;gap:18px;}
  .nightshift__head{
    font-size:clamp(34px, 10vw, 64px);
    line-height:1;
  }
  .nightshift__clock{
    font-size:clamp(56px, 17vw, 100px);
    margin-top:14px;
  }
  .nightshift__track{padding:24px 20px;gap:18px;}
  .beat{width:74vw;padding:18px;}
  .beat__time{font-size:clamp(22px,6.6vw,30px);}

  /* RAIL */
  .rail{padding:18px 0;}
  .rail__row{
    font-size:clamp(28px, 9vw, 48px);
    gap:20px;
  }
  .rail__track{gap:20px;}

  /* FEATURE */
  .feature{padding:52px var(--gutter);}
  .feature__grid{gap:30px;}
  .feature__title{
    font-size:clamp(32px, 9.4vw, 60px);
    line-height:1.02;
    max-width:none;
  }
  .feature__stats{margin-top:24px;}
  .feature__stats div{padding:14px 18px 0 0;}
  .feature__stats div + div{padding-left:18px;}
  .feature__stats dd{font-size:clamp(22px, 6vw, 32px);}
  .feature__media{aspect-ratio:4/5;}

  /* DOSSIER */
  .dossier{padding:52px var(--gutter) 28px;}
  .dossier__top{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:32px;
  }
  .dossier__head{
    font-size:clamp(30px, 9vw, 52px);
    margin-bottom:32px;
  }
  .quote{padding:30px 0;gap:18px;}
  .quote__glyph{width:48px;}
  .quote__text{
    font-size:clamp(22px, 6.6vw, 34px);
    line-height:1.1;
  }
  .quote__sig{margin-top:22px;padding-top:14px;font-size:10px;}

  /* QUIET */
  .quiet{padding:52px var(--gutter);}
  .quiet__head{
    font-size:clamp(28px, 8.6vw, 50px);
    line-height:1.04;
    margin-top:18px;
  }
  .quiet__grid{margin-top:32px;}
  .quiet__cell{padding:22px 0;gap:10px;}
  .quiet__cell h3{font-size:clamp(20px,5.6vw,26px);}

  /* ATELIER */
  .atelier{padding:52px var(--gutter);}
  .atelier__grid{gap:32px;}
  .atelier__plate{aspect-ratio:4/5;}
  .atelier__title{
    font-size:clamp(36px, 11vw, 64px);
    line-height:1;
  }
  .atelier__signature{margin:22px 0 6px;}
  .atelier__creds li{
    grid-template-columns:80px 1fr;
    gap:14px;
    font-size:10px;
  }

  /* STANDARDS */
  .standards{padding:52px 0 32px;}
  .standards__top{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:28px;
  }
  .standards__head{
    font-size:clamp(30px, 9vw, 52px);
    margin-bottom:32px;
  }
  .std{
    width:76vw;
    min-height:auto;
    padding:22px;
  }
  .std__num{font-size:clamp(54px, 16vw, 96px);}

  /* INQUIRE */
  .inquire{padding:52px var(--gutter);}
  .inquire__head{
    font-size:clamp(30px, 9vw, 52px);
    line-height:1.02;
  }
  .inquire__form{margin-top:32px;gap:14px;}
  .inquire__row{gap:14px;}
  .inquire__submit{
    padding:14px 18px;
    font-size:11px;
    min-height:44px;
  }
  .inquire__alt{font-size:11px;}

  /* FOOT */
  .foot{padding:52px var(--gutter) 24px;}
  .foot__signoff{margin-bottom:32px;}
  .foot__big{
    font-size:clamp(48px, 16vw, 96px);
    line-height:0.92;
  }
  .foot__cols{gap:24px;padding:24px 0;}
  .foot__col a{font-size:13px;padding:4px 0;min-height:28px;}

  /* DECORATIVE SVGs — off on phone (less clutter, less paint) */
  .manifesto__mark,
  .atelier__plan,
  .inquire__rule{display:none;}

  /* Boil filter kept on mobile — signature motion, runs cheaply */

  /* Native scroll-snap for nightshift + standards rails (touch-friendly) */
  .nightshift__rail{scroll-snap-type:x mandatory;}
  .nightshift__track > .beat{scroll-snap-align:start;}
  .standards__viewport{scroll-snap-type:x mandatory;}
  .standards__track > .std{scroll-snap-align:start;}

  /* Progress ring compact */
  .prog{right:14px;bottom:14px;width:42px;height:42px;}

  /* Section ornaments smaller */
  .section-ornament{
    width:16px;
    margin-bottom:18px;
  }

  /* Method stages: alternating horizontal slide entrance on mobile */
  .stage[data-slide-l]{
    opacity:0;
    transform:translate3d(-28px,0,0);
    transition:opacity var(--d2) var(--e2),transform var(--d2) var(--e1);
  }
  .stage[data-slide-r]{
    opacity:0;
    transform:translate3d(28px,0,0);
    transition:opacity var(--d2) var(--e2),transform var(--d2) var(--e1);
  }
  .stage[data-slide-l].is-in,
  .stage[data-slide-r].is-in{
    opacity:1;
    transform:none;
  }

  /* Dossier quotes: lateral sweep entrance on mobile */
  .quote[data-slide-q]{
    transform:translate3d(-22px,0,0);
    transition:transform var(--d2) var(--e1);
  }
  .quote[data-slide-q].is-in{transform:none;}

  /* Tap compression feedback on primary touch targets */
  .topnav__cta:active,.inquire__submit:active{
    transform:scale(0.96);
    transition:transform 80ms var(--e1);
  }
  .atlas__item:active{
    opacity:0.65;
    transition:opacity 80ms var(--e1);
  }
}

/* Extra-small phones (<= 380px) — last-line defense against overflow */
@media (max-width:380px){
  :root{--gutter:14px;}
  .topnav__brand-mark{font-size:11px;}
  .hero__head{font-size:clamp(30px, 10.5vw, 44px);}
  .foot__big{font-size:clamp(40px, 14vw, 72px);}
  .atlas__numeral{height:90px;}
  .atlas__numeral-stack{font-size:90px;}

/* ===== FAQ block ===== */
.faq{padding:120px 8vw 100px;position:relative;background:var(--paper);}
.faq .section-ornament{position:absolute;top:48px;right:8vw;width:24px;height:24px;color:var(--ink-mute);}
.faq__top{display:flex;flex-direction:column;gap:18px;margin-bottom:64px;max-width:880px;}
.faq__top .section-tag{align-self:flex-start;}
.faq__top h2,.faq h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(28px,4.2vw,52px);line-height:1.08;letter-spacing:-0.01em;color:var(--ink);margin:0;}
.faq__top h2 em,.faq h2 em{font-style:italic;color:var(--tan-deep);}
.faq__list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);max-width:1100px;}
.faq__item{padding:32px 0 28px;border-bottom:1px solid var(--hair);}
.faq__item h3{font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(16px,1.6vw,20px);letter-spacing:-0.005em;color:var(--ink);margin:0 0 14px;line-height:1.35;}
.faq__item p{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(14px,1.15vw,16px);line-height:1.65;color:var(--ink-soft);margin:0;max-width:78ch;}
.faq__item a{color:var(--tan-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(94,60,24,0.35);transition:text-decoration-color var(--d1) var(--e1);}
.faq__item a:hover{text-decoration-color:var(--tan-deep);}
@media (min-width:900px){
  .faq__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:start;padding:36px 0 32px;}
  .faq__item h3{margin:0;}
}
@media (max-width:720px){
  .faq{padding:80px 6vw 72px;}
  .faq__top{margin-bottom:40px;}
  .faq__item{padding:24px 0 22px;}
}
}