@font-face{font-family:'Morello';src:url(fonts/morello.otf) format('opentype');font-display:swap}
@font-face{font-family:'SFC West Lodge';src:url(fonts/sfc-west-lodge.otf) format('opentype');font-display:swap}
:root{--bg:#2b1d14;--fg:#f6efe2;--lime:#f6efe2;--card:rgba(246,239,226,.1);--muted:rgba(246,239,226,.72);--dark:#2b1d14;--ghost:rgba(246,239,226,.28);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html{background:#2b1d14}
body{margin:0;background:transparent;color:var(--fg);font-family:'SFC West Lodge',sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-synthesis:none;line-height:1.5;overflow-x:hidden}
h1,h2,h3,.big{font-family:'Morello',serif;text-transform:none;letter-spacing:0;line-height:1.05;margin:0;font-weight:400}
a{color:inherit;text-decoration:none}
nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 5vw 14px;background:rgba(20,10,6,.3);backdrop-filter:blur(8px)}
nav .logo{font-family:'Morello',serif;letter-spacing:0;font-size:1.4rem;color:var(--lime)}
nav .links{display:flex;gap:1.4rem;font-size:.85rem;text-transform:uppercase;}
nav .links a:hover{color:var(--lime)}
.pill{background:var(--lime);color:var(--bg);padding:.5rem 1rem;border-radius:99px;font-weight:400;font-size:.8rem;text-transform:uppercase;display:inline-block}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 5vw;position:relative}
.hero .big{font-size:clamp(5rem,22vw,18rem);color:var(--fg)}
.hero p{font-size:clamp(1rem,2.6vw,1.6rem);margin:1.2rem 0 0;color:var(--muted)}
.status{position:absolute;top:calc(90px + env(safe-area-inset-top,0px));left:5vw;font-size:.8rem;text-transform:uppercase;color:var(--muted)}
.status b{display:block;color:var(--fg);font-size:1.1rem}
.status b::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lime);margin-right:.5rem}
.marquee{overflow:hidden;white-space:nowrap;background:var(--lime);color:var(--bg);padding:.8rem 0}
.marquee span{display:inline-block;animation:slide 20s linear infinite;font-family:'SFC West Lodge',sans-serif;font-size:1.4rem}
@keyframes slide{to{transform:translateX(-50%)}}
section{padding:12vh 5vw}
.label{font-size:.8rem;text-transform:uppercase;color:var(--lime);margin-bottom:1rem}
.h2{font-size:clamp(2.5rem,8vw,6rem)}
.msg{max-width:900px}
.msg p{font-size:clamp(1.5rem,4vw,2.8rem);font-weight:400;line-height:1.2;margin:0}
.msg b{color:var(--lime)}
.sig{font-family:'Morello',serif;text-transform:none;letter-spacing:0;color:var(--lime);font-size:2.5rem;margin-top:1.5rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.panel{border-radius:24px;padding:2.5rem;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s}
.panel:hover{transform:translateY(-6px)}
.panel h3{font-size:clamp(2.6rem,7vw,5.5rem)}
.panel.a{background:var(--lime);color:var(--bg)}
.panel.b{background:rgba(246,239,226,.12);color:var(--fg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel ul{margin:1rem 0 0;padding-left:1.1rem}
.panel li{margin:.2rem 0}
.cases{display:flex;gap:1rem;overflow-x:auto;padding:2rem 0 1rem;scroll-snap-type:x mandatory}
.case{flex:0 0 min(78vw,340px);scroll-snap-align:start;background:var(--card);border-radius:20px;overflow:hidden;transition:.25s}
.case:hover{transform:translateY(-6px)}
.case .ph{aspect-ratio:4/3;background:linear-gradient(135deg,rgba(246,239,226,.22),rgba(246,239,226,.05))}
.case div.t{padding:1.2rem}
.case small{color:var(--lime);text-transform:uppercase;font-size:.7rem}
.case h3{font-size:1.5rem;margin:.4rem 0}
.case p{color:var(--muted);font-size:.9rem;margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2rem}
.stat{background:var(--card);border-radius:20px;padding:1.6rem;transition:.25s}
.stat .big{font-size:3.4rem;color:var(--lime)}
.stat p{margin:.5rem 0 0;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2rem;counter-reset:s}
.step{border-top:2px solid var(--lime);padding-top:1rem}
.step::before{counter-increment:s;content:"0" counter(s);font-family:'Morello',serif;letter-spacing:0;color:var(--lime);font-size:1.6rem}
.step h3{font-size:1.5rem;margin:.4rem 0}
.step p{color:var(--muted);margin:0}
.cta{background:var(--lime);color:var(--bg);border-radius:28px;margin:0 5vw;padding:6vh 6vw;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center}
.cta h2{font-size:clamp(2.5rem,7vw,5.5rem)}
.cta p{max-width:42ch}
.cta .pill{background:var(--dark);color:var(--fg);padding:.9rem 1.6rem}
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;margin-top:2rem}
.clients div{border:1px solid rgba(246,239,226,.3);border-radius:14px;padding:1.4rem;text-align:center;font-family:'SFC West Lodge',sans-serif;color:var(--muted)}
.quote{margin-top:2rem;font-size:clamp(1.2rem,3vw,1.8rem);max-width:800px}
.quote small{display:block;color:var(--muted);margin-top:.8rem;font-size:.85rem}
footer{padding:10vh 5vw 6vh;text-align:center}
footer .big{font-size:clamp(3rem,12vw,10rem);color:var(--lime)}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:2rem 0}
.social a{border:1px solid var(--lime);padding:.6rem 1.2rem;border-radius:99px;text-transform:uppercase;font-size:.8rem}
.social a:hover{background:var(--lime);color:var(--bg)}
footer small{color:var(--muted)}
@media(max-width:700px){.split{grid-template-columns:1fr}nav .links{display:none}}
#name{position:relative;cursor:default;--mx:50%;--my:50%;overflow:visible;padding:.35em .45em .6em;margin:-.35em -.45em -.6em}
#name::after{content:attr(data-text);position:absolute;inset:0;padding:.35em .45em .6em;box-sizing:border-box;overflow:visible;pointer-events:none;text-align:center;color:#fffaf0;
text-shadow:0 0 .06em rgba(255,244,220,.95),0 0 .16em rgba(255,226,170,.85),0 0 .38em rgba(255,200,130,.7),0 0 .8em rgba(255,170,100,.45);
-webkit-mask-image:radial-gradient(circle .95em at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
mask-image:radial-gradient(circle .95em at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
opacity:0;transition:opacity .6s ease}
#name.lit::after{opacity:1;transition-duration:.15s}
.cue{position:absolute;bottom:calc(4vh + env(safe-area-inset-bottom,0px));left:calc(50% - .5px);width:1px;height:56px;background:rgba(246,239,226,.3);overflow:hidden}
.cue i{display:block;width:100%;height:50%;background:var(--lime);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}}
.js .rv{opacity:0;transform:translateY(44px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.out-up{transform:translateY(-44px)}
.js .rv:not(.in){transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.cue i{animation:none}}
.phead{padding:18vh 5vw 8vh}
.back{display:inline-block;margin-bottom:3rem;color:var(--muted)}.back:hover{color:var(--lime)}
.teaser{display:block;border-top:1px solid rgba(246,239,226,.3);border-bottom:1px solid rgba(246,239,226,.3);padding:5vh 5vw;margin:0 -5vw;transition:background .4s,color .4s}
.trow{display:flex;justify-content:space-between;align-items:center;gap:2rem}
.arrow{flex:0 0 auto;width:clamp(56px,9vw,110px);height:clamp(56px,9vw,110px);border-radius:50%;background:var(--lime);color:var(--bg);display:grid;place-items:center;font-size:clamp(1.6rem,4vw,3rem);transition:transform .4s}
.teaser p{margin:1rem 0 0;color:var(--muted);max-width:44ch}
.teaser:hover{background:var(--lime);color:var(--bg)}.teaser:hover .label,.teaser:hover p{color:var(--bg)}
.teaser:hover .arrow{background:var(--bg);color:var(--lime);transform:translateX(10px)}
.vbg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#2b1d14}
.vbg video{width:100%;height:100%;object-fit:cover}
.vbg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,10,6,.28),rgba(20,10,6,.4))}
.case,.stat,.helmet{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.names{font-family:'Morello',serif;letter-spacing:0;text-transform:none;font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.3;margin:2rem 0 2.5rem;max-width:1100px}
.names span::after{content:" / ";opacity:.4}.names span:last-child::after{content:""}
.clmore{padding:.9rem 1.6rem}
.intro{color:var(--muted);margin:1.5rem 0 0}
.cl-gt{margin:6vh 0 1.2rem}
.cl-row{display:grid;grid-template-columns:1.2fr 1.8fr;gap:1.5rem;align-items:center;padding:2.4vh 5vw;margin:0 -5vw;border-top:1px solid rgba(246,239,226,.3);transition:background .35s,color .35s}
.cl-row h3{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.cl-row p{margin:0;color:var(--muted);transition:color .35s}
.cl-row:hover{background:var(--lime);color:var(--bg)}.cl-row:hover p{color:var(--bg)}
@media(max-width:700px){.cl-row{grid-template-columns:1fr;gap:.6rem}}
.feeds{display:flex;gap:1.6rem;overflow-x:auto;padding:2.8rem 5vw 3.2rem;margin:0 -5vw;scroll-snap-type:x proximity}
.fc{flex:0 0 clamp(190px,23vw,270px);margin:0;position:relative;background:var(--fg);color:var(--bg);border-radius:24px;padding:10px 10px 12px;box-shadow:0 16px 34px rgba(10,4,2,.4);scroll-snap-align:center;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),rotate .45s cubic-bezier(.2,.8,.3,1),translate .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s}
.fc:nth-child(odd){rotate:-2.5deg}.fc:nth-child(even){rotate:2deg;translate:0 16px}
.fc:hover{rotate:0deg;translate:0 -10px;box-shadow:0 26px 44px rgba(10,4,2,.5)}
.fc::before{content:"";position:absolute;top:-11px;left:50%;width:64px;height:22px;margin-left:-32px;background:rgba(222,199,165,.92);border-radius:3px;rotate:-4deg;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.fc img{display:block;width:100%;border-radius:16px}
.fc figcaption{font-family:'Morello',serif;letter-spacing:0;text-transform:none;text-align:center;font-size:1.35rem;padding-top:.65rem;line-height:1}
.fc figcaption i{font-style:normal;opacity:.5;font-size:.9rem}
.vtabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.8rem 0 .4rem}
.vt{font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--fg);background:transparent;border:1px solid rgba(246,239,226,.4);border-radius:99px;padding:.55rem 1.1rem;cursor:pointer;transition:background .25s,color .25s}
.vt.on,.vt:hover{background:var(--fg);color:var(--bg)}
.vrow{display:flex;gap:1.2rem;overflow-x:auto;padding:1.2rem 5vw 1.6rem;margin:0 -5vw;scroll-snap-type:x proximity}
.vrow[hidden]{display:none}
.vc{flex:0 0 clamp(230px,62vw,280px);margin:0;scroll-snap-align:start}
.vcard{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;padding:1.2rem;cursor:pointer;background:linear-gradient(160deg,rgba(246,239,226,.28),rgba(246,239,226,.05));border:1px solid rgba(246,239,226,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .4s,background .4s}
.vcard:hover{transform:translateY(-6px)}
.vtag{position:absolute;top:1rem;left:1rem;border:1px solid rgba(246,239,226,.45);border-radius:99px;padding:.25rem .75rem;font-size:.7rem}
.play{position:absolute;left:calc(50% - 32px);top:calc(46% - 32px);width:64px;height:64px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;padding-left:4px;font-size:1.1rem;transition:transform .4s}
.vcard:hover .play{transform:scale(1.12)}
.vname{font-family:'Morello',serif;letter-spacing:0;text-transform:none;font-weight:400;font-size:1.8rem;line-height:1}
.vcard small{color:var(--muted)}
.vcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.vopen{display:block;text-align:center;margin-top:.7rem;font-size:.75rem;color:var(--muted)}.vopen:hover{color:var(--fg)}
.vcard.f0{background-image:linear-gradient(rgba(14,6,3,0) 38%,rgba(14,6,3,.72)),url(img/clip-cover-0.jpg);background-size:cover;background-position:30% 20%}
.vcard.f1{background-image:linear-gradient(rgba(14,6,3,0) 38%,rgba(14,6,3,.72)),url(img/clip-cover-1.jpg);background-size:cover;background-position:70% 40%}
.vcard.f2{background-image:linear-gradient(rgba(14,6,3,0) 38%,rgba(14,6,3,.72)),url(img/clip-cover-2.jpg);background-size:cover;background-position:40% 70%}
.vcard.f3{background-image:linear-gradient(rgba(14,6,3,0) 38%,rgba(14,6,3,.72)),url(img/clip-cover-3.jpg);background-size:cover;background-position:60% 30%}
.vcard.f4{background-image:linear-gradient(rgba(14,6,3,0) 38%,rgba(14,6,3,.72)),url(img/clip-cover-4.jpg);background-size:cover;background-position:20% 60%}
.vcard.f5{background-image:linear-gradient(rgba(14,6,3,0) 38%,rgba(14,6,3,.72)),url(img/clip-cover-5.jpg);background-size:cover;background-position:80% 80%}
.vcard[class*=" f"]{background-color:#6a3a28;border-color:rgba(246,239,226,.45);filter:saturate(1.25)}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
@media(min-width:700px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.cgrid{grid-template-columns:repeat(5,1fr)}}
.cgrid .vc{flex:none;min-width:0}
.cgrid .vname{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.cgrid .play{width:54px;height:54px;left:calc(50% - 27px);top:calc(44% - 27px)}
.vcard:has(iframe){filter:none;backdrop-filter:none;-webkit-backdrop-filter:none;background-image:none}

.ab-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.polas{display:flex;flex-direction:column;padding:1.2rem 0 2rem}
.pola{margin:0;width:82%;position:relative;background:var(--fg);color:var(--bg);border-radius:3px;padding:14px 14px 0;box-shadow:0 18px 38px rgba(10,4,2,.45)}
.pola:nth-child(1){align-self:flex-start;rotate:-3deg}
.pola:nth-child(2){align-self:flex-end;rotate:2.5deg;margin-top:-1.2rem}
.pola::before{content:"";position:absolute;top:-11px;left:50%;width:64px;height:22px;margin-left:-32px;background:rgba(222,199,165,.92);border-radius:3px;rotate:-4deg;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.pola:nth-child(2)::before{rotate:5deg}
.pola img{display:block;width:100%;aspect-ratio:5/6;object-fit:cover;object-position:50% 25%;background:#3a281c}
.pola figcaption{font-family:'Morello',serif;letter-spacing:0;text-transform:none;text-align:center;font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1;min-height:clamp(78px,9vw,96px);display:grid;place-items:center;padding:.4rem 0 .2rem}
.js .pola.rv{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),rotate .45s cubic-bezier(.2,.8,.3,1),translate .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s}
.pola:hover{rotate:0deg!important;translate:0 -8px;box-shadow:0 28px 46px rgba(10,4,2,.5)}
.ab-text{background:rgba(20,10,6,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;padding:clamp(1.5rem,3.4vw,3rem)}
.ab-text p{text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.75;color:rgba(246,239,226,.92);margin:0 0 1.3rem;max-width:62ch}
.ab-lead,.ab-pull,.ab-sign{font-family:'Morello',serif;text-transform:none;letter-spacing:0;font-weight:400;color:var(--fg);margin:0}
.ab-text .ab-lead,.ab-text .ab-pull,.ab-text .ab-sign{text-transform:none;letter-spacing:0}
.ab-text .ab-lead{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;margin:0 0 1.6rem}
.ab-text .ab-pull{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;margin:2.4rem 0;max-width:22ch}
.ab-text .ab-sign{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;margin:2.2rem 0 0;max-width:none}
@media(max-width:800px){.ab-wrap{grid-template-columns:1fr}.pola{width:78%}}
@media (prefers-reduced-motion:reduce){.js .pola.rv,.pola{transition:none}}

.ct-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.ct-direct h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1.2rem}
.ct-direct p{text-transform:uppercase;letter-spacing:-.01em;color:rgba(246,239,226,.92);line-height:1.7;max-width:36ch;margin:0 0 1.8rem}
.ct-direct .pill{padding:1rem 1.8rem;font-size:.9rem}
.ct-addr{display:block;margin-top:1.2rem;color:var(--muted);text-transform:uppercase;letter-spacing:-.01em;word-break:break-all}
.ct-form{background:rgba(20,10,6,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;padding:clamp(1.5rem,3.4vw,2.8rem);display:grid;gap:1.2rem}
.ct-form label{display:grid;gap:.45rem;font-size:.8rem;color:var(--muted)}
.ct-form input,.ct-form select,.ct-form textarea{font:inherit;font-size:1rem;text-transform:uppercase;letter-spacing:-.01em;color:var(--fg);background:rgba(246,239,226,.08);border:1px solid rgba(246,239,226,.4);border-radius:14px;padding:.85rem 1rem;width:100%;color-scheme:dark}
.ct-form textarea{min-height:11rem;resize:vertical;line-height:1.6}
.ct-form select option{background:#2b1d14;color:#f6efe2}
.ct-form ::placeholder{color:rgba(246,239,226,.45)}
.ct-form input:focus-visible,.ct-form select:focus-visible,.ct-form textarea:focus-visible,.ct-form button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.ct-form button.pill{border:0;font:inherit;font-size:.9rem;text-transform:uppercase;padding:1rem 1.8rem;cursor:pointer;justify-self:start}
.ct-form button.pill:hover{background:#fff;}
.ct-note{margin:0;min-height:1.4em;text-transform:uppercase;letter-spacing:-.01em;color:var(--muted);font-size:.9rem;line-height:1.5}
@media(max-width:800px){.ct-wrap{grid-template-columns:1fr}.ct-row{grid-template-columns:1fr}}

.split.s3{grid-template-columns:repeat(3,1fr)}
.split.s3 .panel{min-height:380px}
.split.s3 .panel h3{font-size:clamp(2.2rem,3.6vw,3.2rem)}
.split.s3 .panel p{margin:0 0 .6rem}
@media(max-width:900px){.split.s3{grid-template-columns:1fr}.split.s3 .panel{min-height:0;gap:1.5rem}}
.sv-r p{margin:0}
.sv-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.sv-tags span{border:1px solid rgba(246,239,226,.4);border-radius:99px;padding:.3rem .85rem;font-size:.75rem;color:inherit;transition:border-color .35s}
.cl-row:hover .sv-tags span{border-color:rgba(43,29,20,.5)}
.sv-art{font-family:'Morello',serif;text-transform:none;letter-spacing:0;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;margin:0 0 2.5rem;max-width:18ch}
.sv-prin{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.sv-prin>div{border-top:2px solid var(--lime);padding-top:1rem}
.sv-prin h3{font-size:1.7rem;margin:0 0 .5rem}
.sv-prin p{margin:0;color:var(--muted)}
.sv-tools{margin-top:2.2rem;color:var(--muted)}

.stats{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}

.stat{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){.stat{padding:1.2rem}.stat .big{font-size:2.8rem}.stat p{font-size:.85rem}}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative;color:var(--fg);-webkit-tap-highlight-color:transparent}
.menu-btn span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s,top .35s}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:26px}
.menu-open .menu-btn span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:22px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:9;display:none;flex-direction:column;justify-content:space-between;padding:calc(96px + env(safe-area-inset-top,0px)) 5vw calc(32px + env(safe-area-inset-bottom,0px));background:rgba(20,10,6,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;overflow-y:auto}
.mmenu a.ml{display:block;padding:1rem 0;border-bottom:1px solid rgba(246,239,226,.25);font-size:clamp(1.8rem,9vw,2.8rem);line-height:1;opacity:0;transform:translateY(14px);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.mmenu a.ml:hover{color:var(--muted)}
.mmenu .pill{align-self:stretch;text-align:center;padding:1.1rem;font-size:.95rem;margin-top:2rem}
.menu-open .mmenu{opacity:1;visibility:visible}
.menu-open .mmenu a.ml{opacity:1;transform:none;transition-delay:calc(var(--i)*60ms + 80ms)}
.menu-open nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:700px){.menu-btn{display:block}nav>.pill{display:none}.mmenu{display:flex}}

.ba-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:center;margin-top:2rem}
.ba-copy .names{margin:0 0 1.6rem;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.ba-nums{display:grid;gap:1rem;margin-bottom:1.6rem}
.ba-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem 1rem;border-top:2px solid var(--lime);padding-top:.8rem}
.ba-num .big{font-size:clamp(2.6rem,6vw,4.4rem);color:var(--lime);line-height:1}
.ba-num .big i{font-style:normal;opacity:.55;font-size:.6em;padding:0 .15em}
.ba-num span{color:var(--muted)}
.ba-hint{color:var(--muted);margin:0;max-width:40ch}
.ba{position:relative;--p:50%;width:100%;max-width:400px;justify-self:center;aspect-ratio:800/1488;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(10,4,2,.45);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--fg);box-shadow:0 0 0 1px rgba(43,29,20,.35)}
.ba-knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:.85rem;letter-spacing:.1em;box-shadow:0 6px 18px rgba(10,4,2,.45);transition:transform .25s}
.ba:hover .ba-knob,.ba.drag .ba-knob{transform:scale(1.1)}
.ba:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.ba-tag{position:absolute;top:14px;z-index:2;background:var(--bg);color:var(--fg);border-radius:99px;padding:.3rem .85rem;font-size:.75rem;transition:opacity .25s;pointer-events:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
@media(max-width:800px){.ba-wrap{grid-template-columns:1fr}.ba-copy{order:2}}

/* ---------- reveal stagger uses a variable so hover effects aren't delayed ---------- */
.js .rv{transition-delay:var(--d,0s)}

/* ---------- stat cards: warm bloom around the card under the cursor ---------- */
.stat{position:relative;isolation:isolate}
.stat::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,214,160,.26),rgba(255,180,110,.08) 45%,transparent 70%)}
.js .stat.rv{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,translate .45s cubic-bezier(.2,.8,.3,1);transition-delay:var(--d,0s),var(--d,0s),0s,0s}
.js .stat.rv:not(.in){transition-delay:0s!important}
.stat:hover{translate:0 -4px;box-shadow:0 0 0 1px rgba(255,226,180,.42),0 0 26px 2px rgba(255,190,120,.32),0 0 70px 8px rgba(255,160,90,.16)}
.stat:hover::before{opacity:1}
.stat .big{transition:text-shadow .45s ease}
.stat:hover .big{text-shadow:0 0 .12em rgba(255,236,200,.75),0 0 .4em rgba(255,190,120,.45)}

