:root{
  --cream:#f3ece2;
  --paper:#e8ddcf;
  --burgundy:#633538;
  --burgundy-deep:#452326;
  --ink:#191716;
  --line:rgba(25,23,22,.28);
  --cream-line:rgba(243,236,226,.35);
  --pad:clamp(22px,3vw,54px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--burgundy-deep)}
body{margin:0;font-family:"Montserrat",Arial,sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.topbar{position:fixed;left:0;right:0;top:0;z-index:9000;height:106px;padding:10px var(--pad);display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:white;pointer-events:none}
.wordmark,.menu-trigger{pointer-events:auto}
.wordmark{width:64px;height:94px;display:grid;place-items:center;overflow:visible;flex:0 0 auto}
.wordmark img{width:100%;height:100%;object-fit:contain;object-position:center;filter:grayscale(1) brightness(0) invert(1);display:block}
.menu-trigger,.menu-close{border:0;background:none;color:inherit;font-size:11px;font-weight:800;letter-spacing:.16em;cursor:pointer}
.menu-panel{position:fixed;inset:0;z-index:9500;background:var(--burgundy);color:var(--cream);padding:30px var(--pad);display:grid;grid-template-rows:auto 1fr auto;transform:translateY(-105%);transition:transform .6s cubic-bezier(.77,0,.18,1)}
.menu-panel.open{transform:translateY(0)}
.menu-close{justify-self:end}
.menu-panel nav{align-self:center;display:flex;flex-direction:column;border-top:1px solid var(--cream-line)}
.menu-panel nav a{display:flex;gap:24px;align-items:center;border-bottom:1px solid var(--cream-line);font-size:clamp(44px,7vw,112px);font-weight:700;line-height:.9;padding:10px 0;letter-spacing:-.055em}
.menu-panel nav a span{font-size:10px;letter-spacing:.12em;min-width:28px}
.menu-meta{display:flex;gap:25px;flex-wrap:wrap;font-size:10px;font-weight:700;letter-spacing:.12em}
/* True sticky full-page slide stack.
   Each section pins to the viewport while the next section rises over it. */
.stack-section{
  position:sticky;
  top:0;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
}
.stack-section>.page{
  position:relative;
  top:auto;
  width:100%;
  height:100%;
  min-height:100svh;
  overflow:hidden;
  padding:118px var(--pad) 34px;
  border-radius:0;
  box-shadow:0 -24px 70px rgba(28,15,15,.22);
  will-change:transform;
}
.stack-section:first-child>.page{border-radius:0;box-shadow:none}
.theme-cream .page{background:var(--cream);color:var(--ink)}
.theme-paper .page{background:var(--paper);color:var(--ink)}
.theme-burgundy .page{background:var(--burgundy);color:var(--cream)}
.page{isolation:isolate}
.hero-top,.section-rule{display:flex;justify-content:space-between;gap:24px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:9px;font-weight:700;letter-spacing:.16em}
.page-hero{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:auto 1fr auto;gap:24px}
.hero-top{grid-column:1/-1}
.hero-copy{align-self:center;position:relative;z-index:3}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;margin:0 0 22px}
.hero-copy h1{font-size:clamp(105px,13.5vw,215px);line-height:.68;letter-spacing:-.065em;margin:0;font-weight:800}
.hero-copy h1 em{font-family:"Libre Caslon Display",serif;font-weight:400;font-style:italic;letter-spacing:-.08em;color:var(--burgundy)}
.hero-collage{position:relative;min-height:70vh;align-self:end}
.shot{position:absolute;margin:0;overflow:hidden;background:#cab9aa;border:1px solid rgba(25,23,22,.2);box-shadow:0 18px 50px rgba(30,17,15,.12)}
.shot-a{width:54%;height:70%;left:7%;bottom:5%;transform:rotate(-3deg);z-index:3}
.shot-b{width:51%;height:42%;right:0;top:6%;transform:rotate(3deg);z-index:2}
.shot-c{width:42%;height:37%;right:4%;bottom:2%;transform:rotate(1deg);z-index:4}
.media-placeholder,.portrait-placeholder,.video-slot{width:100%;height:100%;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#d9cdc0,#bda896);font-size:11px;font-weight:800;letter-spacing:.11em;color:rgba(25,23,22,.65)}
.media-placeholder small,.portrait-placeholder small{font-size:8px;font-weight:600;opacity:.8;margin-top:8px}
.scribble-mark,.hand-note{font-family:"Libre Caslon Display",serif;font-style:italic}
.scribble-mark{position:absolute;color:var(--burgundy);font-size:clamp(38px,5vw,72px);transform:rotate(-10deg)}
.scribble-one{left:-4%;top:8%;z-index:6}
.scribble-line{position:absolute;height:4px;background:var(--burgundy);border-radius:999px;transform-origin:left center}
.scribble-line-one{width:38%;left:-2%;top:24%;transform:rotate(-16deg)}
.hero-cta-row{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:34px;border-top:1px solid var(--line);padding-top:16px}
.outline-cta,.cream-button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;border:1px solid currentColor;border-radius:999px;padding:14px 18px;min-width:210px;font-size:10px;font-weight:800;letter-spacing:.13em}
.hero-cta-row p{justify-self:end;max-width:600px;text-align:right;font-family:"Poppins",Arial,sans-serif;font-weight:400;font-size:clamp(17px,2vw,28px);line-height:1.1;margin:0}
.page-intro{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.intro-label{align-self:start;font-size:9px;font-weight:700;letter-spacing:.16em;border-bottom:1px solid var(--cream-line);padding-bottom:10px}
.intro-center{text-align:center}
.hand-note{font-size:clamp(28px,4vw,58px);margin:0 0 -6px;color:var(--burgundy)}
.hand-note.light{color:var(--cream)}
.intro-center h2{font-size:clamp(72px,10vw,160px);line-height:.82;letter-spacing:-.065em;margin:0;font-weight:800}
.intro-contact{align-self:end;text-align:right;display:grid;gap:10px;font-size:9px;font-weight:700;letter-spacing:.12em}
.intro-contact a{font-size:11px;text-decoration:underline;text-underline-offset:4px}
.flower-mark{position:absolute;right:7%;top:16%;font-size:clamp(72px,11vw,180px);opacity:.13;transform:rotate(18deg)}
.section-rule{border-color:var(--line)}
.page-about{display:grid;grid-template-rows:auto 1fr auto}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:7vw}
.about-portrait{height:66vh;position:relative;display:grid;place-items:center}
.portrait-placeholder{width:min(88%,520px);height:100%;background:linear-gradient(155deg,#6d4342,#c0aa98 52%,#2d2020);color:var(--cream);font-size:clamp(24px,3vw,48px);line-height:.95}
.portrait-line{width:63%;right:-9%;top:48%;transform:rotate(-9deg);height:6px}
.about-list{border-top:1px solid var(--line)}
.about-list p{margin:0;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(22px,3.6vw,59px);font-weight:700;letter-spacing:-.045em;line-height:.92}
.about-bottom-copy{max-width:850px;font-family:"Poppins",Arial,sans-serif;font-weight:400;font-size:clamp(20px,2.2vw,34px);line-height:1.15;margin:0 0 0 auto;text-align:right}
.page-proof{display:grid;grid-template-rows:1fr auto auto;align-items:center}
.proof-title{text-align:center}
.proof-title .hand-note{margin-bottom:6px}
.proof-title h2{font-size:clamp(82px,12vw,180px);line-height:.78;letter-spacing:-.07em;margin:0;font-weight:800}
.brand-rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;display:flex;gap:46px;justify-content:center;align-items:center;flex-wrap:wrap}
.brand-rail span{font-size:clamp(18px,2.5vw,38px);font-weight:800;letter-spacing:-.035em}
.proof-count{text-align:center;padding-top:18px;font-size:9px;font-weight:700;letter-spacing:.17em}
.page-gallery{display:grid;grid-template-columns:.48fr 1.52fr;gap:5vw;align-items:center}
.gallery-heading span{font-size:9px;font-weight:700;letter-spacing:.16em}
.gallery-heading h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(60px,7.5vw,118px);line-height:.88;letter-spacing:-.055em;margin:20px 0 24px;font-weight:700}
.gallery-heading h2 em{font-family:"Poppins",Arial,sans-serif;font-weight:500;font-style:normal;letter-spacing:-.055em}
.gallery-heading p{font-family:"Poppins",Arial,sans-serif;font-weight:400;font-size:clamp(18px,1.8vw,27px);line-height:1.18;max-width:420px}
.vertical-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;align-items:start}
.vertical-card{height:min(68vh,700px);overflow:hidden;border-radius:2px;background:#d7c9bb}
.vertical-card.shift-down{margin-top:8vh}
.video-slot{background:linear-gradient(165deg,#26191a,#b39682 47%,#6b4140);color:var(--cream)}
.video-slot small{font-size:8px;margin-top:8px}
.playful{grid-template-columns:.55fr 1.45fr}
.gallery-heading.dark h2 em{color:var(--burgundy)}
.mosaic-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:22vh;gap:9px}
.mosaic-card{overflow:hidden;background:#9d8573}.mosaic-card.wide{grid-column:span 2}.mosaic-card.tall{grid-row:span 2}
.darkslot{background:linear-gradient(135deg,#241b1b,#6d4743,#c0a992);color:var(--cream)}
.page-quote{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.quote-icon{font-family:"Libre Caslon Display",serif;font-size:clamp(100px,14vw,220px);line-height:.4;color:var(--burgundy)}
.page-quote blockquote{max-width:1180px;margin:48px auto 22px;font-family:"Poppins",Arial,sans-serif;font-weight:400;font-size:clamp(36px,5.7vw,92px);line-height:.95;letter-spacing:-.035em}
.quote-credit{font-size:9px;font-weight:800;letter-spacing:.17em}
.quote-scribble{position:relative;margin-top:26px;font-size:clamp(30px,4vw,60px);transform:rotate(-6deg)}
.page-contact{display:grid;grid-template-columns:1fr .5fr;grid-template-rows:auto 1fr auto;gap:24px 6vw}
.contact-kicker{grid-column:1/-1;font-size:9px;font-weight:800;letter-spacing:.17em;border-bottom:1px solid var(--cream-line);padding-bottom:12px}
.contact-big{align-self:center;font-size:clamp(128px,18vw,290px);line-height:.64;letter-spacing:-.08em;font-weight:800}
.contact-big span{display:block}
.contact-side{align-self:center;display:grid;gap:18px;justify-items:start}
.contact-side p{font-family:"Poppins",Arial,sans-serif;font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.1;margin:0 0 14px}
.cream-button{background:var(--cream);color:var(--burgundy);border-color:var(--cream);min-width:190px}
.text-button{font-size:10px;font-weight:800;letter-spacing:.13em;border-bottom:1px solid currentColor;padding-bottom:4px}
.page-contact footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--cream-line);padding-top:13px;font-size:8px;font-weight:700;letter-spacing:.15em}
@media(max-width:980px){
  /* On smaller screens, keep the same cover-over motion while allowing
     content-heavy slides to grow instead of being clipped. */
  .stack-section{height:auto;min-height:100svh}
  .stack-section>.page{height:auto;min-height:100svh;padding-top:112px}
  .page-hero{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}.hero-copy h1{font-size:clamp(92px,27vw,180px)}.hero-collage{min-height:50vh}.hero-cta-row{grid-template-columns:1fr}.hero-cta-row p{justify-self:start;text-align:left}
  .page-intro{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.intro-center h2{font-size:clamp(66px,18vw,130px)}.intro-contact{text-align:left}
  .about-grid{grid-template-columns:1fr 1fr;gap:3vw}.about-list p{font-size:clamp(18px,3.6vw,34px)}
  .page-gallery,.playful{grid-template-columns:1fr}.gallery-heading{display:grid;grid-template-columns:1fr auto;gap:10px}.gallery-heading h2{grid-column:1/-1;margin:5px 0 10px}.gallery-heading p{grid-column:1/-1;margin:0}.vertical-card{height:54vh}.vertical-card.shift-down{margin-top:4vh}
  .mosaic-gallery{grid-auto-rows:18vh}.page-contact{grid-template-columns:1fr}.contact-big{font-size:clamp(110px,30vw,225px)}.contact-side{max-width:580px}.page-contact footer{grid-column:1}
}
@media(max-width:640px){
  :root{--pad:16px}.topbar{height:92px;padding-top:6px;padding-bottom:6px}.wordmark{width:50px;height:78px}.stack-section>.page{border-radius:0;padding-top:100px}
  .hero-top span:last-child,.section-rule span:last-child{display:none}.hero-copy h1{font-size:clamp(88px,29vw,142px)}.hero-collage{min-height:44vh}.shot-a{width:62%;height:72%;left:0}.shot-b{width:55%;height:42%}.shot-c{width:47%;height:36%}.scribble-one{top:0}.hero-cta-row{gap:14px}.outline-cta{width:100%}
  .intro-center h2{font-size:clamp(62px,18vw,95px)}.intro-label{justify-self:start}.intro-contact{font-size:8px}
  .about-grid{grid-template-columns:1fr}.about-portrait{height:45vh}.portrait-placeholder{width:72%;margin-right:auto}.portrait-line{right:2%}.about-list p{font-size:clamp(22px,7vw,38px);padding:10px 0}.about-bottom-copy{text-align:left;margin-top:22px}
  .proof-title h2{font-size:clamp(70px,20vw,112px)}.brand-rail{gap:16px 22px}.brand-rail span{font-size:20px}
  .vertical-gallery{grid-template-columns:repeat(2,1fr);gap:8px}.vertical-card{height:48vh}.vertical-card.shift-down{margin-top:4vh}.gallery-heading h2{font-size:clamp(58px,17vw,92px)}
  .mosaic-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:19vh}.mosaic-card.wide{grid-column:span 2}.mosaic-card.tall{grid-row:span 1}
  .page-quote blockquote{font-size:clamp(34px,10vw,56px)}
  .contact-big{font-size:clamp(92px,28vw,150px)}.page-contact footer{font-size:7px;gap:8px}.page-contact footer span:nth-child(2){display:none}
  .menu-panel nav a{font-size:clamp(38px,13vw,62px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.menu-panel{transition:none}}

/* ==========================================================
   V2.6 — MASCULINE / CINEMATIC / INDUSTRIAL REFINEMENT
   Keeps the sticky full-page slide behavior from V2.5.
   ========================================================== */
:root{
  --cream:#f1eee8;
  --paper:#d8d4ce;
  --burgundy:#43151a;
  --burgundy-deep:#120d0e;
  --ink:#101010;
  --steel:#7c8083;
  --line:rgba(16,16,16,.34);
  --cream-line:rgba(241,238,232,.28);
}

body{
  font-family:"Poppins",Arial,sans-serif;
  background:#0f0d0e;
}

/* more architectural / less fashion-editorial */
.grain{opacity:.035}
.stack-section>.page{box-shadow:0 -18px 48px rgba(0,0,0,.26)}
.theme-burgundy .page{
  background:
    linear-gradient(115deg,rgba(255,255,255,.025),transparent 38%),
    var(--burgundy);
}
.theme-cream .page{
  background:
    linear-gradient(115deg,rgba(0,0,0,.018),transparent 38%),
    var(--cream);
}
.theme-paper .page{background:var(--paper)}

.topbar{height:106px}
.menu-trigger,.menu-close{
  font-size:10px;
  letter-spacing:.22em;
  font-weight:700;
}
.menu-panel{background:#171112}
.menu-panel nav a{
  font-family:"Poppins",Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.065em;
  text-transform:uppercase;
}

/* square controls, stronger utility feel */
.outline-cta,.cream-button{
  border-radius:0;
  padding:15px 18px;
  letter-spacing:.17em;
  min-width:220px;
}
.outline-cta:hover,.cream-button:hover{
  transform:translateY(-2px);
}
.cream-button{background:var(--cream);color:var(--ink)}

/* editorial marks become restrained technical labels */
.scribble-mark,.hand-note{
  font-family:"Poppins",Arial,sans-serif;
  font-style:normal;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.hand-note{
  font-size:clamp(11px,1.15vw,16px);
  margin:0 0 15px;
}
.hand-note.light{color:rgba(241,238,232,.72)}
.scribble-mark{
  font-size:clamp(10px,1vw,14px);
  transform:none;
  color:var(--burgundy);
  border:1px solid currentColor;
  padding:8px 10px;
  background:rgba(241,238,232,.86);
}
.scribble-one{left:0;top:4%;z-index:6}
.quote-scribble{
  position:relative;
  margin-top:28px;
  transform:none;
  color:var(--ink);
  background:transparent;
  border-color:rgba(16,16,16,.45);
}
.scribble-line{
  height:2px;
  border-radius:0;
  background:var(--burgundy);
}
.scribble-line-one{width:31%;left:0;top:18%;transform:none}
.portrait-line{height:2px;right:-5%;transform:none}

/* hero: heavier type, straight image composition */
.hero-copy h1{
  font-family:"Poppins",Arial,sans-serif;
  font-weight:800;
  line-height:.70;
  letter-spacing:-.075em;
}
.hero-copy h1 em{
  font-family:"Poppins",Arial,sans-serif;
  font-style:normal;
  font-weight:800;
  color:var(--burgundy);
  letter-spacing:-.075em;
}
.eyebrow,.hero-top,.section-rule,.intro-label,.gallery-heading span,.proof-count,.quote-credit,.contact-kicker{
  font-family:"Poppins",Arial,sans-serif;
  font-weight:700;
  letter-spacing:.19em;
}
.hero-collage{min-height:70vh}
.shot{
  border:1px solid rgba(16,16,16,.36);
  box-shadow:12px 16px 0 rgba(16,16,16,.08);
}
.shot-a{width:55%;height:72%;left:4%;bottom:2%;transform:none}
.shot-b{width:48%;height:41%;right:0;top:4%;transform:none}
.shot-c{width:40%;height:38%;right:3%;bottom:0;transform:none}

.media-placeholder,.portrait-placeholder,.video-slot{
  font-family:"Poppins",Arial,sans-serif;
  background:linear-gradient(145deg,#c7c0b6,#9f968b);
  letter-spacing:.16em;
}
.video-slot{
  background:linear-gradient(145deg,#171113,#5a3336 58%,#1b1718);
}
.darkslot{
  background:linear-gradient(145deg,#111,#3c2628 55%,#77716c);
}

/* intro/proof: remove soft decorative feeling */
.intro-center h2,.proof-title h2,.contact-big{
  font-family:"Poppins",Arial,sans-serif;
  font-weight:800;
}
.flower-mark{
  font-family:"Poppins",Arial,sans-serif;
  right:6%;
  top:12%;
  font-size:clamp(90px,13vw,220px);
  opacity:.08;
  transform:none;
  font-weight:200;
}
.brand-rail span{font-family:"Poppins",Arial,sans-serif;font-weight:800}

/* About: stronger alignment and technical hierarchy */
.about-list p{
  font-family:"Poppins",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.04em;
}
.portrait-placeholder{
  background:linear-gradient(160deg,#171314,#5a3437 54%,#a59b91);
}

/* portfolio: harder frames / no staggered playful drift */
.vertical-gallery{gap:8px}
.vertical-card{
  border-radius:0;
  border:1px solid rgba(241,238,232,.22);
}
.vertical-card.shift-down{margin-top:4vh}
.mosaic-gallery{gap:7px}
.mosaic-card{
  border:1px solid rgba(16,16,16,.22);
}
.gallery-heading h2{
  font-weight:800;
  letter-spacing:-.06em;
}
.gallery-heading h2 em{
  font-weight:800;
}
.gallery-heading.dark h2 em{color:var(--burgundy)}

/* quote: remove romantic oversized serif quotation mark */
.quote-icon{
  font-family:"Poppins",Arial,sans-serif;
  font-size:0;
  width:72px;
  height:6px;
  background:var(--burgundy);
  display:block;
  margin-bottom:18px;
}
.page-quote blockquote{
  font-weight:600;
  letter-spacing:-.05em;
  max-width:1240px;
}

/* contact should land like a title card */
.page-contact{
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
}
.contact-big{letter-spacing:-.09em}
.contact-side p{font-weight:500}
.text-button{letter-spacing:.17em}

@media(max-width:640px){
  .shot{box-shadow:7px 9px 0 rgba(16,16,16,.08)}
  .scribble-one{top:1%}
  .vertical-card.shift-down{margin-top:2vh}
  .hand-note{font-size:10px}
}


/* ==========================================================
   V2.7 — LIVE FOURTHWALL STORE FEED
   ========================================================== */
.theme-ink .page{
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    #111011;
  background-size:72px 72px;
  color:var(--cream);
}
.page-shop{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:clamp(18px,2.2vh,28px);
  padding-top:clamp(118px,12vh,150px);
  overflow:hidden;
}
.shop-header{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
  align-items:end;
  gap:clamp(30px,6vw,100px);
  border-bottom:1px solid rgba(241,238,232,.22);
  padding-bottom:clamp(18px,2.5vh,28px);
}
.shop-kicker{margin:0 0 10px;font-size:9px;font-weight:700;letter-spacing:.22em;color:rgba(241,238,232,.62)}
.shop-header h2{margin:0;font-family:"Poppins",Arial,sans-serif;font-size:clamp(64px,8.5vw,150px);line-height:.76;letter-spacing:-.085em;font-weight:800}
.shop-header h2 span{color:#8d4a4e}
.shop-intro{justify-self:end;max-width:390px}
.shop-intro p{margin:0 0 18px;font-size:clamp(12px,1.1vw,16px);line-height:1.55;color:rgba(241,238,232,.68)}
.shop-intro a{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.18em;border-bottom:1px solid rgba(241,238,232,.7);padding-bottom:5px}
.shop-controls{display:flex;align-items:center;gap:8px;min-height:42px}
.shop-tab,.shop-arrow{appearance:none;border:1px solid rgba(241,238,232,.25);border-radius:0;background:transparent;color:rgba(241,238,232,.55);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.shop-tab{min-height:38px;padding:0 16px;font-size:9px;font-weight:700;letter-spacing:.17em}
.shop-tab:hover,.shop-tab.active{background:var(--cream);border-color:var(--cream);color:#111011}
.shop-arrows{margin-left:auto;display:flex;gap:7px}
.shop-arrow{width:42px;height:38px;font-size:17px;line-height:1}
.shop-arrow:hover{background:#8d4a4e;border-color:#8d4a4e;color:var(--cream)}
.product-viewport{min-height:0;overflow:hidden}
.product-track{height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.product-track::-webkit-scrollbar{display:none}
.product-card{min-width:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;scroll-snap-align:start;border:1px solid rgba(241,238,232,.18);background:#171516;color:var(--cream);overflow:hidden;position:relative}
a.product-card:hover .product-image{transform:scale(1.035)}
a.product-card:hover .product-open{opacity:1;transform:translateY(0)}
.product-media{min-height:0;overflow:hidden;position:relative;background:linear-gradient(145deg,#242022,#171516)}
.product-image{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.product-badge{position:absolute;top:12px;left:12px;padding:7px 9px;background:#111011;border:1px solid rgba(241,238,232,.22);font-size:8px;font-weight:700;letter-spacing:.15em;z-index:2}
.product-open{position:absolute;right:12px;bottom:12px;padding:8px 10px;background:var(--cream);color:#111011;font-size:8px;font-weight:700;letter-spacing:.13em;opacity:0;transform:translateY(6px);transition:.22s ease}
.product-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;min-height:78px;padding:13px 14px 14px;border-top:1px solid rgba(241,238,232,.15)}
.product-name{font-size:10px;line-height:1.35;font-weight:650;letter-spacing:.015em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.product-price{white-space:nowrap;font-size:10px;font-weight:700;color:#b67579}
.product-skeleton{pointer-events:none}
.product-skeleton .product-media{background:linear-gradient(100deg,#1a1819 20%,#282426 40%,#1a1819 60%);background-size:220% 100%;animation:shopShimmer 1.35s linear infinite}
.product-skeleton .product-meta{font-size:8px;letter-spacing:.15em;color:rgba(241,238,232,.35)}
@keyframes shopShimmer{to{background-position:-220% 0}}
.shop-error{grid-column:1/-1;height:100%;display:grid;place-items:center;text-align:center;border:1px solid rgba(241,238,232,.18);padding:40px}
.shop-error strong{display:block;font-size:clamp(26px,3vw,48px);letter-spacing:-.05em;margin-bottom:8px}
.shop-error p{margin:0 0 20px;color:rgba(241,238,232,.55);font-size:11px}
.shop-error a{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:4px;font-size:9px;font-weight:700;letter-spacing:.16em}
.shop-footer-line{display:flex;justify-content:space-between;gap:20px;padding-top:12px;border-top:1px solid rgba(241,238,232,.22);font-size:7px;font-weight:700;letter-spacing:.17em;color:rgba(241,238,232,.5)}
@media(max-width:980px){
  .page-shop{overflow:visible;grid-template-rows:auto auto minmax(520px,70vh) auto}
  .shop-header{grid-template-columns:1fr}.shop-intro{justify-self:start;max-width:560px}
  .product-track{grid-auto-columns:calc((100% - 12px)/2)}
}
@media(max-width:640px){
  .page-shop{padding-top:102px;grid-template-rows:auto auto minmax(480px,62vh) auto}
  .shop-header h2{font-size:clamp(64px,20vw,100px)}
  .shop-controls{flex-wrap:wrap}.shop-arrows{margin-left:auto}
  .shop-tab{padding:0 11px;font-size:8px}
  .product-track{grid-auto-columns:82%;gap:9px}
  .product-open{opacity:1;transform:none}
  .shop-footer-line span:last-child{display:none}
}


/* ==========================================================
   V3.0 — RESPONSIVE / ANY-SCREEN RETROFIT
   Keeps the full-page sticky stack on desktop while preventing
   content from being clipped on shorter screens, tablets, phones,
   and landscape devices.
   ========================================================== */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
img,video,svg,canvas{max-width:100%}

/* Use the modern dynamic viewport when available so mobile browser
   chrome does not cut off the bottom of a slide. */
.stack-section{
  min-height:100svh;
  height:100dvh;
}
.stack-section>.page{
  min-height:100svh;
  height:100dvh;
  padding-top:clamp(88px,12vh,118px);
  padding-bottom:clamp(18px,3.5vh,34px);
}

/* WHO AM I — make the complete role list visible on normal desktop
   and short laptop screens. */
.page-about{
  grid-template-rows:auto minmax(0,1fr) auto;
  row-gap:clamp(10px,1.8vh,20px);
}
.about-grid{
  min-height:0;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.42fr);
  gap:clamp(28px,4.5vw,88px);
  align-items:center;
}
.about-portrait{
  height:min(60vh,620px);
  min-height:0;
}
.about-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-self:center;
  border-top:1px solid var(--line);
  min-width:0;
}
.about-list p{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:clamp(36px,5.15vh,54px);
  margin:0;
  padding:clamp(5px,.9vh,9px) clamp(10px,1.1vw,18px) clamp(5px,.9vh,9px) 0;
  font-size:clamp(15px,min(1.55vw,2.7vh),30px);
  line-height:.98;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
  border-bottom:1px solid var(--line);
}
.about-list p:nth-child(even){
  border-left:1px solid var(--line);
  padding-left:clamp(10px,1.1vw,18px);
}
.about-bottom-copy{
  max-width:min(980px,62vw);
  margin-left:auto;
  font-size:clamp(15px,min(1.35vw,2.35vh),25px);
  line-height:1.18;
}

/* Desktop height-aware scaling. Width-only breakpoints were not enough
   for 1366x768 / 1920x800 / browser windows with dev bars visible. */
@media (min-width:981px) and (max-height:900px){
  :root{--pad:clamp(20px,2.6vw,46px)}
  .topbar{height:88px;padding-top:6px;padding-bottom:6px}
  .wordmark{width:54px;height:80px}
  .stack-section>.page{padding-top:92px;padding-bottom:22px}
  .page-hero{gap:14px}
  .hero-copy h1{font-size:clamp(78px,min(11vw,16vh),170px)}
  .eyebrow{margin-bottom:12px}
  .hero-collage{min-height:58vh}
  .hero-cta-row{padding-top:10px}
  .hero-cta-row p{font-size:clamp(14px,min(1.55vw,2.6vh),23px)}

  .intro-center h2{font-size:clamp(58px,min(8.6vw,14vh),128px)}
  .flower-mark{font-size:clamp(70px,min(10vw,16vh),150px)}

  .section-rule{padding-bottom:8px}
  .page-about{row-gap:8px}
  .about-grid{gap:clamp(22px,4vw,70px)}
  .about-portrait{height:min(55vh,500px)}
  .about-list p{
    min-height:clamp(32px,4.75vh,44px);
    padding:clamp(4px,.55vh,6px) 12px clamp(4px,.55vh,6px) 0;
    font-size:clamp(13px,min(1.32vw,2.42vh),24px);
  }
  .about-list p:nth-child(even){padding-left:12px}
  .about-bottom-copy{font-size:clamp(13px,min(1.1vw,2vh),20px);max-width:62vw}

  .proof-title h2{font-size:clamp(60px,min(9.5vw,15vh),132px)}
  .brand-rail{padding:15px 0;gap:22px 34px}
  .brand-rail span{font-size:clamp(14px,min(1.9vw,3.2vh),28px)}
  .proof-count{padding-top:10px}

  .gallery-heading h2{font-size:clamp(48px,min(6vw,10vh),88px);margin:12px 0 14px}
  .gallery-heading p{font-size:clamp(14px,min(1.45vw,2.5vh),22px)}
  .vertical-card{height:min(58vh,520px)}
  .vertical-card.shift-down{margin-top:2.5vh}
  .mosaic-gallery{grid-auto-rows:18vh}

  .page-quote blockquote{font-size:clamp(30px,min(4.5vw,7.5vh),68px);margin:28px auto 16px}
  .quote-icon{margin-bottom:8px}

  .page-contact{gap:12px 4vw}
  .contact-big{font-size:clamp(88px,min(14vw,22vh),210px)}
  .contact-side p{font-size:clamp(16px,min(1.8vw,3vh),27px)}

  .page-shop{padding-top:92px;gap:clamp(10px,1.5vh,18px)}
  .shop-header{padding-bottom:12px;gap:30px}
  .shop-header h2{font-size:clamp(52px,min(7vw,11vh),105px)}
  .shop-intro p{margin-bottom:10px;line-height:1.35}
  .shop-controls{min-height:34px}
  .shop-tab{min-height:32px}
  .shop-arrow{height:32px}
  .product-meta{min-height:62px;padding:9px 11px}
}

@media (min-width:981px) and (max-height:720px){
  .topbar{height:74px}
  .wordmark{width:46px;height:68px}
  .stack-section>.page{padding-top:78px;padding-bottom:14px}
  .hero-collage{min-height:52vh}
  .hero-copy h1{font-size:clamp(70px,min(9.8vw,15vh),145px)}
  .intro-center h2{font-size:clamp(52px,min(7.8vw,13vh),108px)}
  .about-portrait{height:min(50vh,410px)}
  .about-list p{min-height:30px;font-size:clamp(12px,min(1.15vw,2.3vh),21px);padding:3px 10px 3px 0}
  .about-list p:nth-child(even){padding-left:10px}
  .about-bottom-copy{font-size:clamp(12px,min(1vw,1.9vh),17px)}
  .proof-title h2{font-size:clamp(54px,min(8.5vw,14vh),112px)}
  .vertical-card{height:53vh}
  .mosaic-gallery{grid-auto-rows:16vh}
  .page-shop{padding-top:78px}
  .shop-header h2{font-size:clamp(46px,min(6.2vw,10vh),88px)}
}

/* Tablet / small laptop: allow content-heavy slides to grow naturally.
   The next section still covers the previous section after its content
   has been viewed, but nothing is trapped behind overflow:hidden. */
@media (max-width:980px){
  .stack-section{
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  .stack-section>.page{
    height:auto;
    min-height:100dvh;
    overflow:visible;
    padding-top:clamp(94px,11vh,112px);
    padding-bottom:clamp(24px,5vh,48px);
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:clamp(20px,4vh,40px);
    align-items:start;
  }
  .about-portrait{
    height:clamp(300px,42vh,460px);
  }
  .portrait-placeholder{
    width:min(70%,440px);
    margin-right:auto;
  }
  .about-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .about-list p{
    min-height:0;
    padding:10px 12px 10px 0;
    font-size:clamp(16px,3.2vw,28px);
    line-height:1.02;
  }
  .about-list p:nth-child(even){padding-left:12px}
  .about-bottom-copy{
    max-width:760px;
    margin:22px 0 0;
    text-align:left;
    font-size:clamp(16px,2.7vw,24px);
  }

  .vertical-gallery{min-height:0}
  .page-shop{overflow:visible}
  .product-viewport{min-height:520px}
}

@media (max-width:700px){
  :root{--pad:clamp(16px,5vw,24px)}
  .topbar{
    height:86px;
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
  .wordmark{width:48px;height:72px}
  .stack-section>.page{padding-top:94px}

  .hero-top,.section-rule{font-size:7px;letter-spacing:.12em}
  .hero-copy h1{font-size:clamp(78px,28vw,132px)}
  .hero-collage{min-height:420px}
  .hero-cta-row p{font-size:clamp(15px,4.4vw,20px)}

  .about-portrait{height:clamp(270px,42vh,380px)}
  .portrait-placeholder{width:min(82%,360px)}
  .about-list{grid-template-columns:1fr}
  .about-list p,
  .about-list p:nth-child(even){
    border-left:0;
    padding:9px 0;
    font-size:clamp(18px,5.4vw,28px);
  }
  .about-bottom-copy{font-size:clamp(16px,4.6vw,21px)}

  .gallery-heading{grid-template-columns:1fr}
  .gallery-heading h2,.gallery-heading p{grid-column:1}
  .vertical-card{height:min(56vh,520px)}
  .mosaic-gallery{grid-auto-rows:clamp(145px,24vh,220px)}

  .shop-header{gap:18px}
  .shop-header h2{font-size:clamp(56px,19vw,92px)}
  .product-viewport{min-height:480px}

  .page-contact footer{flex-wrap:wrap}
}

/* Very narrow phones */
@media (max-width:390px){
  .wordmark{width:44px;height:66px}
  .menu-trigger{font-size:9px}
  .hero-copy h1{font-size:clamp(72px,27vw,112px)}
  .intro-center h2{font-size:clamp(54px,17vw,78px)}
  .gallery-heading h2{font-size:clamp(50px,15.5vw,72px)}
  .about-list p,.about-list p:nth-child(even){font-size:clamp(17px,5.2vw,23px)}
}

/* Short landscape phones/tablets: prioritize readable content over forcing
   a 390px-high section into an impossible one-screen composition. */
@media (max-width:980px) and (orientation:landscape) and (max-height:520px){
  .topbar{height:64px}
  .wordmark{width:38px;height:56px}
  .stack-section>.page{padding-top:70px;padding-bottom:24px}
  .about-grid{grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);align-items:start}
  .about-portrait{height:300px;position:sticky;top:76px}
  .portrait-placeholder{width:100%}
  .about-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-list p,.about-list p:nth-child(even){font-size:clamp(13px,2.2vw,18px);padding:7px 8px}
  .about-bottom-copy{font-size:14px}
  .hero-collage{min-height:360px}
}

/* Avoid accidental sideways scrolling from decorative elements. */
.page,.about-grid,.about-list,.gallery-heading,.vertical-gallery,.mosaic-gallery,
.shop-header,.product-viewport,.page-contact{min-width:0;max-width:100%}

/* ==========================================================
   V3.1 — FULLSCREEN MENU BLEED FIX
   Prevents oversized menu items (especially CONTACT) from showing
   above sticky slides while the menu is closed on short viewports.
   ========================================================== */
.menu-panel{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transform:translateY(-100%);
  transition:
    transform .6s cubic-bezier(.77,0,.18,1),
    opacity .12s ease .42s,
    visibility 0s linear .6s;
}
.menu-panel.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  overflow-x:hidden;
  overflow-y:auto;
  transform:translateY(0);
  transition:
    transform .6s cubic-bezier(.77,0,.18,1),
    opacity .12s ease,
    visibility 0s linear 0s;
}

/* Keep the fullscreen navigation inside the viewport on short displays. */
.menu-panel nav{
  min-height:0;
  max-height:calc(100dvh - 150px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.menu-panel nav a{
  font-size:clamp(32px,min(7vw,9vh),112px);
  flex-shrink:0;
}

@media (max-height:720px){
  .menu-panel{padding-top:18px;padding-bottom:18px}
  .menu-panel nav{max-height:calc(100dvh - 105px)}
  .menu-panel nav a{
    font-size:clamp(28px,min(6.2vw,8vh),72px);
    padding:7px 0;
  }
  .menu-meta{font-size:8px;gap:14px}
}


/* ==========================================================
   V3.2 — LONG PORTFOLIO TITLE FIT FIX
   Keep oversized titles inside their grid column on every screen.
   ========================================================== */
.gallery-heading{
  min-width:0;
  overflow:visible;
}
.gallery-heading h2{
  max-width:100%;
}
.scripted-title{
  width:100%;
}
.scripted-title em{
  display:inline;
}

/* Give the copy column a little more room on desktop without sacrificing
   the four-card portfolio presentation. */
@media (min-width:981px){
  .page-gallery{
    grid-template-columns:minmax(360px,.66fr) minmax(0,1.34fr);
    gap:clamp(26px,3.2vw,62px);
  }
  .playful{
    grid-template-columns:minmax(330px,.62fr) minmax(0,1.38fr);
  }
}

/* Short desktop/laptop windows need slightly tighter portfolio type. */
@media (min-width:981px) and (max-height:900px){
  .gallery-heading h2{
    font-size:clamp(46px,min(5.25vw,8.6vh),80px);
    line-height:.86;
  }
  .gallery-heading p{
    max-width:390px;
  }
}

@media (min-width:981px) and (max-height:720px){
  .gallery-heading h2{
    font-size:clamp(40px,min(4.7vw,8vh),68px);
    margin:8px 0 12px;
  }
  .gallery-heading p{
    font-size:clamp(13px,min(1.25vw,2.25vh),19px);
    line-height:1.2;
  }
}

/* Once the gallery stacks, let the heading use the full available width. */
@media (max-width:980px){
  .scripted-title{
    max-width:100%;
  }
}

/* ==========================================================
   V4.0 — CREATOR HQ
   Marketing story, visual resume, case studies, creator contact funnel,
   SEO landing page support, and restrained "wow" interactions.
   ========================================================== */

.light-rule{border-color:rgba(243,236,226,.26);color:rgba(243,236,226,.82)}
.micro-link{display:inline-block;margin-top:12px;font-size:9px;font-weight:800;letter-spacing:.16em;border-bottom:1px solid currentColor;padding-bottom:4px}

/* THE THREAD — one creator / many mediums */
.page-thread{display:grid;grid-template-rows:auto auto 1fr;gap:clamp(14px,2.2vh,26px);color:var(--cream)}
.thread-layout{display:grid;grid-template-columns:minmax(340px,.72fr) minmax(0,1.28fr);align-items:center;gap:clamp(28px,6vw,110px);min-height:0}
.thread-selector{display:flex;flex-direction:column;border-top:1px solid rgba(243,236,226,.26)}
.thread-word{appearance:none;border:0;border-bottom:1px solid rgba(243,236,226,.26);background:transparent;color:rgba(243,236,226,.34);text-align:left;font-family:"Poppins",Arial,sans-serif;font-size:clamp(38px,min(4.4vw,7vh),80px);font-weight:800;line-height:.9;letter-spacing:-.055em;padding:clamp(6px,.8vh,11px) 0;cursor:pointer;transition:color .22s ease,padding-left .25s ease}
.thread-word:hover,.thread-word.active{color:var(--cream);padding-left:clamp(8px,1vw,18px)}
.thread-detail{position:relative;min-width:0}
.thread-detail::before{content:"";position:absolute;left:-4vw;top:0;bottom:0;width:1px;background:rgba(243,236,226,.18)}
.thread-index{font-size:9px;font-weight:800;letter-spacing:.18em;color:rgba(243,236,226,.55);margin:0 0 18px}
.thread-detail h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(46px,min(6.8vw,10.5vh),118px);line-height:.88;letter-spacing:-.065em;margin:0;max-width:900px}
.thread-detail>p:not(.thread-index){font-size:clamp(16px,min(1.45vw,2.4vh),25px);line-height:1.45;color:rgba(243,236,226,.7);max-width:690px;margin:clamp(18px,3vh,32px) 0}
.thread-detail>a{font-size:9px;font-weight:800;letter-spacing:.18em;border-bottom:1px solid rgba(243,236,226,.7);padding-bottom:5px}
.thread-footer{margin:0;text-align:right;font-family:"Poppins",Arial,sans-serif;font-size:clamp(14px,1.25vw,20px);font-weight:500;color:rgba(243,236,226,.62)}

/* VISUAL RESUME */
.page-resume{display:grid;grid-template-rows:auto 1fr;gap:clamp(18px,3vh,34px)}
.resume-grid{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);gap:clamp(36px,7vw,120px);align-items:center;min-height:0}
.resume-kicker{font-size:9px;font-weight:800;letter-spacing:.2em;margin:0 0 12px}
.resume-heading h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(88px,min(10vw,15vh),170px);font-weight:800;line-height:.72;letter-spacing:-.08em;margin:0;color:var(--burgundy)}
.resume-heading>p:last-child{max-width:510px;font-size:clamp(15px,min(1.25vw,2.2vh),22px);line-height:1.5;margin:28px 0 0}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:minmax(92px,.22fr) 1fr;gap:24px;padding:clamp(12px,1.8vh,20px) 0;border-bottom:1px solid var(--line)}
.timeline li>span{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--burgundy)}
.timeline strong{display:block;font-family:"Poppins",Arial,sans-serif;font-size:clamp(18px,min(2vw,3.4vh),34px);line-height:1;font-weight:800;letter-spacing:-.035em}
.timeline p{font-size:clamp(12px,min(1vw,1.8vh),17px);line-height:1.45;margin:8px 0 0;color:rgba(25,23,22,.7);max-width:640px}

/* SELECTED WORK / CASE STUDIES */
.page-work{display:grid;grid-template-rows:auto 1fr;gap:clamp(18px,3vh,34px);color:var(--cream)}
.work-header{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(260px,.5fr);justify-content:space-between;gap:8vw;align-items:end;border-bottom:1px solid rgba(243,236,226,.24);padding-bottom:clamp(16px,2vh,24px)}
.work-header>div>p{font-size:9px;font-weight:800;letter-spacing:.18em;margin:0 0 12px;color:rgba(243,236,226,.55)}
.work-header h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(56px,min(7vw,11vh),118px);line-height:.78;letter-spacing:-.07em;margin:0}
.work-lead{font-size:clamp(14px,min(1.2vw,2vh),20px);line-height:1.5;color:rgba(243,236,226,.66);max-width:510px;margin:0 0 4px auto}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;align-items:stretch}
.case-card{appearance:none;border:1px solid rgba(243,236,226,.22);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(99,53,56,.26));color:var(--cream);text-align:left;padding:clamp(18px,2.2vw,34px);display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(12px,2vh,22px);cursor:pointer;min-width:0;transition:transform .3s ease,background .3s ease,border-color .3s ease}
.case-card:hover{transform:translateY(-8px);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(99,53,56,.48));border-color:rgba(243,236,226,.5)}
.case-no,.case-type,.case-open{font-size:8px;font-weight:800;letter-spacing:.17em}
.case-type{color:rgba(243,236,226,.52)}
.case-card strong{font-family:"Poppins",Arial,sans-serif;font-size:clamp(32px,min(3.8vw,6.4vh),66px);line-height:.88;letter-spacing:-.055em;align-self:center;overflow-wrap:anywhere}
.case-open{align-self:end;border-top:1px solid rgba(243,236,226,.18);padding-top:14px}
.case-dialog{width:min(1180px,calc(100% - 40px));max-height:min(86dvh,850px);border:1px solid rgba(243,236,226,.2);border-radius:0;background:#111011;color:var(--cream);padding:0;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.case-dialog::backdrop{background:rgba(7,6,6,.82);backdrop-filter:blur(8px)}
.case-dialog-close{position:absolute;right:24px;top:22px;z-index:2;border:0;background:transparent;color:var(--cream);font-size:9px;font-weight:800;letter-spacing:.18em;cursor:pointer}
.case-dialog-body{padding:clamp(52px,6vw,90px)}
.case-dialog-kicker{font-size:9px;font-weight:800;letter-spacing:.2em;color:rgba(243,236,226,.55);margin:0 0 14px}
.case-dialog h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(54px,8vw,122px);line-height:.82;letter-spacing:-.07em;margin:0 0 clamp(32px,5vh,58px);max-width:900px}
.case-dialog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid rgba(243,236,226,.2);padding-top:20px}
.case-dialog-grid span{font-size:8px;font-weight:800;letter-spacing:.18em;color:rgba(243,236,226,.5)}
.case-dialog-grid p{font-size:clamp(14px,1.2vw,18px);line-height:1.55;color:rgba(243,236,226,.76);margin:12px 0 0}
.case-dialog-link{margin-top:34px;width:max-content}

/* CURRENT / RETURN REASON */
.page-current{display:grid;grid-template-rows:auto auto 1fr;gap:clamp(18px,3vh,36px)}
.current-heading{display:grid;grid-template-columns:1fr minmax(240px,.42fr);align-items:end;gap:5vw}
.current-heading h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(62px,min(8.6vw,13vh),140px);line-height:.78;letter-spacing:-.075em;margin:0}
.current-heading>p{font-size:clamp(15px,min(1.4vw,2.3vh),24px);line-height:1.45;margin:0 0 8px}
.current-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0}
.current-grid>a{border:1px solid var(--line);padding:clamp(18px,2.5vw,34px);display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;transition:background .25s ease,color .25s ease,transform .25s ease}
.current-grid>a:hover{background:var(--burgundy);color:var(--cream);transform:translateY(-5px)}
.current-grid span,.current-grid b{font-size:8px;font-weight:800;letter-spacing:.17em}
.current-grid strong{font-family:"Poppins",Arial,sans-serif;font-size:clamp(24px,min(2.7vw,4.8vh),48px);line-height:.92;letter-spacing:-.045em}
.current-grid p{font-size:clamp(13px,1vw,17px);line-height:1.5;margin:0;max-width:420px}

/* CREATOR-FIRST CONTACT FUNNEL */
.page-connect{display:grid;grid-template-rows:auto 1fr auto;gap:clamp(18px,3vh,34px);color:var(--cream);background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px}
.connect-grid{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,120px);align-items:center;min-height:0}
.connect-heading>p{font-size:9px;font-weight:800;letter-spacing:.2em;margin:0 0 14px;color:rgba(243,236,226,.65)}
.connect-heading h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(58px,min(7.6vw,11.5vh),126px);line-height:.78;letter-spacing:-.075em;margin:0}
.connect-funnel{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(280px,1fr);gap:clamp(22px,3.5vw,54px);min-width:0}
.connect-options{border-top:1px solid rgba(243,236,226,.28)}
.connect-choice{width:100%;appearance:none;border:0;border-bottom:1px solid rgba(243,236,226,.28);background:transparent;color:rgba(243,236,226,.45);text-align:left;padding:clamp(9px,1.2vh,13px) 0;font-size:clamp(11px,min(.85vw,1.6vh),15px);font-weight:800;letter-spacing:.08em;cursor:pointer;transition:color .2s ease,padding-left .2s ease}
.connect-choice:hover,.connect-choice.active{color:var(--cream);padding-left:10px}
.connect-response{align-self:center;border-left:1px solid rgba(243,236,226,.28);padding-left:clamp(18px,2.2vw,34px)}
.connect-response>span{font-size:8px;font-weight:800;letter-spacing:.18em;color:rgba(243,236,226,.5)}
.connect-response h3{font-family:"Poppins",Arial,sans-serif;font-size:clamp(28px,min(3.2vw,5.2vh),52px);line-height:1;letter-spacing:-.045em;margin:14px 0}
.connect-response p{font-size:clamp(13px,1vw,17px);line-height:1.55;color:rgba(243,236,226,.68);margin:0 0 24px}
.connect-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(243,236,226,.3);padding-top:13px;font-size:8px;font-weight:700;letter-spacing:.14em}
.connect-footer a{border-bottom:1px solid transparent}.connect-footer a:hover{border-color:currentColor}

/* Subtle reveal — movement only when it adds hierarchy */
@media (prefers-reduced-motion:no-preference){
  .case-card,.current-grid>a,.thread-detail{transition-property:transform,opacity,background,border-color,color;transition-duration:.35s}
}

/* Creator HQ responsive system */
@media (min-width:981px) and (max-height:900px){
  .thread-word{font-size:clamp(30px,min(3.7vw,6vh),60px);padding:5px 0}
  .thread-detail h2{font-size:clamp(38px,min(5.4vw,8.4vh),82px)}
  .thread-detail>p:not(.thread-index){font-size:clamp(13px,min(1.15vw,2vh),18px);margin:14px 0 18px}
  .resume-heading h2{font-size:clamp(72px,min(8.5vw,13vh),126px)}
  .timeline li{padding:9px 0}.timeline strong{font-size:clamp(16px,min(1.65vw,2.8vh),27px)}.timeline p{margin-top:5px}
  .work-header h2{font-size:clamp(48px,min(5.8vw,9vh),88px)}
  .case-card strong{font-size:clamp(28px,min(3.2vw,5.2vh),48px)}
  .current-heading h2{font-size:clamp(52px,min(7vw,10vh),100px)}
  .current-grid strong{font-size:clamp(22px,min(2.3vw,3.8vh),36px)}
  .connect-heading h2{font-size:clamp(50px,min(6.2vw,9.5vh),94px)}
  .connect-choice{padding:7px 0;font-size:clamp(10px,min(.75vw,1.35vh),13px)}
  .connect-response h3{font-size:clamp(25px,min(2.6vw,4.3vh),40px)}
}

@media (min-width:981px) and (max-height:720px){
  .thread-layout,.resume-grid,.connect-grid{gap:28px}
  .thread-word{font-size:clamp(26px,min(3.2vw,5.2vh),48px);padding:3px 0}
  .thread-detail h2{font-size:clamp(34px,min(4.8vw,7.6vh),68px)}
  .timeline li{padding:6px 0}.timeline p{font-size:12px;line-height:1.3}
  .case-card{padding:16px}.case-card strong{font-size:clamp(25px,min(2.8vw,4.6vh),40px)}
  .current-heading h2{font-size:clamp(46px,min(6.2vw,9.2vh),82px)}
  .connect-heading h2{font-size:clamp(44px,min(5.4vw,8.6vh),76px)}
}

@media (max-width:980px){
  .thread-layout,.resume-grid,.connect-grid{grid-template-columns:1fr;align-items:start}
  .thread-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .thread-word{font-size:clamp(25px,7vw,48px);border-right:1px solid rgba(243,236,226,.2);padding:12px 6px}
  .thread-detail{padding-top:20px}.thread-detail::before{display:none}
  .thread-footer{text-align:left}
  .resume-heading h2{font-size:clamp(76px,20vw,130px)}
  .resume-heading>p:last-child{margin-top:18px}
  .case-grid,.current-grid{grid-template-columns:1fr}
  .case-card{min-height:280px}.case-card strong{font-size:clamp(42px,9vw,72px)}
  .work-header,.current-heading{grid-template-columns:1fr}.work-lead{margin:0;max-width:720px}
  .case-dialog-grid{grid-template-columns:1fr}
  .connect-funnel{grid-template-columns:1fr 1fr}
  .connect-footer{flex-wrap:wrap}
}

@media (max-width:700px){
  .thread-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thread-word{font-size:clamp(26px,10vw,44px)}
  .thread-detail h2{font-size:clamp(42px,13vw,72px)}
  .resume-grid{gap:24px}.timeline li{grid-template-columns:76px 1fr;gap:14px}
  .work-header h2{font-size:clamp(58px,17vw,92px)}
  .case-card{min-height:230px}
  .current-heading h2{font-size:clamp(56px,17vw,94px)}
  .connect-heading h2{font-size:clamp(50px,14vw,82px)}
  .connect-funnel{grid-template-columns:1fr}
  .connect-response{border-left:0;border-top:1px solid rgba(243,236,226,.28);padding:22px 0 0}
  .connect-choice{font-size:12px;padding:11px 0}
  .case-dialog{width:calc(100% - 20px);max-height:92dvh}.case-dialog-body{padding:56px 22px 28px}.case-dialog h2{font-size:clamp(44px,14vw,70px)}
}

/* Standalone SEO landing pages */
body.service-page{background:var(--cream);min-height:100dvh}
.service-shell{max-width:1500px;margin:0 auto;padding:clamp(110px,14vh,160px) var(--pad) 50px}
.service-nav{position:fixed;inset:0 0 auto 0;height:92px;padding:10px var(--pad);display:flex;justify-content:space-between;align-items:center;background:rgba(243,236,226,.9);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid var(--line)}
.service-nav img{width:54px;height:76px;object-fit:contain}.service-nav div{display:flex;gap:20px;font-size:9px;font-weight:800;letter-spacing:.15em}
.service-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.55fr);gap:7vw;align-items:end;border-bottom:1px solid var(--line);padding-bottom:clamp(32px,5vh,60px)}
.service-hero small{font-size:9px;font-weight:800;letter-spacing:.18em}.service-hero h1{font-family:"Poppins",Arial,sans-serif;font-size:clamp(62px,9.5vw,154px);line-height:.78;letter-spacing:-.075em;margin:16px 0 0}.service-hero p{font-size:clamp(17px,1.5vw,25px);line-height:1.5;margin:0}
.service-block{display:grid;grid-template-columns:minmax(220px,.38fr) minmax(0,1fr);gap:6vw;padding:clamp(52px,8vh,96px) 0;border-bottom:1px solid var(--line)}
.service-block h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(32px,4.8vw,74px);line-height:.9;letter-spacing:-.05em;margin:0}.service-block-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.service-block-content article{border:1px solid var(--line);padding:24px}.service-block-content h3{font-size:clamp(18px,2vw,30px);margin:0 0 10px}.service-block-content p{font-size:14px;line-height:1.55;margin:0;color:rgba(25,23,22,.72)}
.service-cta{margin:clamp(52px,8vh,100px) 0 20px;background:var(--burgundy);color:var(--cream);padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}.service-cta h2{font-family:"Poppins",Arial,sans-serif;font-size:clamp(48px,7vw,112px);line-height:.8;letter-spacing:-.07em;margin:0}.service-cta a{border:1px solid currentColor;padding:15px 18px;font-size:9px;font-weight:800;letter-spacing:.16em}
.service-links{display:flex;flex-wrap:wrap;gap:14px 24px;font-size:9px;font-weight:800;letter-spacing:.14em;padding:18px 0}
@media(max-width:760px){.service-nav div a:not(:first-child){display:none}.service-hero,.service-block,.service-cta{grid-template-columns:1fr}.service-block-content{grid-template-columns:1fr}.service-hero h1{font-size:clamp(54px,17vw,92px)}}

/* V4.1 — centered brand mark in navigation */
.topbar{
  position:fixed;
}
.topbar .wordmark{
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  margin:0;
}
.topbar .menu-trigger{
  margin-left:auto;
}

/* Keep the logo centered on the supporting SEO/service pages too. */
.service-nav{
  position:fixed;
}
.service-nav>a:first-child{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
}
.service-nav>div{
  margin-left:auto;
}

@media (max-width:760px){
  .topbar .wordmark{top:8px}
  .service-nav>a:first-child{left:50%}
}

/* V4.2 — real portrait in WHO AM I */
.portrait-photo{
  width:min(96%,620px);
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center bottom;
  margin-inline:auto;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 20px 28px rgba(28,18,18,.10));
}
.about-portrait .portrait-line{z-index:1}

@media (max-width:980px){
  .portrait-photo{width:min(82%,480px);margin-right:auto;margin-left:0}
}
@media (max-width:700px){
  .portrait-photo{width:min(90%,390px)}
}
@media (max-width:980px) and (orientation:landscape) and (max-height:520px){
  .portrait-photo{width:100%;height:100%;margin:0 auto}
}

/* V4.4 — YOURBOYJUN visual archive / real imagery */
.media-frame,.media-tile{position:relative;isolation:isolate}
.media-photo,.gallery-photo{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.72,.2,1),filter .45s ease;
}
.media-frame figcaption,.media-label{
  position:absolute;left:12px;bottom:10px;z-index:4;
  padding:7px 9px;background:rgba(17,15,15,.76);color:var(--cream);
  font-size:7px;font-weight:800;letter-spacing:.15em;line-height:1;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.media-frame::after,.media-tile::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,rgba(12,10,10,.25));
}
.shot:hover .media-photo,.vertical-card:hover .gallery-photo,.mosaic-card:hover .gallery-photo{transform:scale(1.035)}
.shot-a .media-photo{object-position:center center}
.shot-b .media-photo{object-position:center 68%}
.shot-c .media-photo{object-position:center center}

/* WHO AM I: preserve the formal portrait, but place it in a real visual world. */
.about-portrait{overflow:hidden}
.about-scene{
  position:absolute;inset:8% 0 3%;width:100%;height:89%;object-fit:cover;z-index:0;
  opacity:.22;filter:saturate(.72) contrast(.94);mix-blend-mode:multiply;
}
.portrait-photo{z-index:2}

/* Selected work uses the actual project-world imagery behind the case-study copy. */
.case-card{position:relative;overflow:hidden;isolation:isolate}
.case-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,10,.28),rgba(11,10,10,.72) 72%,rgba(11,10,10,.88));
  transition:background .3s ease;
}
.case-card:hover::after{background:linear-gradient(180deg,rgba(11,10,10,.12),rgba(11,10,10,.62) 72%,rgba(11,10,10,.84))}
.case-card-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.72) contrast(1.04);opacity:.72;transition:transform .65s cubic-bezier(.2,.72,.2,1),filter .45s ease;
}
.case-card:hover .case-card-image{transform:scale(1.05);filter:saturate(.95) contrast(1.06)}
.case-card>*:not(.case-card-image){position:relative;z-index:3;text-shadow:0 2px 18px rgba(0,0,0,.25)}

