/* ============ TOKENS ============ */
:root{
  --rose-dark:#7C2F45;
  --rose-bright:#E8368F;
  --rose-soft:#F491C0;
  --purple-deep:#3B1F35;
  --paper:#F5F1EC;
  --black:#0D0D0D;
  --white:#FFFFFF;
  --ink:#0D0D0D;
  --line:rgba(13,13,13,.16);
  --line-inv:rgba(245,241,236,.16);
  --mute:rgba(13,13,13,.6);
  --mute-inv:rgba(245,241,236,.64);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --narrow:'Archivo Narrow','Arial Narrow',Arial,sans-serif;
  --ease:cubic-bezier(.65,.05,.36,1);
  --ease2:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,4vw,72px);
}
/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
::selection{background:var(--rose-bright);color:var(--white)}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}
/* ============ GRID ============ */
.container{width:min(1720px,100%);margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px)}
.s1{grid-column-end:span 1}.s2{grid-column-end:span 2}.s3{grid-column-end:span 3}.s4{grid-column-end:span 4}
.s5{grid-column-end:span 5}.s6{grid-column-end:span 6}.s7{grid-column-end:span 7}.s8{grid-column-end:span 8}
.s9{grid-column-end:span 9}.s10{grid-column-end:span 10}.s11{grid-column-end:span 11}.s12{grid-column-end:span 12}
.o1{grid-column-start:1}.o2{grid-column-start:2}.o3{grid-column-start:3}.o4{grid-column-start:4}
.o5{grid-column-start:5}.o6{grid-column-start:6}.o7{grid-column-start:7}.o8{grid-column-start:8}
.o9{grid-column-start:9}.o10{grid-column-start:10}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
/* ============ TYPE ============ */
.eyebrow{
  font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);
}
.bx{color:var(--rose-bright);font-weight:600;margin-right:.55em}
.serif{font-family:var(--serif)}
.display{
  font-family:var(--serif);font-weight:350;letter-spacing:-.02em;line-height:.92;
}
.cap{
  font-family:var(--narrow);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-top:14px;
}
.cap b{color:var(--rose-bright);font-weight:600;margin-right:.6em}
.cap i{font-style:normal;color:var(--ink)}
/* ============ REVEAL ============ */
.reveal{transition:transform .6s var(--ease2)}
.media{overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.5s var(--ease)}
.media:hover img{transform:scale(1.07)}
/* ============ PROGRESS + MASTHEAD ============ */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--rose-bright);z-index:110}
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;color:var(--paper);
  transition:transform .5s var(--ease),background .45s ease,color .45s ease,box-shadow .45s ease;
}
.masthead .container{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.masthead.hidden{transform:translateY(-104%)}
.masthead.scrolled{background:rgba(245,241,236,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.wordmark{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;line-height:1}
.wordmark em{font-style:italic}
.wordmark sup{font-size:8px;color:var(--rose-bright);margin-left:2px;vertical-align:super}
.wordmark .tag{display:inline-block;margin-left:14px;font-family:var(--narrow);font-size:10px;letter-spacing:.22em;color:inherit;opacity:.55;text-transform:uppercase;vertical-align:2px}
.wordmark{display:inline-flex;align-items:center;gap:14px}
.wordmark img.logo{display:block;height:clamp(24px,3.4vw,32px);width:auto}
.wordmark img.logo-dark{display:none}
.masthead.scrolled .wordmark img.logo-light{display:none}
.masthead.scrolled .wordmark img.logo-dark{display:block}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav a{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;position:relative;padding:4px 0}
.nav a sup{font-size:8px;color:var(--rose-bright);margin-right:5px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--rose-bright);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.mast-avail{display:flex;align-items:center;gap:10px;font-family:var(--narrow);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.dot{width:7px;height:7px;border-radius:50%;background:var(--rose-bright);box-shadow:0 0 0 0 rgba(232,54,143,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,54,143,.5)}70%{box-shadow:0 0 0 9px rgba(232,54,143,0)}100%{box-shadow:0 0 0 0 rgba(232,54,143,0)}}
.menu-btn{display:none;background:none;border:0;color:inherit;cursor:pointer;font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:8px 0}
/* menu overlay */
.overlay{position:fixed;inset:0;z-index:105;background:var(--black);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--pad) * 1.2) var(--pad) var(--pad);transform:translateY(-102%);transition:transform .6s var(--ease)}
.overlay.open{transform:translateY(0)}
.overlay-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6vh}
.overlay .menu-btn{display:block;color:var(--paper)}
.overlay .links{display:flex;flex-direction:column}
.overlay .links a{font-family:var(--serif);font-size:clamp(2.4rem,10vw,4.6rem);line-height:1.06;display:flex;align-items:baseline;gap:18px;padding:6px 0;border-bottom:1px solid var(--line-inv)}
.overlay .links a sup{font-family:var(--narrow);font-size:12px;color:var(--rose-bright);letter-spacing:.2em}
.overlay .links a:hover{color:var(--rose-soft);font-style:italic}
/* ============ CURSOR FOLLOWER ============ */
#cursor{
  position:fixed;left:0;top:0;z-index:120;pointer-events:none;
  font-family:var(--narrow);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  background:var(--black);color:var(--paper);border:1px solid var(--line-inv);
  padding:9px 14px;border-radius:999px;opacity:0;transform:translate(-50%,-160%) scale(.7);
  transition:opacity .3s ease,transform .3s var(--ease);white-space:nowrap;
}
#cursor.on{opacity:1;transform:translate(-50%,-160%) scale(1)}
/* ============ HERO ============ */
.hero{position:relative;background:var(--black);color:var(--paper);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:56%;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:kb 30s ease-in-out infinite alternate}
.hero-media-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.35) 46%,rgba(13,13,13,0) 78%)}
@keyframes kb{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.11) translateX(-2.4%)}}
.hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding-top:clamp(120px,16vh,170px);padding-bottom:40px}
.hero-copy{position:relative;z-index:3}
.hero .kicker{color:var(--rose-soft);letter-spacing:.22em}
.hero-title{margin:clamp(14px,2.5vh,26px) 0 clamp(18px,3vh,30px);display:flex;flex-direction:column}
.hero-title .t1{font-family:var(--serif);font-weight:340;font-size:clamp(3.6rem,10vw,12rem);line-height:.86;letter-spacing:-.03em}
.hero-title .t2{font-family:var(--serif);font-weight:340;font-size:clamp(3.6rem,10vw,12rem);line-height:.86;letter-spacing:-.03em}
.hero-title .t2 em{font-style:italic;font-weight:300;color:var(--paper)}
.hero-title sup{font-size:.16em;color:var(--rose-bright);vertical-align:super;letter-spacing:0}
.hero-line{max-width:52ch;font-family:var(--sans);font-size:clamp(15px,1.25vw,17px);line-height:1.7;color:var(--mute-inv)}
.hero-line .accent{display:block;font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-bright);margin-bottom:12px}
.hero-meta{position:relative;z-index:3;margin-top:auto;padding-top:26px;border-top:1px solid var(--line-inv);display:flex;flex-wrap:wrap;gap:14px 44px;font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-inv)}
.hero-edge{position:absolute;left:22px;bottom:26px;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--narrow);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,241,236,.42)}
.hero-scroll{position:absolute;right:26px;bottom:24px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--narrow);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-inv)}
.hero-scroll i{display:block;width:1px;height:44px;background:var(--line-inv);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:-30%;width:100%;height:30%;background:var(--rose-bright);animation:scrolldot 2.2s var(--ease) infinite}
@keyframes scrolldot{0%{top:-30%}70%{top:105%}100%{top:105%}}
/* ============ TICKER ============ */
.ticker{background:var(--black);border-top:1px solid var(--line-inv);overflow:hidden;padding:15px 0}
.ticker-track{display:flex;width:max-content;animation:marq 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center}
.ticker-item{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,241,236,.82);padding:0 26px;white-space:nowrap}
.ticker-star{width:11px;height:11px;color:var(--rose-bright);flex:0 0 auto}
@keyframes marq{to{transform:translateX(-50%)}}
/* ============ SECTIONS ============ */
section{position:relative}
.pad-b{padding-block:clamp(72px,11vh,150px)}
.dark{background:var(--black);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
.white-sec{background:var(--white);color:var(--ink)}
/* section header */
.shead{margin-bottom:clamp(44px,7vh,88px)}
.shead .eyebrow{margin-bottom:clamp(18px,3vh,30px);display:flex;align-items:center;gap:12px}
.shead .eyebrow::before{content:"";width:34px;height:1px;background:var(--rose-bright)}
.shead-main{align-items:end}
.shead-title{font-family:var(--serif);font-weight:340;font-size:clamp(3rem,7.5vw,7.2rem);line-height:.92;letter-spacing:-.025em}
.shead-title em{font-style:italic;color:var(--rose-dark)}
.dark .shead-title em{color:var(--rose-soft)}
.shead-meta{padding-bottom:8px}
.shead-meta p{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dark .shead-meta p{color:var(--mute-inv)}
.shead-meta .desc{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;max-width:44ch;margin-top:14px;line-height:1.65}
/* ============ CASE STUDIES ============ */
.cs{padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(56px,9vh,110px);border-top:1px solid var(--line)}
.cs:first-of-type{border-top:0;padding-top:0}
.cs-head{align-items:end;margin-bottom:clamp(30px,5vh,56px)}
.cs-idx{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-bright)}
.cs-title{font-family:var(--serif);font-weight:340;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.95;letter-spacing:-.02em;margin-top:8px}
.cs-title em{font-style:italic}
.cs-sub{margin-top:12px;font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.cs-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;padding:22px 0 6px;border-top:1px solid var(--line)}
.cs-meta .k{font-family:var(--narrow);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright)}
.cs-meta .v{font-family:var(--sans);font-size:13.5px;line-height:1.45;margin-top:4px;color:var(--ink)}
.cs-brief{margin:0}
.cs-brief .eyebrow{margin-bottom:14px}
.cs-brief p{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--mute);max-width:40ch}
.pull{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1.28;letter-spacing:-.01em}
.pull .note{display:block;margin-top:18px;font-family:var(--narrow);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-bright)}
.aside-note{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.9}
.aside-note b{color:var(--ink);font-weight:600}
/* figure spacing */
.fig{margin:0}
.fig+.fig{margin-top:clamp(18px,3vh,30px)}
/* ============ JOURNEY STRIP (horizontal drag) ============ */
.strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.strip-head .lbl{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-bright)}
.strip-head .lbl b{color:var(--ink);font-weight:600}
.strip-head h3{font-family:var(--serif);font-weight:340;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1;margin-top:8px}
.strip-nav{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.strip-count{font-family:var(--narrow);font-size:11px;letter-spacing:.18em;color:var(--mute);min-width:56px;text-align:right}
.strip-btn{width:42px;height:42px;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;transition:all .3s var(--ease)}
.strip-btn:hover{border-color:var(--rose-bright);color:var(--rose-bright)}
.strip-btn svg{width:15px;height:15px}
.drag{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;user-select:none}
.drag::-webkit-scrollbar{display:none}
.drag.dragging{cursor:grabbing;scroll-snap-type:none}
.slide{flex:0 0 auto;width:clamp(280px,32vw,440px);scroll-snap-align:start}
.slide .media{aspect-ratio:4/5}
.slide .cap{margin-top:12px}
.strip-progress{height:1px;background:var(--line);margin-top:26px;position:relative}
.strip-progress i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--rose-bright);transition:width .2s linear}
/* ============ SERVICES ============ */
.svc{border-top:1px solid var(--line-inv)}
.svc-row{display:grid;grid-template-columns:minmax(90px,160px) 1fr minmax(120px,240px) 48px;gap:clamp(16px,2.4vw,40px);align-items:center;padding:clamp(26px,4vh,42px) 0;border-bottom:1px solid var(--line-inv);transition:background .35s ease,padding .35s ease}
.svc-row:hover{background:#141414;padding-left:clamp(8px,1.2vw,18px);padding-right:clamp(8px,1.2vw,18px)}
.svc-num{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--rose-soft)}
.svc-row:hover .svc-num{color:var(--rose-bright)}
.svc-name{font-family:var(--serif);font-weight:340;font-size:clamp(1.7rem,3.4vw,3.2rem);line-height:1;letter-spacing:-.01em;color:var(--paper)}
.svc-row:hover .svc-name{font-style:italic;color:var(--white)}
.svc-desc{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:var(--mute-inv);max-width:56ch}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-inv);color:var(--rose-soft);padding:6px 11px;border-radius:999px;white-space:nowrap}
.svc-row:hover .tag{border-color:rgba(232,54,143,.6);color:var(--rose-bright)}
.svc-arrow{justify-self:end;color:var(--rose-bright);opacity:0;transform:translateX(-8px);transition:all .35s var(--ease)}
.svc-row:hover .svc-arrow{opacity:1;transform:none}
.svc-arrow svg{width:18px;height:18px}
/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(20px,4vh,40px)}
.step{border-top:1px solid var(--line);padding-top:22px}
.step .n{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--rose-bright)}
.step h3{font-family:var(--serif);font-weight:340;font-size:clamp(1.4rem,1.9vw,1.9rem);line-height:1.05;margin:14px 0 12px}
.step p{font-size:14px;line-height:1.65;color:var(--mute)}
.remote{margin-top:clamp(40px,6vh,70px);border-top:1px solid var(--line);padding-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.remote .k{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright);margin-bottom:6px}
.remote .v{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--mute)}
.deliver{margin-top:clamp(36px,5vh,60px)}
.deliver .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.deliver .tag{border-color:var(--line);color:var(--ink)}
.deliver .tag:hover{border-color:var(--rose-bright);color:var(--rose-bright)}
.deliver p{font-family:var(--sans);font-size:13.5px;color:var(--mute);max-width:60ch;margin-top:14px}
/* dark rose band */
.rose-band{background:var(--rose-dark);color:var(--paper);padding-block:clamp(64px,9vh,120px);margin-top:clamp(56px,9vh,110px)}
.rose-band .statement{font-family:var(--serif);font-weight:340;font-size:clamp(2.2rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.rose-band .statement em{font-style:italic;color:var(--rose-soft)}
.rose-band .sub{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,236,.7);margin-top:20px}
.tt{margin-top:clamp(30px,5vh,50px);border-top:1px solid rgba(245,241,236,.28)}
.tt-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid rgba(245,241,236,.28)}
.tt-row .k{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-soft)}
.tt-row .v{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.7rem);font-weight:340}
/* before/after */
.ba{margin-top:clamp(56px,9vh,110px)}
.ba-wrap{position:relative;overflow:hidden;aspect-ratio:3/2;cursor:ew-resize;touch-action:pan-y}
.ba-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--paper);transform:translateX(-1px)}
.ba-knob{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--ink);box-shadow:0 4px 24px rgba(13,13,13,.28)}
.ba-knob svg{width:20px;height:20px}
.ba-tag{position:absolute;top:18px;font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);background:rgba(13,13,13,.55);backdrop-filter:blur(4px);padding:7px 12px;border-radius:999px}
.ba-tag.l{left:18px}
.ba-tag.r{right:18px}
.ba-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px}
/* ============ ABOUT ============ */
.about-media{position:relative}
.about-media .cap{margin-top:14px}
.about-txt{min-width:0}
.about-txt>*+*{margin-top:clamp(18px,2.6vh,28px)}
.about-txt .lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.4;letter-spacing:-.01em;overflow-wrap:normal}
.about-txt .lead em{font-style:italic;color:var(--rose-dark)}
.about-txt p.body{font-size:15.5px;line-height:1.75;color:var(--mute);max-width:60ch;overflow-wrap:normal}
.creds{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:6px}
.cred{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 22px 26px}
.cred .v{font-family:var(--serif);font-weight:340;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1;color:var(--ink)}
.cred .v em{font-style:italic;color:var(--rose-dark)}
.cred .k{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:12px}
/* ============ CONTACT ============ */
.contact-email{display:inline-block;font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,5.4vw,5rem);line-height:1.05;letter-spacing:-.02em;color:var(--paper);margin-top:clamp(26px,4vh,44px);border-bottom:2px solid var(--rose-bright);transition:color .35s ease}
.contact-email:hover{color:var(--rose-soft)}
.contact-email .at{color:var(--rose-bright)}
.contact-note{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-inv);margin-top:16px}
.contact-grid{margin-top:clamp(44px,7vh,80px);border-top:1px solid var(--line-inv)}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vh,44px) clamp(24px,3vw,40px);padding-top:clamp(30px,5vh,48px)}
.form .full{grid-column:1/-1}
.field label{display:block;font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-soft);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-inv);
  color:var(--paper);font-family:var(--sans);font-size:16px;padding:12px 0;border-radius:0;
  transition:border-color .3s ease;appearance:none;-webkit-appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--rose-bright)}