/* ---------- circle cursor (mouse/trackpad only) ---------- */
.cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s}
.cur.on{opacity:1}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--fg);box-shadow:0 0 0 1px rgba(43,29,20,.35);transition:width .3s,height .3s,margin .3s,opacity .3s}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid rgba(246,239,226,.85);box-shadow:0 0 0 1px rgba(43,29,20,.18);display:grid;place-items:center;
  font-size:.6rem;letter-spacing:.06em;color:var(--bg);transition:width .35s cubic-bezier(.2,.8,.3,1),height .35s cubic-bezier(.2,.8,.3,1),margin .35s cubic-bezier(.2,.8,.3,1),background .35s,border-color .35s}
.cur-ring b{font-weight:400;opacity:0;transition:opacity .2s}
.cur.hov .cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(246,239,226,.22);border-color:rgba(246,239,226,.6)}
.cur.hov .cur-dot{opacity:0}
.cur.lbl .cur-ring{width:66px;height:66px;margin:-33px 0 0 -33px;background:var(--fg);border-color:var(--fg)}
.cur.lbl .cur-ring b{opacity:1}
.cur.lbl .cur-dot{opacity:0}
.cur.down .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
.cur.text{opacity:0}
html.has-cur,html.has-cur *{cursor:none!important}
html.has-cur input,html.has-cur textarea,html.has-cur select{cursor:text!important}
html.has-cur select{cursor:pointer!important}