/* Film / visual archive */
.vertical-card,.mosaic-card{border-radius:0}
.gallery-photo.portrait-crop,.portrait-crop{object-position:center center}
.landscape-crop{object-position:center center}
.contain-photo{object-fit:cover;object-position:center center;background:#ece8e2}
.dark-label{background:rgba(20,16,16,.80)}

.creator-composite{background:#d7cec4}
.creator-composite .composite-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.7) contrast(.95);transition:transform .7s cubic-bezier(.2,.72,.2,1);
}
.creator-composite .composite-person{
  position:absolute;z-index:2;left:3%;right:3%;bottom:0;width:94%;height:94%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.18));transition:transform .7s cubic-bezier(.2,.72,.2,1);
}
.creator-composite:hover .composite-bg{transform:scale(1.04)}
.creator-composite:hover .composite-person{transform:translateY(-1.2%) scale(1.015)}
.creator-composite::after{background:linear-gradient(180deg,transparent 55%,rgba(11,10,10,.22))}

.brand-world{background:#1a1313;display:grid;place-items:center}
.brand-world-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.8) contrast(1.08);transition:transform .7s cubic-bezier(.2,.72,.2,1)}
.brand-world-logo{position:relative;z-index:3;width:auto;height:76%;max-width:54%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.24));transition:transform .55s ease}
.brand-world:hover .brand-world-bg{transform:scale(1.045)}
.brand-world:hover .brand-world-logo{transform:scale(1.025)}
.brand-world::after{background:linear-gradient(90deg,rgba(44,17,20,.34),rgba(16,13,13,.08),rgba(44,17,20,.34))}