.field ::placeholder{color:rgba(245,241,236,.4);opacity:1}
.field textarea{resize:vertical;min-height:110px}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23E8368F' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer}
.field select option{color:var(--ink);background:var(--paper)}
.field .hint{display:block;font-family:var(--narrow);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-inv);margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--rose-bright);color:var(--black);border:0;cursor:pointer;font-family:var(--narrow);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:19px 30px;border-radius:999px;transition:background .3s ease,color .3s ease,transform .3s ease}
.btn:hover{background:var(--white)}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.form-ok{grid-column:1/-1;padding:10px 0 30px}
.form-ok .big{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--paper)}
.form-ok p{color:var(--mute-inv);margin-top:12px;font-size:15px}
/* ============ FOOTER ============ */
footer.dark{border-top:1px solid var(--line-inv);padding-block:clamp(40px,6vh,64px)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.foot-mark{display:block;height:clamp(38px,4.5vw,54px);width:auto;opacity:.92;transition:opacity .3s ease}
.foot-mark:hover{opacity:1}
.foot .meta{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-inv)}
.foot .top{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);display:flex;align-items:center;gap:8px}
.foot .top svg{width:13px;height:13px;color:var(--rose-bright)}
.foot .top:hover{color:var(--rose-soft)}
/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero-media{width:64%}
  .svc-row{grid-template-columns:64px 1fr 40px}
  .svc-tags{grid-column:2}
  .steps,.remote{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .mast-avail{display:none}
  .menu-btn{display:block}
}
@media (max-width:900px){
  .stack>*{grid-column:1/-1 !important}
  .stack .cs-meta{grid-column:1/-1 !important}
  .hero-media{width:100%;opacity:.9}
  .hero-media-shade{background:linear-gradient(180deg,rgba(13,13,13,.7) 0%,rgba(13,13,13,.55) 40%,rgba(13,13,13,.8) 100%)}
  .hero-copy{max-width:100%}
  .hero-edge{display:none}
  .hero-meta{gap:12px 28px}
  .form{grid-template-columns:1fr}
  .stack>.fig,.stack>.cs-brief,.stack>.pull{margin-bottom:clamp(24px,4vh,40px)}
  .shead-main{row-gap:20px}
}
@media (max-width:600px){
  .svc-row{grid-template-columns:1fr 40px}
  .svc-num{grid-column:1}
  .svc-name{grid-column:1}
  .svc-desc{grid-column:1}
  .svc-tags{grid-column:1}
  .svc-arrow{display:none}
  .steps,.remote{grid-template-columns:1fr}
  .hero-scroll{display:none}
  .ba-wrap{aspect-ratio:4/5}
  .wordmark .tag{display:none}
  .cs-meta{grid-template-columns:1fr}
}
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important}
  .reveal{transform:none}
  .media{clip-path:none}
  .ticker-track{animation:none}
}


  .cw-1 .bg{fill:#F5F1EC}
  .cw-1 .shape-a{fill:#7C2F45}
  .cw-1 .shape-b{fill:#E8368F}
  .cw-1 .shape-c{fill:#F491C0}
  .cw-1 .shape-d{fill:#3B1F35}
  .cw-1 .line{fill:none;stroke:#0D0D0D;stroke-width:1.4;opacity:.55}
  .cw-1 .dot{fill:#E8368F}
  .cw-2 .bg{fill:#F5F1EC}
  .cw-2 .shape-a{fill:#0D0D0D}
  .cw-2 .shape-b{fill:#4a4a4a}
  .cw-2 .shape-c{fill:#b5b0aa}
  .cw-2 .shape-d{fill:#0D0D0D}
  .cw-2 .line{fill:none;stroke:#0D0D0D;stroke-width:1.4;opacity:.5}
  .cw-2 .dot{fill:#0D0D0D}
  .cw-3 .bg{fill:#3B1F35}
  .cw-3 .shape-a{fill:#F5F1EC}
  .cw-3 .shape-b{fill:#F491C0}
  .cw-3 .shape-c{fill:#E8368F}
  .cw-3 .shape-d{fill:#0D0D0D}
  .cw-3 .line{fill:none;stroke:#F5F1EC;stroke-width:1.4;opacity:.5}
  .cw-3 .dot{fill:#E8368F}
/* ============ MULTI-PAGE ADDITIONS ============ */

/* media is used as span inside links too */
.media{display:block;position:relative}
.media svg{display:block}
.media svg.fill{width:100%;height:100%}

/* nav active state */
.nav a.active{color:var(--rose-bright)}
.nav a.active::after{transform:scaleX(1);transform-origin:left}

/* ============ MORE LINK (arrow) ============ */
.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:inherit;border-bottom:1px solid var(--rose-bright);padding-bottom:6px;transition:color .3s ease}
.more:hover{color:var(--rose-bright)}
.more svg{width:14px;height:14px;flex:0 0 auto;transition:transform .3s var(--ease)}
.more:hover svg{transform:translateX(4px)}
.shead-meta .more{margin-top:20px}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{position:relative;background:var(--black);color:var(--paper);padding:clamp(150px,20vh,210px) 0 clamp(60px,8vh,96px);overflow:hidden}
.page-hero .eyebrow{color:var(--rose-soft)}
.page-hero h1{font-family:var(--serif);font-weight:340;font-size:clamp(3.2rem,9.5vw,8.8rem);line-height:.9;letter-spacing:-.03em;margin-top:clamp(16px,2.5vh,26px)}
.page-hero h1 em{font-style:italic}
.page-hero .sub{max-width:56ch;margin-top:clamp(18px,3vh,28px);color:var(--mute-inv);font-size:clamp(15px,1.2vw,17px);line-height:1.7}
.page-hero .ghost{position:absolute;right:calc(var(--pad) * -0.5);bottom:-0.08em;font-family:var(--serif);font-weight:300;font-size:clamp(9rem,24vw,22rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(245,241,236,.13);pointer-events:none;user-select:none}

/* ============ WORK TEASERS (index) ============ */
.teasers{row-gap:clamp(30px,5vh,56px)}
.teaser{display:block;position:relative}
.teaser .cap b{transition:color .3s ease}
.teaser:hover .cap b{color:var(--rose-bright)}
.teaser .arr{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--ink);opacity:0;transform:translateY(-6px);transition:all .35s var(--ease);z-index:2}
.teaser:hover .arr{opacity:1;transform:none}
.teaser .arr svg{width:15px;height:15px}
@media (max-width:900px){ .teasers .teaser{margin-top:0 !important} }

/* ============ COMPACT SERVICES (index) ============ */
.svc-compact{border-top:1px solid var(--line)}
.svc-compact a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:clamp(14px,2vw,28px);align-items:center;padding:clamp(20px,3vh,28px) 0;border-bottom:1px solid var(--line);transition:padding-left .3s ease}
.svc-compact a:hover{padding-left:12px}
.svc-compact .n{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--rose-bright)}
.svc-compact .name{font-family:var(--serif);font-weight:340;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1}
.svc-compact a:hover .name{font-style:italic}
.svc-compact .one{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--mute)}
.svc-compact .arrow{color:var(--rose-bright);opacity:0;transform:translateX(-6px);transition:all .3s var(--ease)}
.svc-compact a:hover .arrow{opacity:1;transform:none}
.svc-compact .arrow svg{width:16px;height:16px}
@media (max-width:600px){ .svc-compact a{grid-template-columns:40px minmax(0,1fr)} .svc-compact .arrow{display:none} }

/* ============ SERVICE BLOCKS (services page) ============ */
.svc-block{padding:clamp(34px,6vh,60px) 0;border-top:1px solid var(--line)}
.svc-block:first-of-type{border-top:0}
.svc-block .grid{row-gap:clamp(20px,3vh,32px)}
.svc-block .n{font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--rose-bright)}
.svc-block h3{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,4.4vw,3.6rem);line-height:.98;letter-spacing:-.01em;margin-top:10px}
.svc-block h3 em{font-style:italic}
.svc-block .desc{font-family:var(--sans);font-size:15.5px;line-height:1.7;color:var(--mute);max-width:44ch;margin-top:18px}
.svc-block .formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.svc-block .formats .tag{border-color:var(--line);color:var(--ink)}
.svc-block .k{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright);margin-bottom:6px}
.inc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.inc li{font-family:var(--narrow);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.inc li::before{content:"—";color:var(--rose-bright);flex:0 0 auto}

/* ============ ABOUT SMALL CREDS (index) ============ */
.creds-sm{display:flex;flex-wrap:wrap;gap:22px 48px;border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.creds-sm>div{flex:1 1 150px;min-width:0;white-space:nowrap}
.creds-sm .v{font-family:var(--serif);font-weight:340;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1}
.creds-sm .v em{font-style:italic;color:var(--rose-dark)}
.creds-sm .k{font-family:var(--narrow);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:6px}

/* ============ BRANDS LINE (about page) ============ */
.brandline{margin-top:clamp(24px,4vh,36px);border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px}
.brandline span{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.brandline span::before{content:"·";color:var(--rose-bright);margin-right:10px}
.brandline span:first-child::before{display:none}

/* ============ ABOUT PAGE: EXPERIENCE / SKILLS / EDUCATION ============ */
.exp{border-top:1px solid var(--line)}
.exp-row{display:grid;grid-template-columns:clamp(150px,16vw,220px) 1fr;gap:clamp(18px,3vw,56px);padding:clamp(22px,3.6vh,34px) 0;border-bottom:1px solid var(--line)}
.exp-when{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:8px}
.exp-when b{display:block;color:var(--rose-bright);font-weight:600;letter-spacing:.2em;margin-bottom:2px}
.exp-when .loc{display:block;color:var(--ink);opacity:.55;margin-top:8px;letter-spacing:.14em;font-weight:500}
.exp-role{font-family:var(--serif);font-weight:340;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:-.01em}
.exp-role em{font-style:italic}
.exp-company{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright);margin-top:9px;display:block}
.exp-list{list-style:none;margin:14px 0 0;padding:0;max-width:70ch}
.exp-list li{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--mute);padding:5px 0 5px 16px;position:relative}
.exp-list li::before{content:"—";position:absolute;left:0;color:var(--rose-bright)}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.skill{border-top:1px solid var(--line);padding-top:18px}
.skill .k{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--rose-bright)}
.skill h4{font-family:var(--serif);font-weight:340;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.1;margin:10px 0 12px}
.skill ul{list-style:none;margin:0;padding:0}
.skill li{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--mute);padding:6px 0 6px 16px;position:relative;border-bottom:1px solid var(--line)}
.skill li:last-child{border-bottom:0}
.skill li::before{content:"—";position:absolute;left:0;color:var(--rose-bright)}
.software{margin-top:clamp(28px,4.5vh,44px);border-top:1px solid var(--line);padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.software .k{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright);margin-right:8px}
.software .tag{border-color:var(--line);color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4.5vh,44px)}
.fact{border-top:1px solid var(--line);padding-top:16px}
.fact .k{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright)}
.fact .v{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink);margin-top:8px}
@media (max-width:900px){.skills{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.exp-row{grid-template-columns:1fr}.skills{grid-template-columns:1fr}.facts{grid-template-columns:1fr}}

/* ============ FLIPBOOK (interactive lookbook) ============ */
.flipwrap{background:var(--black);margin-top:clamp(40px,7vh,80px);padding:clamp(28px,5vw,56px) clamp(16px,3vw,40px)}
.flipinner{max-width:1000px;margin:0 auto}
.flip-label{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-soft);margin-bottom:clamp(16px,3vh,26px);display:flex;align-items:center;gap:12px}
.flip-label::before{content:"";width:34px;height:1px;background:var(--rose-bright)}
.flipframe{position:relative}
.flipbook{width:100%;height:min(76vh,820px)}
.flipbar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.flipbtn{border-color:var(--line-inv);color:var(--paper)}
.flipbtn:hover{border-color:var(--rose-bright);color:var(--rose-bright)}
.flipcount{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--mute-inv);min-width:64px;text-align:center}
.flip-hint{text-align:center;font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,236,.42);margin-top:12px}

.honeypot{display:none !important}

/* ============ WORK ARCHIVE — year / season / group ============ */
.year{margin-top:clamp(64px,10vh,120px)}
.year:first-of-type{margin-top:0}
.year-num{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,8vw,7rem);line-height:.9;letter-spacing:-.03em}
.year-num em{font-style:italic;color:var(--rose-dark)}
.year-meta{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-align:right;padding-bottom:6px}

.season{margin-top:clamp(48px,8vh,90px)}
.season-head{row-gap:22px}
.season-title{font-family:var(--serif);font-weight:340;font-size:clamp(2.3rem,5.2vw,4.6rem);line-height:.95;letter-spacing:-.02em;margin-top:8px}
.season-title em{font-style:italic;color:var(--rose-dark)}
.season-head .eyebrow{color:var(--rose-bright)}
.season-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;padding:22px 0 6px;border-top:1px solid var(--line)}
.season-meta .k{font-family:var(--narrow);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright)}
.season-meta .v{font-family:var(--sans);font-size:13.5px;line-height:1.45;margin-top:4px}

.work-group{margin-top:clamp(44px,7vh,76px)}
/*.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 30px;margin-bottom:clamp(20px,3.5vh,30px);border-top:1px solid var(--line);padding-top:14px}
/*.group-label{font-family:var(--narrow);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-bright);white-space:nowrap}
.group-label b{color:var(--ink);margin-right:8px}*/


.group-brief{margin:0 0 clamp(20px,3.5vh,30px)}
.group-brief .eyebrow{margin-bottom:14px}
.group-brief p{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--mute);max-width:40ch}

.group-empty{border:1px solid var(--line);padding:clamp(22px,3.5vh,32px) clamp(22px,3vw,32px)}
.group-empty .k{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-bright)}
.group-empty .v{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.3;margin-top:10px}
.group-empty .v .note{display:block;font-family:var(--sans);font-style:normal;font-size:13.5px;color:var(--mute);margin-top:8px}

@media (max-width:700px){
  .year-head{flex-direction:column;align-items:flex-start;gap:10px}
  .year-meta{text-align:left;padding-bottom:0}
}
/* ============================================================
   SECTION GROUP HEADS — Print work / Designs / Lookbook /
   Catalogue. Styled to match .strip-head ("The journey").
   ============================================================ */

.group-head{
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  row-gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.12);
  margin-bottom: clamp(26px, 4vh, 44px);
}

/* The whole label becomes the serif title */
.group-head .group-label,
.group-head .lbl{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: inherit;
  text-transform: none;
}

/* The <b> inside it becomes the small pink eyebrow above */
.group-head .group-label > b,
.group-head .lbl > b{
  display: block;
  font-family: var(--narrow);          /* replaced on next line */
  font-size: .72rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-bright);
  margin-bottom: 12px;
}

.group-head .group-desc{
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  max-width: 54ch;
  opacity: .78;
}
.group-desc{
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 60ch;
  margin: 0;        /* add — kills the browser's default <p> margin */
  padding-left: 2px;
}
/* ---- Collapsible year sections ---- */
.year > summary.year-head{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.5vw, 28px);
  padding: 22px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  user-select: none;
}

/* kill the native triangle */
.year > summary.year-head::-webkit-details-marker{ display:none; }
.year > summary.year-head::marker{ content:""; }

.year > summary.year-head:focus-visible{
  outline: 2px solid var(--accent, #d6467f);
  outline-offset: 4px;
}

/* push the chevron to the right */
.year-toggle{
  margin-left: auto;
  width: 12px; height: 12px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  opacity: .55;
  flex: none;
  align-self: center;
}
.year[open] > summary.year-head .year-toggle{
  transform: rotate(-135deg);
}

.year > summary.year-head:hover .year-toggle{ opacity: 1; }
/* ---- Nav dropdown ---- */
.nav-item{ position: relative; display: inline-flex; align-items: center; gap: 4px; }

.sub-toggle{
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: inherit; line-height: 0; opacity: .5;
  transition: opacity .2s, transform .3s;
}
.sub-toggle svg{ width: 9px; height: 9px; display: block; }
.nav-item:hover .sub-toggle,
.sub-toggle[aria-expanded="true"]{ opacity: 1; }
.sub-toggle[aria-expanded="true"]{ transform: rotate(180deg); }

.sub{
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 200px;
  padding: 8px;
  background: var(--bg, #0D0D0D);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.28);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 60;
}

.nav-item:hover > .sub,
.nav-item:focus-within > .sub,
.sub.is-open{
  opacity: 1; visibility: visible; transform: translateY(0);
}

.sub a{
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  text-decoration: none;
  color: inherit;
  transition: background .18s;
}
.sub a:hover{ background: rgba(0,0,0,.05); }
.sub a.active{ color: var(--accent, #d6467f); }

/* invisible bridge so the menu doesn't close in the gap */
.nav-item.has-sub::after{
  content: ""; position: absolute; top: 100%; left: 0;
  width: 100%; height: 14px;
}

@media (max-width: 900px){
  .nav-item .sub{ display: none; }   /* overlay handles mobile */
}
.overlay .sub-links{
  padding-left: clamp(28px, 6vw, 64px);
  margin: -6px 0 10px;
  display: grid; gap: 2px;
}
.overlay .sub-links a{
  font-size: clamp(15px, 2vw, 18px) !important;
  opacity: .62;
}
.overlay .sub-links a:hover{ opacity: 1; }
.form-err{
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #E4737B;
}
[aria-invalid="true"]{
  border-color: #E4737B !important;
}
/* ===== PATCH 3 — white cards for packshots & spec sheets ===== */
#feat .slide .media,
.media:has(> img[src*="-end-"]),
.media:has(> img[src*="print-info"]){
  background:#fff;
  padding:clamp(10px,1.4vw,16px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(13,13,13,.10);
}
#feat .slide .media img,
.media:has(> img[src*="-end-"]) img,
.media:has(> img[src*="print-info"]) img{border-radius:8px}
/* ===== PATCH 4 — work hero: CTAs + visual strip ===== */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,3vh,30px)}
.btn-ghost{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line-inv);color:var(--paper);font-family:var(--narrow);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:19px 30px;border-radius:999px;transition:border-color .3s,color .3s,transform .3s}
.btn-ghost:hover{border-color:var(--rose-bright);color:var(--rose-soft);transform:translateY(-2px)}
.hero-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px);margin-top:clamp(26px,4.5vh,44px)}
.hero-shot{margin:0}
.hero-shot .media{aspect-ratio:3/4;border:1px solid var(--line-inv);border-radius:12px}
.hero-shot .cap{color:var(--mute-inv);margin-top:10px}
.page-hero .sub-small{font-size:13px;margin-top:20px;opacity:.8}
@media (max-width:640px){
  .hero-strip{grid-template-columns:repeat(3,74vw);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .hero-shot{scroll-snap-align:start}
}
/* ===== B6 — lightbox styles (main.js builds .lightbox at runtime; CSS never existed) ===== */
.lightbox{position:fixed;inset:0;z-index:999;background:rgba(13,13,13,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:4vmin;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(1100px,92vw);max-height:78vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--paper);font-size:34px;line-height:1;cursor:pointer}
.lb-close:hover{color:var(--rose-soft)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(245,241,236,.08);border:1px solid var(--line-inv);color:var(--paper);cursor:pointer;transition:background .3s,border-color .3s}
.lb-prev:hover,.lb-next:hover{background:var(--rose-bright);border-color:var(--rose-bright)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-cap{color:var(--paper);font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.lb-count{color:var(--mute-inv);font-family:var(--narrow);font-size:11px;letter-spacing:.18em}
body.locked{overflow:hidden}
@media (max-width:640px){.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:10px;right:12px}}
/* ===== FINAL APPENDIX — bonus fixes + lightbox ===== */
.group-empty .v .note{display:none}  /* hides builder notes; must match line-521 selector exactly */
.group-empty{border-style:dashed;border-radius:12px}
.foot-mail{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.foot-mail:hover{color:var(--rose-soft)}
.lightbox{position:fixed;inset:0;z-index:999;background:rgba(13,13,13,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:4vmin;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(1100px,92vw);max-height:78vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--paper);font-size:34px;line-height:1;cursor:pointer}
.lb-close:hover{color:var(--rose-soft)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(245,241,236,.08);border:1px solid var(--line-inv);color:var(--paper);cursor:pointer;transition:background .3s,border-color .3s}
.lb-prev:hover,.lb-next:hover{background:var(--rose-bright);border-color:var(--rose-bright)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-cap{color:var(--paper);font-family:var(--narrow);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.lb-count{color:var(--mute-inv);font-family:var(--narrow);font-size:11px;letter-spacing:.18em}
body.locked{overflow:hidden}
@media (max-width:640px){.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:10px;right:12px}}
/* ===== G1 — gallery grid: aligned rows for print work, designs & archive ===== */
@media (min-width:901px){
  .grid.stack{row-gap:clamp(28px,4.5vh,48px);align-items:start}
  .grid.stack .fig{display:flex;flex-direction:column}
  .grid.stack .fig+.fig{margin-top:0}
  .grid.stack .fig .cap{margin-top:12px}
  .grid.stack .fig.s3 .media,.grid.stack .fig.s4 .media{height:clamp(280px,26vw,480px);border-radius:14px;overflow:hidden}
  .grid.stack .fig.s3 .media img,.grid.stack .fig.s4 .media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
}
.grid.stack .media:has(img[src*="Tshirtprint"]),
.grid.stack .media:has(img[src*="Print-archive"]),
.grid.stack .media:has(img[src*="-cad-"]),
.grid.stack .media:has(img[src*="-end-"]),
.grid.stack .media:has(img[src*="print-info"]){background:#fff;border:1px solid var(--line);padding:clamp(8px,1vw,14px)}
.grid.stack .media:has(img[src*="Tshirtprint"]) img,
.grid.stack .media:has(img[src*="Print-archive"]) img,
.grid.stack .media:has(img[src*="-cad-"]) img,
.grid.stack .media:has(img[src*="-end-"]) img,
.grid.stack .media:has(img[src*="print-info"]) img{object-fit:contain}
/* artwork sheets & garment flats: show in full on white cards (never cropped) */
.grid.stack .media:has(img[src*="Tshirtprint"]),
.grid.stack .media:has(img[src*="Print-archive"]),
.grid.stack .media:has(img[src*="-cad-"]),
.grid.stack .media:has(img[src*="-end-"]),
.grid.stack .media:has(img[src*="print-info"]){
  background:#fff;border:1px solid var(--line);padding:clamp(8px,1vw,14px)
}
.grid.stack .media:has(img[src*="Tshirtprint"]) img,
.grid.stack .media:has(img[src*="Print-archive"]) img,
.grid.stack .media:has(img[src*="-cad-"]) img,
.grid.stack .media:has(img[src*="-end-"]) img,
.grid.stack .media:has(img[src*="print-info"]) img{object-fit:contain}
/* ===== G2 — nav dropdown: real tokens, adapts to masthead state ===== */
.sub{
  background:var(--black);
  border:1px solid var(--line-inv);
  border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
}
.sub a{color:var(--paper)}
.sub a:hover{background:rgba(245,241,236,.08)}
.sub a.active{color:var(--rose-soft)}
/* light masthead (scrolled) -> light dropdown */
.masthead.scrolled .sub{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(13,13,13,.35);
}
.masthead.scrolled .sub a{color:var(--ink)}
.masthead.scrolled .sub a:hover{background:rgba(13,13,13,.06)}
.masthead.scrolled .sub a.active{color:var(--rose-bright)}
/* ===== G3 — keep desktop nav on tablets/small laptops (901-1024px) ===== */
@media (min-width:901px) and (max-width:1024px){
  .nav{display:flex}
  .mast-avail{display:flex}
  .menu-btn{display:none}
}
/* ===== G4 — services rows: desc was falling into the 40px column ===== */
@media (max-width:1024px){
  .svc-compact .one{grid-column:2}
}
@media (max-width:600px){
  .svc-compact a{row-gap:8px}
  .svc-compact .one{grid-column:2;max-width:44ch}
}
@media (max-width:600px){
  .svc-compact a{grid-template-columns:40px minmax(0,1fr);row-gap:10px}
  .svc-compact .n{grid-row:1}
  .svc-compact .name{grid-column:2;grid-row:1}
  .svc-compact .one{grid-column:1/-1;max-width:none;font-size:14.5px;line-height:1.6}
}
.overlay .sub-links{padding-left:clamp(40px,9vw,88px);margin:2px 0 12px;gap:8px}
.overlay .sub-links a{font-size:clamp(18px,2.6vw,24px) !important;font-style:italic;opacity:.72;display:flex;align-items:center;gap:12px}
.overlay .sub-links a::before{content:"\2192";font-family:var(--narrow);font-style:normal;color:var(--rose-bright);font-size:.8em}
.overlay .sub-links a:hover{opacity:1}
/* ===== G5b — Print archive as a true sub-item ===== */
@media (max-width:900px){
  .overlay .sub-links{padding-left:clamp(52px,12vw,110px)}
  .overlay .sub-links a{font-size:clamp(24px,5.4vw,34px) !important;opacity:.9;gap:14px}
  .overlay .sub-links a::before{font-size:.72em}
}
/* ===== G6 — Instagram links (footer, mobile menu, contact) ===== */
.foot-ig{font-family:var(--narrow);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.foot-ig svg{width:15px;height:15px;color:var(--rose-bright)}
.foot-ig:hover{color:var(--rose-soft)}
.ig-link{color:var(--rose-soft);text-decoration:none;font-weight:700}
.ig-link:hover{color:#fff;text-decoration:underline}