:root{
  --dark:#0e0f0d;
  --dark2:#151613;
  --dark3:#1c1d19;
  --warm:#eee9df;
  --warm2:#d7cfc1;
  --warm3:#cfc5b6;
  --ink:#2c2823;
  --ink2:#4b453d;
  --muted:#8b8378;
  --light:#f0ece4;
  --light2:rgba(240,236,228,.80);
  --serif:"Playfair Display","Iowan Old Style","Baskerville","Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--warm);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* reveal */
.fade{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.fade.visible{opacity:1;transform:none}

/* nav */
.site-nav{
  position:fixed;
  z-index:100;
  top:0;left:0;right:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:20px 28px;
  font-size:10px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}
.nav-brand{display:none!important}
.nav-links{display:flex;gap:20px}
.nav-links a{opacity:.72}
.nav-links a:hover{opacity:1}

/* hero: understated name + attached subtitle; large editorial line below */
.hero{
  position:relative;
  min-height:100svh;
  background:#090a08;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 76% 45%,rgba(255,255,255,.055),transparent 50%),
    linear-gradient(135deg,#10110f 0%,#090a08 58%,#121310 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  min-height:100svh;
  padding:7vh 4.8vw 9vh;
}
.hero h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(46px,4.2vw,68px);
  line-height:.88;
  letter-spacing:-.035em;
  font-weight:500;
}
.hero-meta{
  margin-top:10px;
  font-size:clamp(12px,.9vw,15px);
  font-weight:300;
  opacity:.82;
}
.hero-line{
  position:absolute;
  left:22vw;
  bottom:9vh;
  width:min(920px,72vw);
  margin:0;
  font-family:var(--serif);
  font-size:clamp(42px,5.4vw,86px);
  line-height:.93;
  letter-spacing:-.035em;
  font-weight:500;
  text-wrap:balance;
}
.hero-kicker,.hero-note{display:none!important}

/* common chapter typography — restrained */
.chapter{position:relative;min-height:112svh}
.chapter-number{
  font-size:11px;
  letter-spacing:.21em;
  text-transform:uppercase;
  font-weight:400;
  opacity:.9;
}
.chapter h2{
  margin:18px 0 0;
  font-family:var(--serif);
  font-size:clamp(40px,4.4vw,70px);
  line-height:.96;
  letter-spacing:-.03em;
  font-weight:500;
}
.chapter p{
  margin:0;
  font-size:clamp(16px,1.28vw,20px);
  line-height:1.64;
  font-weight:300;
}

/* origins — dark, integrated photo, readable */
.origins{
  background:var(--dark);
  color:var(--light);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:5.5vw;
  align-items:center;
  padding:14vh 7vw 10vh;
}
.origins-copy{max-width:580px}
.origins .chapter-number{color:rgba(255,255,255,.72)}
.origins h2{color:rgba(255,255,255,.90)}
.origins p{margin-top:30px;color:rgba(255,255,255,.76)}
.origins-media{
  position:relative;
  min-height:86svh;
  overflow:hidden;
}
.origins-media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(.96);
}
.origins-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--dark) 0%,rgba(14,15,13,.60) 13%,rgba(14,15,13,.12) 34%,rgba(14,15,13,0) 55%);
  pointer-events:none;
}

/* lessons: closing thoughts, not new chapters */
.lesson{
  position:relative;
  min-height:48svh;
  padding:7vh 7vw 11vh;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}
.lesson > .fade{max-width:820px}
.lesson p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(24px,2.2vw,34px);
  line-height:1.18;
  letter-spacing:-.018em;
  font-weight:500;
}
.lesson small{display:none!important}
.lesson::after{display:none!important}

/* origins -> work: dark, subtle lateral light toward right */
.origins + .lesson{
  background:
    radial-gradient(900px 360px at 92% 100%,rgba(255,255,255,.07),transparent 62%),
    linear-gradient(180deg,var(--dark) 0%,#11120f 100%);
  color:rgba(255,255,255,.78);
}

/* work */
.work{
  background:var(--dark2);
  color:var(--light);
  min-height:124svh;
  overflow:hidden;
}
.work-image{
  position:absolute;
  inset:0 0 0 28%;
}
.work-image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(.95);
}
.work-image::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--dark2) 0%,rgba(21,22,19,.90) 15%,rgba(21,22,19,.45) 43%,rgba(21,22,19,.08) 72%);
}
.work-copy{
  position:relative;z-index:2;
  width:min(500px,38vw);
  padding:23vh 0 0 7vw;
}
.work .chapter-number{color:rgba(255,255,255,.74)}
.work h2{color:rgba(255,255,255,.90)}
.work p{margin-top:30px;color:rgba(255,255,255,.78)}
.work-credentials{
  margin-top:24px!important;
  font-size:13px!important;
  line-height:1.8!important;
  letter-spacing:.04em;
  color:rgba(255,255,255,.64)!important;
}

/* work -> father: do not go white; drift to warm darker paper */
.work + .lesson{
  background:
    linear-gradient(180deg,
      var(--dark2) 0%,
      #1b1b18 45%,
      #4b4740 72%,
      #8f877a 90%,
      var(--warm3) 100%);
  color:rgba(255,255,255,.76);
}

/* father: darker warm tone, subtle sepia, brighter emotional beat */
.father{
  background:var(--warm3);
  color:var(--ink);
  display:grid;
  grid-template-columns:1.22fr .78fr;
  gap:5.5vw;
  align-items:center;
  padding:12vh 7vw 9vh;
  min-height:106svh;
}
.father-photo-wrap{display:flex;align-items:center}
.father-photo{width:min(980px,100%)}
.father-photo img{
  width:100%;
  filter:grayscale(.88) sepia(.14) contrast(1.015) brightness(1.035);
}
.father-copy{max-width:500px}
.father .chapter-number{color:#6f675c}
.father h2{color:#27221d}
.father p{margin-top:30px;color:#40382f}

/* father -> second: stay warm longer, then darken gently */
.father + .lesson{
  background:
    linear-gradient(180deg,
      var(--warm3) 0%,
      #b8ad9e 45%,
      #7b7469 72%,
      #343530 90%,
      var(--dark) 100%);
  color:#332e28;
}

/* second */
.second{
  background:var(--dark);
  color:var(--light);
  min-height:122svh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}
.second-media{position:relative;overflow:hidden}
.second-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04) brightness(.97);
}
.second-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,15,13,.02),rgba(14,15,13,.20) 60%,rgba(14,15,13,.82) 100%);
}
.second-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:16vh 8vw;
}
.second .chapter-number{color:rgba(255,255,255,.74)}
.second h2{color:rgba(255,255,255,.92)}
.second p{margin-top:30px;color:rgba(255,255,255,.78);max-width:520px}

/* second -> automotive: remain dark, no black bar effect */
.second + .lesson{
  background:
    radial-gradient(1000px 300px at 88% 100%,rgba(255,255,255,.045),transparent 60%),
    linear-gradient(180deg,var(--dark) 0%,#10110f 100%);
  color:rgba(255,255,255,.78);
}

/* automotive readable */
.auto{
  background:var(--dark);
  color:var(--light);
  min-height:118svh;
  overflow:hidden;
}
.auto-media{position:absolute;inset:0}
.auto-media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.03) brightness(.95);
}
.auto-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(270deg,rgba(14,15,13,.86) 0%,rgba(14,15,13,.64) 28%,rgba(14,15,13,.18) 60%,rgba(14,15,13,0) 76%);
}
.auto-copy{
  position:relative;z-index:2;
  width:min(520px,38vw);
  margin-left:auto;
  padding:22vh 7vw 12vh 0;
}
.auto .chapter-number{color:rgba(255,255,255,.78)}
.auto h2{color:rgba(255,255,255,.92)}
.auto p{margin-top:30px;color:rgba(255,255,255,.80)}
.mev-link{
  display:inline-flex;
  margin-top:38px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.30);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.90);
}

/* auto -> current: stay dark all the way to the image */
.auto + .lesson{
  background:var(--dark);
  color:rgba(255,255,255,.78);
}