/* A subtle visual Easter egg in CURRENTLY BUILDING. */
.page-current>*:not(.current-satellite){position:relative;z-index:2}
.current-satellite{
  position:absolute;z-index:0;right:5%;top:17%;width:clamp(80px,10vw,170px);height:auto;
  opacity:.10;filter:grayscale(1) sepia(.25);transform:rotate(14deg);pointer-events:none;
}

/* Ground the manifesto in a scenic layer without sacrificing readability. */
.page-quote{overflow:hidden}
.page-quote>*:not(.quote-landscape){position:relative;z-index:2}
.quote-landscape{
  position:absolute;z-index:0;left:0;right:0;bottom:-4%;width:100%;height:58%;object-fit:cover;object-position:center bottom;
  opacity:.12;filter:grayscale(.25) saturate(.55);mix-blend-mode:multiply;pointer-events:none;
}

@media (max-width:980px){
  .media-frame figcaption,.media-label{font-size:6.5px;left:9px;bottom:8px}
  .about-scene{inset:4% 0 2%;height:94%;opacity:.18}
  .case-card-image{opacity:.66}
  .quote-landscape{height:45%;bottom:0}
  .current-satellite{top:12%;right:4%;width:110px}
}

@media (max-width:700px){
  .media-frame figcaption{padding:6px 7px;font-size:6px;letter-spacing:.11em;max-width:calc(100% - 16px)}
  .media-label{padding:6px 7px;font-size:6px;letter-spacing:.11em}
  .about-scene{opacity:.13}
  .brand-world-logo{height:68%;max-width:62%}
  .current-satellite{width:84px;opacity:.07}
  .quote-landscape{height:35%;opacity:.09}
}

/* ==========================================================
   V4.6 — LEGACY YOURBOYJUN HERO + LOGO LOADER
   Uses the layered hero treatment from the original site while
   retaining the V4.x sticky portfolio/resume system underneath.
   ========================================================== */

/* Original black zoom-through logo loader. */
.ybj-logo-loader{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  background:#000;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 1s cubic-bezier(.87,0,.13,1), visibility 0s linear 1s;
}
.ybj-logo-loader img{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(52px,4.5vw,92px);
  height:auto;
  transform:translate(-50%,-50%) scale(3) rotate(10deg);
  transform-origin:center;
  opacity:0;
  filter:none;
  transition:transform 1s cubic-bezier(.87,0,.13,1), opacity 1s cubic-bezier(.87,0,.13,1);
  will-change:transform,opacity;
}
.ybj-logo-loader.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition-delay:1s,2s;
}
.ybj-logo-loader.is-leaving img{
  transform:translate(-50%,-50%) scale(10) rotate(0deg);
  opacity:1;
}

/* The first sticky slide becomes the original layered scenic hero. */
.legacy-hero-section{
  background:#000;
}
.stack-section>.legacy-hero-page{
  padding:0;
  background:#000;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  box-shadow:none;
}
.legacy-hero-parallax,
.legacy-hero-layer,
.legacy-hero-vignette,
.legacy-hero-bottom-fade{
  position:absolute;
  inset:0;
}
.legacy-hero-parallax{
  z-index:0;
  overflow:hidden;
  background:#000;
}
.legacy-hero-layer{
  width:100%;
  height:100%;
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.legacy-hero-bg{
  background:url('assets/legacy-hero-bg.webp') center center / cover no-repeat;
}
.legacy-hero-foreground{
  background:url('assets/legacy-hero-foreground.webp') center center / cover no-repeat;
  z-index:3;
  pointer-events:none;
}
.legacy-hero-center-logo{
  z-index:2;
  display:grid;
  place-items:start center;
  padding-top:11vh;
  pointer-events:none;
}
.legacy-hero-center-logo img{
  width:clamp(150px,14vw,285px);
  height:min(55vh,470px);
  object-fit:contain;
  object-position:center top;
  opacity:0;
  transform:translateY(70px);
  transition:opacity 1s cubic-bezier(.87,0,.13,1) 1.2s,
             transform 1s cubic-bezier(.87,0,.13,1) 1.2s;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.16));
}
body.hero-ready .legacy-hero-center-logo img{
  opacity:1;
  transform:translateY(0);
}
.legacy-hero-vignette{
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.20),transparent 23%),
    linear-gradient(to right,rgba(0,0,0,.15),transparent 20%,transparent 80%,rgba(0,0,0,.13));
}
.legacy-hero-bottom-fade{
  z-index:5;
  pointer-events:none;
  top:auto;
  height:44vh;
  background:linear-gradient(to top,
    #000 0%,
    rgba(0,0,0,.74) 18%,
    rgba(0,0,0,.48) 36%,
    rgba(0,0,0,.26) 56%,
    rgba(0,0,0,.08) 78%,
    transparent 100%);
}
.legacy-hero-scroll-cue{
  position:absolute;
  z-index:7;
  left:var(--pad);
  right:var(--pad);
  bottom:clamp(22px,4vh,44px);
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.86;
}
.legacy-hero-scroll-cue a{
  border-bottom:1px solid rgba(255,255,255,.65);
  padding-bottom:5px;
}
.legacy-hero-scroll-cue a:hover{opacity:.62}

/* Preserve the current centered navigation over the dark legacy hero. */
.legacy-hero-page ~ *{position:relative}

@media (max-width:900px){
  .legacy-hero-center-logo{padding-top:12vh}
  .legacy-hero-center-logo img{
    width:clamp(130px,25vw,220px);
    height:min(48vh,380px);
  }
}
@media (max-width:640px){
  .legacy-hero-bg,
  .legacy-hero-foreground{
    background-position:center center;
  }
  .legacy-hero-center-logo{padding-top:14vh}
  .legacy-hero-center-logo img{
    width:clamp(118px,33vw,175px);
    height:min(42vh,315px);
  }
  .legacy-hero-scroll-cue{
    font-size:7px;
    letter-spacing:.13em;
  }
  .legacy-hero-scroll-cue span{display:none}
  .legacy-hero-scroll-cue a{margin-left:auto}
}
@media (max-height:700px) and (min-width:761px){
  .legacy-hero-center-logo{padding-top:9vh}
  .legacy-hero-center-logo img{
    width:clamp(120px,11vw,190px);
    height:min(48vh,320px);
  }
  .legacy-hero-scroll-cue{bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .ybj-logo-loader img,
  .legacy-hero-center-logo img{transition:none}
  .ybj-logo-loader{transition:none}
}


/* ==========================================================
   V4.8 — ORIGINAL HERO PARALLAX + RELIABLE NAV LOGO HANDOFF
   ========================================================== */

/* The original non-sticky hero got part of its apparent parallax from
   the header itself scrolling upward. Because this portfolio uses a
   sticky full-page stack, the layers need enough overscan for that
   screen-space motion to be recreated directly with transforms. */
.legacy-hero-bg,
.legacy-hero-foreground{
  inset:-50vh 0;
  width:100%;
  height:200vh;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:transform;
  backface-visibility:hidden;
}
.legacy-hero-bg{background-position:center center}
.legacy-hero-foreground{background-position:center center}
.legacy-hero-center-logo{
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* Hide ONLY the fixed navigation mark during the first half of the
   hero. The class is driven directly from window scrollY, so once the
   visitor reaches section two the logo cannot accidentally disappear
   because of sticky-element geometry. */
.portfolio-home .topbar .wordmark{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-9px) scale(.88);
  transition:
    opacity .38s cubic-bezier(.2,.72,.2,1),
    transform .48s cubic-bezier(.2,.72,.2,1);
}
.portfolio-home.hero-nav-visible .topbar .wordmark{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* Keep the menu independently interactive while the center mark is hidden. */
.portfolio-home .topbar .menu-trigger{pointer-events:auto}

@media (max-width:640px){
  .legacy-hero-bg,
  .legacy-hero-foreground{
    inset:-42vh 0;
    height:184vh;
  }
}

@media (prefers-reduced-motion:reduce){
  .portfolio-home .topbar .wordmark,
  .portfolio-home.hero-nav-visible .topbar .wordmark{
    transition:none;
  }
}

/* ==========================================================
   V4.10 — FULL-BLEED YOUTUBE MANIFESTO BACKGROUND
   The linked film fills the entire quote slide behind the copy.
   ========================================================== */

.page-quote-video{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#111;
}

.page-quote-video > *:not(.quote-youtube-bg):not(.quote-video-wash){
  position:relative;
  z-index:3;
}

/* Full-viewport 16:9 cover treatment for the embedded YouTube film. */
.quote-youtube-bg{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:#111 url('assets/cinematic-landscape.webp') center / cover no-repeat;
}

.quote-youtube-bg iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:max(100vw, 177.7777778vh);
  height:max(56.25vw, 100vh);
  min-width:100%;
  min-height:100%;
  border:0;
  transform:translate(-50%,-50%) scale(1.08);
  pointer-events:none;
  opacity:1;
}

/* A restrained wash keeps the typography readable while leaving the film obvious. */
.quote-video-wash{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(13,10,10,.36), rgba(13,10,10,.12) 42%, rgba(13,10,10,.28)),
    linear-gradient(180deg, rgba(13,10,10,.18), rgba(13,10,10,.06) 48%, rgba(13,10,10,.30));
}

/* This is now a true video section, so text switches to a high-contrast light treatment. */
.page-quote-video blockquote,
.page-quote-video .quote-credit,
.page-quote-video .quote-scribble{
  color:#f7f1e9;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}

.page-quote-video .quote-icon{
  background:#f7f1e9;
  box-shadow:0 2px 18px rgba(0,0,0,.32);
}

.page-quote-video .quote-scribble{
  border-color:rgba(247,241,233,.62);
  background:rgba(12,10,10,.16);
  backdrop-filter:blur(2px);
}

/* Retire the previous local video/still treatments on this slide. */
.page-quote-video .quote-bg-video,
.page-quote-video .quote-landscape{display:none!important}

@media (max-width:760px){
  .quote-youtube-bg iframe{
    /* Portrait devices need a little more crop to guarantee edge-to-edge coverage. */
    transform:translate(-50%,-50%) scale(1.35);
  }
  .quote-video-wash{
    background:
      linear-gradient(90deg, rgba(13,10,10,.42), rgba(13,10,10,.18), rgba(13,10,10,.34)),
      linear-gradient(180deg, rgba(13,10,10,.26), rgba(13,10,10,.08) 45%, rgba(13,10,10,.36));
  }
}

@media (prefers-reduced-motion:reduce){
  /* Keep the section visually complete even when motion is reduced. */
  .quote-youtube-bg iframe{opacity:.86}
}

/* ==========================================================
   V4.12 — DIRECT YOUTUBE BACKGROUND PLAYER
   Direct embed avoids IFrame API postMessage/origin conflicts.
   ========================================================== */
.quote-youtube-player{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:max(100vw,177.7777778vh) !important;
  height:max(56.25vw,100vh) !important;
  min-width:100% !important;
  min-height:100% !important;
  border:0 !important;
  transform:translate(-50%,-50%) scale(1.10) !important;
  pointer-events:none !important;
  opacity:0;
  transition:opacity .55s ease;
  background:#111;
}
.quote-youtube-bg.is-loaded .quote-youtube-player{opacity:1}
.quote-video-fallback{
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('assets/cinematic-landscape.webp') center/cover no-repeat;
  opacity:1;
}
.quote-youtube-bg.is-loaded .quote-video-fallback{
  opacity:.16;
  transition:opacity .8s ease;
}
@media (max-width:760px){
  .quote-youtube-player{
    transform:translate(-50%,-50%) scale(1.38) !important;
  }
}


/* ==========================================================
   V4.13 — DIRECT, VISIBLE YOUTUBE BACKGROUND
   Remove paper/fallback ambiguity. The iframe itself is the
   background; only a restrained dark wash sits above it.
   ========================================================== */
.theme-paper .page.page-quote-video,
.page-quote-video{
  background:#0b0b0b !important;
}
.quote-youtube-bg{
  background:#0b0b0b !important;
  z-index:0 !important;
}
.quote-youtube-player,
.quote-youtube-bg iframe{
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  z-index:0 !important;
}
.quote-video-fallback{display:none !important;}
.quote-video-wash{
  background:rgba(8,8,8,.16) !important;
}
@media (max-width:760px){
  .quote-video-wash{background:rgba(8,8,8,.22) !important;}
}

/* ==========================================================
   V4.16 — SOFT VIEWPORT SETTLING + VISIBLE-START VIDEO
   Desktop slides snap exactly to the viewport while preserving
   the sticky cover-over transition between sections.
   ========================================================== */
@media (min-width:981px){
  /* Soft settling: sections remain true viewport slides, but reversing
     direction never gets trapped by a mandatory snap point. */
  html{
    scroll-snap-type:y proximity;
    scroll-padding-top:0;
  }
  .stack-section{
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }
  .stack-section>.page{
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
  }
}

/* The manifesto is a real full-bleed media slide. */
.quote-section,
.page-quote-video{
  background:#080808 !important;
}
.page-quote-video{
  width:100%;
  height:100%;
  min-height:100%;
}
.quote-youtube-bg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  background:#080808 !important;
  z-index:0 !important;
}
.quote-youtube-player,
.quote-youtube-bg iframe{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:max(100vw,177.7777778vh) !important;
  height:max(56.25vw,100vh) !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  border:0 !important;
  transform:translate(-50%,-50%) scale(1.08) !important;
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  pointer-events:none !important;
  background:#080808 !important;
}
.quote-video-wash{
  background:rgba(0,0,0,.20) !important;
}

/* Do not make mobile content-heavy pages impossible to navigate. */
@media (max-width:980px){
  html{scroll-snap-type:none !important;}
}

/* ==========================================================
   V4.17 — 50% BRAND WASH + CAPTION-SAFE BACKGROUND CROP
   YouTube captions can follow viewer preference. For this
   decorative background, overscan the player so the caption
   zone sits below the visible viewport, then apply a 50%
   YourBoyJun burgundy color wash above the film.
   ========================================================== */
.page-quote-video{
  --quote-video-wash-rgb: 99,53,56; /* #633538 */
  --quote-video-wash-opacity: .50;
}

.quote-video-wash{
  background:rgba(var(--quote-video-wash-rgb),var(--quote-video-wash-opacity)) !important;
}

/* Push YouTube's lower UI/caption safe-area outside the visible
   background crop while keeping the frame completely filled. */
.quote-youtube-player,
.quote-youtube-bg iframe{
  top:53% !important;
  transform:translate(-50%,-50%) scale(1.30) !important;
}

@media (max-width:760px){
  .quote-youtube-player,
  .quote-youtube-bg iframe{
    top:52% !important;
    transform:translate(-50%,-50%) scale(1.48) !important;
  }
}


/* ==========================================================
   V4.18 — HARD 50% BRAND COLOR LAYER
   Use a real solid overlay with independent opacity instead of
   an alpha color so the tint is consistent and unmistakable.
   ========================================================== */
.page-quote-video{
  isolation:isolate !important;
}

.quote-youtube-bg{
  z-index:0 !important;
}

.quote-youtube-player,
.quote-youtube-bg iframe{
  z-index:0 !important;
}

.quote-video-wash{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:2 !important;
  display:block !important;
  visibility:visible !important;
  pointer-events:none !important;
  background:#633538 !important;
  opacity:.50 !important;
}

.page-quote-video > *:not(.quote-youtube-bg):not(.quote-video-wash){
  position:relative !important;
  z-index:4 !important;
}

/* ==========================================================
   V4.19 — MANIFESTO GRID TEXTURE
   Match the dark technical grid language used by Selected Work
   and Live From The Shop without adding a runtime image request.
   Layer order: YouTube -> burgundy wash -> grid -> typography.
   ========================================================== */
.page-quote-video::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,rgba(0,0,0,0) 25%,rgba(0,0,0,.20) 100%);
  background-size:72px 72px,72px 72px,100% 100%;
  background-position:center center;
  opacity:.72;
}

/* Keep all manifesto copy and controls above the new grid layer. */
.page-quote-video > *:not(.quote-youtube-bg):not(.quote-video-wash){
  z-index:4 !important;
}

@media (max-width:760px){
  .page-quote-video::before{
    background-size:48px 48px,48px 48px,100% 100%;
    opacity:.62;
  }
}

/* ==========================================================
   V4.20 — STRONG TECH GRID + CAPTION-SAFE VIDEO BACKGROUND
   Match the dark grid used on Selected Work / Shop and visually
   bury YouTube's lower caption zone without touching the quote.
   ========================================================== */
.page-quote-video{
  isolation:isolate !important;
}

/* Stronger dark technical grid. The previous white .055 lines were
   too subtle over bright footage. */
.page-quote-video::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(8,8,8,.30) 1px,transparent 1px),
    linear-gradient(rgba(8,8,8,.30) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,rgba(0,0,0,0) 18%,rgba(0,0,0,.16) 68%,rgba(0,0,0,.32) 100%) !important;
  background-size:72px 72px,72px 72px,100% 100% !important;
  background-position:center center !important;
  opacity:1 !important;
  mix-blend-mode:multiply;
}

