/* Layout: a letter on powder-rose writing paper. Caslon throughout, brown-black ink, brass for fine detail, forest green kept for the closing note. */
:root{
  --bg:#eee1dc; --surface:#f7efeb; --ink:#3a2626; --muted:#6e5856;
  --rose:#a56b70; --rose-deep:#84505a; --rose-soft:#e4d0cb; --line:#d9c4be;
  --brass:#9a7b4f; --green:#2f3a31; --on-green:#f3e9e4;
  --display:"Libre Caslon Display", "Libre Caslon Text", "Baskerville", "Times New Roman", serif;
  --body:"Libre Caslon Text", "Baskerville", Georgia, serif;
  --hand:"Libre Caslon Text", Georgia, serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#231a1b; --surface:#2c2122; --ink:#f1e4df; --muted:#bfa8a4;
  --rose:#d29da1; --rose-deep:#e6b9bc; --rose-soft:#3d2a2c; --line:#453335; --brass:#c9a676; --green:#263029; --on-green:#f1e4df; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#231a1b; --surface:#2c2122; --ink:#f1e4df; --muted:#bfa8a4;
  --rose:#d29da1; --rose-deep:#e6b9bc; --rose-soft:#3d2a2c; --line:#453335; --brass:#c9a676; --green:#263029; --on-green:#f1e4df; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img,video{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose); outline-offset:3px; border-radius:4px}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut-r)}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0; line-height:1.05; letter-spacing:-0.02em}
p{margin:0}
.eyebrow{font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--rose-deep)}
.hand{font-family:var(--hand); color:var(--rose); font-size:1.6em; line-height:1}

/* nav */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:9; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.logo{font:800 18px/1 var(--display); text-decoration:none; letter-spacing:-.01em; white-space:nowrap}
.logo sup{font-size:.55em; color:var(--rose)}
.nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:14px}
.nav ul a{text-decoration:none; color:var(--muted)}
.nav ul a:hover{color:var(--rose-deep)}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); text-decoration:none; font:600 14px/1 var(--body); padding:13px 20px; border-radius:999px; white-space:nowrap; transition:transform .2s, background .2s}
.btn:hover{background:var(--rose-deep); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--rose); background:transparent; color:var(--rose-deep)}
@media (max-width:860px){.nav ul{display:none}}

/* hero: full-bleed video that settles into a framed card as you scroll */
.hero{position:relative; padding-block:28px 8px}
.hero-head{display:grid; grid-template-columns:1.25fr 1fr; gap:32px; align-items:end; padding-block:20px 32px}
.hero h1{font-size:clamp(40px, 6.4vw, 84px); font-weight:800}
.hero h1 em{font-style:normal; color:var(--rose)}
.hero-side{display:grid; gap:20px; color:var(--muted); max-width:44ch}
.hero-side .row{display:flex; gap:10px; flex-wrap:wrap}
.hero-media{--p:0; margin:0 auto; width:calc(100% - (1 - var(--p)) * 0px); max-width:calc(1180px - 32px + (1 - var(--p)) * 0px)}
.frame{position:relative; border-radius:calc(28px * (1 - var(--p)) + 12px); overflow:hidden; aspect-ratio:16/9; transform:scale(calc(1 - var(--p) * .08)); transform-origin:50% 0; background:var(--rose-soft); max-width:100%}
.frame video,.frame img{width:100%; height:100%; object-fit:cover}
.frame .tag{position:absolute; left:18px; bottom:16px; background:color-mix(in srgb, #1d1517 55%, transparent); color:#fff; font:500 13px/1 var(--body); padding:9px 14px; border-radius:999px; backdrop-filter:blur(6px)}
@media (max-width:760px){.hero-head{grid-template-columns:1fr; gap:18px}.frame{aspect-ratio:4/5}}

/* proof strip */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-block:1px solid var(--line); margin-block:56px 0}
.facts div{padding:22px 18px; border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts b{display:block; font:700 22px/1.1 var(--display)}
.facts span{font-size:13px; color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}}

/* the stack: real work piled up, fans out as you scroll (the "exploded burger" moment) */
.stack-sec{position:relative; height:320vh}
.stack-sticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-rows:auto 1fr; padding-block:88px 28px; overflow:hidden}
.stack-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap}
.stack-head h2{font-size:clamp(34px,5vw,64px)}
.stack-head p{max-width:42ch; color:var(--muted)}
.stage{position:relative; --s:0}
.piece{position:absolute; left:50%; top:50%; width:min(21vw, 270px); aspect-ratio:3/4; margin:0; border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:0 30px 60px -30px rgba(40,20,25,.45), 0 0 0 1px var(--line);
  transform:translate(-50%,-50%) translate(calc(var(--x) * var(--s)), calc(var(--y) * var(--s))) rotate(calc(var(--r) * (1 - var(--s)) + var(--r2) * var(--s))) scale(calc(.92 + .08 * var(--s)));
  will-change:transform}
