/* --- Fonts embedded (Inter Tight 200/400/600, Cormorant Garamond 500 italic).
   Self-hosted as base64 so the type renders identically offline and on any host. --- */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/CormorantGaramond-500-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/InterTight-200.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/InterTight-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/InterTight-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   HERO — BRAND BUILDER
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* cinema teal — the whole palette is black/grey/white pushed cool */
  --teal-950:#050607;
  --teal-900:#08090a;
  --teal-850:#0b0d0e;
  --teal-800:#121415;
  --teal-700:#171a1b;
  --teal-glow:rgba(126,206,209,.10);
  --grade:grayscale(1) contrast(1.04);

  --ink:#08090a;
  --panel-a:#232729;
  --panel-b:#0e1011;
  --white:#ffffff;
  --muted:#8d8d8d;
  --tagline:#d2d2d0;

  --pad-x:3.45vw;          /* outer gutter, matches logo inset */
  --pad-y:1.7vw;           /* header vertical inset */
  --copy-x:9.8vw;          /* headline left offset from viewport edge */

  --nav-size:clamp(9.5px,.755vw,15px);
  --display:clamp(2.1rem,4.85vw,7.6rem);
  --tag-size:clamp(1.05rem,1.95vw,3rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--white);
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ------------------------------------------------------------
   HERO SHELL
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  isolation:isolate;
  overflow:hidden;
}