/* ---------- clips carousel ---------- */
.reel{position:relative;margin:0 -5vw}
.rtrack{display:flex;gap:clamp(.6rem,2vw,1.4rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:4.5rem calc(50% - var(--cw)/2) 5.5rem;--cw:clamp(230px,68vw,300px);scrollbar-width:none;overscroll-behavior-x:contain}
.rtrack::-webkit-scrollbar{display:none}
.rtrack.dragging{scroll-snap-type:none;scroll-behavior:auto}
.rtrack .vc{flex:0 0 var(--cw);margin:0;scroll-snap-align:center;transform-origin:50% 100%;will-change:transform;transition:filter .4s}
.rtrack .vc:not(.act){filter:brightness(.72) saturate(.85)}
.rtrack .vc:not(.act) .vcard{cursor:pointer}
.rtrack .vcard{animation:dealIn .9s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(var(--k,0)*90ms + 150ms)}
@keyframes dealIn{from{transform:translateX(70vw) rotate(10deg);opacity:0}}
.rtrack .vc.act .vcard{box-shadow:0 0 0 1px rgba(255,226,180,.4),0 18px 40px rgba(10,4,2,.45),0 0 44px rgba(255,170,100,.16)}
.rtrack .vcard .play{transition:transform .4s,opacity .4s}
.rtrack .vc:not(.act) .play{opacity:0;transform:scale(.6)}
.rbar{margin-top:-1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.rnow{min-width:0;overflow:hidden}
.rnow small{display:block;color:var(--muted);font-size:.8rem;margin-bottom:.3rem}
.rname{font-family:'Morello',serif;text-transform:none;letter-spacing:0;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;display:block}
.rname.swap{animation:nameUp .55s cubic-bezier(.2,.75,.25,1)}
@keyframes nameUp{from{transform:translateY(60%);opacity:0}}
.rctl{display:flex;align-items:center;gap:.8rem}
.rcount{font-variant-numeric:tabular-nums;color:var(--muted);min-width:5.5ch;text-align:center}
.rbtn{width:54px;height:54px;border-radius:50%;border:1px solid rgba(246,239,226,.45);background:transparent;color:var(--fg);font:inherit;font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,transform .3s}
.rbtn:hover{background:var(--fg);color:var(--bg)}
.rbtn:active{transform:scale(.92)}
.rbtn:disabled{opacity:.3;pointer-events:none}
.rbtn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.rprog{height:2px;background:rgba(246,239,226,.2);border-radius:2px;margin-top:1.4rem;overflow:hidden}
.rprog i{display:block;height:100%;width:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.75,.25,1)}
@media (prefers-reduced-motion:reduce){.rtrack .vcard{animation:none}.rname.swap{animation:none}}
.rtrack{position:relative;user-select:none;-webkit-user-select:none}

/* ---------- intro: the signature writes itself, then the curtain lifts ---------- */
.loader{display:none}
.intro .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;position:fixed;inset:0;z-index:200;padding:0 6vw;
  background:linear-gradient(rgba(20,10,6,.28),rgba(20,10,6,.4)),#2b1d14 url(video/bg-poster.jpg) center/cover;cursor:default}
.intro:not(.intro-out) body{overflow:hidden}
.loader svg{width:min(80vw,720px);height:auto;overflow:visible;transition:transform 1s cubic-bezier(.77,0,.18,1),opacity .7s ease}
.loader path{fill:var(--fg);fill-opacity:0;stroke:var(--fg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:sigDraw var(--t) cubic-bezier(.45,.05,.45,1) var(--s) forwards,sigFill .55s ease calc(var(--s) + var(--t) - .2s) forwards}
@keyframes sigDraw{to{stroke-dashoffset:0}}
@keyframes sigFill{to{fill-opacity:1;stroke-opacity:0}}
.ld-cap{margin:0;font-size:clamp(.75rem,2.4vw,.95rem);color:var(--muted);letter-spacing:.08em;opacity:0;transform:translateY(8px);animation:capIn .8s ease 2.35s forwards}
@keyframes capIn{to{opacity:1;transform:none}}
.ld-skip{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));font-size:.7rem;color:rgba(246,239,226,.4);opacity:0;animation:capIn .6s ease 1.2s forwards}

