/* ============================================================
   KOSA DESIGN — ultra-premium interior design studio
   Monochrome warm palette · Fraunces + Inter
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:#F7F5F2;          /* warm off-white — dominant surface */
  --surface:#FFFFFF;     /* floating cards only */
  --ink:#1A1A1A;         /* near-black text */
  --muted:#6B6B6B;       /* secondary text */
  --line:#E0DDD8;        /* hairline dividers */

  --ink-12:rgba(26,26,26,.12);
  --ink-06:rgba(26,26,26,.06);
  --paper-60:rgba(247,245,242,.60);
  --accent:#b29460;       /* warm muted bronze — subtle luxury accent */
  --accent-60:rgba(178,148,96,.6);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:clamp(20px,5vw,96px);
  --gap-section:clamp(7rem,15vw,17rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.62,.05,.36,1);

  --r:2px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:auto}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,1.04vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
em{font-style:italic}
::selection{background:var(--ink);color:var(--bg)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- TYPE PRIMITIVES ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:clamp(10px,.74vw,11.5px);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow--light{color:var(--paper-60)}
.eyebrow--idx{color:var(--ink)}
.eyebrow--accent{color:var(--accent)}

.section-title{
  font-family:var(--serif);
  font-weight:380;
  font-optical-sizing:auto;
  font-size:clamp(2.4rem,6.4vw,6.6rem);
  line-height:.99;
  letter-spacing:-.035em;
  color:var(--ink);
}
.section-title em{font-weight:340}

.section-lede{
  max-width:34ch;
  font-size:clamp(1rem,1.25vw,1.18rem);
  color:var(--muted);
  line-height:1.6;
}

/* ---------- LINE-MASK REVEAL ---------- */
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line>span{display:block;will-change:transform;transform:translateY(110%)}

.reveal-fade{opacity:0;will-change:transform,opacity}

/* ============================================================
   GRAIN
   ============================================================ */
.grain{
  position:fixed;inset:-50%;
  width:200%;height:200%;
  pointer-events:none;
  z-index:9000;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
}

/* ============================================================
   CUSTOM CURSOR — disabled. We rely on the native OS cursor for
   100% reliability. Premium interior design studios (Joseph Dirand,
   Vincent Van Duysen, Rose Uniacke) all use the native cursor — the
   focus is the photography, not a decorative dot.
   ============================================================ */
.cursor{display:none!important}
.cursor--legacy{
  position:fixed;top:0;left:0;
  z-index:9500;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  will-change:transform;
}
.cursor.is-visible{opacity:1}
.cursor__ring,.cursor__dot,.cursor__label{
  position:absolute;top:0;left:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.cursor__ring{
  width:40px;height:40px;
  border:1.5px solid var(--ink);
  box-shadow:0 0 0 1px rgba(247,245,242,.55),inset 0 0 0 1px rgba(247,245,242,.55);
  transition:width .55s var(--ease),height .55s var(--ease),background .4s ease;
}
.cursor__dot{
  width:6px;height:6px;
  background:var(--ink);
  box-shadow:0 0 0 1.5px rgba(247,245,242,.7);
  transition:opacity .3s ease,transform .4s var(--ease);
}
.cursor__label{
  font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);opacity:0;border-radius:0;
  transition:opacity .35s ease;
}
.cursor.is-link .cursor__ring{width:62px;height:62px}
.cursor.is-link .cursor__dot{opacity:0}
.cursor.is-ver .cursor__ring{
  width:108px;height:108px;
  background:var(--ink);
}
.cursor.is-ver .cursor__dot{opacity:0}
.cursor.is-ver .cursor__label{opacity:1}
.cursor.is-down .cursor__ring{width:30px;height:30px}
@media (hover:none),(max-width:760px){.cursor{display:none}}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:9800;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.preloader__inner{
  width:min(82vw,520px);
  text-align:center;
}
.preloader__brand{
  font-family:var(--serif);
  font-weight:360;
  font-size:clamp(3.2rem,9vw,6rem);
  letter-spacing:-.04em;
  line-height:1;
  color:var(--ink);
}
.preloader__brand span{
  font-size:.26em;
  vertical-align:super;
  letter-spacing:0;
}
.preloader__meta{
  display:flex;justify-content:space-between;
  margin-top:1.6rem;
  font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.preloader__bar{
  margin-top:1rem;height:1px;width:100%;
  background:var(--line);
  overflow:hidden;
}
.preloader__bar span{
  display:block;height:100%;width:0%;
  background:var(--ink);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:80;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:clamp(18px,2.4vw,34px) var(--pad);
  color:var(--bg);
  transition:background .6s var(--ease),color .6s var(--ease),padding .6s var(--ease),border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav--solid{
  background:var(--paper-60);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-top:clamp(12px,1.6vw,20px);
  padding-bottom:clamp(12px,1.6vw,20px);
}
.nav__brand{
  display:flex;align-items:center;line-height:1;
  /* the K mark inherits color of the surrounding nav text via filter */
}
.nav__brand-mark{
  display:block;
  width:auto;
  height:clamp(28px,3.2vw,42px);
  /* Same invert chain as the hero mark so the K reads cream-on-dark
     when the hero photo is behind it, and switches to dark when the
     scrolled nav has its own light background. */
  filter:invert(1) sepia(.06) saturate(1.6) brightness(1.02);
  transition:filter .5s var(--ease);
}
/* When the nav has scrolled past hero into the cream-background sections,
   main.js adds .nav--solid — invert the K back to dark so it stays readable. */
.nav.nav--solid .nav__brand-mark{ filter:none }
.nav__mark{
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(1.5rem,2vw,1.95rem);
  letter-spacing:-.03em;
}
.nav__tag{
  font-size:9px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  opacity:.7;margin-top:.32em;
}
.nav__links{
  display:flex;gap:clamp(20px,2.6vw,46px);
  justify-self:center;
}
.nav__links a,.nav__cta{
  position:relative;
  font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;
}
.nav__links a span,.nav__cta span{display:block;transition:transform .6s var(--ease)}
.nav__links a::after,.nav__cta::after{
  content:attr(data-x);
}
.nav__links a span::before,.nav__cta span::before{
  content:attr(data-label);
}
.nav__cta{justify-self:end}
.nav__links a::before{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);
}
.nav__links a:hover::before{transform:scaleX(1);transform-origin:left}
.nav__cta{
  border:1px solid currentColor;
  border-radius:100px;
  padding:.72em 1.5em;
}
.nav__cta::before{
  content:"";position:absolute;inset:0;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
  z-index:-1;
}
.nav__cta span{position:relative;z-index:1;mix-blend-mode:difference}
.nav__cta:hover::before{transform:scaleX(1);transform-origin:left}
.nav__menu{
  display:none;
  justify-self:end;
  width:46px;height:46px;
  border:1px solid currentColor;border-radius:50%;
  position:relative;
}
.nav__menu span{
  position:absolute;left:50%;width:15px;height:1px;
  background:currentColor;
  transform:translateX(-50%);
  transition:transform .4s var(--ease),opacity .3s ease;
}
.nav__menu span:nth-child(1){top:20px}
.nav__menu span:nth-child(2){top:25px}
body.menu-open .nav__menu span:nth-child(1){top:22.5px;transform:translateX(-50%) rotate(45deg)}
body.menu-open .nav__menu span:nth-child(2){top:22.5px;transform:translateX(-50%) rotate(-45deg)}

/* nav right cluster + language switcher */
.nav__right{
  justify-self:end;
  display:flex;align-items:center;
  gap:clamp(14px,1.7vw,28px);
}
.lang{
  display:flex;align-items:center;gap:.7em;
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.lang__opt{
  position:relative;
  opacity:.4;
  transition:opacity .45s var(--ease);
}
.lang__opt.is-active{opacity:1}
.lang__opt.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;
  height:1px;background:currentColor;
}
.lang__opt:not(.is-active):hover{opacity:.78}
.lang__sep{
  width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.35;
}

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
.menu{
  position:fixed;inset:0;z-index:70;
  background:var(--ink);
  color:var(--bg);
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:center;
  gap:2rem;
  padding:14vh var(--pad) 8vh;
  clip-path:inset(0 0 100% 0);
  pointer-events:none;
}
.menu.is-open{pointer-events:auto}
.menu .eyebrow{color:var(--paper-60);margin-bottom:2.4rem}
.menu__list li{overflow:hidden}
.menu__list a{
  display:flex;align-items:baseline;gap:1.4rem;
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.6rem,8vw,7rem);
  line-height:1.12;letter-spacing:-.035em;
  color:var(--bg);
  transition:color .5s var(--ease),padding-left .6s var(--ease);
}
.menu__list a em{
  font-family:var(--sans);font-style:normal;
  font-size:.16em;font-weight:500;letter-spacing:.1em;
  color:var(--paper-60);
}
.menu__list a:hover{padding-left:1.6rem;color:#fff}
.menu__col--info{align-self:end;padding-bottom:1rem}
.menu__address{color:var(--paper-60);margin-bottom:1.4rem;line-height:1.5}
.menu__mail{
  font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,2rem);
  letter-spacing:-.02em;border-bottom:1px solid rgba(247,245,242,.3);
  padding-bottom:.15em;transition:border-color .4s ease;
}
.menu__mail:hover{border-color:var(--bg)}
.menu__social{display:flex;gap:1.6rem;margin-top:2.6rem}
.menu__social a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-60);transition:color .35s ease;
}
.menu__social a:hover{color:var(--bg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100svh;min-height:620px;
  overflow:hidden;
}
.hero__media{
  position:absolute;inset:0;
  will-change:transform;
}
.hero__media img{
  position:absolute;top:0;left:0;
  width:100%;height:120%;
  object-fit:cover;
  transform:scale(1.04);
  /* darker baseline so off-white display title is always readable */
  filter:brightness(.76) contrast(1.06) saturate(1.04);
  will-change:transform,opacity;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    /* vertical scrim — strong in the title band so off-white text always reads */
    linear-gradient(180deg,
      rgba(10,9,8,.62) 0%,
      rgba(10,9,8,.24) 20%,
      rgba(10,9,8,.5) 48%,
      rgba(10,9,8,.78) 80%,
      rgba(10,9,8,.94) 100%),
    /* subtle left-side weight so the title (left-aligned) has extra contrast */
    linear-gradient(90deg,
      rgba(10,9,8,.32) 0%,
      rgba(10,9,8,.12) 35%,
      rgba(10,9,8,0) 60%);
}
.hero__glow{
  position:absolute;
  inset:-22%;
  background:radial-gradient(circle at 30% 35%,rgba(255,205,155,.32),rgba(255,205,155,0) 55%);
  mix-blend-mode:screen;
  pointer-events:none;
  will-change:transform,opacity;
  opacity:.55;
}
/* drifting warm dust motes — premium, very subtle, never distract */
.hero__particles{
  position:absolute;inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.hero__particle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,235,210,.85);
  mix-blend-mode:screen;
  filter:blur(.6px);
  pointer-events:none;
  bottom:-10px;
  will-change:transform,opacity;
}
/* editorial slide counter — top right of hero */
.hero__counter{
  position:absolute;
  top:clamp(96px,14vh,170px);
  right:var(--pad);
  z-index:5;
  display:flex;align-items:center;gap:.45em;
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-60);
  pointer-events:none;
}
.hero__counter-now{color:var(--bg);transition:opacity .4s ease}
.hero__counter-sep{opacity:.4;font-size:.9em}
.hero__counter-total{opacity:.55}