/* ---------- LEFT : dark type panel ---------- */
.hero__left{
  position:relative;
  display:flex;
  align-items:center;
  background:
    radial-gradient(120% 95% at 6% 4%, var(--teal-glow) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(168deg, var(--panel-a) 0%, #171a1b 46%, var(--panel-b) 100%);
}
/* filmic grain — keeps the flat panel from banding */
.hero__left::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:.16;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* hairline seam so the two panels always separate */
.hero__left::before{
  content:"";position:absolute;top:0;right:0;width:1px;height:100%;z-index:4;
  background:linear-gradient(to bottom,rgba(255,255,255,.14),rgba(255,255,255,.05) 55%,rgba(255,255,255,.10));
}

.copy{
  position:relative;z-index:2;
  padding:0 var(--pad-x) 0 var(--copy-x);
  width:100%;
}

.display{
  font-weight:200;
  font-size:var(--display);
  line-height:.855;
  letter-spacing:-.026em;
  text-transform:uppercase;
}
.display .ln{display:block;overflow:hidden}
.display .ln > span{display:block;will-change:transform}
.display .is-dim{color:#8f8f8f}
.display .is-dim + .is-dim{color:#7e7e7e}

.tagline{
  margin-top:1.12em;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:500;
  font-size:var(--tag-size);
  letter-spacing:.005em;
  color:var(--tagline);
}

/* ---------- RIGHT : portrait ---------- */
.hero__right{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg,#9d9d9d 0%,#6f6f6f 55%,#4a4a4a 100%);
}
.hero__right img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 28%;
  filter:var(--grade);
  will-change:transform;
}
/* soft key-light wash from upper-left, echoing the studio backdrop */
.hero__right::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(80% 58% at 16% 6%, rgba(126,206,209,.14) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 66%, rgba(0,0,0,.30) 100%);
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.mark{
  width:clamp(50px,5.7vw,116px);
  aspect-ratio:1;
  flex:none;
  display:block;
  opacity:.95;
  transition:opacity .4s var(--ease),transform .6s var(--ease);
}
.mark:hover{opacity:1;transform:translateY(-1px)}
.mark svg,.mark img{width:100%;height:100%;display:block;object-fit:contain}

.nav{
  margin-left:auto;
  width:calc(50vw - var(--pad-x));
  display:flex;align-items:center;
  gap:3.6vw;
  padding-left:6vw;
}
.nav > a{
  position:relative;
  font-size:var(--nav-size);
  font-weight:400;
  letter-spacing:.175em;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  white-space:nowrap;
  padding-bottom:.45em;
}
.nav > a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav > a:hover::after{transform:scaleX(1);transform-origin:left}

.nav .cta{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.95em;
  font-weight:600;
  letter-spacing:.165em;
}
.nav .cta svg{
  width:1.62em;height:auto;flex:none;
  transition:transform .55s var(--ease);
}
.nav .cta:hover svg{transform:translateX(.28em)}

/* ------------------------------------------------------------
   ENTRANCE
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .display .ln > span{transform:translateY(105%)}
  .is-ready .display .ln > span{
    transform:translateY(0);
    transition:transform 1.15s var(--ease);
  }
  .is-ready .display .ln:nth-child(1) > span{transition-delay:.10s}
  .is-ready .display .ln:nth-child(2) > span{transition-delay:.19s}
  .is-ready .display .ln:nth-child(3) > span{transition-delay:.28s}
  .is-ready .display .ln:nth-child(4) > span{transition-delay:.37s}

  .tagline,.masthead .mark,.nav > a{opacity:0;transform:translateY(10px)}
  .is-ready .tagline,
  .is-ready .masthead .mark,
  .is-ready .nav > a{
    opacity:1;transform:none;
    transition:opacity .9s var(--ease),transform .9s var(--ease);
  }
  .is-ready .tagline{transition-delay:.52s}
  .is-ready .masthead .mark{transition-delay:.18s}
  .is-ready .nav > a:nth-of-type(1){transition-delay:.30s}
  .is-ready .nav > a:nth-of-type(2){transition-delay:.36s}
  .is-ready .nav > a:nth-of-type(3){transition-delay:.42s}
  .is-ready .nav > a:nth-of-type(4){transition-delay:.48s}

  .hero__right img{transform:scale(1.075)}
  .is-ready .hero__right img{transform:scale(1);transition:transform 1.9s var(--ease)}
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:900px){
  :root{
    --pad-x:6vw; --pad-y:6vw; --copy-x:6vw;
    --nav-size:11px;
    --display:clamp(2.6rem,12.4vw,5.4rem);
    --tag-size:clamp(1.15rem,4.4vw,1.8rem);
  }
  .hero{grid-template-columns:1fr;grid-template-rows:58svh auto;min-height:100svh}
  .hero__left{order:2;padding:11vw 0 13vw}
  .hero__left::before{top:auto;bottom:100%;width:100%;height:1px;
    background:linear-gradient(to right,rgba(255,255,255,.14),rgba(255,255,255,.06))}
  .hero__right{order:1}
  .hero__right img{object-position:50% 20%}

}

/* ============================================================
   SECTION 02 — BELIEF / QUOTE
   Hairline grid, figure bottom-left, statement top-right.
   ============================================================ */
.belief{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  background:var(--teal-950);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- hairline grid ---------- */
.grid-lines{position:absolute;inset:0;z-index:4;pointer-events:none}
.grid-lines span{position:absolute;background:rgba(255,255,255,.135)}
.gl-v1{left:62.9%;top:0;bottom:0;width:1px}
.gl-v2{left:97%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.075)}
.gl-h1{left:0;right:0;top:68.75%;height:1px}
.gl-h2{left:0;right:0;top:89.6%;height:1px;background:rgba(255,255,255,.075)}

/* ---------- figure ---------- */
.belief__fig{
  position:absolute;left:0;top:0;
  width:62.9%;height:100%;
  z-index:1;margin:0;overflow:hidden;
}
.belief__fig img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 30%;     /* photo used as supplied — untouched */
  will-change:transform;
}

/* ---------- right column ---------- */
.belief__col{
  position:absolute;
  left:62.9%;right:0;top:0;bottom:0;
  z-index:5;
  display:block;
}

/* gutters are set per-item: an abs-positioned child resolves against the
   padding box, so padding on the column would be ignored. */
.belief__quote{
  position:absolute;
  top:8.2%;left:7%;right:13.5%;
  margin:0;
  font-weight:200;
  font-size:clamp(1.6rem,3.1vw,3.7rem);
  line-height:1.185;
  letter-spacing:-.012em;
  color:#f4f4f2;
}

.belief__note{
  position:absolute;
  left:34.6%;
  top:42%;
  display:flex;
  align-items:flex-start;
  gap:.75em;
  color:#8e8e8e;
  font-size:clamp(.78rem,1.05vw,1.25rem);
  line-height:1.42;
  font-weight:400;
  letter-spacing:.002em;
}
.belief__note .ast{
  font-size:1.55em;
  line-height:1;
  transform:translateY(-.12em);
  color:#c8c8c8;
  flex:none;
}

.belief__by{
  position:absolute;
  left:7%;
  top:76.2%;
}
.belief__name{
  margin:0 0 1.35em;
  font-weight:600;
  font-size:clamp(.85rem,1.12vw,1.35rem);
  letter-spacing:.005em;
  color:#fff;
}
.belief__role{
  margin:0;
  font-weight:400;
  font-size:clamp(.8rem,1.05vw,1.28rem);
  line-height:1.45;
  color:#bcbcbc;
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px)}
  .rv.in{opacity:1;transform:none;
    transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
  .rv-2.in{transition-delay:.14s}
  .rv-3.in{transition-delay:.24s}
  .belief__fig img{opacity:0;transform:translateY(22px) scale(1.02);
    transition:opacity 1.5s var(--ease),transform 1.8s var(--ease)}
  .belief.in .belief__fig img{opacity:1;transform:none}
  .grid-lines span{transform:scaleX(0);transform-origin:left;
    transition:transform 1.3s var(--ease)}
  .gl-v1,.gl-v2{transform:scaleY(0);transform-origin:top}
  .belief.in .grid-lines span{transform:none}
  .belief.in .gl-h1{transition-delay:.10s}
  .belief.in .gl-h2{transition-delay:.20s}
  .belief.in .gl-v2{transition-delay:.26s}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .belief{min-height:auto;padding-bottom:16vw}
  .belief__fig{position:relative;width:100%;height:62svh}
  .belief__fig img{object-position:50% 22%}
  .belief__col{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    padding:11vw 6vw 0;
  }
  .belief__quote{
    position:relative;top:auto;left:auto;right:auto;
    font-size:clamp(1.6rem,7.4vw,2.6rem);
  }
  .belief__note{position:relative;left:auto;top:auto;margin:9vw 0 0;font-size:.92rem}
  .belief__by{position:relative;left:auto;top:auto;margin-top:13vw;
    padding-top:9vw;border-top:1px solid rgba(255,255,255,.135)}
  .belief__name{font-size:1rem}
  .belief__role{font-size:.95rem}
  .grid-lines{display:none}
}


/* ============================================================
   SECTION 03 — ABOUT THE PRACTICE / STATEMENT / IMAGE STRIP
   ============================================================ */
.about{
  background:var(--teal-800);
  color:#fff;
  padding:8.8vw 0 0;
  overflow:hidden;
}
.wrap{padding:0 2.43vw}

.about__grid{
  display:grid;
  grid-template-columns:1fr 38.2%;
  gap:2vw;
  align-items:start;
}

.eyebrow{
  font-size:clamp(10px,.95vw,15px);
  font-weight:400;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:#fff;
  margin:.35em 0 0;
}

.about__body p{
  font-size:clamp(13px,1.02vw,17px);
  line-height:1.78;
  letter-spacing:.004em;
  color:#c9c9c9;
  margin:0 0 1.7em;
  max-width:46ch;
}
.about__body p:last-of-type{margin-bottom:2.6em}

.pill{
  display:inline-block;
  font-size:clamp(10px,.95vw,15px);
  font-weight:600;
  letter-spacing:.135em;
  text-transform:uppercase;
  color:#fff;
  position:relative;
  padding-bottom:.4em;
}
.pill::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
}
.pill:hover::after{transform:scaleX(1);transform-origin:left}

.rule{
  border:0;height:1px;
  background:rgba(255,255,255,.22);
  margin:7.9vw 0 0;
}

.statement{
  margin:7.6vw 0 0;
  font-weight:200;
  font-size:clamp(1.75rem,4.49vw,5.2rem);
  line-height:1.135;
  letter-spacing:-.021em;
  color:#f6f6f4;
}

.strip{
  margin-top:11.6vw;
  padding:0 2.43vw;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.05vw;
}
.strip figure{margin:0;overflow:hidden;aspect-ratio:4/5}
.strip img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--grade);
  transition:transform 1.2s var(--ease),filter .7s var(--ease);
}
.strip figure:hover img{transform:scale(1.045);filter:var(--grade) brightness(1.06)}

@media (prefers-reduced-motion:no-preference){
  .strip figure{opacity:0;transform:translateY(26px);
    transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .strip.in figure{opacity:1;transform:none}
  .strip.in figure:nth-child(2){transition-delay:.09s}
  .strip.in figure:nth-child(3){transition-delay:.18s}
  .strip.in figure:nth-child(4){transition-delay:.27s}
  .rule{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
  .rule.in{transform:none}
}

@media (max-width:900px){
  .about{padding-top:18vw}
  .wrap{padding:0 6vw}
  .about__grid{grid-template-columns:1fr;gap:9vw}
  .eyebrow{font-size:11px}
  .about__body p{font-size:15px;max-width:none;margin-bottom:1.5em}
  .pill{font-size:11px}
  .rule{margin-top:16vw}
  .statement{margin-top:14vw;font-size:clamp(1.7rem,7.6vw,2.8rem)}
  .strip{margin-top:18vw;padding:0 6vw;grid-template-columns:repeat(2,1fr);gap:3vw}
}


/* ============================================================
   SECTION 04 — PARALLAX BAND
   Full-bleed photo with a slow parallax drift; one minimal
   line of type sitting in the empty right side of the frame.
   ============================================================ */
.band{
  position:relative;
  height:82vh;
  min-height:420px;
  overflow:hidden;
  background:var(--teal-950);
  isolation:isolate;
}
.band__media{
  position:absolute;
  left:0;right:0;
  top:-14%;bottom:-14%;      /* headroom for the parallax travel */
  will-change:transform;
}
.band__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 50%;
  filter:var(--grade);
}
/* just enough falloff on the right for the type to hold */
.band::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.30) 72%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.30) 100%);
}

.band__line{
  position:absolute;
  z-index:3;
  right:2.43vw;
  top:50%;
  transform:translateY(-50%);
  width:min(26vw,420px);
  text-align:right;
  font-weight:200;
  font-size:clamp(1.05rem,1.95vw,2.35rem);
  line-height:1.28;
  letter-spacing:-.014em;
  color:#f4f4f2;
  margin:0;
}

@media (prefers-reduced-motion:no-preference){
  .band__line{opacity:0;transform:translateY(calc(-50% + 16px));
    transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
  .band__line.in{opacity:1;transform:translateY(-50%)}
}

@media (max-width:900px){
  .band{height:68svh}
  .band__media{top:-10%;bottom:-10%}
  .band__media img{object-position:42% 50%}
  .band::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.78) 100%);
  }
  .band__line{
    right:6vw;left:6vw;top:auto;bottom:8vw;
    width:auto;text-align:left;
    font-size:clamp(1.15rem,5.4vw,1.75rem);
    transform:none;
  }
  .band__line.in{transform:none}
}


/* ============================================================
   SECTION 05 — FILM PANELS
   Full-bleed looping film with minimal editorial furniture:
   corner index, small caps label, one display line, one note.
   ============================================================ */

.film{
  position:relative;
  height:100vh;
  height:100svh;
  min-height:540px;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}
.film__media{position:absolute;inset:0;z-index:0}
.film__media video,
.film__media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:none;              /* films play in their own colour */
}
.film::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.10) 26%,rgba(0,0,0,0) 46%),
    linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.22) 30%,rgba(0,0,0,0) 55%);
}

/* --- corner index --- */
.film__index{
  position:absolute;z-index:3;
  top:3.1vw;left:2.43vw;
  display:flex;align-items:baseline;gap:1.15em;
  font-size:clamp(9px,.72vw,13px);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.film__index i{font-style:normal;opacity:.55}

/* --- display line, lower left --- */
.film__line{
  position:absolute;z-index:3;
  left:2.43vw;bottom:3.4vw;
  margin:0;
  max-width:52%;
  font-weight:200;
  font-size:clamp(1.9rem,4.15vw,4.9rem);
  line-height:1.02;
  letter-spacing:-.026em;
  color:#f7f7f5;
}

/* --- note, lower right --- */
.film__note{
  position:absolute;z-index:3;
  right:2.43vw;bottom:3.9vw;
  width:min(30vw,430px);
}
.film__note .lbl{
  display:block;
  margin:0 0 1.5em;
  font-size:clamp(9px,.72vw,13px);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.film__note p{
  margin:0;
  font-size:clamp(12px,.95vw,16px);
  font-weight:400;
  line-height:1.72;
  letter-spacing:.004em;
  color:rgba(255,255,255,.86);
}

/* --- reveal --- */
@media (prefers-reduced-motion:no-preference){
  .film__index,.film__line,.film__note{
    opacity:0;transform:translateY(16px);
    transition:opacity 1.15s var(--ease),transform 1.15s var(--ease);
  }
  .film.in .film__index{opacity:1;transform:none}
  .film.in .film__line{opacity:1;transform:none;transition-delay:.12s}
  .film.in .film__note{opacity:1;transform:none;transition-delay:.24s}
  .film__media{transform:scale(1.045);transition:transform 2.4s var(--ease)}
  .film.in .film__media{transform:none}
}

@media (max-width:900px){
  .film{height:82svh;min-height:460px}
  .film::after{
    background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.35) 100%);
  }
  .film__index{top:7vw;left:6vw;font-size:10px;letter-spacing:.2em}
  .film__line{
    left:6vw;right:6vw;bottom:auto;top:auto;
    position:absolute;bottom:38vw;max-width:none;
    font-size:clamp(1.75rem,9.2vw,2.9rem);
  }
  .film__note{right:6vw;left:6vw;bottom:8vw;width:auto}
  .film__note .lbl{font-size:10px;margin-bottom:1.1em}
  .film__note p{font-size:13.5px;line-height:1.66}
}


