:root{padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: a pink iMessage stage that dissolves into a full-bleed photo/video slideshow,
   then editorial sections on blush paper; the pink text bubble is the recurring motif. */
:root{
  --paper:#fbf0f3; --ink:#1e1318; --muted:#6e5862; --line:rgba(30,19,24,.14);
  --card:#fff8fa; --pink:#e5307f; --pink-ink:#b3165c; --pink-soft:#f8cddc;
  /* hero + chat are a fixed world in both themes */
  --stage:#f7c4d6; --stage-2:#fbe0ea; --bubble-sent:#f2388a; --bubble-recv:#ecdfe4;
  --chat-bg:#ffffff; --chat-ink:#16080e; --night:#120a0e;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ios:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --bg-o:.16; --bg-blend:multiply;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#150c11; --ink:#f8e8ee; --muted:#b99ba8; --line:rgba(248,232,238,.14);
  --card:#1e1218; --pink:#ff5ea3; --pink-ink:#ff8dbd; --pink-soft:#4a1f33; --bg-o:.2; --bg-blend:luminosity; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#150c11; --ink:#f8e8ee; --muted:#b99ba8; --line:rgba(248,232,238,.14);
  --card:#1e1218; --pink:#ff5ea3; --pink-ink:#ff8dbd; --pink-soft:#4a1f33; --bg-o:.2; --bg-blend:luminosity; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.02; margin:0; text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-ink)}

/* ---------- HERO ---------- */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--night); color:#fff; isolation:isolate}
.slides{position:absolute; inset:0; z-index:0}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease}
.slide.on{opacity:1}
.slide .bg{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(36px) saturate(1.2) brightness(.55); transform:scale(1.1)}
.slide .fg{position:absolute; top:0; right:0; height:100%; width:min(52%, 760px); object-fit:cover; object-position:center 25%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%)}
.slide.on img.fg{animation:drift 9s ease-out both}
@keyframes drift{from{transform:scale(1.08)} to{transform:scale(1)}}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,10,14,.82) 0, rgba(18,10,14,.35) 45%, rgba(18,10,14,0) 70%), linear-gradient(0deg, rgba(18,10,14,.7), rgba(18,10,14,0) 40%)}

.stage{position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:24px var(--gutter-r) 24px var(--gutter-l);
  background:radial-gradient(120% 90% at 50% 0%, rgba(251,224,234,.42), rgba(242,120,170,.38)); transition:opacity 1.1s ease .2s}
.stage::before{content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:radial-gradient(rgba(229,48,127,.22) 1.2px, transparent 1.4px); background-size:22px 22px}
.revealed .stage{opacity:0; pointer-events:none}

.phone{position:relative; width:min(390px, 100%); height:min(680px, calc(100svh - 48px)); background:var(--chat-bg); color:var(--chat-ink);
  border-radius:38px; box-shadow:0 30px 80px -20px rgba(150,20,80,.45), 0 0 0 10px #1a1016, 0 0 0 11px #3a2730;
  display:flex; flex-direction:column; overflow:hidden; font-family:var(--ios); transition:transform 1s cubic-bezier(.6,0,.3,1), opacity .8s ease, filter .9s ease}