/* Slide indicators — Instagram-story style. One thin bar per slide,
   active one fills 0 -> 100% over the slide duration (driven by
   GSAP from main.js). Tap any bar to jump to that slide.
   When the hero is paused (.is-paused), bars dim slightly to
   communicate the held state. */
.hero__indicators{
  position:absolute;
  bottom:clamp(20px,3.6vh,42px);
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
}
.hero__indicator{
  position:relative;
  width:clamp(28px,5.6vw,52px);
  height:2px;
  background:rgba(247,245,242,.28);
  border:none;padding:0;cursor:pointer;
  overflow:hidden;
  transition:height .4s var(--ease),background .4s var(--ease);
}
.hero__indicator:hover{height:3px;background:rgba(247,245,242,.42)}
.hero__indicator.is-active{height:3px}
.hero__indicator-fill{
  display:block;width:100%;height:100%;
  background:var(--bg);
  transform:scaleX(0);
  transform-origin:left center;
}
.hero.is-paused .hero__indicators{opacity:.55}
.hero__content{
  position:absolute;
  left:var(--pad);right:var(--pad);
  bottom:clamp(92px,14vh,170px);
}
/* The hero H1 wraps eyebrow + KOSA wordmark inside a single semantic
   heading so Google reads the full "Interior Design Studio — Miami,
   since 2014 Kosa Design Studio" as one heading instead of separate
   spans. Visually identical to before: each child keeps its own
   styling and stacks block-level. We strip the default <h1> margin
   so the layout is unchanged. */
.hero__h1{
  display:block;
  margin:0;
  padding:0;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
}
.hero__eyebrow{
  color:var(--bg);
  display:block;
  margin-bottom:clamp(1rem,2vw,1.8rem);
  letter-spacing:.24em;
}
.hero__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.7rem,8.7vw,9.4rem);
  line-height:.94;
  letter-spacing:-.045em;
  color:var(--bg);
  text-shadow:0 2px 60px rgba(18,17,16,.4);
}
.hero__title em{font-weight:300;padding-right:.04em}

/* Hero brand block: KOSA letters from the source SVG (preserves the brand
   letterforms exactly) + "Design Studio" rendered as HTML so we control
   tracking and size independently. The original wordmark made DESIGN
   render way too small at hero scale; splitting fixes legibility. */
.hero__brand{
  display:block;
  margin:0 0 clamp(1rem,2.4vw,2.2rem);
  /* sizing is driven by the KOSA SVG width; the tag below is laid out
     to span the same visual width via padding tracking. */
  width:clamp(280px,40vw,640px);
}
.hero__brand-name{
  display:block;width:100%;height:auto;
  /* invert + warm + cool drop matches the hero photo's deep shadows */
  filter:invert(1) sepia(.06) saturate(1.6) brightness(1.02)
         drop-shadow(0 2px 30px rgba(18,17,16,.35));
}
.hero__brand-tag{
  display:block;
  margin-top:clamp(.55rem,1vw,.85rem);
  /* This sits visually as a subtitle line under KOSA. The wide tracking +
     uppercase matches the typographic gesture of the original logo's
     "DESIGN" subtext, but at a size that's actually readable. */
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.66rem,1.05vw,.92rem);
  letter-spacing:.55em;
  text-transform:uppercase;
  color:var(--bg);
  text-indent:.55em; /* compensate for trailing letter-space so it visually centers */
  text-align:center;
  text-shadow:0 2px 28px rgba(18,17,16,.5);
}

/* Fraunces tagline kept as editorial subtitle under the wordmark. */
.hero__tagline{
  font-family:var(--serif);
  font-weight:330;
  font-size:clamp(1.6rem,4vw,3.4rem);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--bg);
  margin:0;
  max-width:14ch;
  text-shadow:0 2px 50px rgba(18,17,16,.45);
}
.hero__tagline em{font-weight:300;font-style:italic;padding-right:.04em}

/* Hero brand sizing on narrow viewports. The big translucent K
   "fashion masthead" that used to sit in this corner was removed —
   the photography is now the only graphic element in the hero. */
@media (max-width:760px){
  .hero__brand{width:min(70vw,360px)}
  .hero__tagline{max-width:none}
}
.hero__foot{
  position:absolute;
  left:var(--pad);right:var(--pad);
  bottom:clamp(28px,4.4vh,52px);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;
  color:var(--bg);
}
.hero__caption{
  display:flex;align-items:center;gap:.7em;
  font-size:12px;letter-spacing:.04em;
  color:var(--paper-60);
  max-width:60vw;
}
.hero__caption .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--bg);flex:none;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.hero__scroll{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-60);
}
.hero__scrollline{
  width:1px;height:54px;
  background:linear-gradient(var(--bg),transparent);
  position:relative;overflow:hidden;
}
.hero__scrollline::after{
  content:"";position:absolute;top:-60%;left:0;
  width:100%;height:60%;background:var(--bg);
  animation:scrolldrip 2.4s var(--ease-soft) infinite;
}
@keyframes scrolldrip{0%{top:-60%}60%,100%{top:100%}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.section-head{
  display:flex;justify-content:space-between;
  gap:2rem;
}
.manifesto{
  padding:var(--gap-section) var(--pad);
}
.manifesto .section-head{margin-bottom:clamp(3rem,7vw,7rem)}
.manifesto__text{
  font-family:var(--serif);
  font-weight:360;
  font-size:clamp(1.7rem,4.5vw,4.5rem);
  line-height:1.16;
  letter-spacing:-.03em;
  max-width:20ch;
}
.manifesto__text .word{
  display:inline-block;
  opacity:.16;
  will-change:opacity;
}
.manifesto__sign{
  display:flex;justify-content:space-between;
  margin-top:clamp(3rem,7vw,7rem);
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.06em;
  color:var(--muted);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden;
  padding:clamp(1.6rem,3vw,3rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.marquee__track{
  display:flex;align-items:center;gap:2.4rem;
  width:max-content;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--serif);
  font-weight:355;
  font-size:clamp(1.9rem,4.9vw,4.5rem);
  letter-spacing:-.022em;
  white-space:nowrap;
  color:var(--ink);
}
.marquee__sep{
  flex:none;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--ink);
  opacity:.55;
}

/* ============================================================
   ATELIER
   ============================================================ */
.atelier{padding:var(--gap-section) var(--pad)}
.atelier .section-head{
  margin-bottom:clamp(4rem,9vw,10rem);
  align-items:flex-end;
}
.atelier .section-head .eyebrow{margin-bottom:1.4rem}

.atelier__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,60px);
  row-gap:clamp(7vh,11vh,16vh);
}
.atelier__item{
  margin:0;
  display:flex;
  flex-direction:column;
}

/* Row 1 — hero off-center left, wide */
.atelier__item--01{grid-column:1 / 10}
/* Row 2 — offset pair */
.atelier__item--02{grid-column:1 / 6;margin-top:6vh}
.atelier__item--03{grid-column:7 / 13;margin-top:-2vh}
/* Row 3 — three thirds */
.atelier__item--04{grid-column:1 / 5;margin-top:4vh}
.atelier__item--05{grid-column:5 / 9;margin-top:4vh}
.atelier__item--06{grid-column:9 / 13;margin-top:4vh}
/* Row 4 — indented wide */
.atelier__item--07{grid-column:3 / 11;margin-top:6vh}
/* Row 5 — slight offset pair */
.atelier__item--08{grid-column:1 / 7;margin-top:4vh}
.atelier__item--09{grid-column:8 / 13;margin-top:12vh}

.atelier__media{
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--ink-06);
  border-radius:var(--r);
}
/* Aspect ratios per item — varied for editorial rhythm */
.atelier__item--01 .atelier__media{aspect-ratio:16/10}
.atelier__item--02 .atelier__media{aspect-ratio:4/5}
.atelier__item--03 .atelier__media{aspect-ratio:4/5}
.atelier__item--04 .atelier__media{aspect-ratio:3/4}
.atelier__item--05 .atelier__media{aspect-ratio:3/4}
.atelier__item--06 .atelier__media{aspect-ratio:3/4}
.atelier__item--07 .atelier__media{aspect-ratio:16/10}
.atelier__item--08 .atelier__media{aspect-ratio:4/5}
.atelier__item--09 .atelier__media{aspect-ratio:7/5}