.piece video,.piece img{width:100%; height:100%; object-fit:cover}
.piece figcaption{position:absolute; inset:auto 0 0 0; padding:40px 14px 12px; color:#fff; background:linear-gradient(transparent, rgba(20,10,12,.72)); opacity:var(--s); transform:translateY(calc((1 - var(--s)) * 10px))}
.piece figcaption b{display:block; font:700 17px/1.15 var(--display)}
.piece figcaption span{font-size:12px; opacity:.85}
.stack-note{position:absolute; left:50%; bottom:4%; transform:translateX(-50%); text-align:center; opacity:calc(1 - var(--s) * 2); pointer-events:none; white-space:nowrap}
.stack-done{position:absolute; left:50%; bottom:2%; transform:translateX(-50%); text-align:center; opacity:calc((var(--s) - .75) * 4); width:min(560px, 92%); color:var(--muted); font-size:15px}
@media (max-width:760px){.piece{width:min(41vw, 200px)}
  .piece:nth-of-type(1){--x:-52%!important;--y:-53%!important}.piece:nth-of-type(2){--x:52%!important;--y:-53%!important}.piece:nth-of-type(3){--x:-52%!important;--y:53%!important}.piece:nth-of-type(4){--x:52%!important;--y:53%!important}
  .stack-done{bottom:-1%}}

/* services */
.sec{padding-block:96px}
.sec-head{display:grid; gap:14px; max-width:60ch; margin-bottom:40px}
.sec-head h2{font-size:clamp(32px,4.4vw,54px)}
.sec-head p{color:var(--muted)}
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc{display:grid; grid-template-rows:auto 1fr; background:var(--surface); border-radius:22px; overflow:hidden; text-decoration:none; border:1px solid var(--line); transition:transform .3s, border-color .3s}
.svc:hover{transform:translateY(-4px); border-color:var(--rose)}
.svc .m{aspect-ratio:4/3; overflow:hidden; background:var(--rose-soft)}
.svc .m img,.svc .m video{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.svc:hover .m img,.svc:hover .m video{transform:scale(1.04)}
.svc .t{padding:20px 22px 24px; display:grid; gap:8px; align-content:start}
.svc h3{font-size:24px}
.svc p{color:var(--muted); font-size:15px}
.svc .go{margin-top:6px; font:600 14px/1 var(--body); color:var(--rose-deep)}
@media (max-width:760px){.reel-sec .wrap > p{display:none}.reel-sticky{align-content:start; padding-top:84px}.reel figure{height:min(40vh,330px); height:min(40svh,330px)}.stack-done{display:none}}
@media (max-width:860px){.services{grid-template-columns:1fr}}

/* UGC reel: sideways scroll tied to vertical scroll on wide screens */
.reel-sec{position:relative; height:260vh}
.reel-sticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; align-content:center; gap:28px; overflow:hidden; padding-block:76px 20px}
.reel{display:flex; gap:18px; padding-left:var(--gut); width:max-content; transform:translateX(var(--rx,0px)); will-change:transform}
.reel figure{margin:0; height:min(48vh, 440px); height:min(48svh, 440px); aspect-ratio:9/14; border-radius:20px; overflow:hidden; position:relative; background:var(--rose-soft); flex:none}
.reel figure img{width:100%; height:100%; object-fit:cover}
.reel figure figcaption{position:absolute; left:12px; bottom:12px; right:12px; color:#fff; font:600 13px/1.3 var(--body); text-shadow:0 1px 8px rgba(0,0,0,.5)}
.brands{display:flex; gap:10px; flex-wrap:wrap}
.brands span{border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:500; color:var(--muted)}

/* meet us */
.meet{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center}
.meet .pic{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/5; background:var(--rose-soft)}
.meet .pic img{width:100%; height:100%; object-fit:cover}
.meet .note{position:absolute; right:16px; bottom:16px; background:var(--surface); color:var(--ink); padding:12px 16px; border-radius:16px; max-width:230px; font-size:13px; line-height:1.4; box-shadow:0 12px 30px -16px rgba(0,0,0,.4)}
.meet .txt{display:grid; gap:18px; max-width:52ch}
.meet h2{font-size:clamp(32px,4.4vw,54px)}
.meet .txt p{color:var(--muted)}
.meet .txt p strong{color:var(--ink); font-weight:600}
@media (max-width:860px){.meet{grid-template-columns:1fr; gap:32px}}

/* FAQ */
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px}
.faq dl{margin:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:20px 2px; font:600 18px/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--rose); font-size:24px; line-height:1; transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 22px; color:var(--muted); max-width:60ch}
@media (max-width:860px){.faq{grid-template-columns:1fr; gap:24px}}

/* CTA */
.cta{background:var(--ink); color:var(--bg); border-radius:32px; padding:72px clamp(24px,6vw,80px); display:grid; gap:22px; justify-items:start; position:relative; overflow:hidden}
.cta h2{font-size:clamp(38px,6vw,76px); max-width:14ch}
.cta p{color:color-mix(in srgb, var(--bg) 72%, transparent); max-width:46ch}
.cta .btn{background:var(--rose); color:#fff}
.cta .btn:hover{background:var(--bg); color:var(--ink)}
.cta .hand{position:absolute; right:clamp(20px,6vw,80px); top:48px; transform:rotate(-6deg); color:var(--rose)}
footer{padding-block:40px 56px; color:var(--muted); font-size:13px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}


/* lipstick: a 62-frame sequence drawn to canvas, scrubbed by scroll */
.lip-sec{position:relative; height:340vh; background:#f1e7e1; color:#1d1517}
.lip-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center}
.lip-canvas{width:min(100%, calc(100svh * 1.78)); height:auto; aspect-ratio:1100/628; max-width:100%; display:block}
.lip-copy{position:absolute; left:max(24px, 5vw); top:50%; transform:translateY(-50%); width:min(30vw, 360px); display:grid; gap:14px}
.lip-copy .eyebrow{color:#8f4c57}
.lip-step{position:absolute; top:44px; left:0; right:0; opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease}
.lip-step.on{opacity:1; transform:none}
.lip-step h2{font-size:clamp(28px,3.2vw,44px)}
.lip-step p{color:#6f6266; margin-top:10px; font-size:15px}
.lip-steps{position:relative; min-height:190px}
.lip-bar{display:flex; gap:6px}
.lip-bar i{height:3px; flex:1; background:#e2cfcf; border-radius:2px; overflow:hidden; position:relative}
.lip-bar i b{position:absolute; inset:0; background:#b76e79; transform-origin:0 50%; transform:scaleX(var(--f,0))}
@media (max-width:860px){
  .lip-sticky{display:flex; flex-direction:column; align-items:stretch; padding-top:64px}
  .lip-canvas{width:150%; max-width:none; margin-left:-25%}
  .lip-copy{position:relative; left:auto; top:auto; transform:none; width:100%; padding-left:var(--gut); padding-right:var(--gut-r); margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .lip-sec{height:auto}.lip-sticky{position:relative; height:auto; padding-block:48px}
  .lip-step{position:static; opacity:1; transform:none; margin-bottom:14px}.lip-steps{min-height:0}.lip-bar{display:none}
}

.reveal{transition:opacity .8s ease, transform .8s ease}
.reveal.pre{opacity:.001; transform:translateY(18px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .stack-sec,.reel-sec{height:auto}
  .stack-sticky,.reel-sticky{position:relative; height:auto}
  .stage{--s:1 !important; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:28px}
  .piece{position:relative; left:auto; top:auto; width:auto; transform:none !important}
  .stack-note{display:none}.stack-done{position:static; transform:none; opacity:1; margin-top:20px}
  .reel{width:auto; flex-wrap:wrap; transform:none !important; padding-right:var(--gut-r)}
  .reveal.pre{opacity:1; transform:none}
  .frame{transform:none}
}

/* ---- old money layer: restraint over decoration ---- */
body{font-weight:300; letter-spacing:.005em}
h1,h2,h3{font-weight:500; letter-spacing:-.01em; line-height:1.02}
h1 em,h2 em{font-style:italic; color:var(--rose)}
.eyebrow{font:500 11px/1 var(--body); letter-spacing:.28em; color:var(--brass)}
.hand{font-family:var(--display); font-style:italic; font-weight:500; font-size:1.35em; color:var(--rose)}
.logo{font:600 21px/1 var(--display); letter-spacing:.02em}
.logo sup{color:var(--brass)}
.nav ul a{font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.btn{border-radius:0; font:500 11px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; padding:15px 24px; background:var(--ink); color:var(--bg)}
.btn:hover{background:var(--green); color:var(--on-green); transform:none}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--rose); color:var(--rose)}
.hero h1{font-size:clamp(42px, 6.2vw, 92px); font-weight:500}
.frame{border-radius:0 !important; outline:1px solid var(--line); outline-offset:10px}
.frame .tag{border-radius:0; background:rgba(43,36,32,.55); font:italic 500 16px/1 var(--display); letter-spacing:.01em; padding:10px 16px}
.facts{border-color:var(--brass)}
.facts div{border-color:var(--line)}
.facts b{font:500 26px/1.1 var(--display)}
.facts span{letter-spacing:.02em}
.stack-head h2,.sec-head h2,.meet h2{font-size:clamp(38px,5vw,66px)}
.piece{border-radius:2px; box-shadow:0 24px 50px -32px rgba(43,36,32,.55), 0 0 0 1px var(--line)}
.piece figcaption b{font:500 22px/1.1 var(--display)}
.piece figcaption span{letter-spacing:.14em; text-transform:uppercase; font-size:10px}
.svc{border-radius:0; background:transparent; border:0; border-top:1px solid var(--brass)}
.svc:hover{transform:none; border-color:var(--rose)}
.svc .m{border-radius:0; margin-top:20px}
.svc .t{padding:20px 0 0}
.svc h3{font-size:32px}
.svc .go{font:500 11px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--ink)}
.reel figure{border-radius:0}
.reel figure figcaption{font:italic 500 18px/1.2 var(--display); text-shadow:0 1px 10px rgba(0,0,0,.55)}
.brands span{border-radius:0; border:0; border-bottom:1px solid var(--brass); padding:4px 2px; font:italic 500 18px/1 var(--display); color:var(--ink)}
.brands{gap:22px}
.meet .pic{border-radius:0; outline:1px solid var(--line); outline-offset:12px}
.meet .note{border-radius:0; font:italic 500 17px/1.3 var(--display); box-shadow:none; border:1px solid var(--line)}
.faq summary{font:500 23px/1.25 var(--display)}
.faq summary::after{color:var(--brass); font-family:var(--body); font-weight:300}
.cta{border-radius:0; background:var(--green); color:var(--on-green); text-align:left}
.cta::before{content:""; position:absolute; inset:14px; border:1px solid color-mix(in srgb, var(--brass) 70%, transparent); pointer-events:none}
.cta h2{font-size:clamp(44px,6.4vw,88px)}
.cta p{color:color-mix(in srgb, var(--on-green) 75%, transparent)}
.cta .btn{background:var(--on-green); color:var(--green)}
.cta .btn:hover{background:var(--brass); color:#fff}
.cta .hand{color:var(--brass)}
.lip-copy .eyebrow{color:#a3855a}
.lip-step h2{font-size:clamp(34px,3.6vw,52px); color:#2b2420}
.lip-step p{color:#73685f}
.lip-bar i{height:1px; background:#d9cbbd; border-radius:0}
.lip-bar i b{background:#9c6468}
footer{letter-spacing:.04em}

/* 3D floating gallery */
.g3d-sec{position:relative; height:520vh; background:#f1e9df; color:#2b2420}
.g3d-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.g3d-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.g3d-head{position:absolute; left:0; right:0; top:clamp(72px,12vh,120px); display:grid; gap:12px; pointer-events:none; transition:opacity .2s linear}
.g3d-head h2{font-size:clamp(40px,5.4vw,76px); color:#2b2420}
.g3d-head h2 em{color:#9c6468}
.g3d-head p{max-width:44ch; color:#73685f}
.g3d-head .eyebrow{color:#a3855a}
.g3d-cap{position:absolute; left:max(24px,5vw); bottom:clamp(64px,11vh,110px); display:grid; gap:6px; opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; pointer-events:none}
.g3d-cap.on{opacity:1; transform:none}
.g3d-cap.right{left:auto; right:max(24px,5vw); text-align:right; justify-items:end}
.g3d-cap b{font:500 clamp(30px,3.4vw,48px)/1 var(--display); color:#2b2420}
.g3d-cap span{font:500 11px/1 var(--body); letter-spacing:.26em; text-transform:uppercase; color:#a3855a}
.g3d-foot{position:absolute; left:max(24px,5vw); right:max(24px,5vw); bottom:28px; display:flex; align-items:center; gap:18px; color:#73685f}
.g3d-count{font:500 12px/1 var(--body); letter-spacing:.18em; font-variant-numeric:tabular-nums}
.g3d-bar{flex:1; height:1px; background:#d9cbbd; position:relative; overflow:hidden; max-width:320px}
.g3d-bar i{position:absolute; inset:0; background:#9c6468; transform-origin:0 50%; transform:scaleX(0)}
.g3d-foot .hand{margin-left:auto; color:#9c6468; font-size:1.2em}
@media (max-width:760px){.g3d-foot .hand{display:none}}

/* Hero welcome sound button */
.frame .sound{position:absolute; right:18px; bottom:16px; display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(243,236,225,.55); background:rgba(43,36,32,.55); color:#f3ece1; font:500 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; padding:11px 16px; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .3s, color .3s}
.frame .sound:hover,.frame .sound[aria-pressed="true"]{background:#f3ece1; color:#2b2420}
.frame .sound .ico{font-size:14px; letter-spacing:0}
@media (max-width:760px){
  .frame video{object-position:38% 50%}
  .frame .tag{left:12px; bottom:58px; font-size:14px}
  .frame .sound{left:12px; right:auto; bottom:12px}
}

/* ---- v2: Caslon type, plain-case nav and buttons, welcome-first hero ---- */
body{margin:0; font:400 17px/1.7 var(--body); letter-spacing:0}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:-.005em; line-height:1.06}
.logo{font:400 23px/1 var(--display); letter-spacing:0}
.logo sup{font-size:.45em}
.nav ul{gap:26px}
.nav ul a{font:400 15px/1 var(--body); letter-spacing:0; text-transform:none; color:var(--ink)}
.nav ul a:hover{color:var(--rose-deep); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.btn{font:400 15px/1 var(--body); letter-spacing:.01em; text-transform:none; padding:15px 24px; border-radius:0}
.nav .btn{padding:12px 18px; font-size:14px}

/* the welcome: Mrs Digital's film runs edge to edge, nothing laid over her */
.hero{padding:0}
.hero-film{position:relative; height:clamp(380px, 64svh, 760px); background:var(--rose-soft); overflow:hidden}
.hero-film video{width:100%; height:100%; object-fit:cover; object-position:42% 22%}
.hero-greet{display:grid; grid-template-columns:1fr auto; gap:24px 48px; align-items:end; padding-block:28px 0}
.greet{font:400 clamp(44px, 6.6vw, 100px)/.98 var(--display); letter-spacing:-.015em; max-width:13ch; text-wrap:balance}
.hero-aside{display:grid; gap:10px; justify-items:end; text-align:right; padding-bottom:10px}
.sound{display:inline-flex; align-items:center; gap:12px; background:none; border:0; padding:6px 0; cursor:pointer; color:var(--ink); font:400 17px/1.2 var(--body)}
.sound .disc{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--rose); color:#fff; flex:none; transition:background .25s}
.sound:hover .disc,.sound[aria-pressed="true"] .disc{background:var(--ink)}
.sound svg{width:16px; height:16px}
.sound .pause{display:none}
.sound[aria-pressed="true"] .play{display:none}
.sound[aria-pressed="true"] .pause{display:block}
.hero-aside .caption{font:italic 400 15px/1.4 var(--body); color:var(--muted); max-width:30ch}
.hero-intro{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px 48px; align-items:start; padding-block:44px 0; margin-top:36px; border-top:1px solid var(--line)}
.hero-intro h1{font:400 clamp(24px, 2.4vw, 32px)/1.3 var(--display); max-width:24ch}
.hero-intro .side{display:grid; gap:22px; color:var(--muted); max-width:46ch}
.hero-intro .row{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:760px){
  .hero-film{height:min(78svh, 620px)}
  .hero-film video{object-position:30% 30%}
  .hero-greet{grid-template-columns:1fr; padding-top:26px}
  .hero-aside{justify-items:start; text-align:left; padding-bottom:0}
  .hero-intro{grid-template-columns:1fr; padding-top:30px; margin-top:28px}
}

/* v2: how it works, a lighter sheet on the paper, numbered because it is a real sequence */
.lip-sec{height:220vh; background:#f1e8e1}
.lip-copy{gap:18px; width:min(36vw, 440px)}
@media (max-width:860px){.lip-copy{width:100%}}
.lip-count{font:italic 400 16px/1 var(--body); color:var(--brass)}
.lip-count span{font-variant-numeric:lining-nums}
ol.lip-steps{list-style:none; margin:0; padding:0; counter-reset:step; min-height:220px}
.lip-step{counter-increment:step; top:0}
.lip-step h2{font:400 clamp(32px,3.4vw,50px)/1.08 var(--display); color:#3a2626}
.lip-step h2::before{content:counter(step) ". "; color:#a56b70}
.lip-step p{color:#6e5856; font-size:17px; margin-top:14px}
@media (prefers-reduced-motion: reduce){.lip-count{display:none} ol.lip-steps{min-height:0}}

/* v2: portfolio, one continuous lighter sheet after how it works */
.g3d-sec{height:440vh; background:#f1e8e1; color:#3a2626}
.g3d-head h2{font:400 clamp(40px,5.4vw,76px)/1.04 var(--display); color:#3a2626}
.g3d-head p{color:#6e5856}
.g3d-cap b{font:400 clamp(30px,3.4vw,48px)/1 var(--display); color:#3a2626}
.g3d-cap span{font:italic 400 17px/1.2 var(--body); letter-spacing:0; text-transform:none; color:#9a7b4f}
.g3d-foot{color:#6e5856}
.g3d-count{font:italic 400 15px/1 var(--body); letter-spacing:0; min-width:4.5em}
.g3d-bar{background:#dccbc4}
.g3d-bar i{background:#a56b70}
.stack-sec{background:#f1e8e1}
.stack-head h2{font:400 clamp(38px,5vw,66px)/1.04 var(--display)}
.piece figcaption b{font:400 22px/1.1 var(--display)}
.piece figcaption span{font:italic 400 14px/1.2 var(--body); letter-spacing:0; text-transform:none}

/* v2: quiet lower sections */
.sec-head{margin-bottom:36px}
.svc .go{font:italic 400 16px/1 var(--body); letter-spacing:0; text-transform:none; color:var(--rose-deep)}
.svc:hover .go{text-decoration:underline; text-underline-offset:4px}
.svc h3{font:400 32px/1.1 var(--display)}
.svc p{font-size:16px}
.brands{gap:10px 26px}
.brands span{border:0; padding:0; font:italic 400 19px/1 var(--body); color:var(--ink)}
.reel figure figcaption{font:italic 400 16px/1.2 var(--body)}
.meet .note{font:italic 400 16px/1.4 var(--body)}
.meet .sign{font:italic 400 24px/1 var(--display); color:var(--rose-deep); margin-top:6px}
.faq summary{font:400 22px/1.3 var(--display)}
.faq summary::after{color:var(--rose); font:300 26px/1 var(--body)}
.cta h2{font:400 clamp(44px,6.4vw,88px)/1.02 var(--display)}
.cta .hand{font:italic 400 20px/1 var(--body); color:var(--brass)}
footer{letter-spacing:0; font-size:14px}
.reel-sticky{grid-template-columns:minmax(0,1fr)}
.reel-sticky > .wrap{width:100%}

/* v2: section labels become a quiet italic line, never tracked capitals */
.eyebrow{font:italic 400 17px/1.3 var(--body); letter-spacing:0; text-transform:none; color:var(--brass)}