:root { --paper:#f4f0e9; --soft:#c5c0b8; --ink:#151516; --night:#101011; --warm:#d77b57; --pink:#f1c0b5; --line:rgba(244,240,233,.19); }
* { box-sizing:border-box; }
html { background:var(--night); }
body { background:var(--night); color:var(--paper); font-family:Manrope,Arial,sans-serif; margin:0; }
a { color:inherit; text-decoration:none; }
.site { --x:.5; --y:.5; background:radial-gradient(1000px circle at calc(var(--x) * 100%) calc(var(--y) * 100%),rgba(215,123,87,.1),transparent 46%),linear-gradient(130deg,#131315 0%,#111112 55%,#191416 100%); display:grid; grid-template-rows:auto 1fr auto auto; min-height:100svh; overflow:hidden; padding:26px clamp(24px,5vw,76px) 18px; position:relative; }
.ambient { border-radius:50%; filter:blur(30px); pointer-events:none; position:absolute; }.ambient-a { animation:float-one 14s ease-in-out infinite alternate; background:#7e3d4d; height:48vw; opacity:.25; right:-18vw; top:-22vw; width:48vw; }.ambient-b { animation:float-two 17s ease-in-out infinite alternate; background:#a86e4d; bottom:-37vw; height:53vw; left:-18vw; opacity:.18; width:53vw; }.noise { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); inset:0; opacity:.25; pointer-events:none; position:absolute; }
.masthead,.hero,.service-tape,footer { position:relative; z-index:1; }.masthead { align-items:center; display:flex; justify-content:space-between; }.logo-link { align-items:center; display:inline-flex; gap:14px; }.logo-frame { display:block; height:112px; width:112px; }.logo-frame img { display:block; height:100%; object-fit:contain; width:100%; }.logo-name { font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; }.top-nav { align-items:center; display:flex; gap:clamp(13px,2vw,28px); }.top-nav a { color:var(--soft); font-family:"DM Mono",monospace; font-size:.61rem; letter-spacing:.07em; text-transform:uppercase; transition:color .2s ease; }.top-nav a span { color:var(--warm); }.top-nav a:hover,.top-nav a:focus-visible { color:var(--paper); }
.hero { align-items:center; display:grid; gap:clamp(20px,4vw,64px); grid-template-columns:minmax(230px,1fr) minmax(250px,.85fr) minmax(250px,.74fr); margin:auto; max-width:1360px; padding:clamp(36px,6vh,85px) 0 clamp(26px,4vh,55px); width:100%; }.hero-copy { align-self:center; }.overline { align-items:center; color:var(--pink); display:flex; font-family:"DM Mono",monospace; font-size:.62rem; gap:10px; letter-spacing:.1em; margin:0 0 18px; text-transform:uppercase; }.overline span { background:var(--warm); border-radius:50%; box-shadow:0 0 0 5px rgba(215,123,87,.13); height:6px; width:6px; }h1 { font-family:"Playfair Display",Georgia,serif; font-size:clamp(3.05rem,6.1vw,6.1rem); font-weight:500; letter-spacing:-.065em; line-height:.89; margin:0; }h1 em,.signup-panel h2 em { color:var(--pink); font-weight:500; }.lede { color:var(--soft); font-size:clamp(.88rem,1.25vw,1.04rem); line-height:1.7; margin:24px 0 22px; max-width:385px; }.hero-contact { display:flex; flex-wrap:wrap; gap:8px 17px; }.hero-contact a { border-bottom:1px solid rgba(244,240,233,.4); font-family:"DM Mono",monospace; font-size:.64rem; padding-bottom:3px; transition:color .2s,border-color .2s; }.hero-contact a:hover { border-color:var(--warm); color:var(--warm); }
.gallery-stage { align-self:center; aspect-ratio:1; margin:auto; max-width:445px; position:relative; width:100%; }.gallery-stage::before { background:radial-gradient(circle,rgba(215,123,87,.24),transparent 62%); content:""; inset:-20%; position:absolute; }.gallery-card { overflow:hidden; position:absolute; }.card-back { animation:tilt-back 7s ease-in-out infinite alternate; background:linear-gradient(145deg,#502f39,#1d1c27 58%,#b4674a); border:1px solid rgba(244,240,233,.22); height:67%; left:7%; padding:18px; top:11%; transform:rotate(-9deg); width:67%; }.card-back span { color:rgba(244,240,233,.72); font:500 .53rem "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.card-mid { animation:tilt-mid 8s ease-in-out -.8s infinite alternate; background:linear-gradient(135deg,rgba(244,240,233,.16),rgba(244,240,233,.03)); border:1px solid rgba(244,240,233,.45); height:70%; right:4%; top:15%; transform:rotate(8deg); width:70%; }.card-mid i,.card-mid b,.card-mid em { border:1px solid rgba(244,240,233,.52); border-radius:50%; position:absolute; }.card-mid i { height:48%; left:12%; top:25%; width:48%; }.card-mid b { border-color:var(--warm); height:35%; right:13%; top:16%; width:35%; }.card-mid em { border-color:var(--pink); bottom:12%; height:27%; right:19%; width:27%; }.card-front { align-items:center; animation:tilt-front 7.5s ease-in-out -.5s infinite alternate; backdrop-filter:blur(8px); background:rgba(16,16,17,.33); border:1px solid rgba(244,240,233,.54); display:flex; height:78%; justify-content:center; left:13%; top:11%; transform:rotate(-2deg); width:78%; }.card-front img { filter:drop-shadow(0 0 24px rgba(215,123,87,.26)); height:98%; object-fit:contain; width:98%; }.gallery-caption { font-family:"DM Mono",monospace; font-size:.51rem; letter-spacing:.12em; opacity:.72; position:absolute; }.caption-top { left:50%; top:1%; transform:translateX(-50%); white-space:nowrap; }.caption-bottom { bottom:1%; left:50%; transform:translateX(-50%); white-space:nowrap; }.service-chip { backdrop-filter:blur(10px); background:rgba(20,20,21,.58); border:1px solid rgba(244,240,233,.34); font-family:"DM Mono",monospace; font-size:.52rem; letter-spacing:.08em; padding:8px 10px; position:absolute; text-transform:uppercase; }.chip-one { animation:bob-one 5s ease-in-out infinite alternate; left:-8%; top:22%; }.chip-two { animation:bob-two 6s ease-in-out -.8s infinite alternate; right:-6%; top:34%; }.chip-three { animation:bob-two 5.5s ease-in-out -2s infinite alternate; bottom:20%; left:-4%; }.chip-four { animation:bob-one 5.8s ease-in-out -1s infinite alternate; bottom:12%; right:-5%; }
.signup-panel { align-self:center; background:linear-gradient(145deg,rgba(244,240,233,.12),rgba(244,240,233,.035)); border:1px solid rgba(244,240,233,.27); box-shadow:18px 26px 60px rgba(0,0,0,.24); padding:clamp(21px,2.3vw,34px); position:relative; }.signup-panel::after { background:var(--warm); content:""; height:2px; left:-1px; position:absolute; top:-1px; width:31%; }.panel-topline { align-items:center; color:var(--soft); display:flex; font-family:"DM Mono",monospace; font-size:.55rem; justify-content:space-between; letter-spacing:.08em; text-transform:uppercase; }.panel-topline i { background:var(--warm); border-radius:50%; height:6px; width:6px; }.signup-panel h2 { font-family:"Playfair Display",Georgia,serif; font-size:clamp(1.75rem,2.6vw,2.5rem); font-weight:500; letter-spacing:-.045em; line-height:.95; margin:29px 0 12px; }.signup-panel > p:not(.consent):not(.form-message) { color:var(--soft); font-size:.78rem; line-height:1.65; margin:0 0 21px; }.signup-panel form { border-bottom:1px solid rgba(244,240,233,.55); display:flex; padding-bottom:8px; }.signup-panel input { background:transparent; border:0; color:var(--paper); font:500 .78rem Manrope,sans-serif; min-width:0; outline:0; padding:7px 0; width:100%; }.signup-panel input::placeholder { color:#b1aaa6; }.signup-panel button { align-items:center; background:transparent; border:0; color:var(--paper); cursor:pointer; display:flex; font:500 .67rem "DM Mono",monospace; gap:10px; letter-spacing:.07em; padding:0; text-transform:uppercase; }.signup-panel button b { background:var(--warm); color:#241411; display:grid; font:500 1.2rem Manrope,sans-serif; height:28px; place-items:center; transition:transform .2s; width:28px; }.signup-panel button:hover b { transform:translateX(3px); }.signup-panel button:disabled { opacity:.55; }.consent,.form-message { color:#a9a39f; font-size:.59rem; line-height:1.55; margin:12px 0 0; }.form-message { color:var(--pink); min-height:1em; }.form-message.is-success { color:#f5d7a5; }.honeypot,.sr-only { height:1px; margin:-1px; opacity:0; overflow:hidden; position:absolute; width:1px; }
.service-tape { align-items:stretch; border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:flex; margin:0 calc(clamp(24px,5vw,76px) * -1); min-height:54px; overflow:hidden; }.tape-label { align-items:center; background:var(--paper); color:var(--ink); display:flex; flex:0 0 auto; font-family:"DM Mono",monospace; font-size:.56rem; gap:12px; letter-spacing:.07em; padding:0 clamp(24px,5vw,76px); text-transform:uppercase; z-index:1; }.tape-label span { color:var(--warm); }.tape-window { align-items:center; display:flex; overflow:hidden; }.tape-track { align-items:center; animation:tape 68s linear infinite; display:flex; gap:28px; white-space:nowrap; width:max-content; }.tape-track span { color:#d0c9c4; font-family:"Playfair Display",Georgia,serif; font-size:1.05rem; font-style:italic; }.tape-track span::after { color:var(--warm); content:"✦"; font-family:Manrope,sans-serif; font-size:.48rem; margin-left:28px; vertical-align:middle; }
footer { align-items:center; color:#8e8884; display:flex; font-family:"DM Mono",monospace; font-size:.55rem; justify-content:space-between; letter-spacing:.07em; padding-top:17px; text-transform:uppercase; }footer p { margin:0; }.whatsapp { align-items:center; backdrop-filter:blur(12px); background:#25d366; border-radius:999px; bottom:17px; box-shadow:0 13px 35px rgba(0,0,0,.28); color:#082914; display:flex; font:700 .72rem Manrope,sans-serif; gap:7px; padding:10px 15px 10px 10px; position:fixed; right:18px; z-index:3; }.whatsapp svg { fill:currentColor; height:23px; width:23px; }
@keyframes float-one { to { transform:translate(-18vw,20vw) scale(.72); } }@keyframes float-two { to { transform:translate(18vw,-18vw) scale(1.15); } }@keyframes tilt-back { to { transform:rotate(-5deg) translateY(-8px); } }@keyframes tilt-mid { to { transform:rotate(5deg) translateY(9px); } }@keyframes tilt-front { to { transform:rotate(2deg) translateY(-6px); } }@keyframes bob-one { to { transform:translateY(-9px) rotate(1.5deg); } }@keyframes bob-two { to { transform:translateY(8px) rotate(-1.5deg); } }@keyframes tape { to { transform:translateX(-50%); } }
@media (max-width:930px) { .site { min-height:100svh; }.hero { grid-template-columns:1fr 1fr; }.gallery-stage { grid-column:2; grid-row:1 / span 2; }.signup-panel { grid-column:1; }.tape-label { padding:0 24px; } }
@media (max-width:650px) { .site { display:block; min-height:100svh; padding:16px 18px 17px; }.masthead { align-items:flex-start; }.logo-frame { height:90px; width:90px; }.logo-name { display:none; }.top-nav { flex-wrap:wrap; gap:8px 13px; justify-content:flex-end; max-width:210px; }.top-nav a { font-size:.55rem; }.hero { display:flex; flex-direction:column; gap:22px; padding:43px 0 27px; }.hero-copy { width:100%; }h1 { font-size:clamp(3.15rem,15vw,4.65rem); }.lede { font-size:.88rem; margin:20px 0; max-width:330px; }.gallery-stage { max-width:340px; order:2; }.service-chip { font-size:.46rem; padding:7px; }.signup-panel { order:3; padding:23px; width:100%; }.signup-panel h2 { font-size:2rem; margin-top:22px; }.service-tape { margin:0 -18px; }.tape-label { display:none; }.tape-window { min-height:47px; }.tape-track { animation-duration:45s; gap:19px; }.tape-track span { font-size:.92rem; }.tape-track span::after { margin-left:19px; }footer { font-size:.48rem; gap:12px; padding-top:14px; }.whatsapp { bottom:14px; padding:10px; right:14px; }.whatsapp span { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }