:root{
  --bg:#F7ECE8;
  --bg-2:#F0DDD7;
  --powder:#E9C9C1;
  --rose:#D9A9A0;
  --ink:#2F2426;
  --ink-2:#7A6461;
  --accent:#B77F78;
  --accent-soft:#F0D3CC;
  --deep:#3B2A2D;
  --line:rgba(47,36,38,.13);
  --serif:"Oranienbaum","Didot","Bodoni 72",Georgia,serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:99}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(247,236,232,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--serif);font-size:26px;text-decoration:none;letter-spacing:.01em}
.nav{display:flex;gap:28px;font-size:14px}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:14px;letter-spacing:.02em;padding:13px 22px;border-radius:999px;transition:transform .2s,background .2s}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.top .btn{padding:10px 18px}
@media(max-width:860px){.nav{display:none}}

/* hero */
.hero{position:relative;padding:56px 0 0;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;min-height:clamp(640px,calc(15vw*1.64 + 380px),780px)}
.hero-name{font-family:var(--serif);font-weight:400;font-size:clamp(84px,14vw,196px);line-height:.82;letter-spacing:-.01em;text-transform:uppercase;position:absolute;left:24px;top:0;z-index:1;pointer-events:none}
.hero-name span{display:block}
.hero-name span:last-child{padding-left:1.25em}
.hero-copy{position:relative;z-index:3;padding-bottom:56px;max-width:480px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.2vw,26px);line-height:1.3;margin:14px 0 14px}
.hero p.lead{color:var(--ink-2);font-size:16px;margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;list-style:none}
.tags li{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.35)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.hero-photo{position:relative;z-index:2;justify-self:center;align-self:end}
.hero-photo img{width:min(440px,100%);filter:drop-shadow(0 30px 40px rgba(120,70,70,.16))}
.hero-loc{position:absolute;right:24px;top:8px;z-index:3;font-size:13px;color:var(--ink-2);text-align:right}
@media(max-width:860px){
  .hero{padding-top:28px}
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .hero-name{position:relative;left:0;top:0;font-size:clamp(64px,21vw,130px)}
  .hero-photo{order:2;margin-top:-56px}
  .hero-photo img{width:min(300px,78vw)}
  .hero-copy{order:3;padding:28px 0 48px}
  .hero-loc{display:none}
}

/* marquee */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.brands-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-align:center;padding-top:18px}
.marquee{display:flex;width:max-content;animation:scroll 38s linear infinite;padding:14px 0 20px}
.marquee ul{display:flex;list-style:none;gap:56px;padding-right:56px;align-items:center}
.marquee li{font-family:var(--serif);font-size:30px;white-space:nowrap;color:var(--ink)}
.marquee li.sm{font-family:var(--sans);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}}

/* sections */
section{padding:96px 0}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.005em}
.h2 em{font-style:italic;color:var(--accent)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-head p{max-width:420px;color:var(--ink-2)}
.num{font-size:13px;color:var(--accent);letter-spacing:.1em;margin-bottom:10px;display:block}

/* about */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.about-img{border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin-bottom:22px}
.about-text p{color:var(--ink-2);margin-bottom:14px;max-width:560px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:1px solid var(--line)}
.stat{padding:22px 16px 0 0}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1}
.stat span{font-size:13px;color:var(--ink-2)}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px}.stats{grid-template-columns:repeat(2,1fr);row-gap:20px}}

/* portfolio */
.cat{margin-bottom:70px}
.cat:last-child{margin-bottom:0}
.cat-title{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px}
.cat-title h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1}
.cat-title span{font-size:13px;color:var(--ink-2)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{text-decoration:none;display:block}
.tile .ph{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:var(--bg-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.04)}
.tile .play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(247,236,232,.9);display:grid;place-items:center}
.tile .play svg{width:12px;height:12px;margin-left:2px}
.tile h4{font-size:14px;font-weight:600;margin-top:10px}
.tile p{font-size:13px;color:var(--ink-2)}
@media(max-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* formats */
.formats{background:var(--deep);color:var(--bg);position:relative;overflow:hidden}
.formats .h2 em{color:var(--accent-soft)}
.formats .sec-head p{color:rgba(247,236,232,.7)}
.fmt-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(247,236,232,.18)}
.fmt{padding:28px 24px 30px 0;border-bottom:1px solid rgba(247,236,232,.18)}
.fmt h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:8px}
.fmt p{font-size:14px;color:rgba(247,236,232,.72);max-width:320px}
@media(max-width:860px){.fmt-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fmt-list{grid-template-columns:1fr}}

/* reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.review{background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:10px;padding:30px 30px 26px;display:flex;flex-direction:column;justify-content:space-between}
.review blockquote{font-family:var(--serif);font-size:22px;line-height:1.3}
.review blockquote::before{content:"“";display:block;font-size:54px;line-height:.6;color:var(--accent);margin-bottom:8px}
.review figcaption{margin-top:20px;font-size:13px;color:var(--ink-2)}
.review figcaption b{color:var(--ink);font-weight:600}
@media(max-width:760px){.reviews-grid{grid-template-columns:1fr}.review blockquote{font-size:20px}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;counter-reset:s}
.steps li{border-top:1px solid var(--ink);padding-top:18px}
.steps li::before{counter-increment:s;content:"0" counter(s) ".";font-size:13px;color:var(--accent);letter-spacing:.1em}
.steps h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:10px 0 8px}
.steps p{font-size:14px;color:var(--ink-2)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:34px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* faq */
.faq{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:20px;padding:22px 0;font-size:18px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:28px;line-height:.8;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:760px}