/* YouTube can honor the viewer's caption preference even when captions
   are not forced on. This lower vignette/mask places the subtitle safe
   area underneath the art direction so captions do not visually compete. */
.page-quote-video::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:24%;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(18,12,13,0) 0%,
      rgba(18,12,13,.32) 26%,
      rgba(18,12,13,.72) 58%,
      rgba(18,12,13,.96) 100%),
    linear-gradient(90deg,rgba(0,0,0,.22) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.22) 1px,transparent 1px);
  background-size:100% 100%,72px 72px,72px 72px;
  background-position:center center;
}

/* Copy stays above both texture layers. */
.page-quote-video > *:not(.quote-youtube-bg):not(.quote-video-wash){
  position:relative !important;
  z-index:6 !important;
}

/* Slightly stronger crop also moves YouTube's own lower UI farther out
   of the visible composition. */
.quote-youtube-player,
.quote-youtube-bg iframe{
  top:55% !important;
  transform:translate(-50%,-50%) scale(1.42) !important;
}

@media (max-width:760px){
  .page-quote-video::before{
    background-size:48px 48px,48px 48px,100% 100% !important;
  }
  .page-quote-video::after{
    height:28%;
    background-size:100% 100%,48px 48px,48px 48px;
  }
  .quote-youtube-player,
  .quote-youtube-bg iframe{
    top:54% !important;
    transform:translate(-50%,-50%) scale(1.58) !important;
  }
}

/* ==========================================================
   V4.21 — CHARCOAL VIDEO WASH
   Replace the burgundy manifesto-film treatment with a neutral,
   cinematic charcoal overlay while preserving the technical grid.
   ========================================================== */
.page-quote-video{
  --quote-video-charcoal:#202225;
}

.quote-video-wash{
  background:var(--quote-video-charcoal) !important;
  opacity:.50 !important;
}

/* Keep the caption-safe lower mask neutral too, so no burgundy hue
   remains in the video treatment. */
.page-quote-video::after{
  background:
    linear-gradient(to bottom,
      rgba(23,25,27,0) 0%,
      rgba(23,25,27,.32) 26%,
      rgba(23,25,27,.72) 58%,
      rgba(23,25,27,.96) 100%),
    linear-gradient(90deg,rgba(0,0,0,.22) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.22) 1px,transparent 1px) !important;
}

/* ==========================================================
   V4.22 — BIDIRECTIONAL VIEWPORT SETTLE
   Native CSS scroll snap is disabled on desktop because sticky
   slides can behave inconsistently when the user reverses direction.
   script.js now settles to the nearest slide after scrolling ends.
   ========================================================== */
@media (min-width:981px){
  html{
    scroll-snap-type:none !important;
    scroll-padding-top:0 !important;
  }
  .stack-section{
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
  }
  .stack-section>.page{
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
  }
}

/* V4.23 — black centered logo on light portfolio/detail pages */
body.service-page .service-nav > a:first-child img {
  filter: brightness(0) saturate(100%);
  opacity: 1;
}


/* ==========================================================
   V4.24 — WHO AM I / RESUME REFINEMENT
   Music is part of career history, not positioned as a service.
   Keeps the career statement visually attached to the role grid.
   ========================================================== */
.page-about{
  grid-template-rows:auto 1fr;
}
.about-details{
  min-width:0;
  align-self:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-list .about-location{
  grid-column:1 / -1;
  border-left:0;
  padding-left:0;
}
.about-bottom-copy{
  margin:clamp(16px,2.2vh,28px) 0 0 auto;
  max-width:min(980px,100%);
}

@media (min-width:981px) and (max-height:900px){
  .about-bottom-copy{
    margin-top:clamp(10px,1.5vh,16px);
  }
}

@media (min-width:981px) and (max-height:720px){
  .about-list p{
    min-height:28px;
    font-size:clamp(11.5px,min(1.08vw,2.05vh),19px);
    padding:2px 10px 2px 0;
  }
  .about-list p:nth-child(even){padding-left:10px}
  .about-bottom-copy{
    margin-top:8px;
    font-size:clamp(11.5px,min(.95vw,1.8vh),16px);
  }
}

@media (max-width:980px){
  .about-details{display:block}
  .about-bottom-copy{
    max-width:760px;
    margin:18px 0 0;
    text-align:left;
  }
}

@media (max-width:700px){
  .about-list .about-location{
    grid-column:auto;
  }
}

/* ==========================================================
   V4.25 — VERIFIED WHO AM I + DETAIL LOGO FIXES
   ========================================================== */
/* Keep the resume statement physically attached to the role grid. */
.about-details{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-self:center;
}
.about-bottom-copy{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  align-self:flex-end;
  margin:12px 0 0 !important;
  max-width:min(860px,100%) !important;
}
.about-list .about-location{
  grid-column:1 / -1;
}

/* The detail pages now use a physically black logo asset. Do not recolor it. */
body.service-page .service-nav > a:first-child img{
  filter:none !important;
  opacity:1 !important;
}

@media (min-width:981px) and (max-height:900px){
  .about-bottom-copy{margin-top:8px !important;}
  .about-list p{
    min-height:clamp(28px,4.25vh,39px);
    font-size:clamp(12px,min(1.18vw,2.15vh),21px);
    padding:3px 10px 3px 0;
  }
  .about-list p:nth-child(even){padding-left:10px;}
}

@media (max-width:980px){
  .about-details{display:block !important;}
  .about-bottom-copy{
    margin:14px 0 0 !important;
    text-align:left;
    max-width:760px !important;
  }
}

/* ==========================================================
   V4.26 — VERIFIED FINAL OVERRIDES
   Physical stylesheet filename changed to defeat stale CDN/browser
   copies. These rules intentionally come LAST.
   ========================================================== */

/* WHO AM I — music is resume history, not a public service offering. */
.page-about{
  grid-template-rows:auto 1fr !important;
}
.about-details{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:center !important;
  min-width:0 !important;
}
.about-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  border-top:1px solid var(--line) !important;
}
.about-list p{
  min-height:clamp(32px,4.4vh,44px) !important;
  padding:clamp(3px,.55vh,6px) 12px clamp(3px,.55vh,6px) 0 !important;
  font-size:clamp(13px,min(1.28vw,2.25vh),23px) !important;
  line-height:1 !important;
  margin:0 !important;
  border-bottom:1px solid var(--line) !important;
}
.about-list p:nth-child(even){
  border-left:1px solid var(--line) !important;
  padding-left:12px !important;
}
.about-list .role-music{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
.about-list .about-location{
  grid-column:1 / -1 !important;
  border-left:0 !important;
  padding-left:0 !important;
}
.about-bottom-copy{
  position:static !important;
  transform:none !important;
  align-self:flex-end !important;
  max-width:min(900px,100%) !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  font-size:clamp(13px,min(1.15vw,2vh),21px) !important;
  line-height:1.16 !important;
  text-align:right !important;
}

/* CHARCOAL VIDEO — absolutely no burgundy tint on manifesto film. */
.page-quote-video{
  --quote-video-charcoal:#202225 !important;
}
.page-quote-video .quote-video-wash,
.quote-video-wash{
  background:#202225 !important;
  background-color:#202225 !important;
  opacity:.50 !important;
}
.page-quote-video::after{
  background:
    linear-gradient(to bottom,
      rgba(23,25,27,0) 0%,
      rgba(23,25,27,.32) 26%,
      rgba(23,25,27,.72) 58%,
      rgba(23,25,27,.96) 100%),
    linear-gradient(90deg,rgba(0,0,0,.22) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.22) 1px,transparent 1px) !important;
}

/* Detail pages: black mark on light paper. */
body.service-page .service-nav > a:first-child img{
  filter:none !important;
  opacity:1 !important;
}

@media (min-width:981px) and (max-height:760px){
  .about-list p{
    min-height:27px !important;
    padding:2px 10px !important;
    font-size:clamp(11px,min(1vw,1.85vh),17px) !important;
  }
  .about-list p:nth-child(odd){padding-left:0 !important;}
  .about-bottom-copy{
    margin-top:6px !important;
    font-size:clamp(11px,min(.92vw,1.65vh),15px) !important;
  }
}

@media (max-width:980px){
  .about-details{display:block !important;}
  .about-list{grid-template-columns:1fr 1fr !important;}
  .about-bottom-copy{text-align:left !important;margin-top:14px !important;}
}
@media (max-width:700px){
  .about-list{grid-template-columns:1fr !important;}
  .about-list p:nth-child(even){border-left:0 !important;padding-left:0 !important;}
  .about-list .about-location{grid-column:auto !important;}
}

/* ==========================================================
   V4.28 — BTS / PRODUCTION MOVING VIDEO TILE
   The BTS mosaic tile uses a YouTube video as motion media while
   retaining the existing production still as an instant poster/fallback.
   ========================================================== */
.bts-video-tile{
  position:relative;
  isolation:isolate;
  background:#111;
}
.bts-video-tile .bts-video-poster{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:1;
  transition:opacity .45s ease,transform .65s cubic-bezier(.2,.72,.2,1);
}
.bts-youtube-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:#111;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.bts-youtube-bg.is-loaded{opacity:1}
.bts-youtube-player{
  position:absolute;
  left:50%;
  top:50%;
  width:230%;
  height:116%;
  border:0;
  transform:translate(-50%,-50%) scale(1.02);
  transform-origin:center;
  pointer-events:none;
}
/* Make the moving tile read as portfolio footage rather than an embed. */
.bts-video-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,15,15,.08) 0%,rgba(15,15,15,.02) 48%,rgba(15,15,15,.30) 100%);
}
.bts-video-tile::after{
  z-index:3;
  background:linear-gradient(180deg,transparent 58%,rgba(12,10,10,.28));
}
.bts-video-tile .media-label{z-index:5}
.bts-video-tile:hover .bts-youtube-player{transform:translate(-50%,-50%) scale(1.045)}

@media(max-width:980px){
  .bts-youtube-player{width:200%;height:120%}
}
@media(max-width:640px){
  .bts-youtube-player{width:185%;height:124%}
}


/* ==========================================================
   V4.30 — YOURBOYJUN × VGP HYBRID
   Creator-led Visual Growth Partner positioning.
   ========================================================== */
.topbar::before{
  content:"VISUAL GROWTH PARTNER";
  position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  font-size:8px;font-weight:800;letter-spacing:.2em;color:currentColor;
}
.hero-perspective{
  position:absolute;right:var(--pad);bottom:40px;z-index:8;width:min(340px,30vw);
  display:grid;gap:8px;text-align:right;color:#fff;
}
.hero-perspective span{font-size:7px;font-weight:800;letter-spacing:.18em;opacity:.72}
.hero-perspective strong{font-size:clamp(12px,1.15vw,18px);line-height:1.05;letter-spacing:-.02em}
.vgp-intro-head{font-size:clamp(62px,8.5vw,138px)!important;line-height:.84!important;letter-spacing:-.06em!important}

.page-growth-system{display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(18px,3vh,36px)}
.growth-system-head{display:grid;grid-template-columns:1.2fr .8fr;gap:7vw;align-items:end}
.growth-kicker{font-size:9px;font-weight:800;letter-spacing:.18em;margin:0 0 12px;color:rgba(241,238,232,.62)}
.growth-system-head h2{font-size:clamp(58px,7vw,118px);line-height:.82;letter-spacing:-.065em;margin:0;font-weight:800}
.growth-system-head h2 span{color:#a6575c}
.growth-system-head>p{font-size:clamp(18px,1.7vw,27px);line-height:1.2;margin:0;max-width:560px;color:rgba(241,238,232,.72)}
.growth-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line)}
.growth-cap-grid article{padding:clamp(18px,2vw,32px);border-right:1px solid var(--cream-line);display:grid;grid-template-rows:auto auto 1fr;gap:12px}
.growth-cap-grid article:last-child{border-right:0}
.growth-cap-grid span{font-size:8px;font-weight:800;letter-spacing:.18em;color:#a6575c}
.growth-cap-grid strong{font-size:clamp(16px,1.6vw,26px);line-height:1;letter-spacing:-.04em}
.growth-cap-grid p{font-size:clamp(12px,1vw,15px);line-height:1.4;color:rgba(241,238,232,.64);margin:0}
.growth-ticker{overflow:hidden;border-top:1px solid var(--cream-line);padding-top:14px;white-space:nowrap}
.growth-ticker div{display:inline-block;min-width:200%;font-size:9px;font-weight:800;letter-spacing:.18em;animation:vgpTicker 24s linear infinite}
@keyframes vgpTicker{to{transform:translateX(-50%)}}

.page-studio-feed{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(18px,3vh,32px)}
.studio-feed-heading{display:grid;grid-template-columns:1fr .75fr;align-items:end;gap:6vw}
.studio-feed-heading h2{margin:0}
.studio-feed-heading p{align-self:end;margin:0 0 10px;font-size:clamp(16px,1.55vw,24px);line-height:1.18}
.studio-feed-grid a{background:rgba(16,16,16,.025);transition:transform .25s ease,background .25s ease}
.studio-feed-grid a:hover{transform:translateY(-4px);background:rgba(16,16,16,.055)}
.studio-feed-return{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:14px;font-size:8px;font-weight:800;letter-spacing:.16em}
.studio-feed-return a{text-decoration:underline;text-underline-offset:4px}

@media(max-width:980px){
  .topbar::before{display:none}
  .hero-perspective{width:44vw;bottom:26px}
  .growth-system-head{grid-template-columns:1fr;gap:16px}
  .growth-cap-grid{grid-template-columns:repeat(2,1fr)}
  .growth-cap-grid article:nth-child(2){border-right:0}
  .growth-cap-grid article:nth-child(-n+2){border-bottom:1px solid var(--cream-line)}
  .studio-feed-heading{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero-perspective{display:none}
  .vgp-intro-head{font-size:clamp(52px,16vw,86px)!important}
  .growth-cap-grid{grid-template-columns:1fr}
  .growth-cap-grid article{border-right:0!important;border-bottom:1px solid var(--cream-line)}
  .growth-cap-grid article:last-child{border-bottom:0}
  .studio-feed-return{flex-direction:column}
}

/* =========================================================
   V4.31 — TRUE YBJ × VGP ART-DIRECTION FUSION
   Pulls the visual systems of VGP STUDIO into the existing
   YourBoyJun sticky cinematic portfolio instead of only
   changing copy. Poppins remains the primary type system.
   ========================================================= */
:root{
  --vgp-gold:#d6b46b;
  --vgp-acid:#d8ff4f;
  --vgp-charcoal:#202225;
}

/* gallery-like materiality */
.art-grain{
  position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='vgpn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23vgpn)' opacity='.95'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}
.cursor-halo{
  --x:50vw;--y:25vh;position:fixed;z-index:0;pointer-events:none;
  left:var(--x);top:var(--y);width:min(42vw,680px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(214,180,107,.10),rgba(214,180,107,0) 68%);filter:blur(10px);
}
.art-edge-rail{
  position:fixed;left:8px;top:50%;z-index:8500;transform:translateY(-50%);pointer-events:none;
  display:flex;gap:26px;align-items:center;writing-mode:vertical-rl;rotate:180deg;
  font:700 7px/1 "Poppins",sans-serif;letter-spacing:.22em;color:rgba(255,255,255,.34);mix-blend-mode:difference;
}

/* ---------- INTRO / editorial poster + orbit language ---------- */
.art-intro-page{overflow:hidden;isolation:isolate;background:
  linear-gradient(90deg,rgba(243,236,226,.055) 1px,transparent 1px),
  linear-gradient(rgba(243,236,226,.055) 1px,transparent 1px),
  var(--burgundy)!important;background-size:72px 72px,72px 72px,auto!important;
}
.art-intro-page::before{
  content:"VGP";position:absolute;left:-.055em;bottom:-.30em;z-index:-1;
  font:800 clamp(210px,34vw,610px)/.7 "Poppins",sans-serif;letter-spacing:-.11em;
  color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.09);opacity:.8;
}
.intro-art-orbit{position:absolute;z-index:0;border:1px solid rgba(243,236,226,.19);border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.intro-art-orbit.orbit-a{width:min(58vw,920px);aspect-ratio:1;right:-14vw;top:-2vh;animation:vgpOrbit 38s linear infinite}
.intro-art-orbit.orbit-b{width:min(34vw,560px);aspect-ratio:1;right:4vw;top:20vh;border-color:rgba(214,180,107,.42);animation:vgpOrbitReverse 26s linear infinite}
.intro-art-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--vgp-gold);box-shadow:0 0 28px rgba(214,180,107,.85)}
.intro-art-orbit i:first-child{left:13%;top:14%}.intro-art-orbit i:nth-child(2){right:10%;bottom:20%}
.intro-crosshair{position:absolute;left:7%;top:23%;width:84px;height:84px;opacity:.38}
.intro-crosshair::before,.intro-crosshair::after{content:"";position:absolute;background:var(--cream)}
.intro-crosshair::before{left:50%;top:0;width:1px;height:100%}.intro-crosshair::after{top:50%;left:0;height:1px;width:100%}
.intro-label,.intro-center,.intro-contact,.intro-corner-card,.intro-ticker{position:relative;z-index:3}
.art-intro-page{grid-template-columns:minmax(120px,.28fr) minmax(0,1fr) minmax(190px,.34fr);grid-template-rows:auto 1fr auto;gap:20px}
.art-intro-page .intro-label{grid-column:1;grid-row:1}
.art-intro-page .intro-center{grid-column:2;grid-row:1/4;align-self:center;text-align:left;padding-left:clamp(0px,4vw,60px)}
.intro-microline{margin:0 0 18px;font-size:9px;font-weight:800;letter-spacing:.18em;color:rgba(243,236,226,.62)}
.vgp-intro-head{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-wrap:balance}
.vgp-intro-head span{display:block;font-size:clamp(66px,9vw,148px);line-height:.79;letter-spacing:-.075em;font-weight:800}
.vgp-intro-head .outline-word{color:transparent;-webkit-text-stroke:1.5px var(--cream);padding-left:clamp(20px,5vw,86px);font-size:clamp(78px,10.6vw,178px)}
.intro-deck{max-width:680px;margin:28px 0 0 clamp(22px,8vw,150px);font-size:clamp(14px,1.2vw,19px);line-height:1.55;color:rgba(243,236,226,.72)}
.intro-corner-card{grid-column:3;grid-row:2;align-self:end;justify-self:end;width:min(280px,100%);min-height:190px;border:1px solid rgba(243,236,226,.32);background:rgba(21,13,13,.28);backdrop-filter:blur(13px);padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.intro-corner-card span,.intro-corner-card small{font-size:7px;font-weight:800;letter-spacing:.17em;color:rgba(243,236,226,.55)}
.intro-corner-card strong{font-size:clamp(16px,1.4vw,22px);line-height:1.03;max-width:13ch}
.art-intro-page .intro-contact{grid-column:3;grid-row:3;align-self:end}
.intro-ticker{position:absolute!important;left:0;right:0;bottom:0;height:28px;border-top:1px solid rgba(243,236,226,.25);overflow:hidden;background:rgba(22,12,13,.26);white-space:nowrap;display:flex;align-items:center}
.intro-ticker div{display:inline-block;min-width:200%;font-size:7px;font-weight:800;letter-spacing:.22em;animation:vgpTicker431 23s linear infinite;color:rgba(243,236,226,.68)}
@keyframes vgpOrbit{to{transform:rotate(360deg)}}
@keyframes vgpOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes vgpTicker431{to{transform:translateX(-50%)}}

/* ---------- WHO I AM / art manifesto layer ---------- */
.page-about{isolation:isolate}
.about-art-letter{position:absolute;left:-4vw;bottom:-8vh;z-index:0;font:800 clamp(240px,38vw,620px)/.7 "Poppins",sans-serif;color:rgba(99,53,56,.045);letter-spacing:-.12em;pointer-events:none}
.about-portrait>*:not(.about-art-letter):not(.about-geometry){position:relative;z-index:2}
.about-geometry{position:absolute;inset:8% -10% auto auto;width:62%;aspect-ratio:1;z-index:3;pointer-events:none;mix-blend-mode:multiply}
.about-geometry i{position:absolute;display:block;transition:transform .8s cubic-bezier(.19,1,.22,1)}
.about-geometry i:nth-child(1){width:76%;aspect-ratio:1;border:1px solid rgba(99,53,56,.42);border-radius:50%;left:-18%;top:-16%}
.about-geometry i:nth-child(2){width:56%;aspect-ratio:1;background:rgba(214,180,107,.28);clip-path:polygon(50% 0,100% 100%,0 100%);right:-20%;bottom:-12%;transform:rotate(18deg)}
.about-geometry i:nth-child(3){width:42%;height:70%;border:1px solid rgba(25,23,22,.5);border-radius:50%;left:33%;top:18%;transform:rotate(27deg)}
.about-portrait:hover .about-geometry i:nth-child(1){transform:translate(-6%,-4%) rotate(10deg)}
.about-portrait:hover .about-geometry i:nth-child(2){transform:translate(7%,7%) rotate(-12deg)}
.about-portrait:hover .about-geometry i:nth-child(3){transform:rotate(45deg) scale(1.08)}
.about-manifesto-tag{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;border-top:1px solid var(--line);padding:10px 0 12px;margin-bottom:4px}
.about-manifesto-tag span{font-size:7px;font-weight:800;letter-spacing:.18em;color:var(--burgundy)}
.about-manifesto-tag strong{justify-self:end;text-align:right;font-size:clamp(12px,1.05vw,16px);line-height:1.05;letter-spacing:-.02em}

/* ---------- THREAD / living abstract stage ---------- */
.thread-detail{isolation:isolate;overflow:visible;padding-right:clamp(10px,3vw,54px)}
.thread-detail>*:not(.thread-art-canvas){position:relative;z-index:3}
.thread-art-canvas{position:absolute;z-index:1;right:-3vw;top:50%;width:min(37vw,560px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.78}
.thread-shape{position:absolute;display:block;transition:all .75s cubic-bezier(.19,1,.22,1);mix-blend-mode:screen}
.thread-shape.a{width:64%;aspect-ratio:1;border-radius:50%;background:rgba(99,53,56,.8);right:4%;top:7%;filter:blur(.3px)}
.thread-shape.b{width:54%;aspect-ratio:1;background:rgba(214,180,107,.72);clip-path:polygon(50% 0,100% 100%,0 100%);left:4%;bottom:2%;transform:rotate(16deg)}
.thread-shape.c{width:37%;height:70%;border:1px solid rgba(243,236,226,.72);border-radius:50%;left:38%;top:14%;transform:rotate(28deg)}
.thread-art-canvas b{position:absolute;right:2%;bottom:-7%;font:800 clamp(150px,18vw,280px)/.65 "Poppins",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.13);letter-spacing:-.08em}
.thread-detail[data-thread-art="design"] .thread-shape.a{border-radius:0;transform:rotate(12deg) scale(.9);background:rgba(214,180,107,.7)}
.thread-detail[data-thread-art="design"] .thread-shape.b{clip-path:polygon(0 18%,100% 0,78% 100%,8% 78%);background:rgba(99,53,56,.9);transform:rotate(-10deg)}
.thread-detail[data-thread-art="build"] .thread-shape.a{border-radius:0;clip-path:polygon(0 0,100% 25%,77% 100%,12% 82%);transform:translate(-10%,6%) rotate(-6deg)}
.thread-detail[data-thread-art="market"] .thread-shape.a{transform:scale(1.1);background:rgba(216,255,79,.25)}
.thread-detail[data-thread-art="market"] .thread-shape.b{transform:rotate(48deg) scale(.82)}
.thread-detail[data-thread-art="engineer"] .thread-shape.a{background:transparent;border:1px solid rgba(214,180,107,.72);border-radius:50%}
.thread-detail[data-thread-art="engineer"] .thread-shape.b{clip-path:none;width:1px;height:78%;background:rgba(243,236,226,.66);left:48%;bottom:5%}
.thread-detail[data-thread-art="create"] .thread-shape.a{transform:translate(-12%,-8%) scale(.76)}
.thread-detail[data-thread-art="create"] .thread-shape.b{transform:translate(12%,12%) rotate(-24deg) scale(1.12)}

/* ---------- VISUAL GROWTH SYSTEM / actual VGP capability stage ---------- */
.page-growth-system{gap:clamp(12px,1.6vh,20px)!important}
.growth-system-head{grid-template-columns:1.05fr .65fr!important;gap:5vw!important}
.growth-system-head h2{font-size:clamp(52px,6.2vw,100px)!important}
.growth-art-system{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);border:1px solid rgba(243,236,226,.25);min-height:0;flex:1;overflow:hidden;background:#11100f}
.growth-art-list{display:flex;flex-direction:column;border-right:1px solid rgba(243,236,226,.2)}
.growth-art-row{appearance:none;border:0;border-bottom:1px solid rgba(243,236,226,.2);background:transparent;color:rgba(243,236,226,.52);display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;padding:clamp(14px,1.8vh,20px) clamp(16px,1.8vw,27px);text-align:left;cursor:pointer;min-height:70px;transition:background .3s ease,color .3s ease,padding-left .3s ease}
.growth-art-row:last-child{border-bottom:0}.growth-art-row span{font-size:7px;font-weight:800;letter-spacing:.18em;color:var(--vgp-gold)}
.growth-art-row strong{font-size:clamp(13px,1.05vw,17px);line-height:1.1}.growth-art-row i{font-style:normal;font-size:16px;transition:transform .35s}
.growth-art-row:hover,.growth-art-row.active{background:var(--cream);color:var(--ink);padding-left:clamp(24px,2.4vw,38px)}
.growth-art-row.active i{transform:rotate(45deg)}
.growth-art-stage{position:relative;overflow:hidden;min-height:0;background:
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),#11100f;background-size:48px 48px}
.growth-art-stage::before{content:"V";position:absolute;right:-.08em;bottom:-.22em;font:800 clamp(210px,28vw,470px)/.7 "Poppins",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.08);pointer-events:none}
.growth-art-panel{position:absolute;inset:0;padding:clamp(28px,3vw,54px);opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1),visibility .45s;display:grid;grid-template-rows:auto auto 1fr minmax(130px,.9fr);align-content:start}
.growth-art-panel.active{opacity:1;visibility:visible;transform:none}
.growth-art-panel small{font-size:7px;font-weight:800;letter-spacing:.2em;color:var(--vgp-gold)}
.growth-art-panel h3{font-size:clamp(34px,4vw,68px);line-height:.86;letter-spacing:-.055em;margin:12px 0 14px;max-width:13ch}
.growth-art-panel>p{font-size:clamp(12px,1vw,15px);line-height:1.5;color:rgba(243,236,226,.63);max-width:560px;margin:0}
.strategy-diagram,.content-diagram,.web-diagram,.partner-diagram{position:relative;align-self:end;height:150px;margin-top:16px;border-top:1px solid rgba(243,236,226,.2)}
.strategy-diagram span{position:absolute;border:1px solid rgba(243,236,226,.34);border-radius:999px;padding:7px 12px;font-size:7px;letter-spacing:.16em}.strategy-diagram span:nth-child(1){left:0;top:22%}.strategy-diagram span:nth-child(2){left:25%;top:55%}.strategy-diagram span:nth-child(3){left:49%;top:15%}.strategy-diagram span:nth-child(4){right:0;top:48%}.strategy-diagram b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(35px,4vw,58px);letter-spacing:-.06em;color:var(--vgp-gold);opacity:.7}
.content-diagram{display:flex;align-items:flex-end;gap:10px}.content-diagram i{display:block;border:1px solid rgba(243,236,226,.34);flex:1;background:linear-gradient(180deg,rgba(99,53,56,.35),rgba(99,53,56,.06))}.content-diagram i:nth-child(1){height:38%}.content-diagram i:nth-child(2){height:72%}.content-diagram i:nth-child(3){height:52%}.content-diagram i:nth-child(4){height:90%}.content-diagram span{position:absolute;font-size:7px;font-weight:800;letter-spacing:.16em}.content-diagram span:nth-of-type(1){left:3px;top:10px}.content-diagram span:nth-of-type(2){right:3px;top:10px;color:var(--vgp-gold)}
.web-diagram div{position:absolute;inset:18px 24% 10px 0;border:1px solid rgba(243,236,226,.32)}.web-diagram div::before{content:"";position:absolute;left:0;right:0;top:20px;border-top:1px solid rgba(243,236,226,.25)}.web-diagram strong{position:absolute;right:0;bottom:14px;font-size:clamp(16px,1.5vw,24px);line-height:.95;text-align:right}.web-diagram i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--vgp-acid);top:28px}.web-diagram i:nth-of-type(1){left:12px}.web-diagram i:nth-of-type(2){left:26px;background:var(--vgp-gold)}
.partner-diagram{display:flex;align-items:center;justify-content:space-between}.partner-diagram span{display:grid;place-items:center;width:62px;aspect-ratio:1;border:1px solid rgba(243,236,226,.28);border-radius:50%;font-size:6px;letter-spacing:.1em}.partner-diagram b{font-size:clamp(30px,3vw,48px);letter-spacing:-.06em;color:var(--vgp-gold)}