/* current image in color */
.current{background:var(--warm);color:var(--ink)}
.current-image{
  position:relative;
  height:100svh;
  background:var(--dark);
}
.current-image img{
  width:100%;height:100%;object-fit:cover;
  filter:none!important;
}
.current-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10) 65%,rgba(238,233,223,.18) 100%);
}
.current-overlay{
  position:absolute;
  z-index:2;
  left:6vw;right:6vw;top:7vh;
  max-width:760px;
}
.current-overlay .chapter-number{color:rgba(255,255,255,.82)}
.current-overlay h2{
  margin-top:12px;
  color:rgba(30,26,22,.90);
  font-size:clamp(42px,4.8vw,76px);
}

/* ending: all on one warm field, with real breathing space */
.current-body{
  background:var(--warm);
  padding:8vh 7vw 0;
}
.current-body .copy{max-width:780px}
.current-body .copy p{
  color:var(--ink2);
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.66;
}
.current-body .closing{
  margin-top:22vh;
  max-width:980px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(48px,5.2vw,82px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:500;
}
.current-body .echo{
  margin-top:14px;
  color:#aaa397;
  font-family:var(--serif);
  font-size:clamp(22px,2vw,32px);
  line-height:1.08;
}

.first-person{
  background:var(--warm);
  padding:20vh 7vw 12vh;
}
.first-person .statement{margin:0;max-width:560px}
.first-person .statement span{
  display:block;
  font-family:var(--serif);
  font-size:clamp(26px,2.5vw,38px);
  line-height:1.08;
  letter-spacing:-.015em;
  color:#4a433a;
}
.first-person .seek{
  margin-top:22px;
  max-width:500px;
  color:#70685d;
  font-size:clamp(14px,.95vw,16px);
  line-height:1.72;
}
.contact-line{
  margin-top:34px;
  color:#8f877b;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn{
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(82,77,70,.26);
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;
  font-weight:300;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#514b43;
}
.btn.primary{background:transparent}

/* footer */
footer{
  display:flex;justify-content:space-between;gap:20px;
  padding:18px 28px 24px;
  background:var(--warm);
  color:#958d82;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* talent page left essentially neutral */
.talent-page{background:var(--warm);min-height:100svh}
.talent-head{padding:18vh 8vw 7vh;max-width:960px}
.talent-head .chapter-number{color:#8e877b}
.talent-head h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(56px,6.5vw,100px);
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:500;
  color:var(--ink);
}
.talent-head p{
  margin:26px 0 0;
  max-width:740px;
  color:#544e46;
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.68;
}
.gallery{
  padding:0 8vw 10vh;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.gallery figure{margin:0;overflow:hidden;background:#dfd7ca}
.gallery img{width:100%;height:100%;object-fit:cover;filter:none!important}
.stats-wrap{
  padding:8vh 8vw 10vh;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:5vw;
  align-items:start;
  background:#e8e1d5;
}
.stats-wrap h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(40px,3.8vw,62px);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:500;
}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.stat{border-top:1px solid rgba(45,41,36,.14);padding-top:14px;display:flex;flex-direction:column;gap:7px}
.stat b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#867f73;font-weight:400}
.stat span{color:#3f3a33;font-size:15px;line-height:1.55}
.talent-cta{padding:0 8vw 12vh;display:flex;gap:12px;flex-wrap:wrap;background:var(--warm)}

/* mobile */
@media(max-width:900px){
  .site-nav{padding:18px}
  .hero-inner{padding:7vh 18px 8vh}
  .hero h1{font-size:13vw}
  .hero-meta{font-size:13px}
  .hero-line{
    left:18px;right:18px;bottom:7vh;width:auto;
    font-size:clamp(34px,10vw,52px);
  }
  .chapter{min-height:auto}
  .chapter h2{font-size:clamp(34px,9vw,48px)}
  .origins,.father,.second{grid-template-columns:1fr}
  .origins{padding:11vh 18px 7vh;gap:30px}
  .origins-media{min-height:60svh}
  .work{min-height:auto}
  .work-image{position:relative;inset:auto;height:58svh}
  .work-copy{width:auto;padding:6vh 18px 9vh}
  .lesson{min-height:38svh;padding:6vh 18px 9vh}
  .lesson p{font-size:clamp(23px,6.8vw,32px)}
  .father{padding:8vh 18px 7vh;gap:30px}
  .second{min-height:auto}
  .second-media{min-height:56svh}
  .second-copy{padding:7vh 18px 9vh}
  .auto{min-height:auto}
  .auto-media{position:relative;min-height:64svh}
  .auto-copy{width:auto;padding:7vh 18px 9vh}
  .current-image{height:70svh}
  .current-overlay{left:18px;right:18px;top:6vh}
  .current-overlay h2{font-size:clamp(36px,10vw,50px)}
  .current-body{padding:6vh 18px 0}
  .current-body .copy p{font-size:17px}
  .current-body .closing{margin-top:15vh;font-size:clamp(38px,9vw,50px)}
  .current-body .echo{font-size:clamp(21px,6vw,28px)}
  .first-person{padding:15vh 18px 10vh}
  .first-person .statement span{font-size:clamp(25px,7vw,32px)}
  footer{flex-direction:column;align-items:flex-start;padding:18px}
  .talent-head{padding:16vh 18px 6vh}
  .gallery{padding:0 18px 8vh;grid-template-columns:1fr}
  .stats-wrap{padding:6vh 18px 8vh;grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .talent-cta{padding:0 18px 10vh}
}


/* =========================================================
   V12 — targeted fixes only
   ========================================================= */

/* HERO: even more understated name; subtitle attached;
   main statement centered in the visual field */
.hero h1{
  font-size:clamp(34px,3.1vw,50px) !important;
  line-height:.92 !important;
  letter-spacing:-.025em !important;
  font-weight:500 !important;
}
.hero-meta{
  margin-top:8px !important;
  font-size:clamp(11px,.82vw,14px) !important;
  opacity:.78 !important;
}
.hero-line{
  left:50% !important;
  top:54% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(960px,78vw) !important;
  max-width:none !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(40px,5vw,78px) !important;
  line-height:.94 !important;
}

/* FATHER: harmonize image and background.
   Less sepia in the field, a touch more warmth in the image. */
.father{
  background:#d6cec1 !important;
}
.father-photo img{
  filter:grayscale(.80) sepia(.20) contrast(1.01) brightness(1.035) !important;
}
.father + .lesson{
  background:
    linear-gradient(
      180deg,
      #d6cec1 0%,
      #c8bfb1 45%,
      #8f877b 72%,
      #3e3f3a 90%,
      var(--dark) 100%
    ) !important;
}

/* CURRENT CHAPTER: restore the resolved light/white heading treatment */
.current-overlay .chapter-number{
  color:rgba(255,255,255,.84) !important;
}
.current-overlay h2{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
  font-size:clamp(38px,4.2vw,66px) !important;
  line-height:.94 !important;
  max-width:620px !important;
}

/* ENDING hierarchy:
   journey + seek as one thought,
   then a larger pause,
   then representation line smaller */
.first-person{
  padding-top:20vh !important;
}
.first-person .statement{
  max-width:560px !important;
}
.first-person .statement span{
  font-size:clamp(25px,2.3vw,36px) !important;
}
.first-person .seek{
  margin-top:12px !important;
  font-size:clamp(18px,1.35vw,22px) !important;
  line-height:1.5 !important;
  max-width:600px !important;
  color:#5d564d !important;
}
.contact-line{
  margin-top:64px !important;
  font-size:9px !important;
  letter-spacing:.10em !important;
  color:#91897e !important;
}

/* mobile equivalents */
@media(max-width:900px){
  .hero h1{
    font-size:11vw !important;
  }
  .hero-meta{
    font-size:12px !important;
  }
  .hero-line{
    left:50% !important;
    top:57% !important;
    width:calc(100% - 36px) !important;
    font-size:clamp(32px,9vw,48px) !important;
  }
  .current-overlay h2{
    font-size:clamp(34px,9vw,46px) !important;
    max-width:82% !important;
  }
  .first-person .seek{
    font-size:17px !important;
    margin-top:10px !important;
  }
  .contact-line{
    margin-top:48px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   V13 — final-section micro-adjustments only
   ========================================================= */

/* Bleed the bottom of the color image into the warm background */
.current-image::after{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.08) 62%,
      rgba(238,233,223,.12) 74%,
      rgba(238,233,223,.50) 88%,
      rgba(238,233,223,.96) 100%
    ) !important;
}

/* Pull current-chapter copy closer to the image */
.current-body{
  padding-top:3.5vh !important;
}

/* Give much more air before the closing statement */
.current-body .closing{
  margin-top:26vh !important;
}

/* Mobile equivalents */
@media(max-width:900px){
  .current-body{
    padding-top:3vh !important;
  }
  .current-body .closing{
    margin-top:18vh !important;
  }
}


/* =========================================================
   V14 — final note emphasis + more breathing room
   ========================================================= */

.current-body .copy .soft-emphasis{
  font-family:var(--serif);
  font-size:1.16em;
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:normal;
}

.current-body .closing{
  margin-top:31vh !important;
}

@media(max-width:900px){
  .current-body .copy .soft-emphasis{
    font-size:1.12em;
  }
  .current-body .closing{
    margin-top:22vh !important;
  }
}


/* =========================================================
   V15 — Work narrative + balanced final spacing
   ========================================================= */

/* Work: credentials/locations are normal narrative, not metadata */
.work-narrative{
  margin-top:30px !important;
  font-size:clamp(16px,1.28vw,20px) !important;
  line-height:1.64 !important;
  letter-spacing:0 !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:300 !important;
}
.work-credentials{
  font-size:inherit !important;
  letter-spacing:0 !important;
  line-height:inherit !important;
  color:inherit !important;
}

/* Final cadence:
   current-chapter paragraph -> equal air -> A life lived
   -> equal air -> This is my journey */
.current-body .closing{
  margin-top:34vh !important;
}

/* Remove earlier first-person top spacing and match it to the same gap */
.first-person{
  padding-top:34vh !important;
}

/* Keep the journey block compact once it arrives */
.first-person .statement{
  margin-bottom:0 !important;
}
.first-person .seek{
  margin-top:12px !important;
}

@media(max-width:900px){
  .work-narrative{
    font-size:15px !important;
    line-height:1.7 !important;
  }
  .current-body .closing{
    margin-top:24vh !important;
  }
  .first-person{
    padding-top:24vh !important;
  }
}


/* =========================================================
   V16 — final Home desktop polish only
   ========================================================= */

.current-overlay{
  top:auto !important;
  bottom:7vh !important;
  left:6vw !important;
  right:auto !important;
  max-width:700px !important;
}
.current-overlay .chapter-number{
  color:rgba(255,255,255,.88) !important;
}
.current-overlay h2{
  color:rgba(255,255,255,.96) !important;
  text-shadow:0 2px 20px rgba(0,0,0,.34) !important;
}
.current-image::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.08) 35%,
    rgba(0,0,0,.28) 100%
  );
  pointer-events:none;
}

.site-nav{
  font-size:16px !important;
  letter-spacing:.15em !important;
}
.nav-links{gap:24px !important}

.father-photo{
  position:relative;
  width:min(940px,96%) !important;
  padding:16px 16px 42px !important;
  background:#f6f1e8 !important;
  box-shadow:
    0 18px 50px rgba(58,48,38,.18),
    0 2px 8px rgba(58,48,38,.10) !important;
  transform:rotate(-1.15deg) !important;
}
.father-photo::after{
  content:"";
  position:absolute;
  inset:16px 16px 42px;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(
      8deg,
      rgba(70,60,50,.10) 0px,
      rgba(70,60,50,.10) 1px,
      transparent 1px,
      transparent 4px
    );
}
.father-photo img{
  width:100%;
  display:block;
}
.father-caption{
  position:absolute;
  left:18px;
  bottom:13px;
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#7c7469;
  font-weight:300;
}

.second-media img{
  transform:scaleX(-1);
}

.first-person{
  padding-top:30.5vh !important;
}
.current-body .closing{
  margin-top:31vh !important;
}


/* =========================================================
   V27 — CLEAN MASTER STAGE SCROLLYTELLING
   Fresh from frozen V16 baseline. One sticky canvas; no overlapping stages.
   ========================================================= */
:root{--accent:#a37a43}
.accent{color:var(--accent)}

@media(min-width:901px){
  /* Hero and story meet on the same permanent dark field: no seam can move in. */
  .hero{background:var(--dark)!important}
  .master-story{
    position:relative;
    height:2050svh;
    margin:0;
    background:var(--dark);
  }
  .master-stage{
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
    background:var(--dark);
    isolation:isolate;
  }

  /* All scenes occupy the SAME stationary viewport. */
  .master-scene{
    --visual:0;--copy:0;--rule:0;--veil:0;
    --mx:0px;--my:0px;--ms:1;--mr:0deg;--cx:0px;--cy:0px;
    --rule-y:18px;--rule-scale:.992;
    position:absolute;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
  }
  /* Scene wrappers deliberately have no z-index: children share one stacking context. */
  .master-scene{z-index:auto}
  .scene-origins .master-chapter{z-index:10}
  .scene-work .master-chapter{z-index:20}
  .scene-father .master-chapter{z-index:30}
  .scene-second .master-chapter{z-index:40}
  .scene-auto .master-chapter{z-index:50}

  /* Future chapter visuals can crossfade underneath the outgoing prior lesson. */
  .master-chapter{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100svh!important;
    min-height:100svh!important;
    margin:0!important;
    opacity:var(--visual)!important;
    transition:none!important;
    will-change:opacity;
  }

  /* Kill v16's observer animation inside the master canvas only. */
  .master-story .fade{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  /* Copy has its own delayed timeline, independent of image/background. */
  .master-chapter .origins-copy,
  .master-chapter .work-copy,
  .master-chapter .father-copy,
  .master-chapter .second-copy,
  .master-chapter .auto-copy{
    opacity:var(--copy)!important;
    transform:translate3d(var(--cx),var(--cy),0)!important;
    transition:none!important;
    will-change:opacity,transform;
  }

  /* Noticeable but restrained editorial motion. */
  .master-chapter .origins-media,
  .master-chapter .work-image,
  .master-chapter .father-photo-wrap,
  .master-chapter .second-media,
  .master-chapter .auto-media{
    transform:translate3d(var(--mx),var(--my),0) scale(var(--ms)) rotate(var(--mr))!important;
    transform-origin:center center;
    transition:none!important;
    will-change:transform;
  }

  /* Preserve the approved physical print angle independently from wrapper parallax. */
  .scene-father .father-photo{transform:rotate(-1.15deg)!important}
  /* Preserve approved portrait flip. */
  .scene-second .second-media img{transform:scaleX(-1)!important}

  /* A stationary opacity veil only. It never slides or clips. */
  .master-dimmer{
    position:absolute;
    inset:0;
    z-index:100;
    background:#0e0f0d;
    opacity:var(--veil);
    pointer-events:none;
    transition:none;
    will-change:opacity;
  }

  /* Lessons sit above every chapter image, including the incoming next image. */
  .master-rule{
    position:absolute!important;
    inset:0!important;
    z-index:200;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:7vh 8vw!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
    background:transparent!important;
    color:rgba(255,255,255,.98)!important;
    opacity:var(--rule)!important;
    transform:translate3d(0,var(--rule-y),0) scale(var(--rule-scale))!important;
    transition:none!important;
    will-change:opacity,transform;
  }
  .master-rule>div{max-width:1140px!important;margin:0 auto!important}
  .master-rule p{
    margin:0!important;
    font-family:var(--serif)!important;
    font-size:clamp(40px,4.2vw,68px)!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
    font-weight:500!important;
    text-align:center!important;
    text-wrap:balance;
    text-shadow:0 3px 30px rgba(0,0,0,.46);
  }

  /* Current image is the final layer of the same canvas; no moving panel at the handoff. */
  .scene-current{
    --current-visual:0;--current-overlay:0;--current-overlay-y:18px;--current-y:20px;--current-scale:1.018;
  }
  .master-current-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:60;
    opacity:var(--current-visual)!important;
    transform:translate3d(0,var(--current-y),0) scale(var(--current-scale))!important;
    transform-origin:center center;
    transition:none!important;
    will-change:opacity,transform;
  }
  .master-current-image .current-overlay{
    opacity:var(--current-overlay)!important;
    transform:translate3d(0,var(--current-overlay-y),0)!important;
    transition:none!important;
  }

  /* After sticky storytelling ends, only approved warm ending remains in normal flow. */
  .current-tail{
    display:block!important;
    background:var(--warm)!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
  }

  /* Hero editorial statement fades smoothly; title/meta remain as approved. */
  .hero .hero-line{will-change:opacity,transform}
}

@media(max-width:900px){
  /* Mobile is intentionally restored to static chapter flow for later dedicated pass. */
  .master-story{height:auto!important;background:transparent!important}
  .master-stage{position:relative!important;height:auto!important;overflow:visible!important;background:transparent!important}
  .master-scene{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;z-index:auto!important}
  .master-chapter,.master-rule{position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;opacity:1!important;transform:none!important}
  .master-dimmer{display:none!important}
  .scene-current .master-current-image{position:relative!important;height:100svh!important;opacity:1!important;transform:none!important}
  .master-current-image .current-overlay{opacity:1!important;transform:none!important}
}


/* =========================================================
   V28 — typography + copy micro-adjustments only
   Baseline: V27 FULL. Scrollytelling architecture untouched.
   ========================================================= */

/* A) Current Chapter heading now uses EXACT chapter-heading typography. */
.current-overlay h2{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  letter-spacing:-.03em !important;
}

/* B) Chapter 4 phrase gets the exact same treatment as final reinvention emphasis. */
.second-copy .soft-emphasis{
  font-family:var(--serif);
  font-size:1.16em;
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.01em;
  color:inherit;
  white-space:normal;
}

/* Father intro keeps body typography; only cadence/spacing differentiates it. */
.father-copy .father-lead{
  margin-top:30px;
}

@media(max-width:900px){
  .second-copy .soft-emphasis{
    font-size:1.12em;
  }
}


/* =========================================================
   V29 — HOME FINAL
   Closing CTA visibility refinement only.
   No layout, sizing, spacing, copy or animation changes.
   ========================================================= */

/* Representation line: slightly stronger while staying understated. */
.current-body .contact-kicker{
  color:rgba(82,76,68,.68) !important;
}

/* CTA buttons: slightly stronger text + border contrast, same geometry. */
.current-body .actions a,
.current-body .buttons a{
  color:rgba(68,63,57,.82) !important;
  border-color:rgba(68,63,57,.34) !important;
}

/* Hover stays elegant but becomes a touch clearer. */
.current-body .actions a:hover,
.current-body .buttons a:hover{
  color:rgba(48,44,40,.96) !important;
  border-color:rgba(48,44,40,.52) !important;
}


/* =========================================================
   V31 TALENT BASE
   Scoped to Talent only. HOME remains untouched.
   ========================================================= */

body.talent-body{
  background:var(--warm) !important;
}

/* Entire Talent page uses the exact warm ending field from Home. */
.talent-body .talent-page,
.talent-body .talent-head,
.talent-body .gallery,
.talent-body .stats-wrap,
.talent-body .talent-cta,
.talent-body footer{
  background:var(--warm) !important;
}

/* Intro: agency-facing, no deck-like "selected images" language. */
.talent-body .talent-head{
  padding:18vh 8vw 8vh;
  max-width:1100px;
}

.talent-body .talent-kicker{
  margin-bottom:22px;
  color:#8e877b;
}

/* EXACT same typographic treatment as Home's "A life built..." statement. */
.talent-body .talent-head h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(42px,5.4vw,86px);
  line-height:.93;
  letter-spacing:-.035em;
  font-weight:500;
  color:var(--ink);
}

.talent-body .talent-lead{
  margin:34px 0 0;
  font-family:var(--serif);
  font-size:clamp(25px,2.1vw,35px);
  line-height:1.12;
  letter-spacing:-.018em;
  font-weight:500;
  color:var(--ink);
}

.talent-body .talent-desc{
  margin:16px 0 0;
  max-width:820px;
  color:#544e46;
  font-family:var(--sans);
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.65;
  font-weight:300;
}

/* Initial gallery base: only the two approved images. */
.talent-body .gallery{
  padding:2vh 8vw 12vh;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.talent-body .gallery figure{
  margin:0;
  overflow:hidden;
  background:transparent;
}

.talent-body .gallery img{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:none !important;
}

/* Measures stay functional, but no separate beige/white band. */
.talent-body .stats-wrap{
  padding:9vh 8vw 10vh;
  border-top:1px solid rgba(45,41,36,.10);
}

/* CTA uses the exact global .btn rules used on Home. */
.talent-body .talent-cta{
  padding:0 8vw 9vh;
  margin-top:0;
}

/* Remove any visual footer strip: same field, only restrained footer copy. */
.talent-body footer{
  border-top:0;
  padding-top:22px;
}

@media(max-width:900px){
  .talent-body .talent-head{
    padding:14vh 18px 7vh;
  }
  .talent-body .talent-head h1{
    font-size:clamp(34px,10vw,52px);
  }
  .talent-body .gallery{
    grid-template-columns:1fr;
    padding:1vh 18px 9vh;
    gap:18px;
  }
  .talent-body .stats-wrap{
    background:var(--warm) !important;
  }
  .talent-body .talent-cta{
    padding:0 18px 8vh;
  }
}


/* =========================================================
   V32 TALENT — CURATED GALLERY
   Home remains untouched.
   ========================================================= */

/* "all real": emphasis by typography only; amber remains exclusive to Home. */
.talent-body .talent-real{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:1.14em;
  line-height:1;
  font-weight:500;
  letter-spacing:-.018em;
  color:var(--ink);
}

/* Give the intro enough width to avoid a lonely final word. */
.talent-body .talent-desc{
  max-width:960px;
}

/*
  TALENT GALLERY
  Not a thumbnail grid. Each spread has its own proportions and rhythm.
*/
.talent-body .talent-gallery{
  background:var(--warm);
  padding:2vh 7vw 11vh;
  overflow:hidden;
}

.talent-body .gallery-spread{
  width:100%;
  display:grid;
  align-items:start;
  position:relative;
}

.talent-body .spread-opening{
  grid-template-columns:minmax(0,1.18fr) minmax(280px,.72fr);
  gap:clamp(44px,7vw,138px);
  padding:1vh 0 13vh;
}

.talent-body .spread-opening .photo-closeup{
  width:86%;
  justify-self:end;
  margin-top:14vh;
}

.talent-body .spread-physical{
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.12fr);
  gap:clamp(46px,8vw,150px);
  align-items:center;
  padding:4vh 2vw 16vh 5vw;
}

.talent-body .spread-physical .photo-detail{
  width:100%;
  align-self:center;
  transform:translateY(7vh);
}

.talent-body .spread-physical .photo-torso{
  width:88%;
  justify-self:end;
}

.talent-body .spread-lifestyle{
  grid-template-columns:minmax(0,.84fr) minmax(0,.84fr);
  gap:clamp(54px,9vw,170px);
  padding:2vh 5vw 8vh 1vw;
}

.talent-body .spread-lifestyle .photo-jacket{
  width:88%;
}

.talent-body .spread-lifestyle .photo-blue{
  width:86%;
  justify-self:end;
  margin-top:15vh;
}

/*
  A small warm "mat" and feathered edge integrate photographs into the page
  instead of presenting them as hard rectangular tiles.
*/
.talent-body .talent-photo{
  margin:0;
  position:relative;
  background:transparent;
}

.talent-body .photo-shell{
  position:relative;
  padding:clamp(6px,.5vw,10px);
  background:var(--warm);
  overflow:hidden;
}

.talent-body .photo-shell img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:none !important;
}

/* Soft warm edge — intentionally subtle, not a visible vignette or frame. */
.talent-body .photo-shell::after{
  content:"";
  position:absolute;
  inset:clamp(6px,.5vw,10px);
  pointer-events:none;
  box-shadow:
    inset 0 0 18px 5px rgba(238,233,223,.24),
    inset 0 0 5px 1px rgba(238,233,223,.18);
}

/* The B&W close-up stays crisp but is visually integrated with the warm field. */
.talent-body .photo-closeup .photo-shell::after{
  box-shadow:
    inset 0 0 22px 6px rgba(238,233,223,.30),
    inset 0 0 6px 1px rgba(238,233,223,.18);
}

/* Detail shot behaves more like an editorial insert than a hero image. */
.talent-body .photo-detail .photo-shell{
  padding:clamp(8px,.65vw,12px);
}

/* Casting block remains on the exact same warm field. */
.talent-body .stats-wrap{
  border-top:1px solid rgba(45,41,36,.10);
}

/* Talent buttons: exact visible contrast values of the approved Home CTA. */
.talent-body .talent-cta .btn{
  color:rgba(68,63,57,.82) !important;
  border-color:rgba(68,63,57,.34) !important;
}
.talent-body .talent-cta .btn:hover{
  color:rgba(48,44,40,.96) !important;
  border-color:rgba(48,44,40,.52) !important;
}

@media(max-width:900px){
  .talent-body .talent-gallery{
    padding:1vh 18px 8vh;
  }

  .talent-body .gallery-spread{
    grid-template-columns:1fr;
    gap:26px;
    padding:0 0 8vh;
  }

  .talent-body .spread-opening .photo-closeup,
  .talent-body .spread-physical .photo-detail,
  .talent-body .spread-physical .photo-torso,
  .talent-body .spread-lifestyle .photo-jacket,
  .talent-body .spread-lifestyle .photo-blue{
    width:100%;
    justify-self:stretch;
    margin-top:0;
    transform:none;
  }

  .talent-body .photo-shell{
    padding:6px;
  }

  .talent-body .photo-shell::after{
    inset:6px;
  }
}


/* =========================================================
   V33 TALENT — HIERARCHY PASS
   Home untouched.
   ========================================================= */

/* STATS naming */
.talent-body .stats-wrap h2{
  white-space:nowrap;
}

/* Replace v32 spread behavior with a true curated sequence. */
.talent-body .talent-gallery{
  padding:2vh 6vw 12vh !important;
  overflow:hidden;
}

.talent-body .gallery-spread{
  display:none !important;
}

.talent-body .gallery-block{
  position:relative;
  width:100%;
  margin:0;
}

/* 1) Ivy: large, left-anchored statement */
.talent-body .block-ivy{
  padding:2vh 0 16vh;
}
.talent-body .block-ivy .photo-ivy{
  width:min(74vw,1220px);
  margin-left:0;
}

/* 2) Face: large enough to be inspected, right-shifted for asymmetry */
.talent-body .block-closeup{
  padding:2vh 0 17vh;
  display:flex;
  justify-content:flex-end;
}
.talent-body .block-closeup .photo-closeup{
  width:min(60vw,920px);
  margin-right:3vw;
}

/* 3) Steering-wheel detail: a wide interlude, never a thumbnail */
.talent-body .block-detail{
  padding:0 0 17vh;
  display:flex;
  justify-content:center;
}
.talent-body .block-detail .photo-detail{
  width:min(76vw,1280px);
}

/* 4) Torso: major visual statement, shifted right */
.talent-body .block-torso{
  padding:1vh 0 18vh;
  display:flex;
  justify-content:flex-end;
}
.talent-body .block-torso .photo-torso{
  width:min(62vw,930px);
  margin-right:2vw;
}

/* 5) Only true pair: lifestyle range */
.talent-body .block-pair{
  padding:1vh 2vw 8vh;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,.88fr);
  gap:clamp(58px,9vw,170px);
  align-items:start;
}
.talent-body .block-pair .photo-jacket{
  width:90%;
}
.talent-body .block-pair .photo-blue{
  width:88%;
  justify-self:end;
  margin-top:13vh;
}

/* No hard frame; use the warm page field itself as a feather. */
.talent-body .photo-shell{
  position:relative;
  padding:0 !important;
  background:transparent !important;
  overflow:hidden;
}

.talent-body .photo-shell img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:none !important;
}

/*
  Visible but restrained edge integration.
  Unlike v32's inset shadow, this is a true warm fade into the page.
*/
.talent-body .photo-shell::after{
  --feather:32px;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:none !important;
  background:
    linear-gradient(to right,  var(--warm) 0, rgba(238,233,223,0) var(--feather)),
    linear-gradient(to left,   var(--warm) 0, rgba(238,233,223,0) var(--feather)),
    linear-gradient(to bottom, var(--warm) 0, rgba(238,233,223,0) var(--feather)),
    linear-gradient(to top,    var(--warm) 0, rgba(238,233,223,0) var(--feather));
}

/* Tailor the feather slightly by image type so it does not feel like a filter. */
.talent-body .photo-closeup .photo-shell::after{
  --feather:38px;
}
.talent-body .photo-detail .photo-shell::after{
  --feather:26px;
}
.talent-body .photo-ivy .photo-shell::after,
.talent-body .photo-jacket .photo-shell::after{
  --feather:24px;
}
.talent-body .photo-torso .photo-shell::after{
  --feather:34px;
}

/* Keep the page background continuous through STATS and footer. */
.talent-body .stats-wrap,
.talent-body .talent-cta,
.talent-body footer{
  background:var(--warm) !important;
}

/* Mobile: one deliberate sequence, no offsets. */
@media(max-width:900px){
  .talent-body .talent-gallery{
    padding:1vh 18px 8vh !important;
  }

  .talent-body .gallery-block,
  .talent-body .block-closeup,
  .talent-body .block-detail,
  .talent-body .block-torso{
    display:block;
    padding:0 0 8vh;
  }

  .talent-body .block-ivy .photo-ivy,
  .talent-body .block-closeup .photo-closeup,
  .talent-body .block-detail .photo-detail,
  .talent-body .block-torso .photo-torso,
  .talent-body .block-pair .photo-jacket,
  .talent-body .block-pair .photo-blue{
    width:100%;
    margin:0;
  }

  .talent-body .block-pair{
    grid-template-columns:1fr;
    gap:28px;
    padding:0 0 5vh;
  }

  .talent-body .photo-shell::after{
    --feather:20px;
  }
}


/* =========================================================
   V34 — MEV LINK INTERACTION FIX ONLY
   ========================================================= */
@media(min-width:901px){
  .scene-auto .mev-link{
    pointer-events:auto;
    position:relative;
    z-index:70;
  }
}