.atelier__media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.04) brightness(1.01);
  /* GSAP owns scale + yPercent at runtime (see main.js — atelier polish),
     so the CSS only handles the filter shift on hover. Setting transform
     here would fight the inline transform GSAP writes. */
  transition:filter 1.4s var(--ease);
}
.atelier__item:hover .atelier__media img{
  filter:saturate(1.08) brightness(1.03);
}
.atelier__caption{
  font-family:var(--serif);
  font-style:italic;
  font-weight:380;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  color:var(--muted);
  letter-spacing:-.005em;
  line-height:1.5;
  margin-top:clamp(1rem,1.4vw,1.5rem);
  max-width:32ch;
}

/* ============================================================
   3D HORIZONTAL GALLERY
   ============================================================ */
.gallery{background:var(--bg)}
.gallery__pin{
  height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
}
.gallery__track{
  display:flex;align-items:center;
  gap:clamp(40px,6vw,140px);
  padding:0 var(--pad);
  width:max-content;
  perspective:1700px;
  transform-style:preserve-3d;
}
.g-panel{flex:none}
.gallery__intro{
  width:clamp(280px,34vw,560px);
}
.gallery__intro .eyebrow{margin-bottom:1.6rem}
.gallery__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.4rem,5.2vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
.gallery__title em{font-weight:320}
.gallery__hint{
  display:block;margin-top:2.4rem;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.g-panel[data-depth]{
  width:clamp(300px,42vw,680px);
  transform-style:preserve-3d;
  will-change:transform;
}
.g-panel__img{
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--ink-06);
  border-radius:var(--r);
  box-shadow:0 40px 80px -50px rgba(26,26,26,.5);
}
.g-panel__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) sepia(.05) brightness(1.02);
  transition:transform 1.6s var(--ease);
}
.g-panel:hover .g-panel__img img{transform:scale(1.06)}
.g-panel figcaption{
  display:flex;justify-content:space-between;
  margin-top:1.1rem;
  font-size:12px;letter-spacing:.04em;
  color:var(--muted);
}
.g-panel figcaption span:first-child{
  font-weight:500;letter-spacing:.18em;color:var(--ink);
}
.gallery__outro{
  width:clamp(240px,22vw,360px);
}
.gallery__outro-num{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2vw,2rem);
  color:var(--muted);
}
.gallery__outro p{
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(1.3rem,2vw,1.9rem);
  line-height:1.28;letter-spacing:-.02em;
  margin-top:1rem;
}

/* ============================================================
   APPROACH / METHOD
   ============================================================ */
.approach{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,8rem);
  padding:var(--gap-section) var(--pad);
  align-items:stretch;
}
.approach__media{position:relative;height:100%}
.approach__sticky{
  position:sticky;top:11vh;
  height:78vh;
  perspective:1400px;
}
.approach__img{
  position:absolute;inset:0;
  overflow:hidden;
  border-radius:var(--r);
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.1s var(--ease),transform 1.4s var(--ease);
}
.approach__img.is-active{opacity:1;transform:scale(1)}
.approach__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) sepia(.05) brightness(1.02);
}
.approach__frame{
  position:absolute;inset:0;
  border:1px solid var(--line);
  pointer-events:none;
  margin:-14px;
  border-radius:var(--r);
}
.approach__intro{margin-bottom:clamp(3rem,8vh,9rem)}
.approach__intro .eyebrow{margin-bottom:1.4rem}
.step{
  min-height:62vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:2.4rem 0;
  border-top:1px solid var(--line);
  opacity:.32;
  transition:opacity .7s var(--ease);
}
.step.is-active{opacity:1}
.step:last-child{border-bottom:1px solid var(--line)}
.step__num{
  font-size:12px;font-weight:500;letter-spacing:.2em;
  color:var(--muted);
}
.step__title{
  font-family:var(--serif);
  font-weight:370;
  font-size:clamp(2rem,3.6vw,3.6rem);
  letter-spacing:-.03em;
  margin:.7rem 0 1.1rem;
}
.step__text{
  max-width:38ch;
  color:var(--muted);
  font-size:clamp(1rem,1.15vw,1.12rem);
}

/* ============================================================
   STUDIO / ABOUT
   ============================================================ */
.studio{padding:var(--gap-section) var(--pad)}
.studio .section-head{
  margin-bottom:clamp(3rem,7vw,7rem);
  align-items:flex-end;
}
.studio .section-head .eyebrow{margin-bottom:1.4rem}
.studio__visual{
  perspective:1500px;
  margin:0 auto clamp(3rem,7vw,7rem);
}
.studio__stage{transform-style:preserve-3d}
.studio__card{
  overflow:hidden;
  border-radius:var(--r);
  aspect-ratio:16/8.4;
  will-change:transform;
  transform-style:preserve-3d;
  box-shadow:0 60px 120px -60px rgba(26,26,26,.55);
}
.studio__card img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  filter:saturate(1.06) sepia(.05) brightness(1.02);
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stat{
  padding:clamp(2rem,3.4vw,3.4rem) clamp(1rem,2vw,2.2rem) 0 0;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none}
.stat__num{
  display:block;
  font-family:var(--serif);
  font-weight:330;
  font-size:clamp(3rem,7vw,7.6rem);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--ink);
}
.stat__label{
  display:block;margin-top:1rem;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{padding:var(--gap-section) var(--pad);position:relative}
.services .section-head{margin-bottom:clamp(2rem,5vw,4rem)}
.services .section-head .eyebrow{margin-bottom:1.4rem}
.services-list{border-top:1px solid var(--line)}
.service{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:clamp(1rem,3vw,4rem);
  padding:clamp(1.8rem,3.4vw,3.2rem) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.service::before{
  content:"";position:absolute;left:-100vw;right:-100vw;top:0;bottom:0;
  background:var(--ink-06);
  opacity:0;transition:opacity .6s var(--ease);
  z-index:-1;
}
.service:hover::before{opacity:1}
.service__num{
  font-size:12px;font-weight:500;letter-spacing:.16em;
  color:var(--muted);
}
.service__title{
  font-family:var(--serif);
  font-weight:370;
  font-size:clamp(1.6rem,3.6vw,3.4rem);
  letter-spacing:-.03em;
  line-height:1.05;
  transition:transform .6s var(--ease);
}
.service:hover .service__title{transform:translateX(clamp(.6rem,1.4vw,1.8rem))}
.service__desc{
  max-width:30ch;text-align:right;
  font-size:13.5px;color:var(--muted);
}
.service__arrow{
  font-size:1.5rem;
  color:var(--ink);
  opacity:.3;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.service:hover .service__arrow{opacity:1;transform:translate(.3rem,-.3rem)}
.service-preview{
  position:fixed;top:0;left:0;
  width:clamp(220px,22vw,320px);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--r);
  pointer-events:none;
  z-index:60;
  opacity:0;
  transform:translate(-50%,-50%) scale(.86);
  will-change:transform,opacity;
}
.service-preview img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   SERVICE TIERS — 4 packages, editorial monograph chapters.
   No pricing on the page; investment is discussed per project.
   ============================================================ */
.tiers{padding-inline:var(--pad)}
.tier{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-auto-flow:dense;  /* fixes even tiers: deliverables wraps to row 2 otherwise */
  gap:clamp(2.6rem,5vw,6rem);
  padding:clamp(4rem,7vw,6.5rem) 0;
  border-top:1px solid var(--line);
  align-items:stretch;
}
.tier:last-of-type{border-bottom:1px solid var(--line)}
.tier__main{display:flex;flex-direction:column;grid-column:1}
.tier__deliverables{grid-column:2}
/* alternate sides: even tiers flip — deliverables left, main right.
   The wider column always holds the text, so reading flow stays comfortable. */
.tier:nth-of-type(even){grid-template-columns:1fr 1.3fr}
.tier:nth-of-type(even) .tier__main{grid-column:2}
.tier:nth-of-type(even) .tier__deliverables{grid-column:1}
/* On even tiers, anchor main content to the RIGHT side of its column so the
   whitespace lives on the gap-facing side — mirrors the natural layout of
   odd tiers (where the wider text column leaves whitespace before the gap). */
.tier:nth-of-type(even) .tier__main{align-items:flex-end}
.tier:nth-of-type(even) .tier__head{width:fit-content;max-width:100%}
.tier:nth-of-type(even) .tier__desc{align-self:flex-end}

.tier__head{margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.tier__eyebrow{
  display:block;
  color:var(--accent);
  margin-bottom:clamp(1.4rem,2.5vw,2.2rem);
}
.tier__title-block{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.6rem,3vw,2.8rem);
  align-items:baseline;
}
.tier__num{
  font-family:var(--serif);
  font-weight:340;
  font-style:italic;
  font-size:clamp(4rem,7vw,7.5rem);
  letter-spacing:-.02em;
  color:var(--accent);
  line-height:1;
  flex-shrink:0;
}
.tier__title-text{display:flex;flex-direction:column;gap:1.1rem}
.tier__name{
  font-family:var(--serif);
  font-weight:350;
  font-style:italic;
  font-size:clamp(2.4rem,4.2vw,4.2rem);
  letter-spacing:-.035em;
  line-height:1;
  color:var(--ink);
}
.tier__sub{
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.tier__desc{
  max-width:55ch;
  font-size:clamp(1rem,1.2vw,1.15rem);
  color:var(--ink);
  line-height:1.65;
  margin-bottom:auto;
}

/* editorial deliverables — no dark panel, just a bronze rule + serif italic
   numerals. Confidence over decoration; the column reads like a magazine
   sidebar, balanced in visual weight with the main text column. */
.tier__deliverables{
  display:flex;
  flex-direction:column;
  padding-left:clamp(1.8rem,2.6vw,3rem);
  border-left:2px solid var(--accent);
}
.tier:nth-of-type(even) .tier__deliverables{
  border-left:none;
  padding-left:0;
  padding-right:clamp(1.8rem,2.6vw,3rem);
  border-right:2px solid var(--accent);
}
.tier__deliverables .eyebrow{
  display:inline-block;
  align-self:flex-start;
  color:var(--accent);
  margin-bottom:clamp(1.6rem,2.2vw,2.2rem);
  padding-bottom:.95rem;
  border-bottom:1px solid var(--accent-60);
  letter-spacing:.28em;
}
.tier:nth-of-type(even) .tier__deliverables .eyebrow{
  align-self:flex-end;  /* anchor the heading + underline to the right side */
}
.tier__deliverables-intro{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem,1.5vw,1.4rem);
  color:var(--accent);
  margin-bottom:1.6rem;
  letter-spacing:-.01em;
  line-height:1.3;
}
.tier:nth-of-type(even) .tier__deliverables-intro{text-align:right}

.tier__deliverables-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1.05rem;
}
.tier__deliverables-list li{
  display:grid;
  grid-template-columns:2.6em 1fr;
  column-gap:1.1rem;
  align-items:baseline;
  font-size:clamp(.98rem,1.15vw,1.1rem);
  line-height:1.5;
  color:var(--ink);
}
/* even tiers: mirror the numeral to the right edge so the bronze numerals
   sit closest to the bronze vertical rule */
.tier:nth-of-type(even) .tier__deliverables-list li{
  grid-template-columns:1fr 2.6em;
  text-align:right;
}
.tier:nth-of-type(even) .tier__d-text{grid-column:1}
.tier:nth-of-type(even) .tier__d-num{grid-column:2;text-align:left}

.tier__d-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05em;
  color:var(--accent);
  letter-spacing:-.02em;
  font-weight:380;
  line-height:1;
}
.tier__d-text{font-weight:400;color:var(--ink)}