/* ---------- SELECTED WORK / gallery poster system ---------- */
.page-work{position:relative;isolation:isolate}.work-art-marker{position:absolute;right:var(--pad);top:122px;width:min(300px,22vw);height:100px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:2px 12px;color:rgba(243,236,226,.18);pointer-events:none}
.work-art-marker span,.work-art-marker small{font-size:7px;font-weight:800;letter-spacing:.2em;color:rgba(243,236,226,.42)}.work-art-marker b{grid-row:1/3;grid-column:2;justify-self:end;font-size:clamp(74px,9vw,140px);line-height:.65;color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.13)}
.art-case-grid{perspective:1400px}.art-case-grid .case-card:nth-child(1){transform:translateY(-6px)}.art-case-grid .case-card:nth-child(2){transform:translateY(18px)}.art-case-grid .case-card:nth-child(3){transform:translateY(-14px)}
.art-case-grid .case-card:hover{transform:translateY(-10px) rotateX(1.4deg)!important}.art-case-grid .case-card::before{content:attr(data-art-no);position:absolute;right:-.03em;bottom:-.18em;font:800 clamp(96px,11vw,176px)/.7 "Poppins",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.12);z-index:2;pointer-events:none}
.art-case-grid .case-card:nth-child(1)::before{content:"01"}.art-case-grid .case-card:nth-child(2)::before{content:"02"}.art-case-grid .case-card:nth-child(3)::before{content:"03"}

/* ---------- STUDIO FEED / art-poster cards ---------- */
.studio-feed-grid .feed-poster{position:relative;overflow:hidden;isolation:isolate;min-height:0}
.feed-poster-glyph{position:absolute;z-index:-1;right:-.05em;top:.02em;font-style:normal;font:800 clamp(130px,15vw,235px)/.75 "Poppins",sans-serif;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(25,23,22,.08);pointer-events:none}
.feed-poster-one{background:var(--cream)!important}.feed-poster-two{background:var(--vgp-charcoal)!important;color:var(--cream)!important}.feed-poster-three{background:var(--burgundy)!important;color:var(--cream)!important}
.feed-poster-two p,.feed-poster-three p{color:rgba(243,236,226,.65)!important}.feed-poster-two span,.feed-poster-two b,.feed-poster-three span,.feed-poster-three b{color:inherit!important}
.feed-poster-two .feed-poster-glyph,.feed-poster-three .feed-poster-glyph{-webkit-text-stroke-color:rgba(243,236,226,.13)}
.feed-poster::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;opacity:.5;z-index:-1}

/* ---------- CONTACT / oversized graphic ending ---------- */
.page-connect{isolation:isolate;overflow:hidden}.contact-art-word{position:absolute;z-index:0;left:-.04em;bottom:-.18em;font:800 clamp(190px,27vw,460px)/.72 "Poppins",sans-serif;letter-spacing:-.085em;color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.075);pointer-events:none;white-space:nowrap}.page-connect>*:not(.contact-art-word):not(.contact-orbit){position:relative;z-index:3}
.contact-orbit{position:absolute;z-index:1;right:-12vw;top:5vh;width:min(55vw,820px);aspect-ratio:1;border:1px solid rgba(243,236,226,.14);border-radius:50%;animation:vgpOrbit 42s linear infinite;pointer-events:none}.contact-orbit::before{content:"";position:absolute;inset:18%;border:1px solid rgba(214,180,107,.24);border-radius:50%}.contact-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--vgp-gold)}.contact-orbit i:first-child{left:13%;top:14%}.contact-orbit i:last-child{right:10%;bottom:20%}

/* ---------- Responsive art system ---------- */
@media(max-width:1100px){
  .art-edge-rail{display:none}.art-intro-page{grid-template-columns:1fr minmax(180px,.34fr)}.art-intro-page .intro-label{grid-column:1}.art-intro-page .intro-center{grid-column:1;grid-row:2;padding-left:0}.intro-corner-card{grid-column:2;grid-row:2}.art-intro-page .intro-contact{grid-column:2;grid-row:3}.growth-art-system{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)}
  .work-art-marker{display:none}
}
@media(max-width:820px){
  .cursor-halo{display:none}.art-intro-page{display:block!important;padding-bottom:52px!important}.intro-art-orbit.orbit-a{width:90vw;right:-45vw}.intro-art-orbit.orbit-b{width:60vw;right:-10vw}.art-intro-page .intro-center{position:relative;margin-top:18vh}.vgp-intro-head span,.vgp-intro-head .outline-word{font-size:clamp(52px,13vw,92px);padding-left:0}.intro-deck{margin:22px 0 0;max-width:90%}.intro-corner-card{position:absolute!important;right:var(--pad);bottom:56px;width:min(240px,68vw);min-height:130px}.intro-contact{display:none!important}
  .about-manifesto-tag{display:none}.about-geometry{opacity:.6}
  .thread-art-canvas{opacity:.34;width:72vw;right:-25vw}.thread-detail{padding-right:0}
  .growth-system-head{grid-template-columns:1fr!important}.growth-system-head>p{display:none}.growth-art-system{grid-template-columns:1fr;overflow:visible}.growth-art-list{border-right:0;border-bottom:1px solid rgba(243,236,226,.2)}.growth-art-row{min-height:54px;padding:10px 14px}.growth-art-stage{min-height:360px}.growth-art-panel{padding:24px;grid-template-rows:auto auto auto 1fr}.growth-art-panel h3{font-size:clamp(30px,8vw,48px)}
  .art-case-grid .case-card:nth-child(n){transform:none}.feed-poster-glyph{font-size:28vw}
}
@media(max-height:780px) and (min-width:821px){
  .intro-corner-card{min-height:140px}.intro-deck{margin-top:16px;font-size:13px}.vgp-intro-head span{font-size:clamp(58px,8.5vw,120px)}.vgp-intro-head .outline-word{font-size:clamp(68px,9.7vw,140px)}
  .growth-art-row{min-height:54px;padding-block:10px}.growth-art-panel{padding:22px 30px;grid-template-rows:auto auto auto minmax(100px,.8fr)}.growth-art-panel h3{font-size:clamp(28px,3.4vw,52px);margin:7px 0 8px}.strategy-diagram,.content-diagram,.web-diagram,.partner-diagram{height:105px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.intro-art-orbit,.contact-orbit,.intro-ticker div{animation:none!important}.thread-shape{transition:none!important}}

/* =========================================================
   V4.32 — WHO AM I / GRAPHIC IDENTITY CANVAS
   Portrait removed. A CSS-driven visual-growth composition
   replaces photography for a more creative-agency expression.
   ========================================================= */
.about-identity-canvas{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:0;
  height:min(60vh,620px);
  background:#17191b;
  border:1px solid rgba(25,23,22,.28);
  box-shadow:18px 22px 0 rgba(25,23,22,.045);
  display:block;
}
.about-identity-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 86% 15%,rgba(216,255,79,.13),transparent 22%),
    radial-gradient(circle at 14% 82%,rgba(214,180,107,.18),transparent 25%),
    linear-gradient(135deg,rgba(99,53,56,.16),transparent 48%);
}
.identity-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.78;
  mask-image:linear-gradient(to bottom,#000 0 78%,transparent 100%);
}
.identity-ghost{
  position:absolute;z-index:0;left:-.07em;bottom:-.17em;
  font:800 clamp(180px,24vw,390px)/.72 "Poppins",sans-serif;
  letter-spacing:-.11em;color:transparent;
  -webkit-text-stroke:1px rgba(243,236,226,.095);
  pointer-events:none;
}
.identity-core{
  position:absolute;z-index:4;left:clamp(20px,3vw,48px);top:clamp(22px,4.5vh,52px);
  max-width:82%;color:var(--cream);
}
.identity-core>span{
  display:block;margin-bottom:clamp(18px,2.7vh,32px);
  font-size:7px;font-weight:800;letter-spacing:.21em;color:rgba(243,236,226,.54);
}
.identity-core h2{
  margin:0;font-size:clamp(42px,5.2vw,83px);line-height:.80;
  letter-spacing:-.065em;font-weight:800;text-wrap:balance;
}
.identity-core h2 em{
  font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--vgp-gold);
}
.identity-core p{
  margin:clamp(17px,2.4vh,28px) 0 0;
  font-size:clamp(10px,.85vw,13px);font-weight:600;letter-spacing:.07em;
  color:rgba(243,236,226,.62);
}
.identity-chips{position:absolute;inset:0;z-index:5;pointer-events:none}
.identity-chips b{
  position:absolute;display:grid;place-items:center;min-width:90px;height:30px;padding:0 12px;
  font-size:7px;font-weight:800;letter-spacing:.18em;border:1px solid rgba(243,236,226,.36);
  color:var(--cream);background:rgba(23,25,27,.86);backdrop-filter:blur(8px);
  transition:transform .65s cubic-bezier(.19,1,.22,1),background .3s ease,color .3s ease;
}
.chip-strategy{right:5%;top:12%;background:var(--vgp-gold)!important;color:#161616!important;border-color:var(--vgp-gold)!important;transform:rotate(4deg)}
.chip-content{right:8%;bottom:25%;transform:rotate(-5deg)}
.chip-web{left:7%;bottom:10%;background:var(--burgundy)!important;transform:rotate(3deg)}
.chip-growth{right:24%;bottom:8%;background:var(--vgp-acid)!important;color:#141414!important;border-color:var(--vgp-acid)!important;transform:rotate(-2deg)}
.about-identity-canvas:hover .chip-strategy{transform:translate(-10px,8px) rotate(-2deg)}
.about-identity-canvas:hover .chip-content{transform:translate(8px,-12px) rotate(2deg)}
.about-identity-canvas:hover .chip-web{transform:translate(12px,-7px) rotate(-3deg)}
.about-identity-canvas:hover .chip-growth{transform:translate(-8px,-10px) rotate(3deg)}
.identity-orbit{position:absolute;z-index:2;border:1px solid rgba(243,236,226,.19);border-radius:50%;pointer-events:none}
.identity-orbit-a{width:58%;aspect-ratio:1;right:-17%;top:-16%;animation:identityOrbit 30s linear infinite}
.identity-orbit-b{width:40%;aspect-ratio:1;right:12%;bottom:-25%;border-color:rgba(214,180,107,.45);animation:identityOrbitReverse 22s linear infinite}
.identity-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--vgp-acid);left:12%;top:17%;box-shadow:0 0 20px rgba(216,255,79,.55)}
.identity-orbit-b i{background:var(--vgp-gold);left:auto;right:14%;top:auto;bottom:18%}
.identity-index{
  position:absolute;z-index:5;right:clamp(16px,2vw,30px);bottom:clamp(15px,2.4vh,26px);
  display:flex;align-items:end;gap:11px;color:rgba(243,236,226,.56)
}
.identity-index span{font-size:clamp(34px,4.1vw,62px);line-height:.72;font-weight:800;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.22)}
.identity-index small{font-size:6px;font-weight:800;letter-spacing:.19em;padding-bottom:2px}
@keyframes identityOrbit{to{transform:rotate(360deg)}}
@keyframes identityOrbitReverse{to{transform:rotate(-360deg)}}
/* Retire all old portrait-art treatments in this section. */
.about-identity-canvas .about-scene,.about-identity-canvas .portrait-photo,.about-identity-canvas .portrait-line,.about-identity-canvas .about-art-letter,.about-identity-canvas .about-geometry{display:none!important}

@media(max-width:980px){
  .about-identity-canvas{height:min(54vh,540px)}
  .identity-core h2{font-size:clamp(36px,5.8vw,64px)}
  .identity-chips b{min-width:76px;height:26px;font-size:6px}
}
@media(max-width:640px){
  .about-identity-canvas{height:44vh;min-height:350px;box-shadow:none}
  .identity-grid{background-size:40px 40px}
  .identity-core{left:18px;top:24px;max-width:88%}
  .identity-core h2{font-size:clamp(42px,12vw,66px)}
  .identity-core p{font-size:9px}
  .chip-content{right:5%;bottom:21%}.chip-growth{right:8%;bottom:7%}.chip-web{left:5%;bottom:7%}
  .identity-orbit-a{width:75%;right:-28%}.identity-orbit-b{width:52%;right:5%}
  .identity-index small{display:none}
}
@media(prefers-reduced-motion:reduce){.identity-orbit{animation:none!important}.identity-chips b{transition:none!important}}
/* specificity guard: legacy portrait child rule must not turn the new canvas layers relative */
.about-portrait.about-identity-canvas>.identity-grid,
.about-portrait.about-identity-canvas>.identity-ghost,
.about-portrait.about-identity-canvas>.identity-orbit,
.about-portrait.about-identity-canvas>.identity-core,
.about-portrait.about-identity-canvas>.identity-chips,
.about-portrait.about-identity-canvas>.identity-index{position:absolute!important}

/* ==========================================================
   V4.33 — RESPONSIVE ART SYSTEM
   Keeps the art direction intact while making every page usable
   across ultrawide, laptop, tablet, phone and short landscape.
   This block intentionally sits last and is authoritative.
   ========================================================== */

:root{
  --safe-top:max(0px,env(safe-area-inset-top));
  --safe-right:max(0px,env(safe-area-inset-right));
  --safe-bottom:max(0px,env(safe-area-inset-bottom));
  --safe-left:max(0px,env(safe-area-inset-left));
}
html,body{max-width:100%;overflow-x:clip}
body{min-width:280px}
img,video,iframe,svg,canvas{max-width:100%}
.page>*{min-width:0}

/* Never let fixed navigation collide with notches / mobile browser chrome. */
.topbar{
  height:clamp(76px,9.5vh,106px);
  padding-top:calc(7px + var(--safe-top));
  padding-left:max(var(--pad),var(--safe-left));
  padding-right:max(var(--pad),var(--safe-right));
}
.wordmark{width:clamp(44px,3.35vw,64px);height:clamp(66px,8.4vh,94px)}

/* Desktop / large laptop remains the sticky art exhibition. */
@media (min-width:981px){
  .stack-section{position:sticky!important;top:0!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  .stack-section>.page{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;padding-top:clamp(82px,11vh,118px);padding-bottom:clamp(16px,3.2vh,34px)}
}

/* Compact desktop / short laptop: protect vertical fit. */
@media (min-width:981px) and (max-width:1280px), (min-width:981px) and (max-height:820px){
  :root{--pad:clamp(22px,2.5vw,38px)}
  .section-rule,.hero-top{font-size:7px}
  .art-intro-page{gap:12px!important}
  .vgp-intro-head span{font-size:clamp(52px,min(7.4vw,11vh),104px)!important}
  .vgp-intro-head .outline-word{font-size:clamp(60px,min(8.7vw,13vh),122px)!important}
  .intro-deck{font-size:clamp(12px,min(1.05vw,1.8vh),16px)!important;margin-top:14px!important}
  .intro-corner-card{min-height:130px!important;padding:12px!important}
  .about-grid{gap:clamp(22px,3vw,48px)!important;grid-template-columns:minmax(250px,.78fr) minmax(0,1.35fr)!important}
  .about-identity-canvas{height:min(54vh,500px)!important}
  .identity-core h2{font-size:clamp(38px,min(4.3vw,6.8vh),64px)!important}
  .identity-core>span,.identity-core p{font-size:7px!important}
  .about-list p{font-size:clamp(12px,min(1.18vw,2vh),20px)!important;min-height:28px!important;padding:3px 9px 3px 0!important}
  .about-list p:nth-child(even){padding-left:9px!important}
  .about-bottom-copy{font-size:clamp(12px,min(1vw,1.7vh),16px)!important;margin-top:8px!important}
  .thread-layout{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr)!important;gap:clamp(26px,4vw,58px)!important}
  .thread-word{font-size:clamp(28px,min(3.25vw,5.3vh),52px)!important}
  .thread-detail h2{font-size:clamp(38px,min(5vw,8vh),76px)!important}
  .growth-system-head h2{font-size:clamp(44px,min(5.4vw,8.5vh),78px)!important}
  .growth-art-system{grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr)!important}
  .growth-art-row{min-height:48px!important;padding:8px 14px!important}
  .growth-art-panel{padding:20px 26px!important}
  .growth-art-panel h3{font-size:clamp(28px,min(3.2vw,5.2vh),48px)!important}
  .resume-heading h2{font-size:clamp(68px,min(8vw,12vh),116px)!important}
  .timeline li{padding:8px 0!important}.timeline strong{font-size:clamp(16px,min(1.55vw,2.7vh),24px)!important}.timeline p{font-size:clamp(11px,min(.9vw,1.55vh),14px)!important;margin-top:4px!important}
  .work-header h2{font-size:clamp(46px,min(5.7vw,8.8vh),82px)!important}.case-card{padding:clamp(14px,1.5vw,22px)!important}.case-card strong{font-size:clamp(26px,min(3vw,4.8vh),44px)!important}
  .current-heading h2{font-size:clamp(48px,min(6.5vw,10vh),94px)!important}.current-grid>a{padding:clamp(14px,1.8vw,24px)!important}.current-grid strong{font-size:clamp(21px,min(2.2vw,3.8vh),34px)!important}
  .connect-heading h2{font-size:clamp(46px,min(6vw,9.2vh),88px)!important}.connect-grid{gap:clamp(28px,4vw,64px)!important}.connect-choice{padding:7px 0!important}
}

/* ==========================================================
   TABLET + MOBILE — release sticky slides and let content breathe.
   ========================================================== */
@media (max-width:980px){
  html{scroll-snap-type:none!important;scroll-behavior:smooth}
  body{overflow-x:hidden!important}
  .stack-section{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:100svh!important;
    overflow:visible!important;
    isolation:isolate;
  }
  .stack-section>.page{
    height:auto!important;
    min-height:100svh!important;
    overflow:hidden!important;
    padding:clamp(96px,11svh,118px) max(clamp(20px,4vw,38px),var(--safe-right)) calc(clamp(34px,6svh,60px) + var(--safe-bottom)) max(clamp(20px,4vw,38px),var(--safe-left))!important;
    box-shadow:none!important;
  }
  .stack-section>.legacy-hero-page{height:100svh!important;min-height:100svh!important;padding:0!important}

  /* Menu itself becomes safe and scrollable. */
  .menu-panel{padding:calc(18px + var(--safe-top)) max(clamp(18px,4vw,36px),var(--safe-right)) calc(24px + var(--safe-bottom)) max(clamp(18px,4vw,36px),var(--safe-left))!important;overflow-y:auto!important;overscroll-behavior:contain}
  .menu-panel nav{margin:auto 0;min-height:0}
  .menu-panel nav a{font-size:clamp(34px,8vw,70px)!important;padding:9px 0!important;line-height:.92!important}
  .menu-meta{font-size:8px!important;gap:12px 18px!important;padding-top:18px}

  /* INTRO: turn the desktop poster grid into a deliberate vertical poster. */
  .art-intro-page{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    gap:clamp(18px,3svh,30px)!important;
    padding-bottom:calc(58px + var(--safe-bottom))!important;
  }
  .art-intro-page .intro-label{align-self:flex-start!important;position:relative!important;inset:auto!important}
  .art-intro-page .intro-center{margin:0!important;padding:0!important;align-self:stretch!important;text-align:left!important;position:relative!important}
  .vgp-intro-head span,.vgp-intro-head .outline-word{font-size:clamp(56px,12.5vw,110px)!important;line-height:.82!important;padding-left:0!important}
  .intro-deck{margin:clamp(16px,2.5svh,28px) 0 0!important;max-width:720px!important;font-size:clamp(14px,2.2vw,18px)!important}
  .intro-corner-card{position:relative!important;inset:auto!important;align-self:flex-end!important;width:min(340px,72vw)!important;min-height:120px!important;margin-top:4px!important}
  .intro-contact{display:none!important}
  .intro-crosshair{left:auto!important;right:var(--pad)!important;top:16%!important;width:58px!important;height:58px!important}
  .intro-art-orbit.orbit-a{width:min(110vw,760px)!important;right:-48vw!important;top:-8svh!important}
  .intro-art-orbit.orbit-b{width:min(68vw,440px)!important;right:-10vw!important;top:28svh!important}
  .art-intro-page::before{font-size:clamp(180px,55vw,430px)!important;bottom:-.12em!important}

  /* ABOUT / identity canvas + resume list. */
  .page-about{display:block!important}
  .about-grid{display:grid!important;grid-template-columns:1fr!important;gap:clamp(24px,5svh,48px)!important;align-items:start!important;margin-top:clamp(18px,3svh,30px)}
  .about-identity-canvas{width:100%!important;height:clamp(390px,54svh,560px)!important;min-height:390px!important;position:relative!important;top:auto!important}
  .identity-core{max-width:min(76%,600px)!important}
  .identity-core h2{font-size:clamp(52px,10vw,86px)!important}
  .identity-chips b{font-size:6px!important}
  .about-details{display:block!important}
  .about-manifesto-tag{display:flex!important;justify-content:space-between;align-items:end;gap:20px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .about-manifesto-tag span{font-size:7px!important}.about-manifesto-tag strong{font-size:clamp(16px,2.6vw,24px)!important;line-height:.95;text-align:right}
  .about-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .about-list p,.about-list p:nth-child(even){font-size:clamp(16px,2.9vw,25px)!important;line-height:1!important;min-height:0!important;padding:10px 10px!important;margin:0!important;overflow-wrap:anywhere}
  .about-list p:nth-child(odd){padding-left:0!important}
  .about-location{grid-column:1/-1!important;border-left:0!important;padding-left:0!important}
  .about-bottom-copy{margin:18px 0 0!important;max-width:820px!important;text-align:left!important;align-self:auto!important;font-size:clamp(15px,2.6vw,22px)!important;line-height:1.3!important}

  /* THREAD */
  .page-thread{display:flex!important;flex-direction:column!important;gap:clamp(18px,3svh,30px)!important}
  .thread-layout{display:grid!important;grid-template-columns:1fr!important;gap:clamp(26px,4svh,44px)!important;align-items:start!important}
  .thread-selector{flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;gap:0!important;scrollbar-width:none;border-top:1px solid rgba(243,236,226,.26)!important;border-bottom:1px solid rgba(243,236,226,.26)!important;overscroll-behavior-inline:contain}
  .thread-selector::-webkit-scrollbar{display:none}
  .thread-word{flex:0 0 auto!important;white-space:nowrap!important;font-size:clamp(24px,5.6vw,48px)!important;line-height:1!important;padding:13px 18px 13px 0!important;border-bottom:0!important;margin-right:18px!important}
  .thread-word:hover,.thread-word.active{padding-left:0!important}
  .thread-detail{padding:clamp(20px,4vw,36px) 0 0!important;min-height:clamp(330px,45svh,520px)!important}
  .thread-detail::before{display:none!important}
  .thread-detail h2{font-size:clamp(44px,9vw,82px)!important;max-width:14ch!important}
  .thread-detail>p:not(.thread-index){font-size:clamp(15px,2.6vw,20px)!important;max-width:680px!important}
  .thread-art-canvas{width:min(68vw,520px)!important;right:-20vw!important;opacity:.28!important}
  .thread-footer{text-align:left!important;font-size:clamp(14px,2.4vw,19px)!important;max-width:720px!important;margin-top:0!important}

  /* VISUAL GROWTH SYSTEM */
  .page-growth-system{display:flex!important;flex-direction:column!important;gap:clamp(20px,3svh,30px)!important}
  .growth-system-head{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;align-items:start!important}
  .growth-system-head h2{font-size:clamp(56px,10vw,94px)!important}
  .growth-system-head>p{display:block!important;font-size:clamp(15px,2.6vw,21px)!important;max-width:760px!important}
  .growth-art-system{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;min-height:0!important}
  .growth-art-list{border-right:0!important;border-bottom:1px solid rgba(243,236,226,.2)!important}
  .growth-art-row{min-height:0!important;padding:13px 16px!important;grid-template-columns:30px 1fr auto!important}
  .growth-art-row strong{font-size:clamp(12px,2.3vw,16px)!important}
  .growth-art-stage{min-height:clamp(380px,52svh,560px)!important;overflow:hidden!important}
  .growth-art-panel{padding:clamp(24px,4vw,42px)!important;grid-template-rows:auto auto auto 1fr!important}
  .growth-art-panel h3{font-size:clamp(38px,8vw,68px)!important}
  .growth-art-panel>p{font-size:clamp(14px,2.4vw,18px)!important}

  /* RESUME */
  .page-resume{display:flex!important;flex-direction:column!important;gap:clamp(22px,4svh,38px)!important}
  .resume-grid{grid-template-columns:1fr!important;gap:clamp(28px,5svh,48px)!important;align-items:start!important}
  .resume-heading h2{font-size:clamp(76px,16vw,130px)!important}
  .resume-heading>p:last-child{font-size:clamp(15px,2.6vw,20px)!important;margin-top:18px!important}
  .timeline li{grid-template-columns:minmax(80px,.18fr) 1fr!important;gap:18px!important;padding:14px 0!important}
  .timeline strong{font-size:clamp(18px,3.2vw,28px)!important}.timeline p{font-size:clamp(13px,2.2vw,17px)!important}

  /* PROOF */
  .page-proof{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:clamp(26px,5svh,50px)!important}
  .proof-title h2{font-size:clamp(72px,14vw,130px)!important}
  .brand-rail{gap:18px 28px!important;padding:18px 0!important}.brand-rail span{font-size:clamp(18px,3.8vw,30px)!important}

  /* SELECTED WORK */
  .page-work{display:flex!important;flex-direction:column!important;gap:clamp(22px,4svh,40px)!important}
  .work-header{grid-template-columns:1fr!important;gap:20px!important;align-items:start!important}
  .work-header h2{font-size:clamp(56px,11vw,98px)!important}.work-lead{margin:0!important;font-size:clamp(14px,2.5vw,19px)!important}
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .case-card{min-height:320px!important;transform:none!important;padding:22px!important}.case-card strong{font-size:clamp(30px,5vw,48px)!important}

  /* FILM / PHOTO galleries */
  .page-gallery,.page-gallery.playful{display:grid!important;grid-template-columns:1fr!important;gap:clamp(26px,5svh,46px)!important;align-items:start!important}
  .gallery-heading{display:block!important}.gallery-heading h2{font-size:clamp(58px,11vw,102px)!important;margin:10px 0 16px!important}.gallery-heading p{font-size:clamp(15px,2.6vw,20px)!important;max-width:680px!important}
  .vertical-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.vertical-card{height:clamp(320px,55vw,620px)!important}.vertical-card.shift-down{margin-top:0!important}
  .mosaic-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:clamp(190px,30vw,330px)!important}.mosaic-card.wide{grid-column:span 2!important}.mosaic-card.tall{grid-row:span 2!important}

  /* SHOP */
  .page-shop{display:flex!important;flex-direction:column!important;gap:clamp(16px,3svh,28px)!important;overflow:hidden!important}
  .shop-header{display:grid!important;grid-template-columns:1fr!important;gap:18px!important}.shop-header h2{font-size:clamp(62px,12vw,110px)!important}.shop-intro{max-width:700px!important}
  .shop-controls{flex-wrap:wrap!important;gap:10px!important}.shop-arrows{margin-left:auto!important}.product-viewport{min-height:clamp(430px,60svh,620px)!important}

  /* STUDIO FEED */
  .page-current{display:flex!important;flex-direction:column!important;gap:clamp(22px,4svh,40px)!important}
  .studio-feed-heading,.current-heading{grid-template-columns:1fr!important;gap:18px!important}.current-heading h2{font-size:clamp(58px,11vw,100px)!important}.studio-feed-heading p{font-size:clamp(15px,2.6vw,20px)!important;max-width:700px!important}
  .current-grid,.studio-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.current-grid>a{min-height:320px!important}.current-grid strong{font-size:clamp(24px,4.3vw,40px)!important}
  .studio-feed-return{flex-wrap:wrap!important}

  /* QUOTE VIDEO */
  .quote-section{min-height:100svh!important}
  .page-quote-video{height:100svh!important;min-height:100svh!important;padding-left:max(clamp(20px,4vw,38px),var(--safe-left))!important;padding-right:max(clamp(20px,4vw,38px),var(--safe-right))!important}
  .page-quote blockquote{font-size:clamp(38px,7vw,72px)!important;max-width:1000px!important;margin:34px auto 18px!important}

  /* CONTACT */
  .page-connect{display:flex!important;flex-direction:column!important;gap:clamp(22px,4svh,38px)!important}
  .connect-grid{grid-template-columns:1fr!important;gap:clamp(30px,5svh,52px)!important;align-items:start!important}
  .connect-heading h2{font-size:clamp(58px,11vw,100px)!important;max-width:12ch}
  .connect-funnel{grid-template-columns:minmax(240px,.8fr) minmax(280px,1fr)!important;gap:clamp(24px,4vw,44px)!important}
  .connect-footer{flex-wrap:wrap!important;align-items:flex-start!important}
  .contact-art-word{font-size:clamp(150px,34vw,350px)!important}.contact-orbit{width:min(80vw,620px)!important;right:-32vw!important}

  /* Detail/resume pages */
  body.service-page{overflow-x:hidden}
  .service-shell{padding:clamp(108px,13svh,140px) max(clamp(20px,4vw,38px),var(--safe-right)) 48px max(clamp(20px,4vw,38px),var(--safe-left))!important}
  .service-hero{grid-template-columns:1fr!important;gap:28px!important;align-items:start!important}.service-hero h1{font-size:clamp(64px,14vw,118px)!important}.service-hero p{max-width:720px!important;font-size:clamp(16px,2.8vw,21px)!important}
  .service-block{grid-template-columns:1fr!important;gap:24px!important}.service-block h2{font-size:clamp(38px,8vw,68px)!important}.service-block-content{grid-template-columns:repeat(2,minmax(0,1fr))!important}.service-cta{grid-template-columns:1fr!important;align-items:start!important}.service-cta h2{font-size:clamp(54px,11vw,96px)!important}
}

/* ==========================================================
   PHONES
   ========================================================== */
@media (max-width:640px){
  :root{--pad:18px}
  .topbar{height:78px!important;padding-top:calc(4px + var(--safe-top))!important}.wordmark{width:42px!important;height:62px!important}.menu-trigger{font-size:9px!important}
  .stack-section>.page{padding-top:calc(84px + var(--safe-top))!important;padding-left:max(18px,var(--safe-left))!important;padding-right:max(18px,var(--safe-right))!important;padding-bottom:calc(36px + var(--safe-bottom))!important}
  .stack-section>.legacy-hero-page{padding:0!important}
  .section-rule,.hero-top{gap:10px!important;font-size:6px!important;letter-spacing:.11em!important}.section-rule span:last-child,.hero-top span:last-child{display:none!important}

  .legacy-hero-scroll-cue{left:18px!important;right:18px!important;bottom:calc(22px + var(--safe-bottom))!important}
  .hero-perspective{display:none!important}

  .art-intro-page{justify-content:flex-start!important;padding-top:calc(96px + var(--safe-top))!important}
  .intro-microline{font-size:7px!important;margin-bottom:12px!important}
  .vgp-intro-head span,.vgp-intro-head .outline-word{font-size:clamp(48px,15.2vw,76px)!important;line-height:.84!important;letter-spacing:-.065em!important}
  .intro-deck{font-size:14px!important;line-height:1.45!important;max-width:94%!important}
  .intro-corner-card{width:100%!important;min-height:108px!important;align-self:stretch!important;margin-top:auto!important}
  .intro-crosshair{display:none!important}.intro-art-orbit.orbit-b{display:none!important}

  .about-grid{margin-top:18px!important;gap:28px!important}
  .about-identity-canvas{height:clamp(330px,50svh,440px)!important;min-height:330px!important}
  .identity-grid{background-size:36px 36px!important}.identity-core{left:18px!important;top:22px!important;max-width:88%!important}.identity-core h2{font-size:clamp(42px,12.4vw,62px)!important;line-height:.82!important}.identity-core>span{font-size:6px!important;letter-spacing:.15em!important}.identity-core p{font-size:8px!important}.identity-chips b{min-width:62px!important;height:24px!important;padding:0 7px!important;font-size:5.5px!important}.chip-strategy{right:4%!important;top:11%!important}.chip-content{right:4%!important;bottom:25%!important}.chip-web{left:5%!important;bottom:9%!important}.chip-growth{right:6%!important;bottom:8%!important}.identity-index span{font-size:38px!important}
  .about-manifesto-tag{display:none!important}
  .about-list{grid-template-columns:1fr!important}.about-list p,.about-list p:nth-child(even),.about-list p:nth-child(odd){border-left:0!important;padding:9px 0!important;font-size:clamp(17px,5vw,23px)!important}.about-location{grid-column:auto!important}
  .about-bottom-copy{font-size:clamp(15px,4.3vw,19px)!important}

  .thread-selector{margin-right:-18px!important;padding-right:18px!important}.thread-word{font-size:clamp(24px,8vw,36px)!important}.thread-detail{min-height:360px!important}.thread-detail h2{font-size:clamp(40px,12vw,62px)!important}.thread-detail>p:not(.thread-index){font-size:15px!important}.thread-art-canvas{width:95vw!important;right:-48vw!important;opacity:.2!important}

  .growth-system-head h2{font-size:clamp(48px,14vw,72px)!important}.growth-system-head>p{font-size:15px!important}.growth-art-row{padding:12px 10px!important;grid-template-columns:25px 1fr auto!important;gap:9px!important}.growth-art-row strong{font-size:11px!important;letter-spacing:-.01em}.growth-art-stage{min-height:470px!important}.growth-art-panel{padding:22px 18px!important}.growth-art-panel h3{font-size:clamp(36px,11vw,54px)!important}.strategy-diagram,.content-diagram,.web-diagram,.partner-diagram{max-width:100%!important}

  .resume-heading h2{font-size:clamp(68px,21vw,102px)!important}.timeline li{grid-template-columns:64px 1fr!important;gap:12px!important}.timeline li>span{font-size:8px!important}.timeline strong{font-size:18px!important}.timeline p{font-size:13px!important}

  .proof-title h2{font-size:clamp(58px,18vw,90px)!important}.brand-rail{justify-content:flex-start!important;gap:14px 20px!important}.brand-rail span{font-size:18px!important}

  .work-header h2{font-size:clamp(52px,15vw,78px)!important}.case-grid{grid-template-columns:1fr!important}.case-card{min-height:280px!important}.case-card strong{font-size:clamp(32px,10vw,46px)!important}.case-dialog{width:calc(100% - 20px)!important;max-height:92dvh!important}.case-dialog-body{padding:52px 20px 28px!important}.case-dialog h2{font-size:clamp(46px,13vw,70px)!important}.case-dialog-grid{grid-template-columns:1fr!important}

  .gallery-heading h2{font-size:clamp(52px,15vw,76px)!important}.vertical-gallery{display:flex!important;overflow-x:auto!important;gap:10px!important;scroll-snap-type:x proximity;padding-bottom:6px!important}.vertical-card{flex:0 0 78vw!important;height:clamp(390px,115vw,560px)!important;scroll-snap-align:start}.mosaic-gallery{grid-template-columns:1fr!important;grid-auto-rows:clamp(220px,64vw,320px)!important}.mosaic-card.wide{grid-column:auto!important}.mosaic-card.tall{grid-row:span 2!important}

  .shop-header h2{font-size:clamp(58px,18vw,88px)!important}.shop-intro p{font-size:14px!important}.shop-controls{align-items:flex-start!important}.shop-arrows{width:100%;margin-left:0!important;justify-content:flex-end!important}.product-viewport{min-height:460px!important}

  .current-heading h2{font-size:clamp(54px,16vw,82px)!important}.current-grid,.studio-feed-grid{grid-template-columns:1fr!important}.current-grid>a{min-height:280px!important}.studio-feed-return{font-size:7px!important;line-height:1.5!important}

  .page-quote-video{padding-top:80px!important;padding-bottom:30px!important}.page-quote blockquote{font-size:clamp(34px,9.5vw,52px)!important;line-height:.98!important;margin:28px auto 16px!important}.quote-youtube-player,.quote-youtube-bg iframe{transform:translate(-50%,-50%) scale(1.35)!important}

  .connect-heading h2{font-size:clamp(50px,15vw,76px)!important}.connect-funnel{grid-template-columns:1fr!important}.connect-response{border-left:0!important;border-top:1px solid rgba(243,236,226,.28)!important;padding:22px 0 0!important}.connect-choice{padding:11px 0!important;font-size:11px!important}.connect-response h3{font-size:clamp(30px,9vw,44px)!important}.connect-footer{font-size:7px!important;line-height:1.5!important}.contact-orbit{display:none!important}.contact-art-word{font-size:44vw!important;bottom:0!important}

  .service-nav{height:78px!important;padding:6px 18px!important}.service-nav img{width:42px!important;height:60px!important}.service-nav>div{gap:12px!important;font-size:7px!important}.service-nav>div a:not(:first-child){display:none!important}.service-shell{padding:98px 18px 40px!important}.service-hero h1{font-size:clamp(54px,16vw,82px)!important}.service-hero p{font-size:15px!important}.service-block{padding:42px 0!important}.service-block h2{font-size:clamp(36px,11vw,54px)!important}.service-block-content{grid-template-columns:1fr!important}.service-block-content article{padding:18px!important}.service-cta{padding:28px 18px!important}.service-cta h2{font-size:clamp(46px,14vw,70px)!important}.service-links{font-size:7px!important;gap:10px 16px!important}
}

/* Short landscape devices: content flow wins over forced composition. */
@media (max-width:980px) and (orientation:landscape) and (max-height:560px){
  .topbar{height:62px!important}.wordmark{width:36px!important;height:52px!important}
  .stack-section>.page{padding-top:72px!important;padding-bottom:28px!important;min-height:100svh!important}
  .stack-section>.legacy-hero-page{height:100svh!important;padding:0!important}
  .art-intro-page{min-height:140svh!important;justify-content:flex-start!important}.vgp-intro-head span,.vgp-intro-head .outline-word{font-size:clamp(46px,10vw,72px)!important}.intro-corner-card{margin-top:10px!important;min-height:90px!important}
  .about-grid{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)!important;gap:24px!important}.about-identity-canvas{height:330px!important;min-height:330px!important}.about-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}.about-list p,.about-list p:nth-child(even),.about-list p:nth-child(odd){font-size:clamp(12px,1.9vw,16px)!important;padding:6px 7px!important}.about-bottom-copy{font-size:13px!important}
  .thread-detail{min-height:300px!important}.growth-art-stage{min-height:390px!important}
  .page-quote-video{height:100svh!important;min-height:100svh!important}.page-quote blockquote{font-size:clamp(30px,5.4vw,48px)!important}
}

/* Ultra-wide screens: cap line lengths and composition widths so art does
   not look stretched on 21:9 / 32:9 displays. */
@media (min-width:2000px){
  :root{--pad:clamp(54px,4vw,96px)}
  .page:not(.legacy-hero-page){padding-left:max(var(--pad),calc((100vw - 2100px)/2))!important;padding-right:max(var(--pad),calc((100vw - 2100px)/2))!important}
  .about-grid,.thread-layout,.growth-system-head,.growth-art-system,.resume-grid,.work-header,.case-grid,.current-heading,.current-grid,.connect-grid{max-width:2100px;width:100%;margin-left:auto;margin-right:auto}
}