/* =========================================================
   V37 — DECK LINK CLICK SAFETY
   ========================================================= */
a[data-deck-link="true"]{
  pointer-events:auto !important;
  position:relative;
  z-index:250 !important;
}
.site-nav{
  pointer-events:auto !important;
}
.talent-body .talent-cta{
  position:relative;
  z-index:250;
}


/* =========================================================
   V40 — MOBILE HOME SCROLLYTELLING
   Mobile-only. Desktop V38 and Talent remain untouched.
   One sticky canvas, photo-specific framing, no stacked blocks.
   ========================================================= */
@media(max-width:900px){
  .home-body{
    background:var(--dark) !important;
  }

  /* Keep the approved hero hierarchy, but make the mobile field feel deliberate. */
  .home-body .hero{
    min-height:100svh !important;
    background:var(--dark) !important;
  }
  .home-body .hero-inner{
    min-height:100svh !important;
    padding:7svh 20px 8svh !important;
  }
  .home-body .hero h1{
    font-size:clamp(36px,10.5vw,46px) !important;
  }
  .home-body .hero-line{
    top:56% !important;
    width:calc(100% - 42px) !important;
    font-size:clamp(34px,9.5vw,46px) !important;
    line-height:.96 !important;
  }

  /* One stationary canvas for the entire mobile story. */
  .home-body .master-story{
    position:relative !important;
    height:1850svh !important;
    margin:0 !important;
    background:var(--dark) !important;
  }
  .home-body .master-stage{
    position:sticky !important;
    top:0 !important;
    height:100svh !important;
    overflow:hidden !important;
    background:var(--dark) !important;
    isolation:isolate !important;
  }
  .home-body .master-scene{
    --visual:0;--copy:0;--rule:0;--veil:0;
    --mx:0px;--my:0px;--ms:1;--mr:0deg;--cx:0px;--cy:0px;
    --rule-y:18px;--rule-scale:.992;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    z-index:auto !important;
    pointer-events:none !important;
  }
  .home-body .scene-origins .master-chapter{z-index:10 !important}
  .home-body .scene-work .master-chapter{z-index:20 !important}
  .home-body .scene-father .master-chapter{z-index:30 !important}
  .home-body .scene-second .master-chapter{z-index:40 !important}
  .home-body .scene-auto .master-chapter{z-index:50 !important}

  .home-body .master-chapter{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    opacity:var(--visual) !important;
    transform:none !important;
    transition:none !important;
    overflow:hidden !important;
    will-change:opacity !important;
  }

  /* Disable generic intersection reveals inside the sticky story. */
  .home-body .master-story .fade{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .home-body .master-chapter .origins-copy,
  .home-body .master-chapter .work-copy,
  .home-body .master-chapter .father-copy,
  .home-body .master-chapter .second-copy,
  .home-body .master-chapter .auto-copy{
    opacity:var(--copy) !important;
    transform:translate3d(var(--cx),var(--cy),0) !important;
    transition:none !important;
    will-change:opacity,transform !important;
  }

  .home-body .master-chapter .origins-media,
  .home-body .master-chapter .work-image,
  .home-body .master-chapter .father-photo-wrap,
  .home-body .master-chapter .second-media,
  .home-body .master-chapter .auto-media{
    transform:translate3d(var(--mx),var(--my),0) scale(var(--ms)) rotate(var(--mr)) !important;
    transform-origin:center center !important;
    transition:none !important;
    will-change:transform !important;
  }

  /* Shared mobile type: readable, compact, never shouting. */
  .home-body .master-chapter .chapter-number{
    font-size:10px !important;
    line-height:1.25 !important;
    letter-spacing:.19em !important;
  }
  .home-body .master-chapter h2{
    margin-top:12px !important;
    font-size:clamp(34px,9.2vw,43px) !important;
    line-height:.98 !important;
  }
  .home-body .master-chapter p{
    font-size:clamp(14px,3.75vw,16px) !important;
    line-height:1.55 !important;
  }

  /* ORIGINS — portrait can carry the viewport; approved crop retained. */
  .home-body .origins{
    display:block !important;
    background:var(--dark) !important;
    color:var(--light) !important;
  }
  .home-body .origins-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .home-body .origins-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 42% !important;
  }
  .home-body .origins-media::after{
    display:block !important;
    background:
      linear-gradient(180deg,rgba(14,15,13,0) 32%,rgba(14,15,13,.12) 48%,rgba(14,15,13,.68) 72%,rgba(14,15,13,.98) 100%) !important;
  }
  .home-body .origins-copy{
    position:absolute !important;
    z-index:3 !important;
    left:22px !important;
    right:22px !important;
    bottom:7.5svh !important;
    max-width:none !important;
  }
  .home-body .origins p{margin-top:18px !important}

  /* WORK — horizontal image stays horizontal; no accidental vertical crop. */
  .home-body .work{
    display:block !important;
    background:var(--dark2) !important;
    color:var(--light) !important;
  }
  .home-body .work-image{
    position:absolute !important;
    inset:auto 0 auto 0 !important;
    top:8.5svh !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .home-body .work-image img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  .home-body .work-image::after{
    background:linear-gradient(180deg,rgba(21,22,19,0) 58%,rgba(21,22,19,.24) 78%,var(--dark2) 100%) !important;
  }
  .home-body .work-copy{
    position:absolute !important;
    z-index:3 !important;
    left:22px !important;
    right:22px !important;
    top:45svh !important;
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
  }
  .home-body .work p,
  .home-body .work-narrative{
    margin-top:17px !important;
    font-size:clamp(13.5px,3.55vw,15.5px) !important;
    line-height:1.5 !important;
  }
  .home-body .work-copy p[style]{margin-top:17px !important}

  /* FATHER — archival photograph remains complete and physically framed. */
  .home-body .father{
    display:block !important;
    background:#d6cec1 !important;
    color:var(--ink) !important;
  }
  .home-body .father-photo-wrap{
    position:absolute !important;
    left:20px !important;
    right:20px !important;
    top:8.5svh !important;
    width:auto !important;
    display:block !important;
  }
  .home-body .father-photo{
    width:100% !important;
    padding:10px 10px 30px !important;
    transform:rotate(-.75deg) !important;
  }
  .home-body .father-photo::after{
    inset:10px 10px 30px !important;
  }
  .home-body .father-caption{
    left:12px !important;
    bottom:8px !important;
    font-size:8px !important;
  }
  .home-body .father-copy{
    position:absolute !important;
    z-index:3 !important;
    left:22px !important;
    right:22px !important;
    top:49svh !important;
    max-width:none !important;
  }
  .home-body .father h2{font-size:clamp(33px,8.8vw,41px) !important}
  .home-body .father p,
  .home-body .father-copy .father-lead{
    margin-top:17px !important;
    font-size:clamp(13.5px,3.55vw,15.5px) !important;
    line-height:1.5 !important;
  }
  .home-body .father-copy p[style]{margin-top:17px !important}

  /* SECOND CHANCE — portrait crop is strong; keep it cinematic and legible. */
  .home-body .second{
    display:block !important;
    background:var(--dark) !important;
    color:var(--light) !important;
  }
  .home-body .second-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .home-body .second-media img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 42% !important;
    transform:scaleX(-1) !important;
  }
  .home-body .second-media::after{
    background:linear-gradient(180deg,rgba(14,15,13,.02) 0%,rgba(14,15,13,.06) 38%,rgba(14,15,13,.70) 72%,rgba(14,15,13,.98) 100%) !important;
  }
  .home-body .second-copy{
    position:absolute !important;
    z-index:3 !important;
    left:22px !important;
    right:22px !important;
    bottom:6.5svh !important;
    display:block !important;
    padding:0 !important;
  }
  .home-body .second p{margin-top:17px !important}
  .home-body .second-copy p[style]{margin-top:17px !important}

  /* AUTOMOTIVE — preserve 16:9 frame and keep copy attached to it. */
  .home-body .auto{
    display:block !important;
    background:var(--dark) !important;
    color:var(--light) !important;
  }
  .home-body .auto-media{
    position:absolute !important;
    inset:auto 0 auto 0 !important;
    top:10svh !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .home-body .auto-media img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  .home-body .auto-media::after{
    background:linear-gradient(180deg,rgba(14,15,13,0) 55%,rgba(14,15,13,.26) 78%,var(--dark) 100%) !important;
  }
  .home-body .auto-copy{
    position:absolute !important;
    z-index:3 !important;
    left:22px !important;
    right:22px !important;
    top:41svh !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  .home-body .auto h2{font-size:clamp(34px,9vw,42px) !important}
  .home-body .auto p{
    margin-top:17px !important;
    font-size:clamp(13px,3.45vw,15px) !important;
    line-height:1.48 !important;
  }
  .home-body .mev-link{
    margin-top:18px !important;
    font-size:9px !important;
  }

  /* The dimmer and lesson are layers of the SAME scene, not new blocks. */
  .home-body .master-dimmer{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:100 !important;
    background:#0e0f0d !important;
    opacity:var(--veil) !important;
    transition:none !important;
    pointer-events:none !important;
  }
  .home-body .master-rule{
    position:absolute !important;
    inset:0 !important;
    z-index:200 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 24px !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
    background:transparent !important;
    color:rgba(255,255,255,.98) !important;
    opacity:var(--rule) !important;
    transform:translate3d(0,var(--rule-y),0) scale(var(--rule-scale)) !important;
    transition:none !important;
    will-change:opacity,transform !important;
  }
  .home-body .master-rule > div{
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
  }
  .home-body .master-rule p{
    margin:0 !important;
    font-family:var(--serif) !important;
    font-size:clamp(29px,8.2vw,38px) !important;
    line-height:1.07 !important;
    letter-spacing:-.025em !important;
    font-weight:500 !important;
    text-align:left !important;
    text-wrap:balance !important;
    color:rgba(255,255,255,.96) !important;
    text-shadow:0 3px 28px rgba(0,0,0,.55) !important;
  }

  /* CURRENT — color remains the destination; crop is shifted left to preserve the face. */
  .home-body .scene-current{
    --current-visual:0;--current-overlay:0;--current-overlay-y:18px;--current-y:10px;--current-scale:1.01;
  }
  .home-body .scene-current .master-current-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:60 !important;
    opacity:var(--current-visual) !important;
    transform:translate3d(0,var(--current-y),0) scale(var(--current-scale)) !important;
    transform-origin:center center !important;
    transition:none !important;
    overflow:hidden !important;
  }
  .home-body .master-current-image img{
    width:100% !important;
    height:68svh !important;
    object-fit:cover !important;
    object-position:20% 50% !important;
    filter:none !important;
  }
  .home-body .master-current-image::before{
    height:38% !important;
    bottom:32svh !important;
  }
  .home-body .master-current-image::after{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.03) 48%,
        rgba(238,233,223,.16) 60%,
        rgba(238,233,223,.82) 72%,
        var(--warm) 82%,
        var(--warm) 100%) !important;
  }
  .home-body .master-current-image .current-overlay{
    left:22px !important;
    right:22px !important;
    top:auto !important;
    bottom:35svh !important;
    max-width:300px !important;
    opacity:var(--current-overlay) !important;
    transform:translate3d(0,var(--current-overlay-y),0) !important;
    transition:none !important;
  }
  .home-body .current-overlay h2{
    margin-top:10px !important;
    font-size:clamp(35px,9.2vw,43px) !important;
    line-height:.96 !important;
  }

  /* Warm ending returns to normal document flow after the sticky story. */
  .home-body .current-tail{
    display:block !important;
    position:relative !important;
    background:var(--warm) !important;
    color:var(--ink) !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
  }
  .home-body .current-body{
    padding:5svh 22px 0 !important;
  }
  .home-body .current-body .copy p{
    font-size:16px !important;
    line-height:1.62 !important;
  }
  .home-body .current-body .closing{
    margin-top:20svh !important;
    font-size:clamp(40px,10.5vw,50px) !important;
  }
  .home-body .current-body .echo{
    font-size:clamp(21px,6vw,27px) !important;
  }
  .home-body .first-person{
    padding:20svh 22px 10svh !important;
  }
}