/* section closer — single editorial CTA replaces public pricing */
.tiers__cta-row{
  margin-top:clamp(3rem,5vw,5rem);
  padding-top:clamp(2.5rem,3.5vw,3.5rem);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2.5rem;
  flex-wrap:wrap;
}
.tiers__note{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,1.8vw,1.55rem);
  color:var(--ink);
  max-width:52ch;
  line-height:1.45;
  letter-spacing:-.01em;
}
.tiers__cta{
  display:inline-flex;
  align-items:baseline;
  gap:.9em;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.25rem,1.8vw,1.55rem);
  color:var(--ink);
  border-bottom:1px solid var(--accent);
  padding-bottom:.32em;
  letter-spacing:-.01em;
  transition:color .45s var(--ease);
  white-space:nowrap;
}
.tiers__cta:hover{color:var(--accent)}
.tiers__cta-arrow{
  font-size:.95em;
  transition:transform .5s var(--ease);
  display:inline-block;
}
.tiers__cta:hover .tiers__cta-arrow{transform:translateX(.4em)}

@media (max-width:880px){
  .tier,
  .tier:nth-of-type(even){
    grid-template-columns:1fr;
    gap:2rem;
  }
  /* reset alternation on mobile — always main on top, deliverables below,
     bronze rule always on the left (anchor side). */
  .tier__main,
  .tier__deliverables,
  .tier:nth-of-type(even) .tier__main,
  .tier:nth-of-type(even) .tier__deliverables{
    grid-column:1;
  }
  .tier:nth-of-type(even) .tier__deliverables{
    border-left:2px solid var(--accent);
    border-right:none;
    padding-left:clamp(1.5rem,3vw,2rem);
    padding-right:0;
  }
  .tier:nth-of-type(even) .tier__deliverables .eyebrow,
  .tier:nth-of-type(even) .tier__deliverables-intro{
    text-align:left;align-self:flex-start;
  }
  .tier:nth-of-type(even) .tier__deliverables-list li{
    grid-template-columns:2.6em 1fr;
    text-align:left;
  }
  .tier:nth-of-type(even) .tier__d-num{grid-column:1;text-align:left}
  .tier:nth-of-type(even) .tier__d-text{grid-column:2}
  /* mobile: reset main-content anchoring (no mirror needed when stacked) */
  .tier:nth-of-type(even) .tier__main{align-items:flex-start}
  .tier:nth-of-type(even) .tier__head{width:auto}
  .tier:nth-of-type(even) .tier__desc{align-self:auto}
  .tier__title-block{gap:1.2rem}
  .tier__num{font-size:clamp(3.4rem,9vw,5rem)}
  .tiers__cta-row{flex-direction:column;align-items:flex-start;gap:1.5rem}
}

/* ============================================================
   QUOTE
   ============================================================ */
/* ============ FAQ section ============
   Editorial accordion using native <details>/<summary>. Each question
   is a hairline-divided row with serif italic title; clicking expands
   the answer below. Native semantics = Google reads all Q/A text
   regardless of which items are open. */
.faq{
  background:var(--bg);
  padding:clamp(5rem,12vw,11rem) var(--pad) clamp(4rem,9vw,9rem);
}
.faq .section-head{margin-bottom:clamp(3rem,7vw,7rem)}
.faq__list{
  border-top:1px solid var(--line);
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.faq__item{
  border-bottom:1px solid var(--line);
}
.faq__item[open] .faq__q::after{
  transform:rotate(45deg);
}
.faq__q{
  font-family:var(--serif);
  font-weight:380;
  font-size:clamp(1.2rem,2.2vw,1.85rem);
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--ink);
  padding:clamp(1.5rem,3vw,2.2rem) 0;
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  transition:color .35s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";
  width:14px;height:14px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  transform:rotate(-45deg);
  flex-shrink:0;
  transition:transform .5s var(--ease);
  margin-bottom:.18em;
}
.faq__q:hover{ color:var(--accent) }
.faq__a{
  padding:0 0 clamp(1.6rem,3.2vw,2.4rem);
  max-width:760px;
}
.faq__a p{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.55;
  color:var(--muted);
  margin:0;
}
.faq__a a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:4px;
  transition:text-decoration-color .35s var(--ease);
}
.faq__a a:hover{ text-decoration-color:var(--accent) }
@media (max-width:760px){
  .faq{padding:clamp(3rem,9vw,6rem) var(--pad)}
  .faq__q{font-size:clamp(1.1rem,4.4vw,1.4rem);padding:1.2rem 0;gap:1rem}
  .faq__a p{font-size:1rem}
}

.quote{
  padding:var(--gap-section) var(--pad);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.quote__text{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.9rem,5.2vw,5.2rem);
  line-height:1.16;
  letter-spacing:-.035em;
  max-width:18ch;
}
.quote__text .word{display:inline-block;opacity:.16}
.quote__text::before{content:"\201C"}
.quote__text::after{content:"\201D"}
.quote__by{
  display:flex;align-items:center;gap:.9rem;
  margin-top:clamp(2.4rem,5vw,4rem);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.quote__mark{width:34px;height:1px;background:var(--line)}

/* ============================================================
   CONTACT  (dark)
   ============================================================ */
.contact{
  background:var(--ink);
  color:var(--bg);
  padding:var(--gap-section) var(--pad) clamp(5rem,9vw,9rem);
}
.contact__head{margin-bottom:clamp(3.4rem,8vw,8rem)}
.contact__head .eyebrow{margin-bottom:1.8rem}
.contact__title{
  font-family:var(--serif);
  font-weight:330;
  font-size:clamp(2.8rem,9.4vw,10.4rem);
  line-height:.96;
  letter-spacing:-.045em;
}
.contact__title em{font-weight:290}
.contact__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(2.4rem,6vw,7rem);
  padding-top:clamp(2.4rem,5vw,4rem);
  border-top:1px solid rgba(247,245,242,.16);
}
.contact__mail{display:block}
.contact__mail-label{
  display:block;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-60);margin-bottom:1.2rem;
}
.contact__mail-addr{
  display:block;
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.7rem,4vw,3.6rem);
  letter-spacing:-.03em;
}
.contact__mail-line{
  display:block;height:1px;margin-top:1.2rem;
  background:rgba(247,245,242,.22);
  position:relative;overflow:hidden;
}
.contact__mail-line::after{
  content:"";position:absolute;inset:0;
  background:var(--bg);
  transform:scaleX(0);transform-origin:right;
  transition:transform .8s var(--ease);
}
.contact__mail:hover .contact__mail-line::after{transform:scaleX(1);transform-origin:left}
.contact__details{
  display:flex;flex-direction:column;gap:2rem;
}
.contact__block{display:flex;flex-direction:column;gap:.5rem}
.contact__k{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-60);
}
.contact__v{font-size:1.05rem;line-height:1.5}
.contact__v--row{display:flex;gap:1.4rem;flex-wrap:wrap}
.contact__v--row a{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid rgba(247,245,242,.3);padding-bottom:.2em;
  transition:border-color .4s ease;
}
.contact__v--row a:hover{border-color:var(--bg)}
.contact__btn{
  display:inline-flex;align-items:center;gap:1rem;
  margin-top:clamp(3rem,6vw,5rem);
  padding:1.15em 2.2em;
  border:1px solid rgba(247,245,242,.4);
  border-radius:100px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;
}
.contact__btn span{position:relative;z-index:1;transition:color .5s var(--ease)}
.contact__btn::before{
  content:"";position:absolute;inset:0;background:var(--bg);
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.contact__btn:hover::before{transform:translateY(0)}
.contact__btn:hover span{color:var(--ink)}
.contact__btn-ic{font-size:1.1rem}

/* ============================================================
   FOOTER  (dark)
   ============================================================ */
.footer{
  background:var(--ink);
  color:var(--bg);
  padding:0 var(--pad) clamp(2rem,3vw,3rem);
  overflow:hidden;
}
.footer__brandline{
  /* Outline KOSA letters in the brand sans-serif (extracted from
     kosa-logo.svg). Loaded as <img> so the browser caches the file
     and JS doesn't have to parse it. The stroke colour + width are
     baked into the SVG itself (see scripts/build-logo-assets.py) so
     CSS only controls scale and positioning. */
  display:block;
  width:auto;
  /* Heights mapped to the previous font-size clamp so visual scale
     matches the outgoing Fraunces brandline. SVG aspect is ~4.61:1
     so width follows automatically. */
  height:clamp(5rem,22vw,24rem);
  padding:clamp(2rem,5vw,5rem) 0 clamp(1rem,2vw,2rem);
  /* The image is intentionally wider than the viewport so the
     horizontal parallax xPercent: 4 → -18 reveals different parts of
     the wordmark instead of just translating an already-bounded box.
     max-width is removed; the footer overflow:hidden clips overflow. */
  max-width:none;
  will-change:transform;
}
.footer__row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr auto;
  gap:2rem;
  padding:clamp(3rem,5vw,5rem) 0;
  border-top:1px solid rgba(247,245,242,.16);
}
.footer__col{display:flex;flex-direction:column;gap:.7rem}
.footer__k{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-60);margin-bottom:.6rem;
}
.footer__txt{color:var(--paper-60);font-size:.95rem}
/* Quieter line for the neighborhood/service-area listing — kept readable
   so Google crawls the local-SEO signal but visually recedes to a hairline */