/* ============================================================
   SECTIONS 06–09 — OVERVIEW / EXPERTISE / JOURNEY / PRESENCE
   Old-site content, re-cut in the dark editorial theme.
   ============================================================ */
.slab{padding:8.8vw 0;color:#fff}
.slab--a{background:var(--teal-900)}
.slab--b{background:var(--teal-800)}

.slab__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:3vw;
  margin-bottom:5.4vw;
}
.slab__title{
  margin:0;
  font-weight:200;
  font-size:clamp(1.85rem,3.9vw,4.6rem);
  line-height:1.05;
  letter-spacing:-.024em;
  color:#f6f6f4;
}
.slab__kicker{
  flex:none;
  font-size:clamp(9px,.78vw,14px);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  text-align:right;
}

/* ---------- 06 overview ---------- */
.ov{display:grid;grid-template-columns:1fr 46%;gap:4vw;align-items:start}
.ov__eyebrow{
  display:flex;gap:1.15em;align-items:baseline;
  margin:0 0 1.6em;
  font-size:clamp(9px,.78vw,14px);
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.ov__eyebrow b{font-weight:400;color:rgba(255,255,255,.8)}
.ov__fig{
  position:relative;
  margin:4.4vw 0 0;
  width:min(31vw,440px);
  aspect-ratio:1;
  overflow:hidden;
  background:#000;
}
.ov__fig img{width:100%;height:100%;object-fit:cover;filter:var(--grade);left:1.5vw;bottom:1.5vw;
  margin:0;
  font-weight:200;
  font-size:clamp(1rem,1.55vw,1.95rem);
  line-height:1.02;
  letter-spacing:-.022em;
  color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.ov__cap::after{
  content:"";display:block;width:5.2em;height:1px;
  margin-top:.62em;background:rgba(255,255,255,.6);
}

.ov__lead{
  margin:0 0 2em;
  font-weight:200;
  font-size:clamp(1.15rem,1.92vw,2.35rem);
  line-height:1.32;
  letter-spacing:-.012em;
  color:#efefec;
}
.ov__body{
  margin:0 0 2.8em;
  font-size:clamp(13px,1.02vw,17px);
  line-height:1.78;
  color:#b9b9b9;
  max-width:52ch;
}

/* ---------- 07 expertise ---------- */
.disc{border-top:1px solid rgba(255,255,255,.16)}
.disc__row{
  display:grid;
  grid-template-columns:9% 1fr;
  gap:2vw;
  padding:3.6vw 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:background .5s var(--ease);
}
.disc__row:hover{background:rgba(255,255,255,.022)}
.disc__n{
  font-weight:200;
  font-size:clamp(1rem,1.55vw,1.9rem);
  color:rgba(255,255,255,.34);
  letter-spacing:.02em;
  line-height:1.1;
}
.disc__t{
  margin:0 0 .55em;
  font-weight:200;
  font-size:clamp(1.3rem,2.35vw,2.85rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#f4f4f2;
}
.disc__d{
  margin:0;
  font-size:clamp(13px,1.02vw,17px);
  line-height:1.72;
  color:#a9a9a9;
  max-width:46ch;
}

/* ---------- 08 journey ---------- */
.jrn{border-top:1px solid rgba(255,255,255,.16)}
.jrn__row{
  display:flex;align-items:baseline;gap:1.6vw;
  padding:2.9vw 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  color:#f2f2f0;
}
.jrn__t{
  font-weight:200;
  font-size:clamp(1.15rem,2.1vw,2.5rem);
  letter-spacing:-.018em;
  line-height:1.1;
  white-space:nowrap;
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.jrn__dots{
  flex:1;
  height:1px;
  align-self:center;
  background-image:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1px);
  background-size:6px 1px;
  background-repeat:repeat-x;
  opacity:.75;
}
.jrn__n{
  flex:none;
  font-size:clamp(9px,.82vw,14px);
  letter-spacing:.2em;
  color:rgba(255,255,255,.42);
}
a.jrn__row:hover .jrn__t{transform:translateX(.5vw)}
a.jrn__row:hover .jrn__n{color:rgba(255,255,255,.85)}

/* ---------- 09 global presence ---------- */
.geo{display:grid;grid-template-columns:repeat(5,1fr);gap:1.35vw}
.geo figure{margin:0}
.geo__img{overflow:hidden;aspect-ratio:4/5;background:var(--teal-950)}
.geo__img img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--grade);
  transition:transform 1.3s var(--ease);
}
.geo figure:hover .geo__img img{transform:scale(1.05)}
.geo__lbl{
  display:block;
  margin:1.5em 0 .75em;
  font-size:clamp(9px,.78vw,13px);
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.geo__name{
  margin:0 0 .5em;
  font-weight:200;
  font-size:clamp(1.1rem,1.85vw,2.2rem);
  letter-spacing:-.02em;
  line-height:1.05;
  color:#f6f6f4;
}
.geo__cities{
  margin:0;
  font-size:clamp(9px,.78vw,13px);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

@media (max-width:900px){
  .slab{padding:18vw 0}
  .slab__head{flex-direction:column;align-items:flex-start;gap:2.5vw;margin-bottom:12vw}
  .slab__kicker{text-align:left;font-size:10px}
  .slab__title{font-size:clamp(1.8rem,8.4vw,2.9rem)}
  .ov{grid-template-columns:1fr;gap:9vw}
  .ov__fig{width:100%;margin-top:9vw}
  .ov__cap{left:5vw;bottom:5vw;font-size:1.5rem}
  .ov__eyebrow{font-size:10px}
  .ov__fig{
  position:relative;
  margin:4.4vw 0 0;
  width:min(31vw,440px);
  aspect-ratio:1;
  overflow:hidden;
  background:#000;
}
.ov__fig img{width:100%;height:100%;object-fit:cover;filter:var(--grade);left:1.5vw;bottom:1.5vw;
  margin:0;
  font-weight:200;
  font-size:clamp(1rem,1.55vw,1.95rem);
  line-height:1.02;
  letter-spacing:-.022em;
  color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.ov__cap::after{
  content:"";display:block;width:5.2em;height:1px;
  margin-top:.62em;background:rgba(255,255,255,.6);
}

.ov__lead{font-size:clamp(1.15rem,5.4vw,1.6rem)}
  .ov__body{font-size:15px;max-width:none}
  .disc__row{grid-template-columns:1fr;gap:1.6vw;padding:9vw 0}
  .disc__n{font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
  .disc__t{font-size:clamp(1.3rem,6.6vw,2rem)}
  .disc__d{font-size:14.5px;max-width:none}
  .jrn__row{padding:7vw 0;gap:4vw}
  .jrn__t{font-size:clamp(1.1rem,5.6vw,1.7rem);white-space:normal}
  .geo{grid-template-columns:repeat(2,1fr);gap:5vw}
  .geo__name{font-size:clamp(1.15rem,5.6vw,1.7rem)}
  .geo__lbl,.geo__cities{font-size:10px}
}


/* ============================================================
   HEADER v2 — fixed bar + THE B COLLECTION mega panel
   ============================================================ */
.masthead{
  position:fixed;top:0;left:0;right:0;
  z-index:80;
  transition:transform .55s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead__inner{
  display:flex;align-items:center;
  padding:var(--pad-y) var(--pad-x);
}
.masthead.is-stuck{
  background:rgba(9,11,12,.76);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:rgba(255,255,255,.09);
}
.masthead.is-hidden{transform:translateY(-102%)}
.masthead.is-open{transform:none;background:var(--teal-850);border-bottom-color:transparent}

.nav button.navlink{
  position:relative;
  background:none;border:0;cursor:pointer;padding:0 0 .45em;
  font-family:inherit;
  font-size:var(--nav-size);
  font-weight:400;
  letter-spacing:.175em;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:.85em;
}
.nav button.navlink::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav button.navlink:hover::after{transform:scaleX(1);transform-origin:left}
.navlink .chev{
  width:.62em;height:.62em;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-.18em) rotate(45deg);
  transition:transform .45s var(--ease);
}
.nav .navlink[aria-expanded="true"] .chev{transform:translateY(.06em) rotate(-135deg)}
.nav .navlink[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}

/* --- the panel --- */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--teal-850);
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  overflow:hidden;
  opacity:0;visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .45s var(--ease),transform .5s var(--ease),visibility .45s;
}
.masthead.is-open .mega{opacity:1;visibility:visible;transform:none}

.mega__inner{
  position:relative;
  padding:4.2vw var(--pad-x) 4.6vw;
  max-width:none;
}
/* the letter the whole thing is built on */
.mega__b{
  position:absolute;
  right:1.5vw;top:50%;
  transform:translateY(-52%);
  font-weight:200;
  font-size:26vw;
  line-height:.7;
  color:rgba(255,255,255,.028);
  pointer-events:none;
  user-select:none;
}
.mega__cols{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3.4vw;
}
.mega__grp{
  margin:0 0 2.1em;
  padding-bottom:1.15em;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:clamp(9px,.72vw,13px);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.mega__item{
  display:block;
  margin-bottom:2.05em;
  color:inherit;
}
.mega__item:last-child{margin-bottom:0}
.mega__w{
  display:block;
  font-weight:200;
  font-size:clamp(1.1rem,1.85vw,2.25rem);
  line-height:1.05;
  letter-spacing:-.022em;
  color:#f4f4f2;
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.mega__d{
  display:block;
  margin-top:.55em;
  font-size:clamp(11px,.86vw,14.5px);
  line-height:1.55;
  color:rgba(255,255,255,.5);
  transition:color .4s var(--ease);
}
.mega__list{
  display:block;
  margin-top:.85em;
  font-size:clamp(9px,.72vw,12.5px);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.34);
  line-height:1.9;
}
.mega__item:hover .mega__w{transform:translateX(.45vw)}
.mega__item:hover .mega__d{color:rgba(255,255,255,.78)}

/* --- burger (mobile only) --- */
.burger{
  display:none;
  margin-left:auto;
  background:none;border:0;cursor:pointer;
  width:34px;height:34px;
  position:relative;
}
.burger span{
  position:absolute;left:6px;right:6px;height:1px;
  background:#fff;
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.masthead.is-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.masthead.is-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block}
  .mark,.burger{position:relative;z-index:3}
  .nav{
    position:fixed;left:0;right:0;top:0;bottom:0;z-index:2;
    width:auto;padding:0;margin:0;
    display:block;
    background:var(--teal-950);
    overflow-y:auto;
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility .4s;
    padding:26vw 6vw 16vw;
  }
  .masthead.is-open .nav{opacity:1;visibility:visible}
  .nav > a,.nav button.navlink{
    display:block;width:100%;
    font-size:1.15rem;letter-spacing:.02em;
    text-transform:none;font-weight:200;
    padding:.85em 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    text-align:left;
  }
  .nav > a::after{display:none}
  .nav .cta{margin-left:0;justify-content:space-between;font-weight:400;letter-spacing:.02em}
  .nav .cta svg{width:1.5em}
  .navlink .chev{display:none}

  .mega{
    position:static;
    opacity:1;visibility:visible;transform:none;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;
    max-height:0;
    transition:max-height .55s var(--ease);
  }
  .masthead.is-open .mega{max-height:none}
  .nav .navlink[aria-expanded="false"] + .mega{max-height:0}
  .nav .navlink[aria-expanded="true"] + .mega{max-height:none}
  .mega__inner{padding:1.6em 0 .6em}
  .mega__b{display:none}
  .mega__cols{grid-template-columns:1fr;gap:2.4em}
  .mega__grp{font-size:10px;margin-bottom:1.5em;padding-bottom:.9em}
  .mega__item{margin-bottom:1.5em}
  .mega__w{font-size:1.35rem}
  .mega__d{font-size:12.5px}
  .mega__list{font-size:10px}
}


/* ============================================================
   FILM REEL — the four films merged into one auto-advancing
   section, with progress ticks and manual arrows.
   ============================================================ */
.reel{
  position:relative;
  height:100vh;height:100svh;
  min-height:540px;
  overflow:hidden;
  background:var(--teal-950);
  isolation:isolate;
}

.film{
  position:absolute;inset:0;
  height:auto;min-height:0;
  opacity:0;visibility:hidden;
  z-index:1;
  transition:opacity 1.05s var(--ease),visibility 1.05s;
}
.film.is-active{opacity:1;visibility:visible;z-index:2}

/* slow drift while a slide holds */
.film .film__media{transform:scale(1.07);transition:none}
.film.is-active .film__media{transform:scale(1);transition:transform 7s linear}

/* text reveals now key off the active slide */
@media (prefers-reduced-motion:no-preference){
  .film__index,.film__line,.film__note{opacity:0;transform:translateY(16px)}
  .film.is-active .film__index{opacity:1;transform:none;transition:opacity 1s var(--ease) .15s,transform 1s var(--ease) .15s}
  .film.is-active .film__line{opacity:1;transform:none;transition:opacity 1s var(--ease) .28s,transform 1s var(--ease) .28s}
  .film.is-active .film__note{opacity:1;transform:none;transition:opacity 1s var(--ease) .4s,transform 1s var(--ease) .4s}
}

/* --- progress ticks, top right --- */
.reel__ticks{
  position:absolute;z-index:7;
  top:3.1vw;right:2.43vw;
  display:flex;gap:.7vw;
  align-items:center;
}
.tick{
  width:clamp(26px,2.6vw,48px);height:1px;
  background:rgba(255,255,255,.26);
  position:relative;overflow:hidden;
  border:0;padding:0;cursor:pointer;
  transition:background .4s var(--ease);
}
.tick::after{
  content:"";position:absolute;inset:0;
  background:#fff;
  transform:scaleX(0);transform-origin:left;
}
.tick:hover{background:rgba(255,255,255,.5)}
.tick.is-on::after{animation:tickfill var(--hold,5s) linear forwards}
@keyframes tickfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.reel.is-paused .tick.is-on::after{animation-play-state:paused}

/* --- arrows --- */
.reel__btn{
  position:absolute;z-index:7;
  top:50%;transform:translateY(-50%);
  width:clamp(40px,3.3vw,62px);
  aspect-ratio:1;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:rgba(0,0,0,.14);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;
  opacity:.55;
  transition:opacity .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),transform .5s var(--ease);
}
.reel__btn svg{width:34%;height:auto;display:block;transition:transform .45s var(--ease)}
.reel__btn--prev{left:1.75vw}
.reel__btn--next{right:1.75vw}
.reel:hover .reel__btn{opacity:1}
.reel__btn:hover{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.08)}
.reel__btn--prev:hover svg{transform:translateX(-.14em)}
.reel__btn--next:hover svg{transform:translateX(.14em)}
.reel__btn:focus-visible{outline:1px solid #fff;outline-offset:3px;opacity:1}

@media (max-width:900px){
  .reel{height:82svh;min-height:460px}
  .reel__ticks{top:auto;bottom:5.5vw;right:auto;left:6vw;gap:2.4vw}
  .tick{width:34px}
  .reel__btn{
    top:auto;bottom:4vw;transform:none;
    width:42px;opacity:1;
    left:auto;right:6vw;
  }
  .reel__btn--prev{right:calc(6vw + 52px)}
}

/* ============================================================
   FOOTER — quiet, with a slow wave built from the logo's own
   striations as the only motion.
   ============================================================ */
.foot{
  position:relative;
  background:var(--teal-900);
  color:#fff;
  padding:9vw 0 0;
  overflow:hidden;
}

.foot__cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3vw;
  align-items:end;
  padding-bottom:6vw;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.foot__line{
  margin:0;
  font-weight:200;
  font-size:clamp(1.8rem,4.15vw,4.9rem);
  line-height:1.06;
  letter-spacing:-.026em;
  color:#f7f7f5;
  max-width:16ch;
}
.foot__mail{
  display:inline-block;
  position:relative;
  font-weight:200;
  font-size:clamp(1rem,1.62vw,2rem);
  letter-spacing:-.008em;
  color:#e8e8e6;
  padding-bottom:.35em;
  white-space:nowrap;
}
.foot__mail::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform-origin:right;
  transition:transform .55s var(--ease);
}
.foot__mail:hover::after{transform:scaleX(0);transform-origin:left}

.foot__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.6vw;
  padding:5.4vw 0 6vw;
}
.foot__h{
  margin:0 0 1.9em;
  font-size:clamp(9px,.72vw,13px);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.foot__cols a,
.foot__cols li{
  display:block;
  margin-bottom:1.05em;
  font-size:clamp(12px,.95vw,16px);
  line-height:1.55;
  color:rgba(255,255,255,.74);
  transition:color .4s var(--ease),transform .45s var(--ease);
}
.foot__cols ul{list-style:none;margin:0;padding:0}
.foot__cols a:hover{color:#fff;transform:translateX(.3vw)}

/* --- the wave: the mark's striations, breathing --- */
.foot__wave{
  display:flex;align-items:flex-end;gap:.34vw;
  height:clamp(54px,7vw,120px);
  padding:0 var(--pad-x);
  opacity:.5;
  pointer-events:none;
}
.foot__wave i{
  flex:1;
  min-width:1px;
  height:100%;
  background:linear-gradient(to top,rgba(255,255,255,.42),rgba(255,255,255,.06));
  transform-origin:bottom;
  transform:scaleY(.18);
}
@media (prefers-reduced-motion:no-preference){
  .foot__wave i{animation:swell 3.6s ease-in-out infinite alternate}
}
@keyframes swell{
  from{transform:scaleY(.14)}
  to{transform:scaleY(1)}
}

.foot__base{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4vw 2.4vw;
  padding:2.4vw 0 2.8vw;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:2.2vw;
  font-size:clamp(9px,.74vw,13px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.foot__base .spacer{margin-left:auto}
.foot__base a{transition:color .4s var(--ease)}
.foot__base a:hover{color:rgba(255,255,255,.9)}

@media (max-width:900px){
  .foot{padding-top:20vw}
  .foot__cta{grid-template-columns:1fr;gap:8vw;padding-bottom:12vw;align-items:start}
  .foot__line{font-size:clamp(1.75rem,9vw,2.8rem);max-width:none}
  .foot__mail{font-size:1.2rem;white-space:normal}
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:9vw 5vw;padding:12vw 0 14vw}
  .foot__h{font-size:10px;margin-bottom:1.4em}
  .foot__cols a,.foot__cols li{font-size:14px}
  .foot__wave{height:64px;gap:1.4vw;padding:0 6vw}
  .foot__base{padding:6vw 0 8vw;margin-top:6vw;font-size:10px;gap:3vw}
  .foot__base .spacer{margin-left:0;width:100%}
}


/* ============================================================
   B COLLECTION — inner pages
   ============================================================ */
.bhero{
  position:relative;
  min-height:78vh;min-height:78svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--teal-950);
  isolation:isolate;
}
.bhero__media{position:absolute;inset:0;z-index:0}
.bhero__media img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.bhero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.12) 26%,rgba(0,0,0,0) 44%),
    linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.34) 34%,rgba(0,0,0,0) 62%);
}
.bhero__in{position:relative;z-index:3;width:100%;padding:0 var(--pad-x) 5vw}
.bhero__meta{
  display:flex;gap:1.15em;align-items:baseline;
  margin:0 0 1.5em;
  font-size:clamp(9px,.78vw,14px);
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.bhero__meta i{font-style:normal;color:rgba(255,255,255,.95)}
.bhero__t{
  margin:0;
  font-weight:200;
  font-size:clamp(3rem,10vw,12rem);
  line-height:.9;
  letter-spacing:-.032em;
  color:#fff;
}
.bhero__s{
  margin:.5em 0 0;
  font-weight:200;
  font-size:clamp(1.05rem,2.1vw,2.6rem);
  line-height:1.2;
  letter-spacing:-.016em;
  color:rgba(255,255,255,.72);
}

/* lead block */
.lead{display:grid;grid-template-columns:1fr 46%;gap:4vw;align-items:start}
.lead__p{
  margin:0 0 1.7em;
  font-weight:200;
  font-size:clamp(1.1rem,1.85vw,2.25rem);
  line-height:1.34;
  letter-spacing:-.012em;
  color:#efefec;
}
.lead__b{
  margin:0 0 1.6em;
  font-size:clamp(13px,1.02vw,17px);
  line-height:1.78;
  color:#b9b9b9;
}
.lead__b:last-child{margin-bottom:0}

/* image + text split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.6vw;align-items:center}
.split--flip .split__fig{order:2}
.split__fig{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--teal-950)}
.split__fig img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.split__t{
  margin:0 0 .7em;
  font-weight:200;
  font-size:clamp(1.4rem,2.5vw,3rem);
  line-height:1.1;letter-spacing:-.022em;color:#f4f4f2;
}
.split__d{margin:0 0 1.4em;font-size:clamp(13px,1.02vw,17px);line-height:1.78;color:#b3b3b3}
.split__d:last-child{margin-bottom:0}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2vw}
.cards figure{margin:0}
.cards__img{overflow:hidden;aspect-ratio:4/5;background:var(--teal-950)}
.cards__img img{width:100%;height:100%;object-fit:cover;filter:var(--grade);transition:transform 1.2s var(--ease)}
.cards figure:hover .cards__img img{transform:scale(1.045)}
.cards__n{
  display:block;margin:1.5em 0 .55em;
  font-weight:200;
  font-size:clamp(1.15rem,1.95vw,2.3rem);
  letter-spacing:-.02em;line-height:1.06;color:#f6f6f4;
}
.cards__d{margin:0;font-size:clamp(12px,.95vw,16px);line-height:1.62;color:rgba(255,255,255,.6)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2vw}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--teal-950)}
.gal img{width:100%;height:100%;object-fit:cover;filter:var(--grade);transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal .w2{grid-column:span 2}
.gal .w3{grid-column:span 3}
.gal .w4{grid-column:span 4}
.gal .r45{aspect-ratio:4/5}
.gal .r43{aspect-ratio:4/3}
.gal .r169{aspect-ratio:16/9}
.gal figcaption{
  position:absolute;left:1.1vw;bottom:1vw;z-index:2;
  font-size:clamp(9px,.72vw,12.5px);
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 14px rgba(0,0,0,.7);
}

/* principles */
.prin{border-top:1px solid rgba(255,255,255,.16)}
.prin__row{
  display:grid;grid-template-columns:9% 1fr;gap:2vw;
  padding:3.4vw 0;border-bottom:1px solid rgba(255,255,255,.16);
}
.prin__n{font-weight:200;font-size:clamp(1rem,1.55vw,1.9rem);color:rgba(255,255,255,.34)}
.prin__t{
  margin:0 0 .5em;font-weight:200;
  font-size:clamp(1.25rem,2.25vw,2.7rem);
  line-height:1.12;letter-spacing:-.02em;color:#f4f4f2;
}
.prin__d{margin:0;font-size:clamp(13px,1.02vw,17px);line-height:1.74;color:#a9a9a9;max-width:60ch}

/* a slot the client still has to fill */
.slot{
  color:rgba(255,255,255,.42);
  border-bottom:1px dashed rgba(255,255,255,.22);
  padding-bottom:.1em;
}

/* prev / next B */
.bnext{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.14);
  background:var(--teal-900);
}
.bnext a{
  padding:4.4vw var(--pad-x);
  transition:background .5s var(--ease);
}
.bnext a + a{border-left:1px solid rgba(255,255,255,.14);text-align:right}
.bnext a:hover{background:rgba(255,255,255,.03)}
.bnext .k{
  display:block;margin-bottom:1.1em;
  font-size:clamp(9px,.72vw,13px);
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.bnext .w{
  display:block;font-weight:200;
  font-size:clamp(1.4rem,2.9vw,3.4rem);
  letter-spacing:-.024em;line-height:1;color:#f4f4f2;
  transition:transform .5s var(--ease);
}
.bnext a:hover .w{transform:translateX(-.4vw)}
.bnext a + a:hover .w{transform:translateX(.4vw)}

@media (max-width:900px){
  .bhero{min-height:66svh}
  .bhero__in{padding:0 6vw 12vw}
  .bhero__meta{font-size:10px;margin-bottom:1.2em}
  .bhero__t{font-size:clamp(2.6rem,17vw,4.6rem)}
  .bhero__s{font-size:clamp(1rem,4.8vw,1.5rem)}
  .lead{grid-template-columns:1fr;gap:8vw}
  .lead__p{font-size:clamp(1.1rem,5.2vw,1.55rem)}
  .lead__b{font-size:15px}
  .split{grid-template-columns:1fr;gap:8vw}
  .split--flip .split__fig{order:0}
  .split__t{font-size:clamp(1.35rem,6.4vw,2rem)}
  .split__d{font-size:15px}
  .cards{grid-template-columns:repeat(2,1fr);gap:5vw}
  .cards__n{font-size:clamp(1.1rem,5.4vw,1.6rem)}
  .cards__d{font-size:13px}
  .gal{grid-template-columns:repeat(2,1fr);gap:3vw}
  .gal .w2,.gal .w3,.gal .w4{grid-column:span 2}
  .gal figcaption{left:4vw;bottom:3.5vw;font-size:10px}
  .prin__row{grid-template-columns:1fr;gap:1.4vw;padding:9vw 0}
  .prin__n{font-size:12px;letter-spacing:.2em}
  .prin__t{font-size:clamp(1.3rem,6.4vw,2rem)}
  .prin__d{font-size:14.5px;max-width:none}
  .bnext{grid-template-columns:1fr}
  .bnext a{padding:11vw 6vw}
  .bnext a + a{border-left:0;border-top:1px solid rgba(255,255,255,.14);text-align:left}
  .bnext .w{font-size:clamp(1.5rem,8.4vw,2.4rem)}
}

/* ============================================================
   AMBIENT — a teal gradient that drifts over the black and
   fades out again. The only colour on the site.
   ============================================================ */
:root{
  --glow-a:rgba(58,186,196,.15);
  --glow-b:rgba(30,132,144,.13);
}
.slab,.about,.foot,.bnext,.belief{position:relative}
.slab::before,.about::before,.foot::before,.bnext::before,.belief .amb{
  content:"";
  position:absolute;inset:-12% -8%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(48% 46% at 16% 14%, var(--glow-a) 0%, rgba(0,0,0,0) 64%),
    radial-gradient(44% 42% at 84% 82%, var(--glow-b) 0%, rgba(0,0,0,0) 66%);
  opacity:.42;
  will-change:transform,opacity;
}
.belief .amb{inset:0;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .slab::before,.about::before,.foot::before,.bnext::before,.belief .amb{
    animation:ambient 22s ease-in-out infinite alternate;
  }
  .slab--b::before{animation-duration:26s;animation-delay:-7s}
  .about::before{animation-duration:19s;animation-delay:-11s}
  .foot::before{animation-duration:28s;animation-delay:-4s}
  .bnext::before{animation-duration:24s;animation-delay:-15s}
  .belief .amb{animation-duration:30s;animation-delay:-9s}
}
@keyframes ambient{
  0%  {transform:translate3d(-4%,-3%,0) scale(1);    opacity:.16}
  35% {                                              opacity:.62}
  65% {                                              opacity:.34}
  100%{transform:translate3d(5%,4%,0)   scale(1.16); opacity:.7}
}
/* content sits above the glow */
.wrap,.slab__head,.strip,.bnext a,.belief__col,.belief__fig,.grid-lines{position:relative;z-index:2}
.foot__wave,.foot__base{position:relative;z-index:2}


/* ---------- pull quote ---------- */
.pull{text-align:center}
.pull__mark{
  display:block;width:1px;height:clamp(34px,3.6vw,64px);
  margin:0 auto 3.2vw;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.42));
}
.pull__q{
  margin:0 auto;
  max-width:26ch;
  font-weight:200;
  font-size:clamp(1.3rem,2.55vw,3.15rem);
  line-height:1.24;
  letter-spacing:-.018em;
  color:#f6f6f4;
}
.pull__q em{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:500;
  font-size:1.06em;letter-spacing:0;
}
.pull__by{
  display:block;margin-top:3.4vw;
  font-size:clamp(9px,.78vw,13px);
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.cap-note{
  margin:2.6vw 0 0;
  font-size:clamp(11px,.9vw,15px);
  color:rgba(255,255,255,.5);
}
@media (max-width:900px){
  .pull__q{font-size:clamp(1.25rem,6vw,1.9rem);max-width:none}
  .pull__mark{margin-bottom:10vw;height:40px}
  .pull__by{margin-top:10vw;font-size:10px}
}

.closing{margin-top:0;text-align:left}
.closing__b{margin:0 0 .6em;font-weight:200;font-size:clamp(1.25rem,2.35vw,2.85rem);line-height:1.14;letter-spacing:-.022em;color:#f4f4f2}
.closing__s{margin:0;font-size:clamp(12px,1vw,16.5px);line-height:1.7;letter-spacing:.01em;color:rgba(255,255,255,.55)}
@media (max-width:900px){.closing__b{font-size:clamp(1.25rem,6.2vw,1.9rem)}.closing__s{font-size:14px}}