.revealed .phone{transform:scale(1.14); opacity:0; filter:blur(10px)}
.phone.shake{animation:shake .45s ease}
@keyframes shake{20%{transform:translateX(-6px) rotate(-1deg)}45%{transform:translateX(5px) rotate(.8deg)}70%{transform:translateX(-3px)}100%{transform:none}}
.status{display:flex; justify-content:space-between; padding:14px 28px 0; font-size:14px; font-weight:600}
.status .icons{display:flex; gap:5px; align-items:center}
.chat-head{display:grid; grid-template-columns:40px 1fr 40px; align-items:center; padding:6px 12px 10px; border-bottom:1px solid #f1e3e9;
  background:linear-gradient(#fff, #fff7fa)}
.chat-head .back{color:var(--bubble-sent)}
.who{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:#3b2a31}
.avatar{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:19px; color:#fff;
  background:linear-gradient(160deg,#ffa9cb,#e5307f)}
.chat-head .cam{justify-self:end; color:var(--bubble-sent)}
.chat-body{flex:1; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; padding:12px 16px 10px}
.stamp{align-self:center; font-size:11px; color:#8e7b84; margin-bottom:8px}
.stamp b{font-weight:600}
.msg{position:relative; max-width:76%; padding:8px 13px; border-radius:19px; font-size:16.5px; line-height:1.3; overflow-wrap:anywhere}
.msg.recv{align-self:flex-start; background:var(--bubble-recv); color:var(--chat-ink); animation:popL .32s cubic-bezier(.3,1.5,.6,1) both; transform-origin:0 100%}
.msg.sent{align-self:flex-end; background:var(--bubble-sent); color:#fff; transform-origin:100% 100%}
.msg.tail.recv::before{content:""; position:absolute; bottom:0; left:-7px; width:20px; height:20px; background:var(--bubble-recv); border-bottom-right-radius:16px 14px}
.msg.tail.recv::after{content:""; position:absolute; bottom:0; left:-26px; width:26px; height:20px; background:var(--chat-bg); border-bottom-right-radius:10px}
.msg.tail.sent::before{content:""; position:absolute; bottom:0; right:-7px; width:20px; height:20px; background:var(--bubble-sent); border-bottom-left-radius:16px 14px}
.msg.tail.sent::after{content:""; position:absolute; bottom:0; right:-26px; width:26px; height:20px; background:var(--chat-bg); border-bottom-left-radius:10px}
.msg.gap{margin-top:8px}
.msg.slam{animation:slam .7s cubic-bezier(.2,1.4,.5,1) both}
@keyframes popL{from{transform:scale(.6); opacity:0}to{transform:none; opacity:1}}
@keyframes slam{0%{transform:scale(2.6) translateY(-60px); opacity:0}55%{transform:scale(.94); opacity:1}75%{transform:scale(1.04)}100%{transform:none}}
.typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; animation:popL .3s cubic-bezier(.3,1.6,.6,1) both}
.typing i{width:8px; height:8px; border-radius:50%; background:#9d8b93; animation:dot 1.1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none; opacity:.45}30%{transform:translateY(-4px); opacity:1}}
.delivered{align-self:flex-end; font-size:11px; color:#8e7b84; margin-top:2px; animation:fade .4s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.compose{display:flex; align-items:center; gap:8px; padding:8px 12px 22px}
.compose .plus{width:32px; height:32px; border-radius:50%; background:#f3e8ec; display:grid; place-items:center; color:#8e7b84; flex:none}
.field{flex:1; min-width:0; min-height:34px; border:1px solid #e6d6dd; border-radius:18px; padding:6px 8px 6px 14px; display:flex; align-items:center; gap:6px; font-size:16px}
.field .txt{flex:1; min-width:0; white-space:nowrap; overflow:hidden; color:var(--chat-ink)}
.field .txt:empty::before{content:"iMessage"; color:#b5a3ab}
.field .send{width:26px; height:26px; border-radius:50%; background:var(--bubble-sent); color:#fff; display:grid; place-items:center; flex:none; transform:scale(0); transition:transform .2s}
.field.has .send{transform:scale(1)}
.caret{display:inline-block; width:2px; height:1.1em; background:var(--bubble-sent); vertical-align:-3px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.hero-copy{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:0 var(--gutter-r) calc(56px + env(safe-area-inset-bottom,0px)) var(--gutter-l)}
.hero-copy .inner{max-width:1180px; margin:0 auto; display:grid; gap:18px; justify-items:start}
.hero-copy > .inner > *{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.revealed .hero-copy > .inner > *{opacity:1; transform:none}
.revealed .hero-copy > .inner > :nth-child(2){transition-delay:.15s}
.revealed .hero-copy > .inner > :nth-child(3){transition-delay:.3s}
.revealed .hero-copy > .inner > :nth-child(4){transition-delay:.45s}
.callback{font-family:var(--ios); background:var(--bubble-sent); color:#fff; padding:8px 14px; border-radius:19px 19px 4px 19px; font-size:16px}
.hero h1{font-size:clamp(4.2rem, 14vw, 11.5rem); font-style:italic; font-weight:500; letter-spacing:-.02em; line-height:.86}
.roles{font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#f6d3df; max-width:52ch}
.ctas{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:var(--body)}
.btn.solid{background:var(--bubble-sent); color:#fff}
.btn.solid:hover{background:#d61f74}
.btn.ghost{border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.hero-ctrl{position:absolute; z-index:4; top:calc(16px + env(safe-area-inset-top,0px)); right:calc(16px + env(safe-area-inset-right,0px));
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(160,20,80,.35); background:rgba(255,255,255,.55); color:#8a1048}
.revealed .hero-ctrl{border-color:rgba(255,255,255,.4); background:rgba(18,10,14,.35); color:#fff}
.dots{position:absolute; z-index:2; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); display:flex; gap:6px}
.dots button{width:8px; height:8px; padding:0; border-radius:99px; border:0; background:rgba(255,255,255,.4); cursor:pointer; transition:width .3s, background .3s}
.dots button.on{width:26px; background:#fff}

/* ---------- NAV ---------- */
.nav{position:fixed; z-index:20; top:0; left:0; right:0; padding:calc(10px + env(safe-area-inset-top,0px)) var(--gutter-r) 10px var(--gutter-l);
  background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  transform:translateY(-110%); transition:transform .35s ease}
.nav.show{transform:none}
.nav .inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px}
.nav .brand{font-family:var(--display); font-style:italic; font-size:24px; text-decoration:none}
.nav ul{display:flex; gap:clamp(12px,3vw,28px); list-style:none; margin:0; padding:0; font-size:14px; font-weight:600}
.nav ul a{text-decoration:none; color:var(--muted)}
.nav ul a:hover{color:var(--pink-ink)}
@media (max-width:560px){ .nav ul li.opt{display:none} }

/* ---------- SECTIONS ---------- */
section.block{padding-block:clamp(72px, 11vw, 140px)}
.sec-head{display:grid; gap:14px; margin-bottom:clamp(36px,6vw,64px)}
.sec-head h2{font-size:clamp(2.6rem, 6.4vw, 5.2rem); letter-spacing:-.015em}
.sec-head h2 em{color:var(--pink)}

.about{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,88px); align-items:center}
.about figure{margin:0; position:relative}
.about figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 40%; border-radius:4px; display:block}
.about figure .chip{position:absolute; left:-10px; bottom:28px; font-family:var(--ios); background:var(--bubble-sent); color:#fff; padding:8px 14px; border-radius:19px 19px 19px 4px; font-size:15px; box-shadow:0 10px 30px -10px rgba(180,20,90,.6)}
.about .text{display:grid; gap:22px; min-width:0}
.about .lede{font-family:var(--display); font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.2}
.about .lede em{color:var(--pink)}
.about p.body{color:var(--muted); max-width:60ch}
.facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); margin:8px 0 0; padding:0}
.facts div{padding:16px 16px 0 0}
.facts dt{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:4px 0 0; font-weight:600}

.services{border-top:1px solid var(--line)}
.svc{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line); transition:padding .3s}
.svc h3{font-size:clamp(1.8rem, 4vw, 3rem); font-weight:500}
.svc:hover h3{font-style:italic; color:var(--pink)}
.svc p{color:var(--muted); max-width:46ch}
.svc .tag{font-family:var(--mono); font-size:12px; color:var(--pink-ink); white-space:nowrap}
.svc .tag a{text-decoration:none; border-bottom:1px solid currentColor}

.work-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(10px,1.6vw,20px)}
.tile{position:relative; margin:0; overflow:hidden; border-radius:4px; background:var(--card)}
.tile img, .tile video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile:hover img{transform:scale(1.04)}
.tile figcaption{position:absolute; left:12px; bottom:12px; right:12px; display:flex; justify-content:space-between; align-items:end; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6)}
.t-video{grid-column:span 4; aspect-ratio:9/16}
.t-pink{grid-column:span 4; aspect-ratio:9/16}
.t-stack{grid-column:span 4; display:grid; gap:inherit; grid-template-rows:1fr 1fr}
.t-stack .tile{min-height:0}
.t-stack img{object-position:center 30%}
.sound{pointer-events:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:0; border-radius:999px; padding:7px 12px; background:rgba(255,255,255,.9); color:#1e1318; cursor:pointer; text-shadow:none}
.credit{margin-top:14px; font-size:13px; color:var(--muted)}

.mob{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:28px; padding:clamp(24px,5vw,64px)}
.mob h2{font-size:clamp(2.4rem,5.5vw,4.4rem)}
.mob h2 span{font-family:var(--mono); font-style:normal; font-size:.42em; display:block; color:var(--pink-ink); letter-spacing:0; margin-bottom:10px}
.mob p{color:var(--muted); max-width:52ch; margin-top:16px}
.mob ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.mob li{border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14px}
.mob .shot{display:grid; place-items:center}
.mob .frame{width:min(260px,100%); aspect-ratio:9/19; border-radius:34px; padding:9px; background:#120a0e; box-shadow:0 30px 60px -25px rgba(140,20,80,.55)}
.mob .frame video{width:100%; height:100%; object-fit:cover; border-radius:26px; display:block}
.mob .btn.solid{margin-top:26px}

.pod{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,5vw,64px); align-items:center;
  background:#1a0d14; color:#f8e8ee; border-radius:28px; padding:clamp(24px,5vw,64px); overflow:hidden}
.pod-mark{font-family:var(--display); font-weight:900; font-size:clamp(5rem,15vw,12rem); line-height:.8; letter-spacing:-.04em; color:#f2388a; text-align:center}
.pod-text{display:grid; gap:18px; min-width:0}
.pod .eyebrow{color:#ff8dbd}
.pod h2{font-size:clamp(2.4rem,5.5vw,4.4rem)}
.pod h2 em{color:#ff5ea3}
.pod p{color:#d9bcc8; max-width:52ch}
.pod .thread .r{background:#3a1f2c; color:#f8e8ee}
@media (max-width:860px){ .pod{grid-template-columns:1fr} .pod-mark{text-align:left} }
.kw{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start}
.kw-list{display:grid; gap:26px; min-width:0}
.kw-item{display:grid; gap:8px; justify-items:start}
.kw-item blockquote{margin:0; font-family:var(--ios); font-size:17px; line-height:1.4; background:var(--pink-soft); color:var(--ink); padding:12px 16px; border-radius:20px 20px 20px 4px; max-width:60ch; overflow-wrap:anywhere}
.kw-item cite{font-style:normal; font-size:13px; color:var(--muted); padding-left:6px}
.kw-item cite b{color:var(--ink); font-weight:600}
.kw-empty{border:1.5px dashed var(--line); border-radius:20px 20px 20px 4px; padding:22px; color:var(--muted); max-width:46ch}
.kw-empty strong{display:block; font-family:var(--display); font-weight:500; font-size:1.6rem; color:var(--ink); margin-bottom:6px}
.kw-form{display:grid; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:clamp(20px,3.5vw,32px); min-width:0}
.kw-form h3{font-size:1.6rem; margin-bottom:2px}
.kw-note{font-size:14px; color:var(--muted); margin-bottom:10px}
.kw-form label{font-size:13px; font-weight:600; margin-top:6px}
.kw-form input,.kw-form textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:11px 13px; resize:vertical}
.kw-form input:focus,.kw-form textarea:focus{outline:2px solid var(--pink); outline-offset:1px; border-color:transparent}
.kw-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:10px}
.kw-count{font-family:var(--mono); font-size:12px; color:var(--muted)}
.kw-err{color:var(--pink-ink); font-size:14px; font-weight:600}
.kw-done{display:grid; gap:10px; margin-top:8px; padding-top:16px; border-top:1px solid var(--line); font-size:14px}
.kw-done a{color:var(--pink-ink)}
.sel{user-select:all; font-weight:600}
.kw-preview{margin:0; white-space:pre-wrap; font-family:var(--mono); font-size:12.5px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; max-height:220px; overflow:auto}
.kw-mail{font-size:14px; font-weight:600}
@media (max-width:860px){ .kw{grid-template-columns:1fr} }
footer .socials{display:flex; flex-wrap:wrap; gap:18px}
footer .socials a{text-decoration:none; color:var(--pink-ink); font-weight:600}
.contact{display:grid; gap:36px}
/* gallery rows 2-3 */
.t-lounge{grid-column:span 4; aspect-ratio:4/5}
.t-night{grid-column:span 8}
.t-night video{position:absolute; inset:0}
.t-q{grid-column:span 3; aspect-ratio:9/16}
@media (max-width:860px){ .t-lounge{grid-column:span 5} .t-night{grid-column:span 7} .t-q{grid-column:span 6} }
@media (max-width:560px){ .t-lounge{grid-column:span 12} .t-night{grid-column:span 12; aspect-ratio:16/9} }
.pod-cover{width:100%; border-radius:16px; display:block; box-shadow:0 30px 60px -30px rgba(242,56,138,.6)}

/* faint photo backdrops behind each section */
section.block{position:relative; isolation:isolate}
.sec-bg{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.sec-bg img{position:absolute; top:6%; height:88%; width:min(46%, 620px); object-fit:cover; opacity:0;
  filter:saturate(.75) contrast(.95); mix-blend-mode:var(--bg-blend); will-change:transform;
  transition:opacity 1.4s ease;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 25%, transparent 78%)}
.sec-bg.right img{right:-4%}
.sec-bg.left img{left:-4%}
.sec-bg.in img{opacity:var(--bg-o)}
@media (max-width:860px){ .sec-bg img{width:100%; left:0; right:0} .sec-bg.in img{opacity:calc(var(--bg-o) * .7)} }

/* scroll reveals (only when JS runs) */
html.anim .rv{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1)}
html.anim .rv.in{opacity:1; transform:none}
html.anim .tile.rv{transform:none; clip-path:inset(14% 0 0 0 round 4px); transition:opacity .9s ease, clip-path 1.1s cubic-bezier(.2,.8,.2,1)}
html.anim .tile.rv.in{clip-path:inset(0 0 0 0 round 4px)}
.nav::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--pink); transform:scaleX(var(--p,0)); transform-origin:left}

/* name letters */
.hero h1 .ch{display:inline-block; opacity:0; transform:translateY(.45em) rotate(4deg); filter:blur(6px);
  transition:opacity .7s ease, transform 1s cubic-bezier(.2,.9,.2,1), filter .8s ease; transition-delay:calc(var(--i) * 60ms + .25s)}
.hero.revealed h1 .ch{opacity:1; transform:none; filter:none}
.thread{display:grid; gap:4px; max-width:420px; font-family:var(--ios)}
.thread .m{padding:9px 14px; border-radius:19px; max-width:80%; font-size:16px; line-height:1.3}
.thread .r{justify-self:start; background:var(--pink-soft); color:var(--ink); border-bottom-left-radius:4px}
.thread .s{justify-self:end; background:var(--bubble-sent); color:#fff; border-bottom-right-radius:4px}
.mail{font-family:var(--display); font-style:italic; font-size:clamp(1.9rem, 6.6vw, 5.6rem); line-height:1; overflow-wrap:anywhere; text-decoration:none; letter-spacing:-.01em}
.mail:hover{color:var(--pink)}
.contact-row{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center}
.copy{font-family:var(--body); font-weight:600; font-size:14px; padding:10px 18px; border-radius:999px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer}
.copy:hover{background:var(--ink); color:var(--paper)}
.meta{display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:.04em}
.meta a{color:var(--pink-ink)}

footer{border-top:1px solid var(--line); padding-block:28px calc(28px + env(safe-area-inset-bottom,0px)); font-size:13px; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}

@media (max-width:860px){
  .slide .bg{display:none}
  .slide .fg{width:100%; -webkit-mask-image:none; mask-image:none}
  .hero::after{background:linear-gradient(0deg, rgba(18,10,14,.88) 0, rgba(18,10,14,.4) 45%, rgba(18,10,14,.05) 75%)}
  .about{grid-template-columns:1fr}
  .about figure{max-width:440px}
  .svc{grid-template-columns:1fr; gap:6px}
  .t-video,.t-pink{grid-column:span 6}
  .t-stack{grid-column:span 12; grid-template-rows:none; grid-template-columns:1fr 1fr}
  .t-stack .tile{aspect-ratio:3/4}
  .mob{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .phone{border-radius:30px}
  .facts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}