/* Reduced motion keeps every responsive composition readable. */
@media (prefers-reduced-motion:reduce){
  .identity-orbit,.intro-art-orbit,.contact-orbit,.intro-ticker div,.growth-ticker div{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* Final overflow guards */
h1,h2,h3,h4,p,strong,span,a,button{max-width:100%}
button,a{overflow-wrap:break-word}
@media(max-width:980px){
  .art-grain,.grain{max-width:100vw;overflow:hidden}
  .about-geometry,.work-art-marker{display:none!important}
  .feed-poster-glyph{max-width:none!important}
}

/* ==========================================================
   V4.34 — HIGH-RES DESKTOP / 2K + 4K DISPLAY SYSTEM
   Authoritative final overrides.
   Goals:
   1) Fix the hero perspective block: higher, wider, clean line-height.
   2) Scale the art direction on 2560×1440 and 3840×2160 displays.
   3) Preserve responsive laptop/tablet/mobile behavior from V4.33.
   ========================================================== */

/* Hero perspective: readable at every desktop height and no text collision. */
@media (min-width:981px){
  .hero-perspective{
    right:max(var(--pad),4vw)!important;
    bottom:clamp(110px,14vh,240px)!important;
    width:clamp(330px,25vw,560px)!important;
    gap:clamp(9px,1vh,16px)!important;
    text-align:right!important;
  }
  .hero-perspective span{
    display:block!important;
    font-size:clamp(8px,.48vw,13px)!important;
    line-height:1.25!important;
    letter-spacing:.20em!important;
    white-space:nowrap!important;
  }
  .hero-perspective strong{
    display:block!important;
    font-size:clamp(16px,1.05vw,28px)!important;
    line-height:1.16!important;
    letter-spacing:-.025em!important;
    text-wrap:balance!important;
    max-width:100%!important;
  }
}

/* 2K class displays — 2560×1440 and similar. */
@media (min-width:2200px) and (min-height:1180px){
  :root{--pad:clamp(64px,3.2vw,92px)}

  .topbar{
    height:clamp(112px,8.8vh,138px)!important;
    padding-top:clamp(10px,1vh,18px)!important;
  }
  .wordmark{width:clamp(68px,3vw,82px)!important;height:clamp(98px,7.7vh,122px)!important}
  .menu-trigger,.menu-close{font-size:clamp(11px,.5vw,14px)!important}

  .stack-section>.page{
    padding-top:clamp(122px,10.5vh,158px)!important;
    padding-bottom:clamp(34px,3vh,54px)!important;
  }
  .section-rule,.hero-top{font-size:clamp(9px,.42vw,12px)!important;padding-bottom:clamp(13px,1vh,18px)!important}

  /* Give large displays a larger usable artboard instead of capping at 2100px. */
  .about-grid,.thread-layout,.growth-system-head,.growth-art-system,.resume-grid,
  .work-header,.case-grid,.current-heading,.current-grid,.connect-grid,
  .studio-feed-heading,.studio-feed-grid,.gallery-layout,.shop-header,.product-viewport{
    max-width:2360px!important;
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .hero-perspective{
    bottom:clamp(160px,16vh,280px)!important;
    width:clamp(440px,22vw,620px)!important;
  }
  .hero-perspective span{font-size:clamp(10px,.42vw,13px)!important}
  .hero-perspective strong{font-size:clamp(20px,.92vw,30px)!important;line-height:1.18!important}

  /* Intro / major display type */
  .vgp-intro-head span{font-size:clamp(116px,7.1vw,182px)!important}
  .vgp-intro-head .outline-word{font-size:clamp(130px,8vw,206px)!important}
  .intro-deck{font-size:clamp(18px,.95vw,25px)!important;max-width:860px!important}
  .intro-microline,.intro-label,.intro-contact{font-size:clamp(9px,.42vw,12px)!important}
  .intro-corner-card{width:clamp(350px,18vw,500px)!important;padding:clamp(18px,1.2vw,28px)!important}

  /* WHO AM I art + resume */
  .about-grid{grid-template-columns:minmax(540px,.9fr) minmax(0,1.35fr)!important;gap:clamp(68px,5vw,130px)!important}
  .about-identity-canvas{height:min(62vh,900px)!important}
  .identity-core{left:clamp(32px,2vw,54px)!important;top:clamp(38px,3vh,62px)!important}
  .identity-core h2{font-size:clamp(72px,4vw,112px)!important}
  .identity-core>span{font-size:clamp(8px,.38vw,11px)!important}
  .identity-core p{font-size:clamp(10px,.48vw,14px)!important}
  .identity-chips b{height:clamp(30px,2vh,38px)!important;min-width:clamp(92px,5vw,132px)!important;font-size:clamp(7px,.32vw,10px)!important}
  .about-list p{font-size:clamp(22px,1.45vw,36px)!important;min-height:clamp(42px,3.2vh,58px)!important;padding:clamp(7px,.65vh,12px) 14px clamp(7px,.65vh,12px) 0!important}
  .about-list p:nth-child(even){padding-left:18px!important}
  .about-bottom-copy{font-size:clamp(18px,.95vw,25px)!important;max-width:1100px!important;margin-top:clamp(14px,1.2vh,24px)!important}

  /* Interactive method */
  .thread-layout{grid-template-columns:minmax(520px,.7fr) minmax(0,1.3fr)!important;gap:clamp(76px,6vw,150px)!important}
  .thread-word{font-size:clamp(48px,2.35vw,70px)!important}
  .thread-detail h2{font-size:clamp(76px,4vw,112px)!important}
  .thread-detail>p:not(.thread-index){font-size:clamp(18px,.9vw,25px)!important;max-width:850px!important}

  /* Growth system */
  .growth-system-head h2{font-size:clamp(92px,4.8vw,138px)!important}
  .growth-system-head>p{font-size:clamp(20px,1vw,28px)!important;max-width:720px!important}
  .growth-art-row{min-height:clamp(66px,4.8vh,88px)!important;padding:clamp(13px,1vh,20px) clamp(20px,1.3vw,34px)!important}
  .growth-art-row strong{font-size:clamp(15px,.75vw,21px)!important}
  .growth-art-stage{min-height:clamp(520px,48vh,760px)!important}
  .growth-art-panel{padding:clamp(36px,2.4vw,64px)!important}
  .growth-art-panel h3{font-size:clamp(58px,3.1vw,92px)!important}
  .growth-art-panel p{font-size:clamp(17px,.85vw,24px)!important}

  /* Resume / proof */
  .resume-heading h2{font-size:clamp(110px,6.4vw,178px)!important}
  .timeline strong{font-size:clamp(22px,1.1vw,31px)!important}
  .timeline p{font-size:clamp(15px,.72vw,20px)!important}
  .proof-title h2{font-size:clamp(130px,7.2vw,200px)!important}
  .brand-rail span{font-size:clamp(27px,1.45vw,40px)!important}

  /* Work / portfolio */
  .work-header h2{font-size:clamp(110px,6.2vw,176px)!important}
  .work-header p{font-size:clamp(18px,.9vw,25px)!important}
  .case-grid{gap:clamp(18px,1.1vw,32px)!important}
  .case-card{min-height:clamp(380px,40vh,590px)!important}
  .case-card strong{font-size:clamp(42px,2.2vw,62px)!important}
  .case-card p{font-size:clamp(15px,.72vw,21px)!important}

  /* Gallery / shop / feed */
  .gallery-heading h2{font-size:clamp(102px,5.4vw,156px)!important}
  .gallery-heading p{font-size:clamp(19px,.9vw,26px)!important;max-width:650px!important}
  .vertical-card{height:min(66vh,930px)!important}
  .mosaic-gallery{grid-auto-rows:clamp(260px,20vh,390px)!important}
  .current-heading h2,.shop-header h2{font-size:clamp(112px,6.2vw,180px)!important}
  .current-heading p,.shop-intro p{font-size:clamp(18px,.88vw,25px)!important}

  /* Video statement */
  .page-quote blockquote{font-size:clamp(76px,4.2vw,122px)!important;max-width:1750px!important}
  .quote-credit{font-size:clamp(9px,.4vw,12px)!important}

  /* Contact */
  .connect-heading h2{font-size:clamp(108px,6vw,172px)!important}
  .connect-choice{font-size:clamp(13px,.62vw,17px)!important;padding:clamp(15px,1.1vh,22px) 0!important}
  .connect-response h3{font-size:clamp(54px,2.7vw,78px)!important}

  /* Detail pages */
  .service-shell{max-width:2360px!important;margin:0 auto!important;padding-top:clamp(150px,12vh,200px)!important}
  .service-hero h1{font-size:clamp(130px,6.8vw,194px)!important}
  .service-hero p{font-size:clamp(23px,1.1vw,31px)!important;max-width:800px!important}
  .service-block h2{font-size:clamp(70px,3.6vw,104px)!important}
  .service-block-content article h3{font-size:clamp(24px,1.15vw,32px)!important}
  .service-block-content article p{font-size:clamp(15px,.72vw,20px)!important}
}

/* 4K / very large desktop — 3200px+ wide, 1800px+ tall. */
@media (min-width:3200px) and (min-height:1800px){
  :root{--pad:clamp(96px,3.25vw,132px)}

  .topbar{height:clamp(142px,7.8vh,178px)!important}
  .wordmark{width:clamp(86px,2.5vw,104px)!important;height:clamp(124px,6.8vh,154px)!important}
  .menu-trigger,.menu-close{font-size:clamp(14px,.42vw,17px)!important}

  .stack-section>.page{
    padding-top:clamp(168px,9vh,210px)!important;
    padding-bottom:clamp(52px,3vh,72px)!important;
  }
  .section-rule,.hero-top{font-size:clamp(12px,.36vw,15px)!important;padding-bottom:20px!important}

  .about-grid,.thread-layout,.growth-system-head,.growth-art-system,.resume-grid,
  .work-header,.case-grid,.current-heading,.current-grid,.connect-grid,
  .studio-feed-heading,.studio-feed-grid,.gallery-layout,.shop-header,.product-viewport{
    max-width:3100px!important;
  }

  .hero-perspective{
    right:max(var(--pad),5vw)!important;
    bottom:clamp(250px,17vh,380px)!important;
    width:clamp(620px,20vw,820px)!important;
    gap:18px!important;
  }
  .hero-perspective span{font-size:clamp(13px,.34vw,16px)!important}
  .hero-perspective strong{font-size:clamp(30px,.82vw,38px)!important;line-height:1.2!important}

  .vgp-intro-head span{font-size:clamp(178px,6.5vw,250px)!important}
  .vgp-intro-head .outline-word{font-size:clamp(198px,7.25vw,278px)!important}
  .intro-deck{font-size:clamp(25px,.8vw,32px)!important;max-width:1120px!important}
  .intro-corner-card{width:clamp(500px,16vw,650px)!important}

  .about-grid{grid-template-columns:minmax(760px,.92fr) minmax(0,1.35fr)!important;gap:clamp(100px,5vw,180px)!important}
  .about-identity-canvas{height:min(62vh,1240px)!important}
  .identity-core h2{font-size:clamp(106px,3.4vw,140px)!important}
  .about-list p{font-size:clamp(34px,1.15vw,46px)!important;min-height:clamp(58px,3.1vh,78px)!important}
  .about-bottom-copy{font-size:clamp(25px,.78vw,31px)!important;max-width:1450px!important}

  .thread-word{font-size:clamp(70px,1.9vw,84px)!important}
  .thread-detail h2{font-size:clamp(112px,3.2vw,132px)!important}
  .thread-detail>p:not(.thread-index){font-size:clamp(25px,.75vw,31px)!important;max-width:1120px!important}

  .growth-system-head h2{font-size:clamp(135px,4vw,165px)!important}
  .growth-system-head>p{font-size:clamp(28px,.78vw,34px)!important;max-width:980px!important}
  .growth-art-stage{min-height:clamp(760px,48vh,1040px)!important}
  .growth-art-panel h3{font-size:clamp(88px,2.5vw,104px)!important}

  .resume-heading h2{font-size:clamp(168px,5vw,208px)!important}
  .proof-title h2{font-size:clamp(190px,5.4vw,225px)!important}
  .brand-rail span{font-size:clamp(38px,1.08vw,46px)!important}

  .work-header h2{font-size:clamp(168px,5vw,210px)!important}
  .case-card{min-height:clamp(560px,39vh,820px)!important}
  .case-card strong{font-size:clamp(62px,1.72vw,74px)!important}

  .gallery-heading h2{font-size:clamp(150px,4.3vw,178px)!important}
  .gallery-heading p{font-size:clamp(26px,.72vw,31px)!important;max-width:900px!important}
  .vertical-card{height:min(67vh,1280px)!important}
  .mosaic-gallery{grid-auto-rows:clamp(380px,19vh,520px)!important}

  .current-heading h2,.shop-header h2{font-size:clamp(170px,4.8vw,200px)!important}
  .page-quote blockquote{font-size:clamp(112px,3.45vw,142px)!important;max-width:2350px!important}
  .connect-heading h2{font-size:clamp(166px,4.7vw,196px)!important}

  .service-shell{max-width:3100px!important;padding-top:clamp(210px,11vh,260px)!important}
  .service-hero h1{font-size:clamp(200px,5.4vw,226px)!important}
  .service-hero p{font-size:clamp(31px,.82vw,36px)!important;max-width:1100px!important}
  .service-block h2{font-size:clamp(104px,2.8vw,118px)!important}
}

/* Guard against accidental high-resolution scaling on short windows. */
@media (min-width:2200px) and (max-height:1179px){
  .hero-perspective{bottom:clamp(80px,10vh,120px)!important}
}

/* ==========================================================
   V4.35 — TRUE 2K / 4K DESKTOP COMPOSITION
   Uses html[data-display-tier] from script-v435.js so Windows/macOS display
   scaling does not hide a physically high-resolution monitor from CSS.
   These rules are intentionally LAST and override V4.34 where needed.
   ========================================================== */

/* Perspective block: position from the top, not the bottom, so it stays
   optically connected to the hero on every desktop height. */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  .hero-perspective{
    top:clamp(130px,17vh,240px)!important;
    bottom:auto!important;
    right:max(var(--pad),4vw)!important;
    width:clamp(390px,27vw,720px)!important;
    gap:clamp(10px,1.1vh,18px)!important;
  }
  .hero-perspective span{
    font-size:clamp(9px,.48vw,14px)!important;
    line-height:1.3!important;
    white-space:nowrap!important;
  }
  .hero-perspective strong{
    font-size:clamp(18px,1.15vw,32px)!important;
    line-height:1.16!important;
    max-width:100%!important;
  }
}

/* Shared high-resolution desktop artboard. */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  html[data-display-tier="2k"],html[data-display-tier="4k"]{
    --pad:clamp(48px,3.6vw,112px);
  }

  html[data-display-tier="2k"] .page:not(.legacy-hero-page),
  html[data-display-tier="4k"] .page:not(.legacy-hero-page){
    padding-left:max(var(--pad),4vw)!important;
    padding-right:max(var(--pad),4vw)!important;
  }

  html[data-display-tier="2k"] .about-grid,
  html[data-display-tier="2k"] .thread-layout,
  html[data-display-tier="2k"] .growth-system-head,
  html[data-display-tier="2k"] .growth-art-system,
  html[data-display-tier="2k"] .resume-grid,
  html[data-display-tier="2k"] .work-header,
  html[data-display-tier="2k"] .case-grid,
  html[data-display-tier="2k"] .gallery-layout,
  html[data-display-tier="2k"] .shop-header,
  html[data-display-tier="2k"] .product-viewport,
  html[data-display-tier="2k"] .current-heading,
  html[data-display-tier="2k"] .current-grid,
  html[data-display-tier="2k"] .studio-feed-heading,
  html[data-display-tier="2k"] .studio-feed-grid,
  html[data-display-tier="2k"] .connect-grid{
    width:min(92vw,2320px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html[data-display-tier="4k"] .about-grid,
  html[data-display-tier="4k"] .thread-layout,
  html[data-display-tier="4k"] .growth-system-head,
  html[data-display-tier="4k"] .growth-art-system,
  html[data-display-tier="4k"] .resume-grid,
  html[data-display-tier="4k"] .work-header,
  html[data-display-tier="4k"] .case-grid,
  html[data-display-tier="4k"] .gallery-layout,
  html[data-display-tier="4k"] .shop-header,
  html[data-display-tier="4k"] .product-viewport,
  html[data-display-tier="4k"] .current-heading,
  html[data-display-tier="4k"] .current-grid,
  html[data-display-tier="4k"] .studio-feed-heading,
  html[data-display-tier="4k"] .studio-feed-grid,
  html[data-display-tier="4k"] .connect-grid{
    width:min(94vw,3300px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* 2K physical display — works at native resolution OR OS-scaled CSS width. */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  html[data-display-tier="2k"] .topbar{height:clamp(106px,9.2vh,132px)!important;padding-top:10px!important}
  html[data-display-tier="2k"] .wordmark{width:clamp(66px,3.6vw,84px)!important;height:clamp(96px,8.6vh,122px)!important}
  html[data-display-tier="2k"] .stack-section>.page{padding-top:clamp(112px,10vh,148px)!important;padding-bottom:clamp(26px,3vh,46px)!important}
  html[data-display-tier="2k"] .section-rule,
  html[data-display-tier="2k"] .hero-top{font-size:clamp(9px,.52vw,13px)!important}

  html[data-display-tier="2k"] .hero-perspective{top:clamp(145px,18vh,235px)!important;width:clamp(450px,28vw,700px)!important}
  html[data-display-tier="2k"] .hero-perspective strong{font-size:clamp(22px,1.25vw,32px)!important}

  html[data-display-tier="2k"] .vgp-intro-head span{font-size:clamp(96px,8.8vw,190px)!important}
  html[data-display-tier="2k"] .vgp-intro-head .outline-word{font-size:clamp(112px,10vw,216px)!important}
  html[data-display-tier="2k"] .intro-deck{font-size:clamp(18px,1.05vw,26px)!important;max-width:900px!important}
  html[data-display-tier="2k"] .intro-corner-card{width:clamp(360px,20vw,540px)!important}

  html[data-display-tier="2k"] .about-grid{grid-template-columns:minmax(500px,.9fr) minmax(0,1.35fr)!important;gap:clamp(56px,5vw,120px)!important}
  html[data-display-tier="2k"] .about-identity-canvas{height:min(64vh,880px)!important}
  html[data-display-tier="2k"] .identity-core h2{font-size:clamp(72px,4.5vw,116px)!important}
  html[data-display-tier="2k"] .about-list p{font-size:clamp(21px,1.5vw,35px)!important;min-height:clamp(38px,3vh,56px)!important;padding:clamp(6px,.6vh,10px) 12px!important}
  html[data-display-tier="2k"] .about-bottom-copy{font-size:clamp(17px,1vw,25px)!important;max-width:1080px!important;margin-top:clamp(10px,1vh,18px)!important}

  html[data-display-tier="2k"] .thread-word{font-size:clamp(44px,2.8vw,70px)!important}
  html[data-display-tier="2k"] .thread-detail h2{font-size:clamp(72px,4.2vw,112px)!important}
  html[data-display-tier="2k"] .thread-detail>p:not(.thread-index){font-size:clamp(18px,1vw,25px)!important;max-width:900px!important}

  html[data-display-tier="2k"] .growth-system-head h2{font-size:clamp(88px,5vw,136px)!important}
  html[data-display-tier="2k"] .growth-system-head>p{font-size:clamp(19px,1.05vw,28px)!important;max-width:760px!important}
  html[data-display-tier="2k"] .growth-art-system{grid-template-columns:minmax(390px,.78fr) minmax(0,1.22fr)!important}
  html[data-display-tier="2k"] .growth-art-row{min-height:clamp(62px,5vh,88px)!important}
  html[data-display-tier="2k"] .growth-art-panel h3{font-size:clamp(54px,3.1vw,88px)!important}

  html[data-display-tier="2k"] .resume-heading h2{font-size:clamp(105px,6vw,168px)!important}
  html[data-display-tier="2k"] .timeline strong{font-size:clamp(21px,1.15vw,30px)!important}
  html[data-display-tier="2k"] .timeline p{font-size:clamp(14px,.78vw,20px)!important}
  html[data-display-tier="2k"] .proof-title h2{font-size:clamp(126px,7vw,196px)!important}
  html[data-display-tier="2k"] .brand-rail span{font-size:clamp(25px,1.55vw,42px)!important}

  html[data-display-tier="2k"] .work-header h2{font-size:clamp(108px,6vw,172px)!important}
  html[data-display-tier="2k"] .case-card{min-height:clamp(390px,40vh,620px)!important}
  html[data-display-tier="2k"] .case-card strong{font-size:clamp(40px,2.4vw,64px)!important}

  html[data-display-tier="2k"] .gallery-heading h2{font-size:clamp(92px,5.4vw,150px)!important}
  html[data-display-tier="2k"] .gallery-heading p{font-size:clamp(18px,1vw,27px)!important;max-width:700px!important}
  html[data-display-tier="2k"] .vertical-card{height:min(67vh,900px)!important}
  html[data-display-tier="2k"] .mosaic-gallery{grid-auto-rows:clamp(250px,20vh,390px)!important}
  html[data-display-tier="2k"] .current-heading h2,
  html[data-display-tier="2k"] .shop-header h2{font-size:clamp(105px,6.2vw,176px)!important}

  html[data-display-tier="2k"] .page-quote blockquote{font-size:clamp(70px,4.3vw,118px)!important;max-width:1700px!important}
  html[data-display-tier="2k"] .connect-heading h2{font-size:clamp(104px,5.8vw,164px)!important}
}

/* 4K physical display. Deliberately larger visual rhythm without turning the
   page into a blown-up 1080p layout. */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  html[data-display-tier="4k"]{--pad:clamp(58px,4vw,142px)}
  html[data-display-tier="4k"] .topbar{height:clamp(116px,9.5vh,168px)!important;padding-top:12px!important}
  html[data-display-tier="4k"] .wordmark{width:clamp(76px,3.8vw,104px)!important;height:clamp(108px,8.8vh,150px)!important}
  html[data-display-tier="4k"] .menu-trigger,
  html[data-display-tier="4k"] .menu-close{font-size:clamp(12px,.55vw,17px)!important}
  html[data-display-tier="4k"] .stack-section>.page{padding-top:clamp(126px,10.5vh,184px)!important;padding-bottom:clamp(30px,3.2vh,62px)!important}
  html[data-display-tier="4k"] .section-rule,
  html[data-display-tier="4k"] .hero-top{font-size:clamp(10px,.55vw,15px)!important;padding-bottom:clamp(14px,1vh,20px)!important}

  html[data-display-tier="4k"] .hero-perspective{top:clamp(160px,18vh,290px)!important;width:clamp(520px,29vw,860px)!important}
  html[data-display-tier="4k"] .hero-perspective span{font-size:clamp(11px,.52vw,16px)!important}
  html[data-display-tier="4k"] .hero-perspective strong{font-size:clamp(26px,1.3vw,40px)!important;line-height:1.18!important}

  html[data-display-tier="4k"] .vgp-intro-head span{font-size:clamp(112px,9.1vw,236px)!important}
  html[data-display-tier="4k"] .vgp-intro-head .outline-word{font-size:clamp(132px,10.4vw,266px)!important}
  html[data-display-tier="4k"] .intro-deck{font-size:clamp(20px,1.08vw,31px)!important;max-width:1120px!important}
  html[data-display-tier="4k"] .intro-corner-card{width:clamp(420px,21vw,680px)!important;padding:clamp(18px,1.4vw,34px)!important}

  html[data-display-tier="4k"] .about-grid{grid-template-columns:minmax(600px,.92fr) minmax(0,1.38fr)!important;gap:clamp(70px,5.4vw,170px)!important}
  html[data-display-tier="4k"] .about-identity-canvas{height:min(65vh,1180px)!important}
  html[data-display-tier="4k"] .identity-core{left:clamp(34px,2.3vw,72px)!important;top:clamp(38px,3vh,72px)!important}
  html[data-display-tier="4k"] .identity-core h2{font-size:clamp(88px,4.7vw,146px)!important}
  html[data-display-tier="4k"] .identity-core>span{font-size:clamp(8px,.4vw,12px)!important}
  html[data-display-tier="4k"] .identity-core p{font-size:clamp(10px,.52vw,15px)!important}
  html[data-display-tier="4k"] .about-list p{font-size:clamp(25px,1.6vw,43px)!important;min-height:clamp(44px,3.2vh,68px)!important;padding:clamp(7px,.65vh,12px) 14px!important}
  html[data-display-tier="4k"] .about-bottom-copy{font-size:clamp(20px,1.05vw,31px)!important;max-width:1380px!important;margin-top:clamp(12px,1.2vh,22px)!important}

  html[data-display-tier="4k"] .thread-layout{grid-template-columns:minmax(540px,.7fr) minmax(0,1.3fr)!important;gap:clamp(80px,6vw,170px)!important}
  html[data-display-tier="4k"] .thread-word{font-size:clamp(52px,3vw,86px)!important}
  html[data-display-tier="4k"] .thread-detail h2{font-size:clamp(86px,4.5vw,138px)!important}
  html[data-display-tier="4k"] .thread-detail>p:not(.thread-index){font-size:clamp(20px,1.05vw,31px)!important;max-width:1120px!important}

  html[data-display-tier="4k"] .growth-system-head h2{font-size:clamp(106px,5.4vw,165px)!important}
  html[data-display-tier="4k"] .growth-system-head>p{font-size:clamp(22px,1.12vw,34px)!important;max-width:920px!important}
  html[data-display-tier="4k"] .growth-art-system{grid-template-columns:minmax(470px,.78fr) minmax(0,1.22fr)!important}
  html[data-display-tier="4k"] .growth-art-row{min-height:clamp(74px,5.2vh,104px)!important;padding:clamp(15px,1.2vh,24px) clamp(22px,1.5vw,40px)!important}
  html[data-display-tier="4k"] .growth-art-row strong{font-size:clamp(16px,.82vw,24px)!important}
  html[data-display-tier="4k"] .growth-art-panel{padding:clamp(38px,2.7vw,74px)!important}
  html[data-display-tier="4k"] .growth-art-panel h3{font-size:clamp(68px,3.45vw,108px)!important}
  html[data-display-tier="4k"] .growth-art-panel p{font-size:clamp(18px,.92vw,27px)!important}

  html[data-display-tier="4k"] .resume-heading h2{font-size:clamp(130px,6.5vw,205px)!important}
  html[data-display-tier="4k"] .timeline strong{font-size:clamp(24px,1.25vw,37px)!important}
  html[data-display-tier="4k"] .timeline p{font-size:clamp(16px,.82vw,24px)!important}
  html[data-display-tier="4k"] .proof-title h2{font-size:clamp(150px,7.5vw,235px)!important}
  html[data-display-tier="4k"] .brand-rail span{font-size:clamp(30px,1.65vw,50px)!important}

  html[data-display-tier="4k"] .work-header h2{font-size:clamp(132px,6.5vw,205px)!important}
  html[data-display-tier="4k"] .work-header p{font-size:clamp(20px,1.05vw,31px)!important}
  html[data-display-tier="4k"] .case-card{min-height:clamp(460px,42vh,760px)!important}
  html[data-display-tier="4k"] .case-card strong{font-size:clamp(48px,2.55vw,80px)!important}
  html[data-display-tier="4k"] .case-card p{font-size:clamp(16px,.82vw,24px)!important}

  html[data-display-tier="4k"] .gallery-heading h2{font-size:clamp(112px,5.9vw,184px)!important}
  html[data-display-tier="4k"] .gallery-heading p{font-size:clamp(21px,1.05vw,31px)!important;max-width:820px!important}
  html[data-display-tier="4k"] .vertical-card{height:min(68vh,1180px)!important}
  html[data-display-tier="4k"] .mosaic-gallery{grid-auto-rows:clamp(300px,20vh,500px)!important}
  html[data-display-tier="4k"] .current-heading h2,
  html[data-display-tier="4k"] .shop-header h2{font-size:clamp(130px,6.6vw,208px)!important}
  html[data-display-tier="4k"] .current-heading p,
  html[data-display-tier="4k"] .shop-intro p{font-size:clamp(20px,1vw,30px)!important}

  html[data-display-tier="4k"] .page-quote blockquote{font-size:clamp(86px,4.65vw,146px)!important;max-width:2150px!important}
  html[data-display-tier="4k"] .connect-heading h2{font-size:clamp(126px,6.3vw,196px)!important}
  html[data-display-tier="4k"] .connect-choice{font-size:clamp(13px,.7vw,19px)!important;padding:clamp(15px,1.2vh,24px) 0!important}
  html[data-display-tier="4k"] .connect-response h3{font-size:clamp(58px,3vw,92px)!important}
}

/* Service/detail pages receive the same display-tier treatment. */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  html[data-display-tier="2k"] .service-shell{width:min(92vw,2320px)!important;max-width:none!important;margin-inline:auto!important;padding-top:clamp(145px,12vh,190px)!important}
  html[data-display-tier="2k"] .service-hero h1{font-size:clamp(118px,6.8vw,190px)!important}
  html[data-display-tier="2k"] .service-hero p{font-size:clamp(21px,1.15vw,31px)!important;max-width:850px!important}
  html[data-display-tier="2k"] .service-block h2{font-size:clamp(64px,3.6vw,102px)!important}

  html[data-display-tier="4k"] .service-shell{width:min(94vw,3300px)!important;max-width:none!important;margin-inline:auto!important;padding-top:clamp(165px,12vh,240px)!important}
  html[data-display-tier="4k"] .service-hero h1{font-size:clamp(145px,7vw,225px)!important}
  html[data-display-tier="4k"] .service-hero p{font-size:clamp(25px,1.2vw,36px)!important;max-width:1080px!important}
  html[data-display-tier="4k"] .service-block h2{font-size:clamp(82px,3.8vw,122px)!important}
  html[data-display-tier="4k"] .service-block-content article h3{font-size:clamp(24px,1.2vw,36px)!important}
  html[data-display-tier="4k"] .service-block-content article p{font-size:clamp(16px,.8vw,24px)!important}
}

/* ==========================================================
   V4.36 — MULTI-VIDEO RAW & REFINED MOSAIC
   Build, BTS and commercial tiles use lazy YouTube motion media.
   ========================================================== */
.mosaic-video-tile{
  position:relative;
  isolation:isolate;
  background:#111;
}
.mosaic-video-tile .mosaic-video-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  object-fit:cover;
  opacity:1;
  transition:opacity .5s ease,transform .65s cubic-bezier(.2,.72,.2,1);
}
.mosaic-youtube-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:#111;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.mosaic-youtube-bg.is-loaded{opacity:1}
.mosaic-video-tile:has(.mosaic-youtube-bg.is-loaded) .mosaic-video-poster{opacity:0}
.mosaic-youtube-player{
  position:absolute;
  top:50%;
  left:50%;
  width:177.77777778vh;
  min-width:100%;
  height:56.25vw;
  min-height:100%;
  border:0;
  transform:translate(-50%,-50%) scale(1.12);
  transform-origin:center;
  pointer-events:none;
  transition:transform .65s cubic-bezier(.2,.72,.2,1);
}
.mosaic-video-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,15,.08) 0%,rgba(15,15,15,.01) 48%,rgba(15,15,15,.30) 100%);
}
.mosaic-video-tile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(12,10,10,.28));
}
.mosaic-video-tile .media-label{z-index:5}
.mosaic-video-tile:hover .mosaic-youtube-player{transform:translate(-50%,-50%) scale(1.16)}

@media(max-width:980px){
  .mosaic-youtube-player{width:200%;height:125%;min-width:200%;min-height:125%}
}
@media(max-width:640px){
  .mosaic-youtube-player{width:235%;height:135%;min-width:235%;min-height:135%}
}


/* ==========================================================
   V4.38 — TRUE VIEWPORT PANELS
   Desktop panels are pinned to an explicit viewport-sized section and
   the .page is absolutely inset to that section. This removes the last
   few pixels of next-section bleed caused by accumulated layout/scroll
   rounding on 1080p, 2K and 4K displays.
   ========================================================== */