/* Short mobile screens: preserve the same grammar while tightening copy blocks. */
@media(max-width:900px) and (max-height:740px){
  .home-body .work-copy{top:42svh !important}
  .home-body .father-photo-wrap{top:7svh !important}
  .home-body .father-copy{top:47svh !important}
  .home-body .auto-media{top:8svh !important}
  .home-body .auto-copy{top:37svh !important}
  .home-body .master-chapter p{font-size:13.5px !important;line-height:1.44 !important}
  .home-body .master-chapter h2{font-size:34px !important}
  .home-body .master-rule p{font-size:29px !important}
}

/* =========================================================
   V41 — MOBILE HOME RHYTHM + CURRENT HANDOFF
   Mobile-only refinements over V40. Desktop V38 remains frozen.
   ========================================================= */
@media(max-width:900px){
  /* Slightly longer physical scroll: same story, more cinematic breathing room. */
  .home-body .master-story{
    height:2050svh !important;
  }

  /* Horizontal chapters: attach copy to the photograph sooner. */
  .home-body .work-copy{top:41.5svh !important}
  .home-body .father-copy{top:45.5svh !important}
  .home-body .auto-copy{top:37.5svh !important}

  /* Current: fill the final sticky viewport with the photograph so the stage
     never collapses into a large empty cream field before the body copy. */
  .home-body .scene-current .master-current-image{
    background:var(--warm) !important;
  }
  .home-body .master-current-image img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:20% 50% !important;
  }
  .home-body .master-current-image::before{
    inset:auto 0 0 0 !important;
    height:46% !important;
    bottom:0 !important;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.24) 100%) !important;
  }
  .home-body .master-current-image::after{
    inset:0 !important;
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 68%,
      rgba(238,233,223,.10) 77%,
      rgba(238,233,223,.55) 89%,
      var(--warm) 100%) !important;
  }
  .home-body .master-current-image .current-overlay{
    bottom:15svh !important;
    top:auto !important;
  }

  /* Seamless handoff from the photograph's warm fade into the final copy. */
  .home-body .current-tail{
    border-top:0 !important;
    box-shadow:none !important;
  }
  .home-body .current-body{
    padding-top:5.5svh !important;
  }
}