/* exit: the whole screen wipes upward, the signature drifts up and the hero rises in underneath */
.intro-out .loader{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1);pointer-events:none}
.loader{clip-path:inset(0 0 0 0)}
.intro-out .loader svg{transform:translateY(-6vh) scale(.96);opacity:.4}
.intro-out .loader .ld-cap,.intro-out .loader .ld-skip{opacity:0;transition:opacity .3s}
.hero .big,.hero p{transition:opacity 1.1s ease .35s,transform 1.4s cubic-bezier(.2,.7,.2,1) .35s}
.intro:not(.intro-out) .hero .big{opacity:0;transform:translateY(28px) scale(.97)}
.intro:not(.intro-out) .hero p{opacity:0;transform:translateY(16px)}

@media (prefers-reduced-motion:reduce){
  .loader path{animation:none;fill-opacity:1;stroke-opacity:0}
  .ld-cap,.ld-skip{animation:none;opacity:1;transform:none}
  .intro-out .loader{clip-path:none;opacity:0;transition:opacity .5s}
  .hero .big,.hero p{transition:none}
}

/* ---------- "you are here" in the menu: a little glowing dot under the current page ---------- */
nav .links a{position:relative;transition:opacity .3s}
nav .links a::after{content:"";position:absolute;left:50%;bottom:-10px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--fg);
  box-shadow:0 0 6px rgba(255,226,180,.9),0 0 14px rgba(255,180,110,.6);opacity:0;transform:scale(0);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.4)}