/* contact */
.contact{text-align:center;padding:120px 0}
.contact .h2{font-size:clamp(52px,9vw,120px)}
.contact p{color:var(--ink-2);max-width:460px;margin:18px auto 30px}
.contact .cta-row{justify-content:center}
.mail{display:block;margin-top:26px;font-size:15px}

/* page (geo landing) */
.page-hero{padding:80px 0 40px}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,8vw,104px);line-height:.95;max-width:900px}
.page-hero p{color:var(--ink-2);max-width:620px;margin:22px 0 28px;font-size:17px}
.prose{max-width:760px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1.05;margin:48px 0 14px}
.prose p,.prose li{color:var(--ink-2);margin-bottom:12px}
.prose ul{padding-left:20px}
.crumbs{font-size:13px;color:var(--ink-2);padding-top:24px}
.crumbs a{text-decoration:none}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:13px;color:var(--ink-2)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
footer h2{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin-bottom:8px}
footer h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:6px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.page-hero .eyebrow{display:block;margin-bottom:16px}

/* ===== motion ===== */
.hero-glow{position:absolute;inset:-10% -10% 0;z-index:0;pointer-events:none;filter:blur(50px);opacity:1}
.hero-glow b{position:absolute;border-radius:50%;display:block}
.hero-glow b:nth-child(1){width:46vw;height:46vw;max-width:620px;max-height:620px;right:4%;top:6%;background:radial-gradient(circle,#E6B6AC,transparent 68%);animation:drift1 16s ease-in-out infinite alternate}
.hero-glow b:nth-child(2){width:34vw;height:34vw;max-width:460px;max-height:460px;left:-4%;bottom:0;background:radial-gradient(circle,#EDC6BD,transparent 68%);animation:drift2 19s ease-in-out infinite alternate}
.hero-glow b:nth-child(3){width:26vw;height:26vw;max-width:340px;max-height:340px;left:38%;top:30%;background:radial-gradient(circle,#F3DCD2,transparent 70%);animation:drift3 13s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-8%,10%) scale(1.15)}}
@keyframes drift2{to{transform:translate(14%,-12%) scale(1.2)}}
@keyframes drift3{to{transform:translate(-20%,16%) scale(.85)}}
.hero .wrap>*:not(.hero-glow){position:relative}
.hero-name{will-change:transform}
.hero-name i{font-style:normal;display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);animation:letter 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
@keyframes letter{to{opacity:1;transform:none}}
.hero-photo{opacity:0;animation:rise 1.3s .35s cubic-bezier(.2,.8,.2,1) forwards}
.hero-photo img{animation:float 7s 1.6s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(50px) scale(.97)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-12px)}}
.hero-copy>*,.hero-loc{opacity:0;animation:fadeup .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero-copy>*:nth-child(1){animation-delay:.7s}.hero-copy>*:nth-child(2){animation-delay:.8s}.hero-copy>*:nth-child(3){animation-delay:.9s}.hero-copy>*:nth-child(4){animation-delay:1s}.hero-copy>*:nth-child(5){animation-delay:1.1s}.hero-loc{animation-delay:1.2s}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tags li{transition:background .3s,color .3s,transform .3s}
.tags li:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}

/* buttons shimmer */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;z-index:-1}
.btn:hover::after{transform:translateX(120%)}
.btn:not(.ghost):hover{background:var(--accent)}

/* scroll band */
.band{overflow:hidden;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--bg-2),var(--accent-soft),var(--bg-2))}
.band-track{white-space:nowrap;font-family:var(--serif);font-size:clamp(46px,8vw,104px);line-height:1;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--accent);will-change:transform}
.band-track span{-webkit-text-stroke:0;color:var(--rose);font-size:.45em;vertical-align:middle;margin:0 .35em}

/* tiles */
.tile .ph{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.tile:hover .ph{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(120,60,60,.45)}
.tile .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(183,127,120,.35));opacity:0;transition:opacity .5s}
.tile:hover .ph::after{opacity:1}
.tile .play{z-index:2;transition:transform .4s,background .4s}
.tile:hover .play{transform:scale(1.18);background:var(--bg)}
.about-img img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.about-img:hover img{transform:scale(1.04)}

/* reviews + formats */
.review{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,background .5s}
.review:hover{transform:translateY(-6px) rotate(-.4deg);background:rgba(255,255,255,.7);box-shadow:0 26px 50px -30px rgba(120,60,60,.5)}
.fmt{transition:padding .4s}
.fmt h3{transition:color .4s}
.fmt:hover h3{color:var(--powder)}
.fmt:hover{padding-left:10px}
.formats::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(217,169,160,.35),transparent 70%);animation:drift2 14s ease-in-out infinite alternate}
.steps li{position:relative}
.steps li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);transition:width 1.2s .2s ease}
.steps li.in::after{width:100%}
.contact .h2 em{background:linear-gradient(90deg,var(--accent),var(--rose),var(--accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

/* staggered reveal */
.rv{transition-delay:var(--rd,0ms)}

@media(prefers-reduced-motion:reduce){
  .hero-name i,.hero-photo,.hero-copy>*,.hero-loc{animation:none;opacity:1;transform:none}
  .hero-photo img,.hero-glow b,.formats::before,.contact .h2 em{animation:none}
}