@media(max-width:900px) and (max-height:740px){
  .home-body .work-copy{top:39svh !important}
  .home-body .father-copy{top:44svh !important}
  .home-body .auto-copy{top:34.5svh !important}
  .home-body .master-current-image .current-overlay{bottom:13svh !important}
}


/* =========================================================
   V42 — MOBILE HOME FINAL BREATH + CURRENT SEAM FIX
   Mobile-only. No desktop or Talent changes.
   ========================================================= */
@media(max-width:900px){
  /* Current photo layer overscans the sticky viewport by a few pixels so its
     animated transform can never expose the dark stage at the warm handoff. */
  .home-body .scene-current .master-current-image{
    inset:-8px 0 -8px 0 !important;
    width:100% !important;
    height:auto !important;
  }

  /* Restore a longer, continuous photographic dissolve into the exact warm field. */
  .home-body .master-current-image::after{
    inset:0 !important;
    background:linear-gradient(180deg,
      rgba(238,233,223,0) 0%,
      rgba(238,233,223,0) 57%,
      rgba(238,233,223,.08) 67%,
      rgba(238,233,223,.24) 76%,
      rgba(238,233,223,.48) 84%,
      rgba(238,233,223,.76) 92%,
      var(--warm) 100%) !important;
  }

  /* Preserve the approved on-screen title position despite the 8px overscan. */
  .home-body .master-current-image .current-overlay{
    bottom:calc(15svh + 8px) !important;
  }

  /* Sub-pixel rounding insurance: the warm ending overlaps the sticky canvas
     by a few pixels, preventing any dark seam on mobile browsers. */
  .home-body .current-tail{
    position:relative !important;
    z-index:80 !important;
    border-top:0 !important;
    box-shadow:none !important;
  }
  .home-body .current-tail::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    top:-6px;
    height:8px;
    background:var(--warm);
    pointer-events:none;
  }
  .home-body .current-tail > *{
    position:relative;
    z-index:1;
  }
}

@media(max-width:900px) and (max-height:740px){
  .home-body .master-current-image .current-overlay{
    bottom:calc(13svh + 8px) !important;
  }
}

/* =========================================================
   V43 — MOBILE HOME FLOATING NAV LEGIBILITY
   Mobile Home only. Keeps the nav floating while protecting
   legibility over photographs and story copy.
   ========================================================= */
@media(max-width:900px){
  .home-body .site-nav{
    mix-blend-mode:normal !important;
    color:#fff !important;
    background:transparent !important;
    isolation:isolate !important;
    padding-top:calc(18px + env(safe-area-inset-top)) !important;
  }

  .home-body .site-nav::before{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    top:0;
    left:0;
    right:0;
    height:calc(88px + env(safe-area-inset-top));
    background:linear-gradient(180deg,
      rgba(7,8,7,.88) 0%,
      rgba(7,8,7,.78) 30%,
      rgba(7,8,7,.52) 56%,
      rgba(7,8,7,.20) 78%,
      rgba(7,8,7,0) 100%);
  }

  .home-body .site-nav .nav-links{
    position:relative;
    z-index:1;
  }

  .home-body .site-nav .nav-links a{
    opacity:.88 !important;
    text-shadow:0 1px 10px rgba(0,0,0,.28);
  }
}

/* =========================================================
   V44 — MOBILE TALENT FLOATING NAV LEGIBILITY
   Talent mobile only. Mirrors the approved V43 Home nav treatment.
   ========================================================= */
@media(max-width:900px){
  .talent-body .site-nav{
    mix-blend-mode:normal !important;
    color:#fff !important;
    background:transparent !important;
    isolation:isolate !important;
    padding-top:calc(18px + env(safe-area-inset-top)) !important;
  }

  .talent-body .site-nav::before{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    top:0;
    left:0;
    right:0;
    height:calc(88px + env(safe-area-inset-top));
    background:linear-gradient(180deg,
      rgba(7,8,7,.88) 0%,
      rgba(7,8,7,.78) 30%,
      rgba(7,8,7,.52) 56%,
      rgba(7,8,7,.20) 78%,
      rgba(7,8,7,0) 100%);
  }

  .talent-body .site-nav .nav-links{
    position:relative;
    z-index:1;
  }

  .talent-body .site-nav .nav-links a{
    opacity:.88 !important;
    text-shadow:0 1px 10px rgba(0,0,0,.28);
  }
}