nav .links a[aria-current]::after{opacity:1;transform:none}
nav .links a:not([aria-current]):hover::after{opacity:.45;transform:scale(.7)}
nav .links:has(a[aria-current]) a:not([aria-current]){opacity:.72}
nav .links:has(a[aria-current]) a:hover{opacity:1}
.mmenu a.ml{display:flex;align-items:center;gap:.9rem}
.mmenu a.ml::before{content:"";flex:0 0 auto;width:0;height:10px;border-radius:50%;background:var(--fg);box-shadow:0 0 8px rgba(255,226,180,.9),0 0 18px rgba(255,180,110,.55);transition:width .4s}
.mmenu a.ml[aria-current]::before{width:10px}
.mmenu:has(a[aria-current]) a.ml:not([aria-current]){color:var(--muted)}

/* ---------- 404: "left you on read" ---------- */
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16vh 5vw 8vh}
.nf-h{font-size:clamp(3.6rem,13vw,9rem)}
.dm{width:min(100%,380px);margin:2.6rem auto 0;display:flex;flex-direction:column;gap:.45rem;min-height:140px}
.dm-me{align-self:flex-end;max-width:85%;text-align:left;background:var(--fg);color:var(--bg);padding:.8rem 1.15rem;border-radius:22px 22px 6px 22px;font-size:.85rem;line-height:1.35;
  box-shadow:0 10px 26px rgba(10,4,2,.35);transform-origin:100% 100%;animation:dmPop .55s cubic-bezier(.2,.9,.3,1.35) .4s backwards}
.dm-seen{align-self:flex-end;font-size:.68rem;color:var(--muted);opacity:0;animation:dmFade .5s ease 1.5s forwards}
.dm-them{align-self:flex-start;display:flex;gap:5px;align-items:center;padding:.9rem 1.05rem;margin-top:.5rem;border-radius:22px 22px 22px 6px;background:rgba(246,239,226,.14);
  border:1px solid rgba(246,239,226,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform-origin:0 100%;opacity:0;animation:dmTyping 4.2s ease 2.3s infinite}
.dm-them i{width:7px;height:7px;border-radius:50%;background:var(--fg);opacity:.45;animation:dmDot 1.2s ease-in-out infinite}
.dm-them i:nth-child(2){animation-delay:.15s}.dm-them i:nth-child(3){animation-delay:.3s}
@keyframes dmPop{from{opacity:0;transform:scale(.6) translateY(10px)}}
@keyframes dmFade{to{opacity:1}}
@keyframes dmTyping{0%{opacity:0;transform:scale(.6)}10%,62%{opacity:1;transform:none}74%,100%{opacity:0;transform:scale(.6)}}
@keyframes dmDot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.nf-p{max-width:40ch;margin:1.6rem auto 0;color:var(--muted)}
.nf-go{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;justify-content:center;align-items:center;margin-top:2.2rem}
.nf-go .pill{padding:1rem 1.8rem;font-size:.9rem}
.nf-l{border-bottom:1px solid rgba(246,239,226,.4);padding-bottom:3px;font-size:.85rem;transition:border-color .3s}
.nf-l:hover{border-color:var(--fg)}
@media (prefers-reduced-motion:reduce){.dm-me,.dm-seen,.dm-them,.dm-them i{animation:none;opacity:1}}

/* ---------- marquee: two identical halves, so the loop restarts without a jump ---------- */
.marquee .mq{display:flex;width:max-content;animation:slide 40s linear infinite}
.marquee .mq span{animation:none;flex:none;white-space:pre}
@media (prefers-reduced-motion:reduce){.marquee .mq{animation:none}}

/* ---------- service cards: lift on hover again (uses `translate` so the scroll-in animation can't cancel it) ---------- */
.js .panel.rv{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease;transition-delay:var(--d,0s),var(--d,0s),0s,0s}
.js .panel.rv:not(.in){transition-delay:0s!important}
.panel:hover{transform:none;translate:0 -8px;box-shadow:0 22px 44px rgba(10,4,2,.35)}
.panel.b:hover{box-shadow:0 0 0 1px rgba(255,226,180,.35),0 22px 44px rgba(10,4,2,.35)}

/* ---------- keyboard focus: a soft cream ring, only when navigating by keyboard ---------- */
:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.cta :focus-visible,.panel.a:focus-visible,.teaser:hover:focus-visible{outline-color:var(--bg)}
.teaser:focus-visible{outline-offset:-6px}
.vcard:focus-visible,.ba:focus-visible{outline-offset:4px}
.skip{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:400;background:var(--fg);color:var(--bg);padding:.75rem 1.2rem;border-radius:99px;font-size:.8rem;
  transform:translateY(-200%);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.skip:focus{transform:none;outline-color:var(--bg);outline-offset:-5px}

/* ---------- page transitions: content fades and drifts, the menu and background stay put ---------- */
@view-transition{navigation:auto}
nav{view-transition-name:site-nav}
.vbg{view-transition-name:site-bg}
::view-transition-group(site-nav),::view-transition-group(site-bg){animation-duration:.3s}
::view-transition-old(root){animation:vtOut .35s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .6s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes vtOut{to{opacity:0;transform:translateY(-14px);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(22px);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- reading progress: a thin glowing line along the top ---------- */
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:12;pointer-events:none;opacity:0;transition:opacity .4s}
.sprog.on{opacity:1}
.sprog i{display:block;height:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 6px rgba(255,226,180,.85),0 0 14px rgba(255,180,110,.5)}
.menu-open .sprog{opacity:0}

/* ---------- copy email ---------- */
.copy-mail{position:relative;border-bottom:1px dashed rgba(246,239,226,.35);transition:border-color .3s,color .3s}
.copy-mail:hover{border-bottom-color:var(--fg)}
.copy-mail::after{content:"copy";margin-left:.6em;font-size:.65em;letter-spacing:.06em;padding:.15em .55em;border:1px solid rgba(246,239,226,.35);border-radius:99px;vertical-align:middle;opacity:.7;transition:opacity .3s,background .3s,color .3s}
.copy-mail:hover::after{opacity:1}
.copy-mail.copied::after{content:"copied ✓";background:var(--fg);color:var(--bg);border-color:var(--fg);opacity:1}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:350;display:flex;align-items:center;gap:.6rem;
  background:var(--fg);color:var(--bg);padding:.8rem 1.25rem;border-radius:99px;font-size:.8rem;box-shadow:0 14px 34px rgba(10,4,2,.45),0 0 30px rgba(255,190,120,.2);
  transform:translate(-50%,160%);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.25),opacity .3s;white-space:nowrap;max-width:calc(100vw - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1}
.tk{width:18px;height:18px;border-radius:50%;background:var(--bg);flex:none;position:relative}
.tk::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid var(--fg);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .3s}}
.ct-addr.copy-mail{display:block;width:fit-content;max-width:100%;word-break:normal;overflow-wrap:anywhere}

/* ---------- script (Morello) lettering in blue ---------- */
:root{--script:#B3EBF2}
:is(h1,h2,h3,.big,.sig,.names,.names span,.vname,.rname,.sv-art,.ab-lead,.ab-pull,.ab-sign,nav .logo){color:var(--script)!important}
.step::before{color:var(--script)}
.loader path{fill:var(--script);stroke:var(--script)}
/* on cream surfaces light blue disappears, so those stay dark brown */
:is(.cta,.panel.a) :is(h1,h2,h3,.big),.fc figcaption,.pola figcaption,.cl-row:hover h3,.teaser:hover h2{color:var(--bg)!important}
.cl-row h3,.teaser h2{transition:color .35s}
/* glows match the blue */
#name::after{color:#f2fdff;text-shadow:0 0 .06em rgba(235,252,255,.95),0 0 .16em rgba(179,235,242,.85),0 0 .38em rgba(140,215,230,.65),0 0 .8em rgba(110,195,215,.4)}
.stat:hover .big{text-shadow:0 0 .12em rgba(225,250,255,.7),0 0 .4em rgba(179,235,242,.45)}