@media (min-width:981px){
  html,body{margin:0!important;padding:0!important}
  main{margin:0!important;padding:0!important}
  .stack-section{
    position:sticky!important;
    top:0!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .stack-section > .page{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .stack-section + .stack-section{margin-top:0!important}
  .art-intro-section,.art-intro-section>.page{background:var(--burgundy)!important}
}

/* Mobile/tablet return to natural document flow. */
@media (max-width:980px){
  .stack-section{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:100svh!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .stack-section > .page{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    min-height:100svh!important;
    max-height:none!important;
  }
}

/* ==========================================================
   V4.39 — FULL-VIEWPORT PANEL CORRECTION
   Fixes the V4.38 regression where absolutely-positioned .page
   elements were left at height:auto and therefore collapsed to
   their content height. Desktop / 2K / 4K panels now occupy the
   entire sticky viewport section. Also removes the decorative
   horizontal rule beneath section eyebrow labels.
   ========================================================== */

/* Keep the small section labels, remove only their long divider line. */
.section-rule{
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

@media (min-width:981px){
  .stack-section{
    position:sticky !important;
    top:0 !important;
    width:100% !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .stack-section > .page{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Hero already owns its own media geometry; keep it locked too. */
  .stack-section > .legacy-hero-page{
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
  }
}

/* Tablet/mobile continue to flow naturally and are not forced into
   fixed-height content panels. */
@media (max-width:980px){
  .stack-section > .page{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    min-height:100svh !important;
    max-height:none !important;
  }
  .section-rule{padding-bottom:0 !important}
}


/* ==========================================================
   V4.40 — FULL-PAGE PAGER SUPPORT
   JS owns vertical paging on desktop. Disable native smooth/snap behavior
   so browser inertia cannot fight the exact section alignment.
   ========================================================== */
@media (min-width:981px){
  html{
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;
    overscroll-behavior-y:none;
  }
  body{scroll-behavior:auto !important;}
  .stack-section{
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
  }
  .stack-section > .page{
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
  }
}


/* ==========================================================
   V4.42 — NON-BLOCKING SCROLL FOUNDATION
   JavaScript no longer intercepts wheel/touch input. Keep native vertical
   scrolling available at all times; JS only aligns after input has stopped.
   ========================================================== */
@media (min-width:981px){
  html{
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;
    overscroll-behavior-y:auto !important;
  }
  body{
    overflow-y:auto !important;
    scroll-behavior:auto !important;
  }
}


/* ==========================================================
   V4.45 — SCRIPTED GALLERY / TRUE 16:9 OVERSCAN PLAYER
   JavaScript sets exact 16:9 pixel dimensions from each portrait
   card's live size. The iframe is vertically overscanned so
   YouTube UI/captions sit outside the visible crop.
   ========================================================== */
.vertical-video-tile{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#151313;
}
.vertical-video-tile .vertical-video-poster{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  transition:opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1);
}
.vertical-youtube-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:0;
  background:#151313;
  transition:opacity .55s ease;
  pointer-events:none;
}
.vertical-youtube-bg.is-loaded{opacity:1}
.vertical-video-tile.video-ready .vertical-video-poster{opacity:0}
.vertical-youtube-player{
  position:absolute;
  left:50%;
  top:47%;
  width:1600px;
  height:900px;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  border:0;
  transform:translate(-50%,-50%);
  transform-origin:center;
  pointer-events:none!important;
  transition:transform .7s cubic-bezier(.2,.72,.2,1);
}
.vertical-video-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,10,10,.08) 0%,rgba(13,10,10,.015) 50%,rgba(13,10,10,.24) 100%);
}
/* Transparent interaction shield prevents YouTube hover/tap UI from
   receiving pointer input while leaving the motion fully visible. */
.vertical-video-tile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:transparent;
  pointer-events:auto;
}
.vertical-video-tile .media-label{z-index:6;pointer-events:none}
.vertical-video-tile:hover .vertical-youtube-player{transform:translate(-50%,-50%) scale(1.025)}

@media (max-width:980px){
  .vertical-youtube-player{top:46%}
}



/* ==========================================================
   V4.47 — PORTRAIT VIDEO HARD-COVER OVERRIDE
   Authoritative final crop for FILMS + BRANDED motion cards.
   The 16:9 YouTube canvas is oversized and shifted upward so
   embedded top bars and the lower caption/UI safe zone live
   outside the clipped portrait card.
   ========================================================== */
.vertical-video-tile{
  overflow:hidden !important;
}
.vertical-youtube-bg{
  inset:-1px !important;
  overflow:hidden !important;
}
.vertical-youtube-player{
  left:50% !important;
  top:43% !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  transform:translate(-50%,-50%) !important;
}
.vertical-video-tile:hover .vertical-youtube-player{
  transform:translate(-50%,-50%) scale(1.018) !important;
}
/* Subtle edge masks cover the tiny YouTube compositing seams only;
   they do not change the visible frame composition. */
.vertical-video-tile::before{
  box-shadow:inset 0 10px 0 #151313, inset 0 -10px 0 #151313 !important;
}

/* ==========================================================
   V4.48 — 9:16 PORTRAIT TILE GEOMETRY + CLEAN EDGE MASKS
   - Gives the four FILMS + BRANDED cards a true 9:16 silhouette.
   - Reduces the extreme zoom from the previous narrow-card layout.
   - Hides the residual embedded player bars with edge masks.
   ========================================================== */
@media (min-width: 981px){
  #scripted .page-gallery{
    grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr) !important;
    gap:clamp(18px,2.2vw,42px) !important;
    align-items:center !important;
  }
  #scripted .vertical-gallery{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:clamp(12px,.95vw,18px) !important;
  }
  #scripted .vertical-card{
    flex:0 0 clamp(200px,13.8vw,300px) !important;
    width:clamp(200px,13.8vw,300px) !important;
    height:auto !important;
    aspect-ratio:9 / 16 !important;
    max-height:none !important;
  }
  #scripted .vertical-card.shift-down{
    margin-top:clamp(18px,3.2vh,42px) !important;
  }
}

#scripted .vertical-video-tile{
  background:#120e10 !important;
}
#scripted .vertical-youtube-bg{
  inset:0 !important;
  overflow:hidden !important;
  background:#120e10 !important;
}
#scripted .vertical-youtube-player{
  left:50% !important;
  top:50% !important;
  border:0 !important;
  transform:translate(-50%,-50%) !important;
}
#scripted .vertical-video-tile:hover .vertical-youtube-player{
  transform:translate(-50%,-50%) scale(1.012) !important;
}
/* Edge masks hide the small top/bottom bars and subtitle strip while
   keeping the visible picture area clean. */
#scripted .vertical-video-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:
    inset 0 14px 0 #120e10,
    inset 0 -22px 0 #120e10;
  background:linear-gradient(180deg,rgba(13,10,10,.06) 0%,rgba(13,10,10,0) 18%,rgba(13,10,10,0) 78%,rgba(13,10,10,.10) 100%);
}
#scripted .vertical-video-tile .media-label{
  z-index:6 !important;
}

/* ==========================================================
   V4.50 — STRICT 9:16 / NO ARTIFICIAL BLACK BARS
   This is the authoritative final override for FILMS + BRANDED.
   ========================================================== */
@media (min-width:981px){
  #scripted .vertical-gallery{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:clamp(12px,.9vw,18px) !important;
  }
  #scripted .vertical-card{
    /* V4.53 — make the 9:16 tiles a touch larger without changing the
       composition, caption mask, or no-border treatment. */
    flex:0 0 clamp(218px,14.6vw,320px) !important;
    width:clamp(218px,14.6vw,320px) !important;
    height:auto !important;
    aspect-ratio:9 / 16 !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  #scripted .vertical-card.shift-down{
    margin-top:clamp(18px,3vh,40px) !important;
  }
}

#scripted .vertical-video-tile,
#scripted .vertical-youtube-bg{
  overflow:hidden !important;
  background:transparent !important;
}

#scripted .vertical-youtube-bg{
  inset:0 !important;
}

/* Remove the dark inset masks from earlier revisions. The player itself
   now overscans enough to cover the frame, so there is no fake black bar. */
#scripted .vertical-video-tile::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
  box-shadow:none !important;
  background:linear-gradient(180deg,rgba(13,10,10,.035) 0%,rgba(13,10,10,0) 22%,rgba(13,10,10,0) 78%,rgba(13,10,10,.07) 100%) !important;
}

#scripted .vertical-youtube-player{
  left:50% !important;
  top:47% !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  transform:translate(-50%,-50%) !important;
  background:transparent !important;
}

#scripted .vertical-video-tile:hover .vertical-youtube-player{
  transform:translate(-50%,-50%) scale(1.008) !important;
}

@media (max-width:980px){
  #scripted .vertical-card{
    aspect-ratio:9 / 16 !important;
    height:auto !important;
  }
  #scripted .vertical-youtube-player{
    top:46.5% !important;
  }
}

/* ==========================================================
   V4.51 — FILMS + BRANDED / CAPTION-SAFE 9:16
   YouTube can honor a viewer's caption preference even when
   cc_load_policy is not forced on. Preserve V4.50's strict 9:16
   framing and visually bury only the lower caption-safe zone in
   the section's own burgundy — never a black bar.
   ========================================================== */
#scripted .vertical-card{
  aspect-ratio:9 / 16 !important;
  overflow:hidden !important;
}

/* Keep the V4.50 crop; no extra zoom regression. */
#scripted .vertical-youtube-player{
  top:47% !important;
}

/* The existing interaction shield becomes a small editorial fade over
   YouTube's caption-safe area. It remains transparent through most of
   the card and only resolves into the section burgundy at the bottom. */
#scripted .vertical-video-tile::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;
  height:14.5% !important;
  z-index:5 !important;
  pointer-events:auto !important;
  background:linear-gradient(
    180deg,
    rgba(67,21,26,0) 0%,
    rgba(67,21,26,.16) 34%,
    rgba(67,21,26,.72) 72%,
    rgba(67,21,26,.98) 100%
  ) !important;
}

#scripted .vertical-video-tile .media-label{
  z-index:7 !important;
}

@media (max-width:980px){
  #scripted .vertical-video-tile::after{
    height:16% !important;
  }
}

/* ==========================================================
   V4.52 — FILMS + BRANDED / BORDERLESS + HARD CAPTION MASK
   Dedicated DOM overlay sits above the YouTube iframe, so captions
   cannot visually leak through. It fades into the section burgundy.
   ========================================================== */
#scripted .vertical-card,
#scripted .vertical-video-tile,
#scripted .vertical-youtube-bg,
#scripted .vertical-youtube-player{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

#scripted .vertical-card{
  background:transparent !important;
}

/* Disable the older pseudo-element caption treatment so there is only
   one authoritative caption-safe layer. */
#scripted .vertical-video-tile::after{
  content:none !important;
  display:none !important;
}

#scripted .vertical-caption-mask{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:27%;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(67,21,26,0) 0%,
    rgba(67,21,26,.10) 18%,
    rgba(67,21,26,.58) 46%,
    rgba(67,21,26,.92) 68%,
    rgba(67,21,26,1) 82%,
    rgba(67,21,26,1) 100%
  );
}

#scripted .vertical-video-tile .media-label{
  z-index:8 !important;
}

@media (max-width:980px){
  #scripted .vertical-caption-mask{height:29%;}
}


/* ==========================================================
   V4.54 — AREA 51 E-COMMERCE CASE VISUAL
   Uses the actual products-page screenshot as portfolio proof.
   ========================================================== */
.area51-case{
  background:#111 !important;
}
.area51-case .case-card-image{
  object-position:center top !important;
  filter:saturate(.9) contrast(1.02) brightness(.88) !important;
  opacity:.92 !important;
}
.area51-case::after{
  background:linear-gradient(180deg,rgba(8,8,8,.08) 0%,rgba(8,8,8,.28) 42%,rgba(8,8,8,.78) 82%,rgba(8,8,8,.9) 100%) !important;
}
.area51-case:hover::after{
  background:linear-gradient(180deg,rgba(8,8,8,.03) 0%,rgba(8,8,8,.20) 44%,rgba(8,8,8,.68) 82%,rgba(8,8,8,.86) 100%) !important;
}
.area51-case:hover .case-card-image{
  filter:saturate(1) contrast(1.04) brightness(.94) !important;
}

/* ==========================================================
   V4.55 — 404 PAGE STYLES
   Moved from inline CSS so the entire project uses one local stylesheet.
   ========================================================== */
body.error-page{
  margin:0;
  background:#633538;
  color:#f3ece2;
  font-family:Poppins,Arial,sans-serif;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:30px;
}
.error-page .wrap{
  width:min(1200px,100%);
  border-top:1px solid rgba(243,236,226,.35);
  border-bottom:1px solid rgba(243,236,226,.35);
  padding:6vh 0;
}
.error-page .n{
  font-size:clamp(130px,28vw,430px);
  line-height:.65;
  font-weight:800;
  letter-spacing:-.1em;
  margin:0;
}
.error-page .copy{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-top:5vh;
}
.error-page .copy p{
  max-width:520px;
  font-size:clamp(18px,2vw,30px);
  line-height:1.2;
}
.error-page .copy a{
  border:1px solid currentColor;
  padding:15px 18px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-decoration:none;
  color:inherit;
}
@media(max-width:650px){
  .error-page .copy{display:block}
  .error-page .copy a{display:inline-block;margin-top:20px}
}

/* ==========================================================
   V4.59 — DESKTOP / HIGH-RES INFINITE MARQUEE SYSTEM
   Desktop + tablet-landscape only. Mobile (<=980px) is untouched.
   Makes the intro and growth marquees seamless, brighter and more
   legible across 1080p, 2K, 4K and ultrawide displays.
   ========================================================== */
@media (min-width:981px){
  .intro-ticker,
  .growth-ticker{
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  /* Both source strings already contain two identical halves. Using the
     actual content width instead of min-width:200% makes -50% a seamless
     loop with no dead gap at wide viewport sizes. */
  .intro-ticker > div,
  .growth-ticker > div{
    display:block !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
  }

  .intro-ticker{
    height:clamp(34px,2.35vw,48px) !important;
    border-top:1px solid rgba(243,236,226,.38) !important;
    background:rgba(22,12,13,.42) !important;
  }
  .intro-ticker > div{
    font-size:clamp(8px,.58vw,12px) !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.22em !important;
    color:rgba(243,236,226,.92) !important;
    animation:vgpTicker431 20s linear infinite !important;
  }

  .growth-ticker{
    padding-top:clamp(14px,1.05vw,22px) !important;
    border-top:1px solid rgba(243,236,226,.34) !important;
  }
  .growth-ticker > div{
    font-size:clamp(10px,.68vw,14px) !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.20em !important;
    color:rgba(243,236,226,.94) !important;
    animation:vgpTicker 22s linear infinite !important;
  }
}

/* Standard large desktop / 1440p-like layouts */
@media (min-width:1440px) and (min-height:800px){
  .intro-ticker{height:42px !important}
  .intro-ticker > div{font-size:10px !important;animation-duration:21s !important}
  .growth-ticker{padding-top:18px !important}
  .growth-ticker > div{font-size:12px !important;animation-duration:23s !important}
}

/* 2K / ultrawide desktop */
@media (min-width:2200px) and (min-height:1100px){
  .intro-ticker{height:50px !important}
  .intro-ticker > div{font-size:12px !important;letter-spacing:.24em !important;animation-duration:24s !important}
  .growth-ticker{padding-top:22px !important}
  .growth-ticker > div{font-size:14px !important;letter-spacing:.22em !important;animation-duration:26s !important}
}

/* Physical 4K / very large desktop */
@media (min-width:3200px) and (min-height:1700px){
  .intro-ticker{height:62px !important}
  .intro-ticker > div{font-size:15px !important;letter-spacing:.25em !important;animation-duration:28s !important}
  .growth-ticker{padding-top:28px !important}
  .growth-ticker > div{font-size:17px !important;letter-spacing:.23em !important;animation-duration:30s !important}
}

/* Display-tier fallbacks catch 2K/4K monitors hidden behind OS scaling. */
@media (min-width:981px){
  html[data-display-tier="2k"] .intro-ticker{height:48px !important}
  html[data-display-tier="2k"] .intro-ticker > div{font-size:12px !important;animation-duration:24s !important}
  html[data-display-tier="2k"] .growth-ticker > div{font-size:14px !important;animation-duration:26s !important}

  html[data-display-tier="4k"] .intro-ticker{height:60px !important}
  html[data-display-tier="4k"] .intro-ticker > div{font-size:15px !important;animation-duration:28s !important}
  html[data-display-tier="4k"] .growth-ticker{padding-top:27px !important}
  html[data-display-tier="4k"] .growth-ticker > div{font-size:17px !important;animation-duration:30s !important}
}

/* ==========================================================
   V4.60 — DESKTOP SEAMLESS MARQUEES + HERO CARD CLEARANCE
   Mobile <=980px intentionally unchanged.
   ========================================================== */
@media (min-width:981px){
  /* Pull the perspective card + CTA rail clearly above the bottom marquee. */
  .art-intro-page .intro-corner-card{
    transform:translateY(clamp(-92px,-7.2vh,-58px)) !important;
  }
  .art-intro-page .intro-contact{
    transform:translateY(clamp(-70px,-5.4vh,-42px)) !important;
  }

  /* True duplicated-track marquee. Each copy is identical and occupies
     exactly half the animated track, so -50% lands on an identical frame. */
  .intro-ticker > .ybj-marquee-track,
  .growth-ticker > .ybj-marquee-track{
    display:flex !important;
    align-items:center !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    animation-name:ybjMarqueeContinuous !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
    transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
  }

  .intro-ticker > .ybj-marquee-track{
    height:100% !important;
    animation-duration:20s !important;
  }
  .growth-ticker > .ybj-marquee-track{
    animation-duration:22s !important;
  }

  .ybj-marquee-copy{
    display:block;
    flex:0 0 auto;
    white-space:nowrap;
    padding-right:clamp(56px,4vw,128px);
  }

  @keyframes ybjMarqueeContinuous{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
  }
}

/* Preserve V4.59 high-resolution pacing on the new seamless track. */
@media (min-width:1440px) and (min-height:800px){
  .intro-ticker > .ybj-marquee-track{animation-duration:21s !important}
  .growth-ticker > .ybj-marquee-track{animation-duration:23s !important}
}
@media (min-width:2200px) and (min-height:1100px){
  .intro-ticker > .ybj-marquee-track{animation-duration:24s !important}
  .growth-ticker > .ybj-marquee-track{animation-duration:26s !important}
  .art-intro-page .intro-corner-card{transform:translateY(clamp(-130px,-8vh,-88px)) !important}
  .art-intro-page .intro-contact{transform:translateY(clamp(-96px,-6vh,-62px)) !important}
}
@media (min-width:3200px) and (min-height:1700px){
  .intro-ticker > .ybj-marquee-track{animation-duration:28s !important}
  .growth-ticker > .ybj-marquee-track{animation-duration:30s !important}
  .art-intro-page .intro-corner-card{transform:translateY(clamp(-170px,-8.5vh,-118px)) !important}
  .art-intro-page .intro-contact{transform:translateY(clamp(-126px,-6.5vh,-82px)) !important}
}
@media (min-width:981px){
  html[data-display-tier="2k"] .intro-ticker > .ybj-marquee-track{animation-duration:24s !important}
  html[data-display-tier="2k"] .growth-ticker > .ybj-marquee-track{animation-duration:26s !important}
  html[data-display-tier="4k"] .intro-ticker > .ybj-marquee-track{animation-duration:28s !important}
  html[data-display-tier="4k"] .growth-ticker > .ybj-marquee-track{animation-duration:30s !important}
}


/* ==========================================================
   V4.61 — MEASURED, VIEWPORT-FILLING DESKTOP MARQUEES
   Mobile <=980px is intentionally untouched.
   ========================================================== */
@media (min-width:981px){
  .intro-ticker > .ybj-marquee-track,
  .growth-ticker > .ybj-marquee-track{
    display:flex !important;
    align-items:center !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
    animation-name:ybjMarqueeMeasured !important;
    animation-duration:var(--ybj-marquee-duration,22s) !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
  }

  .ybj-marquee-group{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    width:max-content !important;
    white-space:nowrap !important;
  }

  .ybj-marquee-copy{
    display:block !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding-right:clamp(56px,4vw,128px) !important;
  }

  @keyframes ybjMarqueeMeasured{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(var(--ybj-marquee-shift,-1200px),0,0)}
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:981px){
  .intro-ticker > .ybj-marquee-track,
  .growth-ticker > .ybj-marquee-track{
    animation:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   V4.62 — AUTHORITATIVE DESKTOP CONTINUOUS MARQUEE OVERRIDE
   Mobile <=980px intentionally untouched.
   ========================================================== */
@media (min-width:981px){
  .intro-ticker,
  .growth-ticker{
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .intro-ticker > .ybj-marquee-track,
  .growth-ticker > .ybj-marquee-track{
    display:inline-flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
    animation:ybjMarquee462 var(--ybj-marquee-duration,22s) linear infinite !important;
  }

  .ybj-marquee-group{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    transform:none !important;
    animation:none !important;
  }

  .ybj-marquee-copy{
    display:inline-block !important;
    flex:0 0 auto !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 clamp(54px,3.4vw,110px) 0 0 !important;
    white-space:nowrap !important;
    transform:none !important;
    animation:none !important;
  }

  /* Preserve the approved V4.59 typography/contrast on the new SPAN track. */
  .intro-ticker > .ybj-marquee-track{
    height:100% !important;
    font-size:clamp(8px,.58vw,12px) !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.22em !important;
    color:rgba(243,236,226,.92) !important;
  }
  .growth-ticker > .ybj-marquee-track{
    font-size:clamp(10px,.68vw,14px) !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.20em !important;
    color:rgba(243,236,226,.94) !important;
  }

  @keyframes ybjMarquee462{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(var(--ybj-marquee-shift,-1200px),0,0)}
  }
}

/* Keep the marquees pronounced on larger monitors, without changing mobile. */
@media (min-width:1440px) and (min-height:800px){
  .intro-ticker > .ybj-marquee-track{font-size:10px !important}
  .growth-ticker > .ybj-marquee-track{font-size:12px !important}
}
@media (min-width:2200px) and (min-height:1100px){
  .intro-ticker > .ybj-marquee-track{font-size:12px !important;letter-spacing:.24em !important}
  .growth-ticker > .ybj-marquee-track{font-size:14px !important;letter-spacing:.22em !important}
}
@media (min-width:3200px) and (min-height:1700px){
  .intro-ticker > .ybj-marquee-track{font-size:15px !important;letter-spacing:.25em !important}
  .growth-ticker > .ybj-marquee-track{font-size:17px !important;letter-spacing:.23em !important}
}
@media (min-width:981px){
  html[data-display-tier="2k"] .intro-ticker > .ybj-marquee-track{font-size:12px !important}
  html[data-display-tier="2k"] .growth-ticker > .ybj-marquee-track{font-size:14px !important}
  html[data-display-tier="4k"] .intro-ticker > .ybj-marquee-track{font-size:15px !important}
  html[data-display-tier="4k"] .growth-ticker > .ybj-marquee-track{font-size:17px !important}
}

@media (prefers-reduced-motion:reduce) and (min-width:981px){
  .intro-ticker > .ybj-marquee-track,
  .growth-ticker > .ybj-marquee-track{
    animation:none !important;
    transform:none !important;
  }
}

/* ==========================================================
   V4.63 — CONTACT FORM MODAL
   Keeps the existing contact funnel visual, removes transfer CTA from
   the contact footer, and turns START THE CONVERSATION into a modal form.
   ========================================================== */
#contactEmail.cream-button,
.contact-form-submit.cream-button{
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
  cursor:pointer;
}

.contact-dialog{
  width:min(1040px,calc(100% - 40px));
  max-height:min(90dvh,900px);
  margin:auto;
  padding:0;
  border:1px solid rgba(243,236,226,.22);
  border-radius:0;
  background:#151112;
  color:var(--cream);
  box-shadow:0 40px 120px rgba(0,0,0,.58);
  overflow:auto;
}
.contact-dialog::backdrop{
  background:rgba(7,6,6,.82);
  backdrop-filter:blur(10px);
}
.contact-dialog-close{
  position:absolute;
  top:22px;
  right:24px;
  z-index:4;
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(243,236,226,.72);
  font:800 9px/1 "Poppins",Arial,sans-serif;
  letter-spacing:.18em;
  cursor:pointer;
}
.contact-dialog-close:hover{color:var(--cream)}
.contact-dialog-body{
  position:relative;
  padding:clamp(52px,5.4vw,82px);
  background:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
    radial-gradient(circle at 85% 8%,rgba(107,35,43,.35),transparent 32%);
  background-size:46px 46px,46px 46px,auto;
}
.contact-dialog-kicker{
  margin:0 0 12px;
  color:rgba(243,236,226,.5);
  font-size:8px;
  font-weight:800;
  letter-spacing:.2em;
}
.contact-dialog h2{
  max-width:760px;
  margin:0 0 clamp(34px,5vh,54px);
  font-family:"Poppins",Arial,sans-serif;
  font-size:clamp(52px,7vw,108px);
  line-height:.82;
  letter-spacing:-.068em;
}
.contact-form{display:grid;gap:26px}
.contact-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 24px;
}
.contact-form label{display:grid;gap:8px;min-width:0}
.contact-form label>span{
  font-size:8px;
  font-weight:800;
  letter-spacing:.17em;
  color:rgba(243,236,226,.52);
}
.contact-form input,
.contact-form textarea{
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid rgba(243,236,226,.28);
  border-radius:0;
  outline:none;
  background:rgba(243,236,226,.025);
  color:var(--cream);
  padding:13px 12px;
  font:500 clamp(13px,1vw,16px)/1.45 "Poppins",Arial,sans-serif;
  transition:border-color .2s ease,background .2s ease;
}
.contact-form textarea{
  min-height:150px;
  resize:vertical;
  border:1px solid rgba(243,236,226,.24);
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:rgba(214,180,107,.8);
  background:rgba(243,236,226,.045);
}
.contact-form input[readonly]{
  color:var(--vgp-gold,#d6b46b);
  font-weight:700;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:rgba(243,236,226,.28)}
.contact-form-message{grid-column:1/-1}
.contact-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding-top:4px;
}
.contact-form-actions p{
  max-width:490px;
  margin:0;
  font-size:11px;
  line-height:1.55;
  color:rgba(243,236,226,.46);
}
.contact-form-actions strong{color:rgba(243,236,226,.78);font-weight:600}
.contact-form-submit{flex:0 0 auto}

@media(max-width:760px){
  .contact-dialog{width:calc(100% - 18px);max-height:94dvh}
  .contact-dialog-body{padding:52px 20px 28px;background-size:34px 34px,34px 34px,auto}
  .contact-dialog h2{font-size:clamp(44px,14vw,70px)}
  .contact-form-grid{grid-template-columns:1fr;gap:16px}
  .contact-form-actions{align-items:stretch;flex-direction:column}
  .contact-form-submit{width:100%}
  .contact-dialog-close{top:18px;right:18px}
}


/* V4.65 — live WordPress Field Note */
#liveBlogPost [data-blog-title],
#liveBlogPost [data-blog-excerpt],
#liveBlogPost [data-blog-label],
#liveBlogPost [data-blog-glyph]{transition:opacity .22s ease}