/* =========================================================
   V45 — TABLET PORTRAIT HOME COMPOSITION FIX
   Home only. 601–900px portrait. Mobile phones, tablet landscape,
   desktop and Talent remain on their approved V44 behavior.
   Horizontal photographs keep their full composition; chapter copy
   sits immediately below the image instead of being compressed over it.
   ========================================================= */
@media (min-width:601px) and (max-width:900px) and (orientation:portrait){
  /* Work — preserve the complete 3:2 frame, then use the lower viewport for copy. */
  .home-body .work-image{
    top:7.5svh !important;
  }
  .home-body .work-copy{
    left:40px !important;
    right:40px !important;
    top:60svh !important;
    max-width:680px !important;
  }
  .home-body .work h2{
    font-size:46px !important;
    line-height:1 !important;
  }
  .home-body .work p,
  .home-body .work-narrative{
    font-size:16.5px !important;
    line-height:1.52 !important;
  }

  /* Father — the archival photograph remains complete; copy begins beneath the print. */
  .home-body .father-photo-wrap{
    top:7svh !important;
  }
  .home-body .father-copy{
    left:40px !important;
    right:40px !important;
    top:65svh !important;
    max-width:680px !important;
  }
  .home-body .father h2{
    font-size:45px !important;
    line-height:1 !important;
  }
  .home-body .father p,
  .home-body .father-copy .father-lead{
    font-size:16.5px !important;
    line-height:1.52 !important;
  }

  /* Automotive — retain the full 16:9 image and attach the narrative directly below it. */
  .home-body .auto-media{
    top:8svh !important;
  }
  .home-body .auto-copy{
    left:40px !important;
    right:40px !important;
    top:53svh !important;
    max-width:680px !important;
  }
  .home-body .auto h2{
    font-size:46px !important;
    line-height:1 !important;
  }
  .home-body .auto p{
    font-size:16.5px !important;
    line-height:1.5 !important;
  }
  .home-body .mev-link{
    margin-top:18px !important;
    font-size:10px !important;
  }

  /* Slightly stronger tablet reading scale for labels while retaining the approved hierarchy. */
  .home-body .work .chapter-number,
  .home-body .father .chapter-number,
  .home-body .auto .chapter-number{
    font-size:11px !important;
  }
}

/* =========================================================
   V46 — RESPONSIVE FLOATING NAV GRADIENT RESTORE
   Restores the approved V43/V44 nav veil robustly on Home and Talent
   through the full <=900px responsive range, including tablet portrait.
   No story, gallery, breakpoint-composition or timing changes.
   ========================================================= */
@media(max-width:900px){
  .home-body .site-nav,
  .talent-body .site-nav{
    mix-blend-mode:normal !important;
    color:#fff !important;
    background:transparent !important;
    isolation:isolate !important;
  }

  .home-body .site-nav::before,
  .talent-body .site-nav::before{
    content:"";
    position:absolute;
    z-index:0 !important;
    pointer-events:none;
    top:0;
    left:0;
    right:0;
    height:calc(88px + env(safe-area-inset-top));
    background:linear-gradient(180deg,
      rgba(7,8,7,.88) 0%,
      rgba(7,8,7,.78) 30%,
      rgba(7,8,7,.52) 56%,
      rgba(7,8,7,.20) 78%,
      rgba(7,8,7,0) 100%) !important;
  }

  .home-body .site-nav .nav-links,
  .talent-body .site-nav .nav-links{
    position:relative;
    z-index:2 !important;
  }

  .home-body .site-nav .nav-links a,
  .talent-body .site-nav .nav-links a{
    position:relative;
    z-index:3;
    color:#fff !important;
    opacity:.88 !important;
    text-shadow:0 1px 10px rgba(0,0,0,.28);
  }
}

/* =========================================================
   V47 — DESKTOP/LAPTOP CURRENT SEAM FIX
   Surgical fix only for >900px. Mirrors the resolved mobile
   handoff insurance without changing image, timing or layout.
   ========================================================= */
@media(min-width:901px){
  .home-body .current-tail{
    position:relative !important;
    z-index:80 !important;
    border-top:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .home-body .current-tail::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    top:-12px;
    height:14px;
    background:var(--warm);
    pointer-events:none;
  }
  .home-body .current-tail > *{
    position:relative;
    z-index:1;
  }
}


/* HERO VIDEO ONLY — added on top of V47; no other layout rules changed */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  pointer-events:none;
}
.hero::before{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(7,8,7,.52) 0%,rgba(7,8,7,.25) 44%,rgba(7,8,7,.14) 72%,rgba(7,8,7,.30) 100%),
    linear-gradient(180deg,rgba(7,8,7,.20) 0%,rgba(7,8,7,.05) 46%,rgba(7,8,7,.44) 100%);
  pointer-events:none;
}
.hero-inner{z-index:2}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero::before{
    background:
      radial-gradient(900px 500px at 76% 45%,rgba(255,255,255,.055),transparent 50%),
      linear-gradient(135deg,#10110f 0%,#090a08 58%,#121310 100%);
  }
}

/* =========================================================
   FINAL IPHONE FATHER CLEARANCE FIX
   Phones only. Keeps the Father chapter copy below the archival print.
   No tablet, desktop, Talent or other chapter changes.
   ========================================================= */
@media (max-width:600px){
  .home-body .father-copy{
    top:56svh !important;
  }
}

@media (max-width:600px) and (max-height:740px){
  .home-body .father-copy{
    top:54svh !important;
  }
}

/* =========================================================
   FINAL IPHONE WORK CLEARANCE FIX
   Phones only. Keeps Work chapter copy clearly below the horizontal image.
   No tablet, desktop, Talent or other chapter changes.
   ========================================================= */
@media (max-width:600px){
  .home-body .work-copy{
    top:47svh !important;
  }
}

@media (max-width:600px) and (max-height:740px){
  .home-body .work-copy{
    top:45svh !important;
  }
}

/* =========================================================
   PRODUCTION IPHONE ROBUST IMAGE/COPY CLEARANCE
   Phones only. Position copy from the actual responsive image geometry
   instead of viewport-height alone, so Safari chrome differences between
   iPhone generations do not cause image/text overlap.
   ========================================================= */
@media (max-width:600px){
  /* work.jpg is 3:2 and displayed at full viewport width. */
  .home-body .work-copy{
    top:calc(8.5svh + 66.7vw + 32px) !important;
  }

  /* Father print is viewport width minus 40px; its 4:3 image plus the
     approved paper padding works out to approximately 75vw - 5px tall. */
  .home-body .father-copy{
    top:calc(8.5svh + 75vw + 20px) !important;
  }
}

/* =========================================================
   FINAL PHONE IMAGE/COPY CLEARANCE — WORK / FATHER / AUTOMOTIVE
   Phones only (<=600px). This is the final override and intentionally
   comes last so earlier mobile rhythm rules cannot reintroduce overlap.
   Positions copy from each responsive image's actual aspect-ratio geometry,
   plus a fixed reading clearance. No tablet, desktop, Talent, Current,
   hero, media, animation or timing rules are changed here.
   ========================================================= */
@media (max-width:600px){
  /* WORK: image begins at 8.5svh and is full-width 3:2 (66.67vw high).
     Add 52px clear air below the visible photograph/fade. */
  .home-body .work-copy{
    top:calc(8.5svh + 66.67vw + 52px) !important;
  }

  /* FATHER: framed print begins at 8.5svh; responsive print geometry,
     including its paper treatment, is approximately 75vw high.
     Preserve the now-approved spacing, with a small 28px safety gap
     for Safari differences across iPhone generations. */
  .home-body .father-copy{
    top:calc(8.5svh + 75vw + 28px) !important;
  }

  /* AUTOMOTIVE: 16:9 image, full viewport width. Earlier phone rules may
     place the media at 8–10svh depending on available height; anchoring
     from 10svh safely clears both cases. */
  .home-body .auto-copy{
    top:calc(10svh + 56.25vw + 42px) !important;
  }
}