.footer__txt--muted{opacity:.7;font-size:.86rem;margin-top:.4rem}
.footer__col a{
  font-size:.98rem;width:fit-content;
  position:relative;
}
.footer__col a::after{
  content:"";position:absolute;left:0;bottom:-2px;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__top{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.footer__base{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-top:2rem;
  border-top:1px solid rgba(247,245,242,.16);
  font-size:11.5px;letter-spacing:.05em;
  color:var(--paper-60);
}
/* Editorial site credit. Sits at the far right of the footer baseline as
   a third element, keeping the copyright and the "Designed in light…"
   line balanced left and center. Restrained on purpose — colophon, not
   advertisement. */
.footer__credit a{
  color:var(--paper-60);
  text-decoration:none;
  transition:color .5s var(--ease),opacity .5s var(--ease);
}
.footer__credit a:hover{
  color:var(--bg);
}
.footer__credit em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:block}
  .approach{grid-template-columns:1fr;gap:2rem}
  /* dvh (dynamic viewport height) handles iOS Safari's collapsing
     toolbar correctly. vh on iOS jumps when the URL bar hides — the
     sticky image jolted. dvh stays smooth. */
  .approach__sticky{height:56dvh;top:14dvh}
  .approach__intro{margin-bottom:2rem}
  .step{min-height:auto;padding:3rem 0}
  .menu{grid-template-columns:1fr;align-content:center;gap:3rem}
  .menu__col--info{align-self:auto}
}
@media (max-width:760px){
  body{font-size:15px}
  .section-head{flex-direction:column;gap:1.4rem}
  .atelier__grid{grid-template-columns:1fr;row-gap:clamp(3rem,9vw,5rem)}
  .atelier__item,
  .atelier__item--01,.atelier__item--02,.atelier__item--03,
  .atelier__item--04,.atelier__item--05,.atelier__item--06,
  .atelier__item--07,.atelier__item--08,.atelier__item--09{
    grid-column:1 / -1;margin-top:0;
  }
  .atelier__item--01 .atelier__media,
  .atelier__item--07 .atelier__media{aspect-ratio:4/3}
  .atelier__item--06 .atelier__media{aspect-ratio:4/5}
  /* Mobile gallery: native swipe carousel.
     Replaces the desktop 3D coverflow (which is pinned + scrub-driven and
     fights touch scroll). CSS scroll-snap gives premium feel — momentum,
     snap-to-card, peek of next. Neighbor cards dim + scale down via the
     .is-out class (toggled by IntersectionObserver in main.js).
     Intro / outro panels stay inline as the first / last "slides" so the
     editorial framing rides along with the carousel. */
  .gallery__pin{
    height:auto;display:block;padding:4rem 0;
    overflow:hidden;  /* clip horizontal overscroll */
  }
  .gallery__track{
    flex-direction:row;
    width:auto;
    perspective:none;
    gap:18px;
    padding:0 6vw 1rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gallery__track::-webkit-scrollbar{display:none}
  .g-panel,
  .g-panel[data-depth],
  .gallery__intro,
  .gallery__outro{
    width:78vw;
    flex:0 0 auto;
    transform:none!important;
    scroll-snap-align:center;
    transition:transform .55s var(--ease),opacity .55s var(--ease);
    transform-origin:center center;
  }
  /* Active (centered) card is full size; neighbors recede. */
  .g-panel.is-out,
  .gallery__intro.is-out,
  .gallery__outro.is-out{
    transform:scale(.9)!important;
    opacity:.45;
  }
  .g-panel__img{aspect-ratio:3/4}
  /* Intro / outro keep their editorial text style but match card width */
  .gallery__intro,.gallery__outro{
    padding:1.5rem 1rem;
    align-self:center;
  }
  .gallery__title{font-size:clamp(2rem,9vw,3rem)}
  .gallery__hint{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat{
    border-right:none;
    border-bottom:1px solid var(--line);
    padding-right:0;padding-bottom:1.6rem;
  }
  .stat:nth-child(odd){border-right:1px solid var(--line);padding-right:1.4rem}
  .service{
    grid-template-columns:auto 1fr auto;
    gap:1rem 1.4rem;
  }
  .service__desc{display:none}
  .contact__grid{grid-template-columns:1fr;gap:2.4rem}
  .footer__row{grid-template-columns:1fr 1fr;gap:2.4rem}
  .footer__base{flex-direction:column;gap:.5rem}
  .hero__foot{align-items:center}
  .hero__caption{max-width:50vw}
}
@media (max-width:440px){
  .footer__row{grid-template-columns:1fr}
}

/* ============================================================
   LIGHTBOX — tap-to-zoom viewer for Atelier images
   Triggered by clicking/tapping any .atelier__media. Premium feel:
   dark ink backdrop, image fades in with a soft scale, keyboard +
   swipe-down navigation, native scroll locked while open.
   ============================================================ */
.lightbox{
  position:fixed;inset:0;
  /* Fully opaque ink — at .98 the cream text from sections behind
     bled through faintly. Pure ink makes the photograph the only
     thing on screen. */
  background:var(--ink);
  z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s var(--ease);
  cursor:zoom-out;
  padding:clamp(2rem,5vw,4rem) clamp(1rem,3vw,3rem);
  will-change:opacity;
}
.lightbox.is-open{
  opacity:1;visibility:visible;
}
.lightbox__stage{
  position:relative;
  max-width:min(1400px,94vw);
  max-height:84vh;
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  margin:0;
  cursor:default;
}
.lightbox__img{
  display:block;
  max-width:100%;
  max-height:74vh;
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  opacity:0;transform:scale(.96);
  transition:opacity .55s var(--ease) .1s,transform .7s var(--ease) .1s;
  touch-action:none; /* swipe handled by JS */
  user-select:none;
}
.lightbox.is-open .lightbox__img{
  opacity:1;transform:scale(1);
}
.lightbox.is-loading .lightbox__img{
  opacity:.2;
}
.lightbox__caption{
  font-family:var(--serif);
  font-style:italic;
  font-weight:380;
  font-size:clamp(1rem,1.4vw,1.2rem);
  color:var(--paper-60);
  text-align:center;
  max-width:60ch;
  opacity:0;
  transition:opacity .55s var(--ease) .2s;
}
.lightbox.is-open .lightbox__caption{opacity:1}

/* Close button — top right, X formed by two crossed lines */
.lightbox__close{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:44px;height:44px;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  border-radius:50%;
  transition:background .4s var(--ease);
}
.lightbox__close:hover{background:rgba(247,245,242,.08)}
.lightbox__close span{
  position:absolute;
  width:22px;height:1px;
  background:var(--bg);
  transition:background .3s var(--ease);
}
.lightbox__close span:first-child{transform:rotate(45deg)}
.lightbox__close span:last-child{transform:rotate(-45deg)}

/* Nav arrows — desktop pointer only. Touch uses swipe + edge taps. */
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;
  background:transparent;border:none;cursor:pointer;
  font-family:var(--serif);font-size:2.2rem;
  color:var(--paper-60);
  display:flex;align-items:center;justify-content:center;
  z-index:2;border-radius:50%;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.lightbox__nav:hover{background:rgba(247,245,242,.08);color:var(--bg)}
.lightbox__nav--prev{left:clamp(.5rem,2vw,2rem)}
.lightbox__nav--next{right:clamp(.5rem,2vw,2rem)}

/* Counter — small label at bottom center */
.lightbox__counter{
  position:absolute;bottom:clamp(1rem,3vh,2rem);left:50%;
  transform:translateX(-50%);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--paper-60);
  opacity:0;
  transition:opacity .55s var(--ease) .2s;
}
.lightbox.is-open .lightbox__counter{opacity:1}

/* Lock body scroll while lightbox is open */
body.lightbox-open{overflow:hidden}

/* On touch the nav arrows take less space; counter moves up a bit */
@media (hover:none){
  .lightbox__nav{
    width:44px;height:44px;font-size:1.8rem;
    background:rgba(247,245,242,.06);
  }
  .lightbox__caption{font-size:.95rem}
}

/* Click target on atelier images — show grab cursor on desktop */
.atelier__media{cursor:zoom-in}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .line>span{transform:none!important}
  .reveal-fade{opacity:1!important}
  .manifesto__text .word,.quote__text .word,.project-essay__quote .word{opacity:1!important}
  .hero__media img{transform:scale(1)}
}

