/* Base reset (replaces the Tailwind preflight the AppDeploy build applied) */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
img,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;padding:0;cursor:pointer}
summary{display:list-item}

:root{--ink:#201918;--cream:#f6f0e7;--pink:#ea6888;--red:#9d2e22;--apricot:#ffb67b;--gutter:clamp(22px,5vw,86px)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}

.header{height:82px;position:sticky;top:0;z-index:60;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(246,240,231,.94);border-bottom:1px solid rgba(32,25,24,.18);backdrop-filter:blur(16px)}
.wordmark{font:700 23px Georgia,serif;letter-spacing:.08em}
.wordmark span{font:9px Arial;vertical-align:top;color:var(--pink)}
.header nav{display:flex;gap:34px;font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.header nav a,.brief-link{position:relative}
.header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--red);transition:.3s}
.header nav a:hover:after{right:0}
.brief-link{justify-self:end;font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.brief-link span{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:10px;border-radius:50%;background:var(--pink)}
.menu,.mobile-nav{display:none}

.hero{height:calc(100vh - 82px);min-height:650px;position:relative;overflow:hidden;color:white;padding:34px var(--gutter);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto}
.hero-image,.hero-wash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-wash{background:linear-gradient(90deg,rgba(45,9,7,.72) 0%,rgba(45,9,7,.24) 52%,rgba(45,9,7,.05) 100%)}
.hero-label{grid-column:1/-1;display:flex;justify-content:space-between;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;position:relative}
.hero-title{align-self:center;position:relative}
.hero-title p,.section-tag,.composer-title>p,.process-copy>p:first-child,.company-copy>p:first-child{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em}
.hero h1{font-size:clamp(66px,9.7vw,158px);line-height:.76;letter-spacing:-.075em;font-weight:400;margin:32px 0 0}
.hero h1 em{font-family:Georgia,serif;color:#ffc3d2;font-weight:400}
.hero-cta{grid-column:2;justify-self:end;align-self:end;width:200px;height:200px;border-radius:50%;background:var(--pink);display:flex;flex-direction:column;justify-content:space-between;padding:28px;position:relative;transition:transform .35s}
.hero-cta:hover{transform:rotate(5deg) scale(1.04)}
.hero-cta span{text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.hero-cta b{font-size:36px;font-weight:400;align-self:end}
.shade-dot{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.7;animation:float 7s ease-in-out infinite}
.d1{width:36px;height:36px;background:#ffafcf;right:34%;top:20%}
.d2{width:22px;height:22px;background:#ffcc55;right:8%;top:52%;animation-delay:-2s}
.d3{width:50px;height:50px;background:#ef6d8f;left:46%;bottom:10%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-16px)}
}

.section{padding:clamp(90px,10vw,170px) var(--gutter)}
.section-tag,.composer-title>p,.process-copy>p:first-child,.company-copy>p:first-child{color:#8a7772;text-transform:uppercase}
.range-head{display:grid;grid-template-columns:1.25fr .75fr;gap:10vw;align-items:end;margin:28px 0 80px}
.range-head h2,.composer-title h2,.process-copy h2,.company-copy h2{font-size:clamp(48px,7vw,108px);line-height:.87;letter-spacing:-.065em;font-weight:400;margin:0}
.range-head p,.process-copy>p:last-child,.company-copy>p:not(:first-child){color:#765f59;line-height:1.65;max-width:560px}
.range-wheel{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid;border-bottom:1px solid}
.range-tab{border:0;border-right:1px solid #bdafa9;background:transparent;padding:26px 20px;text-align:left;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:.25s}
.range-tab:last-child{border-right:0}
.range-tab span{display:block;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:45px;color:#987d76}
.range-tab:hover,.range-tab.active{background:var(--pink);color:white}
.range-tab.active span{color:white}
.range-result{display:grid;grid-template-columns:.3fr .9fr .8fr;gap:40px;align-items:end;padding:80px 0 0}
.result-number{font:clamp(90px,14vw,220px)/.7 Georgia,serif;color:var(--pink)}
.range-result>div:nth-child(2) p{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:#8a7772}
.range-result h3{font:400 clamp(38px,4vw,68px)/.95 Georgia,serif;margin:20px 0 0}
.range-result>p{color:#765f59;line-height:1.6;max-width:450px}

.composer{background:#2b2321;color:white}
.composer-title{display:flex;justify-content:space-between;align-items:end}
.composer-title h2{max-width:900px}
.composer-title>p{color:#d6ada2}
.composition{margin-top:70px;display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:1fr 1fr;gap:14px}
.tile{position:relative;min-height:300px;background:#f1e8df;color:var(--ink);overflow:hidden}
.tile-large{grid-row:1/3;min-height:620px}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile:hover img{transform:scale(1.035)}
.tile>span{position:absolute;top:14px;left:14px;background:var(--pink);color:white;padding:9px 12px;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.15em}
.tile>div{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:white;display:flex;justify-content:space-between;align-items:end}
.tile b{font-size:18px}
.tile small{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em}
.swatch-strip{margin-top:70px;display:grid;grid-template-columns:repeat(6,1fr) 2fr;height:80px}
.swatch-strip i:nth-child(1){background:#be412d}
.swatch-strip i:nth-child(2){background:#e66a87}
.swatch-strip i:nth-child(3){background:#ffb276}
.swatch-strip i:nth-child(4){background:#72403f}
.swatch-strip i:nth-child(5){background:#d29a79}
.swatch-strip i:nth-child(6){background:#efc7b8}
.swatch-strip span{display:grid;place-items:center;border:1px solid #66524c;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}

.process{background:#e8dad0}
.process-copy{display:grid;grid-template-columns:.35fr 1fr .65fr;gap:50px;align-items:end}
.steps{margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid}
.step{padding:30px 30px 40px 0;border-right:1px solid #b5a39a;margin-right:30px}
.step:last-child{border-right:0}
.step b{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--pink)}
.step h3{font:400 29px Georgia,serif;margin:50px 0 14px}
.step p{color:#765f59}

.company{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center}
.company-photo{background:white;position:relative;min-height:620px;display:grid;place-items:center}
.company-photo img{width:72%}
.company-photo span{position:absolute;left:20px;bottom:20px;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
.company-copy h2{margin:28px 0 38px}
.company-copy dl{margin:50px 0 30px;border-top:1px solid}
.company-copy dl div{display:flex;justify-content:space-between;gap:25px;padding:18px 0;border-bottom:1px solid #c8bbb5}
.company-copy dt{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.14em}
.company-copy dd{margin:0;text-align:right}
.company-copy small{display:block;color:#937d76;line-height:1.55}

.contact{background:var(--red);color:white;min-height:80vh;padding:36px var(--gutter);display:flex;flex-direction:column}
.contact-top{display:flex;justify-content:space-between;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}
.contact-main{margin:auto 0}
.contact-main>p{font:20px Georgia,serif;line-height:1.2}
.contact h2{font-size:clamp(72px,12vw,180px);line-height:.73;letter-spacing:-.075em;font-weight:400;margin:35px 0}
.contact h2 em{font-family:Georgia,serif;color:#ffc3d2}
.email{font-size:clamp(17px,2.4vw,35px);display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:17px}
.email span{color:#ffc3d2}
.contact footer{margin-top:80px;display:flex;justify-content:space-between;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.13em}
.reveal{opacity:0;transform:translateY(25px);transition:.7s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){.header{height:72px;grid-template-columns:1fr auto}
.header nav,.brief-link{display:none}
.menu{display:block;width:42px;height:42px;border:1px solid #b9aaa4;background:transparent;position:relative}
.menu i{position:absolute;left:11px;right:11px;height:1px;background:var(--ink);transition:.3s}
.menu i:first-child{top:16px}
.menu i:last-child{top:24px}
.menu.open i:first-child{transform:translateY(4px) rotate(45deg)}
.menu.open i:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--cream);padding:25px var(--gutter);flex-direction:column;gap:20px;transform:translateY(-120%);opacity:0;pointer-events:none;transition:.35s;z-index:-1}
.mobile-nav.open{transform:none;opacity:1;pointer-events:auto}
.mobile-nav a{text-transform:uppercase;letter-spacing:.13em;font-size:12px}
.hero{height:auto;min-height:750px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding-top:28px}
.hero-wash{background:linear-gradient(90deg,rgba(45,9,7,.72),rgba(45,9,7,.18))}
.hero-label{font-size:8px}
.hero-title{align-self:center}
.hero h1{font-size:clamp(64px,20vw,105px)}
.hero-cta{grid-column:1;width:130px;height:130px;padding:20px}
.range-head,.range-result,.process-copy,.company{grid-template-columns:1fr}
.range-head{gap:30px;margin-bottom:55px}
.range-wheel{grid-template-columns:1fr 1fr}
.range-tab{border-bottom:1px solid #bdafa9}
.range-tab:nth-child(2),.range-tab:nth-child(4){border-right:0}
.range-tab span{margin-bottom:25px}
.range-result{gap:26px}
.result-number{font-size:110px}
.composer-title{display:block}
.composer-title>p{margin-bottom:25px}
.composition{grid-template-columns:1fr 1fr}
.tile-large{grid-column:1/3;grid-row:auto;min-height:480px}
.tile{min-height:270px}
.swatch-strip{grid-template-columns:repeat(6,1fr);height:100px}
.swatch-strip span{grid-column:1/7}
.process-copy{gap:28px}
.steps{grid-template-columns:1fr}
.step{border-right:0;border-bottom:1px solid #b5a39a;margin:0}
.company{gap:55px}
.company-photo{min-height:470px}
.contact{min-height:70vh}
.email{font-size:16px;word-break:break-all}
.contact footer{flex-direction:column;gap:14px}
}

@media(max-width:520px){.section{padding-top:85px;padding-bottom:85px}
.range-head h2,.composer-title h2,.process-copy h2,.company-copy h2{font-size:45px}
.range-result h3{font-size:38px}
.composition{grid-template-columns:1fr}
.tile-large{grid-column:auto;min-height:390px}
.tile{min-height:310px}
.company-photo{min-height:400px}
.company-copy dl div{flex-direction:column}
.company-copy dd{text-align:left}
.contact h2{font-size:58px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.shade-dot{animation:none}
.reveal{opacity:1;transform:none;transition:none}
.tile img,.hero-cta{transition:none}
}