/* INNER PAGES STYLES — kosa */

/* ============================================================
   INNER PAGES — /services/, /contact/, /interior-design-pompano/
   Shared editorial styles for sub-pages. Reuses the home palette,
   typography and ease curves.
   ============================================================ */

/* ---- Page header (used by all inner pages) ---- */
.page-header{
  padding:clamp(8rem,18vw,16rem) var(--pad) clamp(3rem,6vw,6rem);
  border-bottom:1px solid var(--line);
}
.page-header__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.4rem,5.5vw,5.2rem);
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--ink);
  margin:.6rem 0 clamp(1.2rem,2.5vw,2rem);
  max-width:18ch;
}
.page-header__title em{font-style:italic;font-weight:340}
.page-header__lede{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  line-height:1.5;
  color:var(--muted);
  max-width:64ch;
  margin:0;
}

.breadcrumb{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6em}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.6em;opacity:.55}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .35s var(--ease)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current="page"]{color:var(--ink)}

/* ---- /services/ overview ---- */
.services-intro{
  padding:clamp(4rem,8vw,8rem) var(--pad);
  border-bottom:1px solid var(--line);
}
.services-intro__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  max-width:1300px;
}
.services-intro__col p{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.6;
  color:var(--muted);
  margin:1rem 0 0;
  max-width:50ch;
}
@media (max-width:760px){.services-intro__grid{grid-template-columns:1fr}}

/* ---- Service tier blocks ---- */
.service-tier{
  padding:clamp(5rem,10vw,9rem) var(--pad);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.service-tier--alt{background:#F2EFE9}
.service-tier__head{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"num eyebrow" "num name" "num sub";
  gap:.4rem 2rem;
  align-items:start;
  max-width:1300px;
  margin:0 0 clamp(2.5rem,5vw,4rem);
}
.service-tier__num{
  grid-area:num;
  font-family:var(--serif);
  font-style:italic;
  font-weight:330;
  font-size:clamp(4rem,9vw,8rem);
  line-height:.85;
  color:var(--accent);
}
.service-tier__head .eyebrow{grid-area:eyebrow;align-self:end}
.service-tier__name{
  grid-area:name;
  font-family:var(--serif);
  font-weight:340;
  font-style:italic;
  font-size:clamp(2.2rem,4.4vw,4rem);
  letter-spacing:-.025em;
  line-height:1;
  margin:.25em 0 0;
  color:var(--ink);
}
.service-tier__sub{
  grid-area:sub;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:1rem;
}
.service-tier__body{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  max-width:1300px;
}
.service-tier__col h3{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin:2.4rem 0 1rem;
}
.service-tier__col h3:first-child{margin-top:0}
.service-tier__col p{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.55;
  color:var(--ink);
  max-width:50ch;
  margin:0 0 1.5rem;
}
.service-tier__deliverables{
  padding-left:clamp(0px,2vw,2rem);
  border-left:1px solid var(--line);
}
.service-tier--alt .service-tier__deliverables{border-left-color:rgba(0,0,0,.08)}
.service-tier__deliverables .eyebrow{display:block;margin-bottom:1.4rem}
.service-tier__deliverables-intro{
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);margin:0 0 .8rem;
}
.service-tier__deliverables ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
}
.service-tier--alt .service-tier__deliverables ol{border-top-color:rgba(0,0,0,.1)}
.service-tier__deliverables li{
  display:grid;
  grid-template-columns:2.6em 1fr;
  align-items:baseline;
  padding:.85em 0;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-weight:340;
  font-size:1rem;
  line-height:1.4;
  color:var(--ink);
}
.service-tier--alt .service-tier__deliverables li{border-bottom-color:rgba(0,0,0,.1)}
.service-tier__deliverables li span:first-child{font-style:italic;color:var(--accent);font-size:1rem}
.service-tier__cta{
  display:inline-flex;align-items:center;gap:.8em;
  margin-top:1.6rem;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:.25em;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.service-tier__cta:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:760px){
  .service-tier__body{grid-template-columns:1fr;gap:2rem}
  .service-tier__deliverables{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:2rem}
  .service-tier--alt .service-tier__deliverables{border-top-color:rgba(0,0,0,.1)}
}

/* ---- Areas served strip ---- */
.services-areas{padding:clamp(4rem,8vw,8rem) var(--pad);background:var(--bg);max-width:1100px;margin:0 auto}
.services-areas .eyebrow{display:block;margin-bottom:1rem}
.services-areas h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.025em;margin:0 0 1.4rem;color:var(--ink)}
.services-areas p{font-family:var(--serif);font-weight:340;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--muted);max-width:64ch}
.services-areas a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}

/* ---- CTA block ---- */
.cta-block{padding:clamp(5rem,10vw,9rem) var(--pad);background:var(--ink);color:var(--bg)}
.cta-block__title{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.025em;line-height:1.05;margin:0 0 1.4rem;max-width:22ch}
.cta-block p{font-family:var(--serif);font-weight:340;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:rgba(247,245,242,.7);max-width:60ch;margin:0 0 2.4rem}
.cta-block__btn{display:inline-flex;align-items:center;gap:.8em;padding:1.1rem 2.2rem;border:1px solid rgba(247,245,242,.4);border-radius:100px;font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);text-decoration:none;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.cta-block__btn:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.cta-block__related{margin-top:1.6rem;font-size:.95rem;color:rgba(247,245,242,.55)}
.cta-block__related a{color:rgba(247,245,242,.85);text-decoration:underline;text-decoration-color:rgba(247,245,242,.3);text-underline-offset:3px}

/* ---- /contact/ ---- */
.contact-grid{padding:clamp(4rem,8vw,8rem) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4rem) clamp(3rem,7vw,7rem);max-width:1100px;margin:0 auto;border-bottom:1px solid var(--line)}
.contact-grid__block{max-width:42ch}
.contact-grid__block .eyebrow{display:block;margin-bottom:.8rem}
.contact-grid__mail,.contact-grid__phone{display:block;font-family:var(--serif);font-weight:340;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-bottom:1rem;transition:color .35s var(--ease)}
.contact-grid__mail:hover,.contact-grid__phone:hover{color:var(--accent)}
.contact-grid__addr{font-family:var(--serif);font-style:normal;font-weight:340;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.45;color:var(--ink);margin-bottom:1rem}
.contact-grid__lang{font-family:var(--serif);font-style:italic;font-weight:340;font-size:clamp(1.3rem,2.2vw,1.85rem);color:var(--ink);margin:0 0 1rem}
.contact-grid p{font-family:var(--serif);font-weight:340;font-size:1rem;line-height:1.55;color:var(--muted);margin:0}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

.contact-inquiry{padding:clamp(4rem,8vw,8rem) var(--pad);max-width:1100px;margin:0 auto}
.contact-inquiry__head{margin-bottom:clamp(2rem,4vw,3rem)}
.contact-inquiry__head .eyebrow{display:block;margin-bottom:1rem}
.contact-inquiry__head h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.025em;margin:0;color:var(--ink);max-width:24ch}
.contact-inquiry__list{list-style:none;counter-reset:item;padding:0;margin:0;border-top:1px solid var(--line)}
.contact-inquiry__list li{counter-increment:item;padding:1.5rem 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:340;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.55;color:var(--muted);position:relative;padding-left:3em}
.contact-inquiry__list li::before{content:counter(item, decimal-leading-zero);position:absolute;left:0;top:1.5rem;font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem}
.contact-inquiry__list strong{color:var(--ink);font-weight:420}

.contact-cta{padding:clamp(4rem,8vw,8rem) var(--pad);max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.contact-cta__btn{display:inline-flex;align-items:center;gap:.8em;padding:1.1rem 2.2rem;border:1px solid var(--ink);border-radius:100px;font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:background .5s var(--ease),color .5s var(--ease)}
.contact-cta__btn:hover{background:var(--ink);color:var(--bg)}
.contact-cta__link{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.2em;transition:color .35s var(--ease),border-color .35s var(--ease)}
.contact-cta__link:hover{color:var(--ink);border-color:var(--ink)}

/* ---- Project case study ---- */
.project-hero{margin:0;padding:clamp(2rem,4vw,4rem) var(--pad)}
.project-hero picture,.project-hero img{display:block;width:100%;height:auto;border-radius:2px}
.project-hero figcaption{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);margin-top:1rem}

.project-meta{padding:clamp(3rem,6vw,5rem) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.project-meta dl{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:2rem clamp(1.5rem,3vw,3rem);max-width:1300px;margin:0 auto}
.project-meta dt{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.project-meta dd{font-family:var(--serif);font-weight:340;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink);margin:0}
.project-meta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

.project-narrative{padding:clamp(5rem,10vw,9rem) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem);max-width:1300px;margin:0 auto}
.project-narrative__col .eyebrow{display:block;margin-bottom:1.2rem}
.project-narrative__col p{font-family:var(--serif);font-weight:340;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink);margin:0 0 1.2rem;max-width:52ch}
@media (max-width:760px){.project-narrative{grid-template-columns:1fr}}

.project-gallery{padding:clamp(4rem,8vw,8rem) var(--pad)}
.project-gallery .eyebrow{display:block;margin-bottom:1rem}
.project-gallery .section-title{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.03em;margin:0 0 clamp(3rem,6vw,5rem)}
.project-gallery__grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:clamp(1.5rem,3vw,3rem)}
.project-gallery__item{margin:0}
.project-gallery__item--wide{grid-column:1 / -1}
.project-gallery__item picture,.project-gallery__item img{display:block;width:100%;height:auto;border-radius:2px}
.project-gallery__item figcaption{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);margin-top:.8rem}
@media (max-width:760px){.project-gallery__grid{grid-template-columns:1fr}}

.project-materials{padding:clamp(5rem,10vw,9rem) var(--pad);background:var(--surface);border-top:1px solid var(--line)}
.project-materials__head{max-width:1100px;margin:0 auto clamp(3rem,6vw,5rem)}
.project-materials__head .eyebrow{display:block;margin-bottom:1rem}
.project-materials__head h2{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.03em;margin:0;color:var(--ink)}
.project-materials__list{list-style:none;margin:0 auto;padding:0;max-width:1100px;border-top:1px solid var(--line)}
.project-materials__list li{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(1.5rem,4vw,4rem);padding:clamp(1.5rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line)}
.project-materials__list h3{font-family:var(--serif);font-weight:340;font-style:italic;font-size:clamp(1.1rem,1.8vw,1.45rem);letter-spacing:-.01em;margin:0;color:var(--ink);align-self:start}
.project-materials__list p{font-family:var(--serif);font-weight:340;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.55;color:var(--muted);margin:0;max-width:60ch}
@media (max-width:760px){.project-materials__list li{grid-template-columns:1fr;gap:.6rem}}


/* Atelier section -> "see full case study" link */
.atelier__more{
  display:flex;justify-content:center;
  margin:clamp(3rem,7vw,6rem) var(--pad) clamp(4rem,8vw,7rem);
}
.atelier__more-link{
  display:inline-flex;align-items:center;gap:1em;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding:.6em 0;
  transition:color .4s var(--ease),border-color .4s var(--ease),gap .4s var(--ease);
}
.atelier__more-link:hover{
  color:var(--accent);
  border-color:var(--accent);
  gap:1.4em;
}

/* PROJECT-ESSAY editorial spreads */

/* ============================================================
   PROJECT ESSAY — case study editorial layout
   Magazine-spread photo essay. Replaces the previous uniform
   2-col gallery with varied spreads: full-bleed, asymmetric
   splits, pull quote, symmetric split, closing narrow piece.
   Each spread controls its own internal padding so the rhythm
   varies as the reader scrolls — like flipping through a
   physical magazine.
   ============================================================ */

.project-essay{
  display:flex;flex-direction:column;
  background:var(--bg);
}

.project-essay__head{
  padding:clamp(5rem,10vw,10rem) var(--pad) clamp(3rem,6vw,6rem);
  max-width:1300px;
  margin:0 auto;
  width:100%;
}
.project-essay__head .eyebrow{ display:block;margin-bottom:1.4rem }
.project-essay__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.2rem,5vw,4.4rem);
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--ink);
  margin:0;
}

/* Each spread is its own scroll moment with its own padding */
.project-essay__spread{
  padding:clamp(3rem,7vw,7rem) 0;
}

/* Spread variants */

/* Full-bleed image edge to edge */
/* ---- "Full" spread, redefined as MATTED ----
   Was edge-to-edge viewport bleed; now sits within a generous cream
   matte (max-width 1300px, 100% of pad column). Reads like a framed
   print on a museum wall instead of a brutalist full-bleed. */
.project-essay__spread--full{
  padding:clamp(3rem,6vw,6rem) var(--pad);
  max-width:1300px;
  margin:0 auto;
}
.project-essay__spread--full .project-essay__figure{
  margin:0;
  position:relative;
}
.project-essay__spread--full .project-essay__figure picture,
.project-essay__spread--full .project-essay__figure img{
  width:100%;
  margin-left:0;
  border-radius:2px;
}
.project-essay__spread--full .project-essay__caption{
  padding:0;
  margin-top:1.2rem;
  max-width:60ch;
}
.project-essay__spread--full .project-essay__caption--center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.project-essay__spread--full .project-essay__caption--right{
  margin-left:auto;
  text-align:right;
}

/* ---- Diptych spread ----
   Two complementary photos side-by-side, equal width, equal aspect.
   Used when two interiors deserve to be read as a pair. Captions
   stack below each photo. */
.project-essay__spread--diptych{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(3rem,6vw,6rem) var(--pad);
  max-width:1400px;
  margin:0 auto;
  align-items:start;
}
.project-essay__spread--diptych .project-essay__figure{
  margin:0;
  position:relative;
}
.project-essay__spread--diptych .project-essay__figure picture,
.project-essay__spread--diptych .project-essay__figure img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
}
.project-essay__spread--diptych .project-essay__caption{
  margin-top:1rem;
  font-size:clamp(.9rem,1.15vw,1.05rem);
}
@media (max-width:760px){
  .project-essay__spread--diptych{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

/* Off-grid asymmetric split — 35/65, small detail + main image.
   The smaller figure sits lower (mt) and offset right, the larger
   one is anchored top-left. Editorial newspaper feel. */
.project-essay__spread--off-grid{
  display:grid;
  grid-template-columns:35fr 65fr;
  gap:clamp(1.5rem,4vw,4vw);
  padding-left:var(--pad);
  padding-right:var(--pad);
  align-items:start;
}
.project-essay__spread--off-grid .project-essay__figure--detail{
  margin-top:clamp(3rem,8vw,8rem);
  padding-right:clamp(1rem,3vw,3rem);
}
.project-essay__spread--off-grid .project-essay__figure--main{
  margin-top:0;
}

/* Pull quote — disrupts the visual rhythm */
.project-essay__spread--quote{
  padding:clamp(6rem,12vw,12rem) clamp(2rem,12vw,16rem);
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.project-essay__quote{
  margin:0;
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.6rem,3.2vw,2.8rem);
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:32ch;
  margin-left:auto;
  margin-right:auto;
}
/* Italic moved from <em> to the <p> directly so the styling survives
   splitWords destroying the inner <em> wrapper when wiring data-split. */
.project-essay__quote em{font-style:italic;font-weight:340}
.project-essay__quote p{
  margin:0 0 1.6rem;
  font-style:italic;
  font-weight:340;
}
/* Word-by-word scrub reveal — words start dim, scroll fills them in.
   No CSS transition here — gsap scrub owns the opacity frame-by-frame
   tied to scroll position. display:inline-block lets each word be a
   stable transform target without re-flowing the surrounding text. */
.project-essay__quote .word{
  display:inline-block;
  opacity:.22;
  will-change:opacity;
}
.project-essay__quote cite{
  font-style:normal;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Symmetric 50/50 split */
.project-essay__spread--split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,3rem);
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* Narrow centered closer */
.project-essay__spread--narrow{
  display:flex;justify-content:center;
  padding-left:clamp(2rem,12vw,12rem);
  padding-right:clamp(2rem,12vw,12rem);
}
.project-essay__spread--narrow .project-essay__figure{
  max-width:880px;
  width:100%;
}

/* Shared figure styles */
.project-essay__figure{margin:0}
.project-essay__figure picture,
.project-essay__figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
}
.project-essay__caption{
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(.95rem,1.2vw,1.05rem);
  line-height:1.5;
  color:var(--muted);
  margin:1rem 0 0;
  max-width:48ch;
}
.project-essay__caption--center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.project-essay__caption--right{
  margin-left:auto;
  text-align:right;
}

/* Mobile collapse — each spread becomes a vertical stack with
   regular padding, full-bleed images stay full-bleed. */
@media (max-width:760px){
  .project-essay__spread{padding:clamp(2rem,5vw,3rem) 0}
  .project-essay__spread--off-grid,
  .project-essay__spread--split{
    grid-template-columns:1fr;
    gap:clamp(1.5rem,5vw,2.5rem);
  }
  .project-essay__spread--off-grid .project-essay__figure--detail{
    margin-top:0;
    padding-right:0;
  }
  .project-essay__spread--quote{
    padding:clamp(3rem,8vw,5rem) var(--pad);
  }
  .project-essay__spread--narrow{
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
}


/* PAGE-HERO cinematic — inner pages */

/* ============================================================
   PAGE HERO — inner pages (services / contact / pompano / faq)
   Replaces the previous flat .page-header. Full-bleed background
   image, editorial scrim, breadcrumb anchored top-left, title +
   lede anchored bottom-left. Subtle parallax via GSAP (main.js
   picks up .page-hero__media). Height ~70vh desktop, 60vh mobile.
   ============================================================ */

.page-hero{
  position:relative;
  width:100%;
  min-height:clamp(440px, 72vh, 760px);
  overflow:hidden;
  background:var(--ink);
  color:var(--bg);
  isolation:isolate;
}

.page-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  /* prepared for the GSAP parallax — base scale gives the move room */
  transform-origin:center center;
}
.page-hero__media picture,
.page-hero__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* slight initial scale so the parallax can move without exposing edges */
  transform:scale(1.06);
  will-change:transform;
}
.page-hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      to bottom,
      rgba(18,17,16,.35) 0%,
      rgba(18,17,16,.25) 35%,
      rgba(18,17,16,.55) 70%,
      rgba(18,17,16,.88) 100%
    );
  pointer-events:none;
}

.page-hero__content{
  position:relative;
  z-index:2;
  min-height:clamp(440px, 72vh, 760px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(7rem,14vw,10rem) var(--pad) clamp(3rem,6vw,5rem);
  max-width:1500px;
  margin:0 auto;
  box-sizing:border-box;
}

/* breadcrumb anchored to the TOP of the content area */
.page-hero .breadcrumb{
  position:absolute;
  top:clamp(6rem,12vw,9rem);
  left:var(--pad);
  margin:0;
  color:rgba(247,245,242,.7);
}
.page-hero .breadcrumb a{
  color:rgba(247,245,242,.7);
  transition:color .35s var(--ease);
}
.page-hero .breadcrumb a:hover{ color:var(--bg) }
.page-hero .breadcrumb [aria-current="page"]{ color:var(--bg) }
.page-hero .breadcrumb li:not(:last-child)::after{
  color:rgba(247,245,242,.4);
}

/* eyebrow on the dark scrim */
.page-hero .eyebrow{
  display:block;
  color:rgba(247,245,242,.7);
  margin-bottom:clamp(1rem,2vw,1.6rem);
}
.eyebrow--light{ color:rgba(247,245,242,.7) }

/* big editorial title */
.page-hero__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.6rem, 7vw, 6rem);
  letter-spacing:-.035em;
  line-height:1.02;
  color:var(--bg);
  margin:0 0 clamp(1.3rem,2.6vw,2rem);
  max-width:18ch;
}
.page-hero__title em{
  font-style:italic;
  font-weight:340;
  /* slight warm-bronze tint on the italic accent to match the
     home hero typography language */
  color:rgba(247,245,242,.9);
}
.page-hero__title .line{
  display:block;
  overflow:hidden;
  /* keep the mask tight to the line height */
}
.page-hero__title .line > span{
  display:block;
}

/* lede */
.page-hero__lede{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.05rem,1.55vw,1.4rem);
  line-height:1.5;
  color:rgba(247,245,242,.82);
  max-width:60ch;
  margin:0;
}

/* small "scroll" indicator bottom-right */
.page-hero__scroll{
  position:absolute;
  right:var(--pad);
  bottom:clamp(2rem,4vw,3rem);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:1em;
  color:rgba(247,245,242,.7);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .4s var(--ease),gap .4s var(--ease);
}
.page-hero__scroll:hover{ color:var(--bg);gap:1.4em }
.page-hero__scrollline{
  display:inline-block;
  width:60px;
  height:1px;
  background:currentColor;
  position:relative;
}
.page-hero__scrollline::after{
  content:"";
  position:absolute;
  right:-1px;top:-3px;
  width:7px;height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(-45deg);
}

@media (max-width:760px){
  .page-hero,
  .page-hero__content{ min-height:clamp(360px,68vh,560px) }
  .page-hero__scroll{ display:none }
  .page-hero .breadcrumb{
    top:clamp(5rem,12vw,7rem);
  }
}

/* When .page-hero is present we don't need the old .page-header
   block; leave .page-header rule in CSS for any future usage but
   the inner pages will no longer reference it. */


/* PROJECT-ESSAY pro editorial moves */

/* ============================================================
   PROJECT-ESSAY — pro editorial moves
   Chapter dividers, Fig.NN markers, drop-cap pull quote,
   polaroid stack, overlay caption, negative-space dining.
   Layered ON TOP of the base .project-essay__spread system —
   only adds new variants, does not change existing ones.
   ============================================================ */

/* ---- Title em styling ---- */
.project-essay__title em{
  font-style:italic;
  font-weight:340;
}

/* ---- Chapter divider (I. Light / II. Material / III. Composition) ---- */
.project-essay__chapter{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "num   name"
    "num   label";
  column-gap:clamp(1.5rem,3vw,3rem);
  row-gap:.4rem;
  align-items:end;
  padding:clamp(5rem,10vw,8rem) var(--pad) clamp(2.5rem,5vw,4rem);
  max-width:1300px;
  margin:0 auto;
  border-top:1px solid var(--line);
}
.project-essay__chapter-num{
  grid-area:num;
  font-family:var(--serif);
  font-style:italic;
  font-weight:330;
  font-size:clamp(4rem,9vw,7rem);
  line-height:.85;
  color:var(--accent);
}
.project-essay__chapter-name{
  grid-area:name;
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.2rem,4.4vw,3.8rem);
  letter-spacing:-.025em;
  line-height:1;
  color:var(--ink);
}
.project-essay__chapter-name em{font-style:italic;font-weight:340}
.project-essay__chapter-label{
  grid-area:label;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:760px){
  .project-essay__chapter{
    grid-template-columns:1fr;
    grid-template-areas:"num" "name" "label";
    align-items:start;
  }
}

/* ---- Figure number markers (Fig. 01, Fig. 02 etc) ----
   Small italic Fraunces marker positioned at the top-left of each
   figure, bleeding outside the image edge slightly. Reads like a
   plate number in an art catalogue. */
.project-essay__figure{ position:relative }
.project-essay__fig{
  position:absolute;
  top:-1.6em;
  left:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(.95rem,1.3vw,1.1rem);
  letter-spacing:.02em;
  color:var(--accent);
  z-index:2;
  pointer-events:none;
}
/* Light variant — used on dark backgrounds */
.project-essay__fig--light{
  color:rgba(247,245,242,.85);
}

/* For full-bleed spreads, push the fig marker into the safe content
   pad area so it doesn't fall off-screen. */
/* The matted --full spread has its own pad already; reset fig pos */
.project-essay__spread--full .project-essay__fig{
  top:-1.6em;
  left:0;
}

/* ---- Drop cap on the pull quote ----
   First letter of the quote scales to ~3.2em and floats left, the
   rest of the paragraph wraps around it. Italic Fraunces signals an
   editorial moment, not just a long quote. */
.project-essay__quote--dropcap p::first-letter{
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(3.5rem,7vw,5.5rem);
  line-height:.85;
  float:left;
  padding:.05em .12em 0 0;
  color:var(--accent);
}

/* ---- Polaroid stack ----
   Two figures overlapping at slight rotation, like prints scattered
   on a moodboard. Front photo lifts slightly on hover (desktop only). */
.project-essay__spread--polaroid{
  position:relative;
  padding:clamp(5rem,10vw,8rem) var(--pad);
  max-width:1300px;
  margin:0 auto;
  min-height:clamp(420px,55vh,640px);
}
.project-essay__polaroid{
  position:absolute;
  width:clamp(280px,42vw,560px);
  background:var(--surface);
  padding:clamp(1rem,1.6vw,1.4rem) clamp(1rem,1.6vw,1.4rem) clamp(2.5rem,4vw,3.5rem);
  box-shadow:
    0 4px 14px rgba(18,17,16,.06),
    0 24px 60px rgba(18,17,16,.10);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
}
.project-essay__polaroid--back{
  top:clamp(2rem,5vw,4rem);
  left:clamp(2rem,8vw,8rem);
  transform:rotate(-2.5deg);
  z-index:1;
}
.project-essay__polaroid--front{
  top:clamp(4rem,9vw,7rem);
  right:clamp(2rem,8vw,8rem);
  transform:rotate(1.8deg);
  z-index:2;
}
.project-essay__polaroid:hover{
  transform:rotate(0) translateY(-6px);
  box-shadow:
    0 8px 22px rgba(18,17,16,.10),
    0 36px 90px rgba(18,17,16,.16);
  z-index:5;
}
.project-essay__polaroid .project-essay__figure picture,
.project-essay__polaroid .project-essay__figure img{
  border-radius:0;
}
.project-essay__polaroid .project-essay__caption{
  font-size:.85rem;
  margin-top:.7rem;
  text-align:center;
  color:var(--muted);
}
.project-essay__polaroid .project-essay__fig{
  top:.5rem;
  left:.5rem;
  font-size:.75rem;
}
/* Mobile: stack the polaroids vertically with slight tilts intact */
@media (max-width:760px){
  .project-essay__spread--polaroid{
    min-height:auto;
    display:flex;flex-direction:column;
    gap:clamp(2rem,5vw,3rem);
    align-items:center;
  }
  .project-essay__polaroid{
    position:static;
    width:min(85%, 420px);
  }
}

/* ---- Floating overlay caption (over the bath full-bleed) ----
   Caption sits OVER the image in the lower-left, on a translucent
   warm scrim panel. Reads as a magazine printed-on-photo moment. */
.project-essay__spread--overlay-cap .project-essay__figure{
  position:relative;
}
.project-essay__caption--overlay{
  position:absolute;
  left:clamp(1.5rem,5vw,5rem);
  bottom:clamp(1.5rem,5vw,5rem);
  max-width:36ch;
  padding:clamp(1rem,1.6vw,1.4rem) clamp(1.2rem,2vw,1.8rem);
  background:rgba(247,245,242,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
  font-size:clamp(.95rem,1.15vw,1.05rem);
  margin:0;
  border-left:2px solid var(--accent);
}
@media (max-width:760px){
  .project-essay__caption--overlay{
    left:clamp(1rem,4vw,2rem);
    bottom:clamp(1rem,4vw,2rem);
    max-width:80%;
    padding:.8rem 1rem;
  }
}

/* ---- Negative-space spread (dining + editorial commentary aside) ----
   60% image left, 40% empty cream + italic commentary right.
   Reads like a magazine spread — image is the protagonist, text
   below/beside is the curator's voice. */
.project-essay__spread--negative{
  display:grid;
  grid-template-columns:60fr 40fr;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(5rem,10vw,9rem) var(--pad);
  max-width:1400px;
  margin:0 auto;
  align-items:end;
}
.project-essay__spread--negative .project-essay__figure{ margin:0 }
.project-essay__commentary{
  padding-bottom:1rem;
}
.project-essay__commentary .eyebrow{
  display:block;
  margin-bottom:1.4rem;
}
.project-essay__commentary p{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.05rem,1.45vw,1.25rem);
  line-height:1.55;
  color:var(--ink);
  margin:0 0 1.2rem;
  max-width:38ch;
}
.project-essay__commentary p + p{
  color:var(--muted);
  font-size:clamp(.95rem,1.25vw,1.1rem);
}
@media (max-width:760px){
  .project-essay__spread--negative{
    grid-template-columns:1fr;
    gap:2rem;
    align-items:start;
  }
}