:root{
  --ink:#1a1a1a; --panel:#242424; --panel-2:#2b2b2b; --line:#333333;
  --bone:#ece7dc; --mute:#9a968c; --gold:#c8a45a; --gold-hi:#e3c98a; --gold-lo:#8d7138;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{padding-inline:var(--gutter);max-width:1360px;margin-inline:auto}
.eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(38px,5.2vw,72px);line-height:1.02}
h2 em,h1 em{font-style:italic;color:var(--gold-hi)}
p{margin:0;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 28px;border:1px solid var(--gold);color:var(--ink);background:var(--gold);font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--gold-hi);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--bone);border-color:#4a4a44}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-hi);background:transparent}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* nav */
header{transition:background .35s,backdrop-filter .35s;position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);background:linear-gradient(#1a1a1acc,#1a1a1a00)}
header.solid{background:#1a1a1af2;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand b{font:400 22px/1 var(--serif);letter-spacing:.04em}
.brand span{font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--gold);text-transform:uppercase;display:block;margin-top:5px}
nav{display:flex;gap:34px;align-items:center}
nav a{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--bone);opacity:.82}
nav a:hover{opacity:1;color:var(--gold-hi)}
nav .btn{min-height:42px;padding:0 20px;font-size:11.5px;opacity:1;color:var(--ink)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:-2;animation:drift 22s ease-out both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1a1a1a99 0%,#1a1a1a33 30%,#1a1a1ae6 82%,#1a1a1a 100%),radial-gradient(70% 60% at 50% 40%,transparent,#1a1a1a99)}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero .wrap{width:100%;padding-block:0 clamp(48px,9vh,110px)}
.hero h1{font-size:clamp(54px,9.4vw,148px);line-height:.92;max-width:11ch;animation:rise 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
.hero .row{display:flex;flex-wrap:wrap;gap:28px 60px;align-items:flex-end;justify-content:space-between;margin-top:34px;animation:rise 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
.hero p.lede{max-width:46ch;font-size:19px;color:#d9d4c8}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (min-width:981px){
  .hero img.bg{left:auto;right:0;width:68%;object-position:50% 45%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
  .hero::after{background:linear-gradient(180deg,#1a1a1a80 0%,#1a1a1a00 28%,#1a1a1ab3 84%,#1a1a1a 100%)}
}
.hero .scroll{position:absolute;right:var(--gutter);top:50%;writing-mode:vertical-rl;font:500 10.5px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}

/* facts strip */
.strip{border-block:1px solid var(--line);background:var(--panel)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip div{padding:26px 24px;border-left:1px solid var(--line)}
.strip div:first-child{border-left:0;padding-left:0}
.strip b{display:block;font:400 30px/1.1 var(--serif);color:var(--gold-hi)}
.strip span{font:400 13px/1.4 var(--sans);color:var(--mute);letter-spacing:.04em}

section{padding-block:clamp(84px,12vw,170px)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px 80px;align-items:end;margin-bottom:clamp(44px,6vw,84px)}
.head>p{color:var(--mute);max-width:48ch;justify-self:end}

/* services */
.tiers{border-top:1px solid var(--line)}
.tier{display:grid;grid-template-columns:minmax(150px,.7fr) 1.5fr 1.1fr auto;gap:20px 48px;align-items:start;padding:44px 0;border-bottom:1px solid var(--line);transition:background .3s}
.tier:hover{background:linear-gradient(90deg,#c8a45a0d,transparent 60%)}
.tier .tag{font:500 11px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:10px}
.tier h3{font-size:clamp(30px,3.4vw,46px);line-height:1.05}
.tier ul{list-style:none;margin:0;padding:0;color:var(--mute);font-size:15.5px;line-height:1.5}
.tier li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px dashed #2e2e2e}
.tier li:last-child{border-bottom:0}
.tier li span:last-child{font:500 14px/1.5 var(--mono);color:var(--bone);white-space:nowrap}
.tier p.d{color:var(--mute);margin-top:14px;font-size:16px}
.tier .go{align-self:center;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--gold-hi);border-bottom:1px solid var(--gold-lo);padding-bottom:6px}
.note{margin-top:30px;color:var(--mute);font-size:14.5px;max-width:70ch}

/* signature */
.signature{background:var(--panel);position:relative;overflow:hidden}
.signature .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,120px);align-items:center}
.signature .ph{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.signature .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.signature .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#1a1a1acc)}
.signature .ph figcaption{position:absolute;left:22px;bottom:18px;z-index:2;font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.signature h2{margin:18px 0 26px}
.signature p{color:#c9c4b8}
.price-big{margin:36px 0;display:flex;align-items:baseline;gap:16px}
.price-big b{font:400 clamp(64px,8vw,110px)/1 var(--serif);color:var(--gold-hi)}
.price-big span{font:400 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:0 0 38px;padding:0;list-style:none;font-size:15px;color:#c9c4b8}
.checks li::before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold);margin-right:12px;vertical-align:middle}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:34px 32px 10px 0;border-right:1px solid var(--line);margin-right:32px}
.step:last-child{border-right:0;margin-right:0}
.step i{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--gold);font-style:normal}
.step h3{font-size:30px;margin:18px 0 12px}
.step p{color:var(--mute);font-size:15.5px}

/* work */
.work{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
.work figure{margin:0;position:relative;overflow:hidden;background:var(--panel);min-height:300px}
.work figure:first-child{grid-row:span 2}
.work img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.9)}
.work figure:hover img{transform:scale(1.04);filter:saturate(1.05)}
.work figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;background:linear-gradient(transparent,#1a1a1ae0);font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.work figcaption small{display:block;color:var(--gold);margin-bottom:4px;font-size:10px}

/* pickup */
.pickup{background:linear-gradient(180deg,var(--ink),#1f1f1f)}
.pickup .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.bands{border-top:1px solid var(--line)}
.bands div{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.bands span{color:var(--mute)}
.bands b{font:400 38px/1 var(--serif);color:var(--gold-hi)}

/* faq */
.faq{max-width:900px}
details{border-bottom:1px solid var(--line);padding:26px 0}
summary{cursor:pointer;font:400 clamp(24px,2.6vw,32px)/1.2 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 30px/1 var(--sans);color:var(--gold);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin-top:16px;max-width:64ch}

/* cta */
.final{text-align:center;border-top:1px solid var(--line);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 100%,#c8a45a22,transparent 70%)}
.final h2{font-size:clamp(46px,8vw,120px);max-width:12ch;margin:0 auto 26px}
.final p{color:var(--mute);max-width:50ch;margin:0 auto 38px}
.final .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.final .small{margin-top:34px;font:400 13px/1.8 var(--mono);color:var(--mute);letter-spacing:.08em}

footer{border-top:1px solid var(--line);padding:46px var(--gutter);display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;font-size:13.5px;color:var(--mute)}
footer nav{gap:24px;flex-wrap:wrap}
footer nav a{font:400 13px/1.4 var(--sans);letter-spacing:.04em;text-transform:none;opacity:.9}

@media (max-width:980px){
  nav a:not(.btn){display:none}
  .strip .wrap{grid-template-columns:1fr 1fr}.strip div:nth-child(3){border-left:0;padding-left:0}
  .head,.signature .wrap,.pickup .wrap{grid-template-columns:1fr}.head>p{justify-self:start}
  .tier{grid-template-columns:1fr;gap:12px}.tier .tag{padding-top:0}.tier .go{justify-self:start}
  .steps{grid-template-columns:1fr 1fr}.step{margin-right:0;padding-right:20px;border-bottom:1px solid var(--line);border-right:0;padding-bottom:30px}
  .work{grid-template-columns:1fr 1fr}.work figure:first-child{grid-row:auto;grid-column:span 2;min-height:360px}
  .hero .scroll{display:none}
}
@media (max-width:560px){
  .strip .wrap{grid-template-columns:1fr}.strip div{border-left:0;padding-left:0;border-top:1px solid var(--line)}.strip div:first-child{border-top:0}
  .steps,.checks{grid-template-columns:1fr}
  .work{grid-template-columns:1fr}.work figure:first-child{grid-column:auto}
  .brand span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== multi-page additions ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s ease both}
::view-transition-new(root){animation:vtIn .55s .05s cubic-bezier(.2,.7,.2,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

header{transition:background .35s,backdrop-filter .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
header.hide{transform:translateY(-100%)}
header nav a[aria-current="page"]{opacity:1;color:var(--gold-hi)}
header nav a:not(.btn){position:relative;padding-block:6px}
header nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
header nav a:not(.btn):hover::after,header nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:none;width:46px;height:46px;border:1px solid #3a3a35;background:transparent;color:var(--bone);cursor:pointer;position:relative}
.menu-btn i,.menu-btn i::before{position:absolute;left:13px;right:13px;height:1px;background:currentColor;transition:transform .35s,top .35s}
.menu-btn i{top:22px}.menu-btn i::before{content:"";left:0;right:0;top:-6px}
header.open .menu-btn i{transform:rotate(45deg)}header.open .menu-btn i::before{top:0;transform:rotate(90deg)}

.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#fff6dc66 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{transform:translateX(120%)}
.btn.ghost::after{display:none}
.arrow{display:inline-block;transition:transform .35s}
.btn:hover .arrow,.go:hover .arrow{transform:translateX(5px)}

/* hero upgrades */
.hero .bgwrap{position:absolute;inset:0;z-index:-2;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero img.bg{z-index:auto}
.hero .scroll{display:flex;flex-direction:column;align-items:center;gap:16px;writing-mode:horizontal-tb}
.hero .scroll span{writing-mode:vertical-rl}
.hero .scroll i{display:block;width:1px;height:64px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero h1{animation:none}
.hero .row{animation:rise 1.1s .9s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation:rise 1s .05s cubic-bezier(.2,.7,.2,1) both}

/* inner-page hero */
.phero{position:relative;padding:clamp(150px,22vh,230px) 0 clamp(56px,8vw,110px);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 85% 0%,#c8a45a1f,transparent 70%),radial-gradient(40% 60% at 0% 100%,#c8a45a0f,transparent 70%)}
.phero h1{font-size:clamp(52px,8vw,128px);line-height:.95;max-width:14ch;margin:22px 0 28px}
.phero p.lede{max-width:54ch;font-size:19px;color:#d9d4c8}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--panel);padding:26px 0}
.marquee .track{display:flex;width:max-content;animation:slide 48s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font:italic 400 clamp(26px,3.2vw,40px)/1 var(--serif);color:#cfc9bb;padding-inline:30px;display:flex;align-items:center;gap:60px;white-space:nowrap}
.marquee span::after{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}

/* scroll reveal: visible by default, animates only when script is running */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0s)}
.js .wipe img{transform:scale(1.2);transition:transform 1.8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .wipe.in{clip-path:inset(0)}
.js .wipe.in img{transform:scale(1)}
.js .draw::before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.7,0,.2,1)}
.js .draw.in::before{transform:scaleX(1)}

/* split headline: words rise from a mask */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block}
.js [data-split] .w>span{transform:translateY(112%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms + var(--base,0s))}
.js [data-split].in .w>span{transform:none}
.hero h1{--base:.15s}

/* service cards (home) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 32px 30px;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-6px);border-color:#3a3426;background:var(--panel-2)}
.card:hover::before{transform:scaleX(1)}
.card .tag{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.card h3{font-size:clamp(30px,3vw,40px);line-height:1.05}
.card p{color:var(--mute);font-size:16px;flex:1}
.card .from{font:400 13px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.card .from b{display:block;font:400 54px/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--gold-hi)}
.card .go{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);margin-top:6px}

/* steps line draw */
.steps{border-top:0;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold-lo)}

/* contact tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{display:flex;flex-direction:column;gap:10px;padding:34px 32px;border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s}
.tile:hover{transform:translateY(-6px);border-color:var(--gold-lo)}
.tile small{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tile b{font:400 clamp(26px,2.6vw,36px)/1.15 var(--serif);word-break:break-word}
.tile span{color:var(--mute);font-size:15px}
.ready{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.ready ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line);counter-reset:r}
.ready li{counter-increment:r;display:flex;gap:22px;padding:20px 0;border-bottom:1px solid var(--line);color:#d4cfc3}
.ready li::before{content:counter(r,decimal-leading-zero);font:500 12px/1.9 var(--mono);color:var(--gold);letter-spacing:.2em}

/* about */
.values{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.value{padding:44px 40px 44px 0;border-bottom:1px solid var(--line)}
.value:nth-child(odd){border-right:1px solid var(--line)}
.value:nth-child(even){padding-left:40px;padding-right:0}
.value h3{font-size:clamp(28px,3vw,40px);margin:16px 0 14px}
.value p{color:var(--mute);max-width:44ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split .ph{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);margin:0}
.split .ph img{width:100%;height:100%;object-fit:cover}
.split p{color:#c9c4b8}
.split p+p{margin-top:18px}

/* work gallery + lightbox */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,19vw,280px);gap:14px}
.gallery a{position:relative;display:block;overflow:hidden;background:var(--panel);cursor:zoom-in}
.gallery a:nth-child(1){grid-column:span 4;grid-row:span 2}
.gallery a:nth-child(n+2){grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gallery a:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;background:linear-gradient(transparent,#1a1a1ae6);font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);pointer-events:none}
.gallery small{display:block;color:var(--gold);margin-bottom:4px;font-size:10px}
.lb{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#141414f2;opacity:0;pointer-events:none;transition:opacity .4s}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:min(92vw,1400px);max-height:82vh;object-fit:contain;transform:scale(.96);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lb.on img{transform:none}
.lb p{position:absolute;left:0;right:0;bottom:26px;text-align:center;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.lb button{position:absolute;background:transparent;border:1px solid #3a3a35;color:var(--bone);width:52px;height:52px;font:300 26px/1 var(--sans);cursor:pointer}
.lb button:hover{border-color:var(--gold);color:var(--gold-hi)}
.lb .x{top:22px;right:22px}.lb .pv{left:22px;top:50%}.lb .nx{right:22px;top:50%}

details p{animation:fade .5s both}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}

footer{align-items:flex-start}
footer .cols{display:flex;gap:70px;flex-wrap:wrap}
footer h4{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
footer .cols nav{flex-direction:column;align-items:flex-start;gap:9px}
footer .brandblock b{font:400 26px/1 var(--serif);color:var(--bone)}
footer .brandblock p{margin-top:12px;max-width:34ch}
footer .fine{flex-basis:100%;border-top:1px solid var(--line);padding-top:22px;font-size:13px}

@media (max-width:980px){
  .menu-btn{display:block}
  header nav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;gap:26px;background:#1a1a1afa;opacity:0;pointer-events:none;transition:opacity .4s}
  header.open nav{opacity:1;pointer-events:auto}
  header nav a:not(.btn){display:block;font:400 34px/1 var(--serif);letter-spacing:0;text-transform:none}
  header nav a:not(.btn)::after{display:none}
  header.open{background:#1a1a1a;border-bottom:1px solid var(--line);backdrop-filter:none;transform:none}
  .cards,.tiles,.ready,.split,.values{grid-template-columns:1fr}
  .value,.value:nth-child(even){padding:34px 0;border-right:0}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(150px,38vw,260px)}
  .gallery a:nth-child(n){grid-column:span 1;grid-row:span 1}
  .gallery a:nth-child(1){grid-column:span 2;grid-row:span 2}
  .hero .scroll{display:none}
  .lb .pv,.lb .nx{top:auto;bottom:70px}
}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .wipe,.js .wipe img,.js [data-split] .w>span{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee .track{animation:none}
  .hero .bgwrap{transform:none!important}
}

/* ===== v3: honest copy + mobile polish ===== */
.opts{border-top:1px solid var(--line)}
.opt{padding:30px 0;border-bottom:1px solid var(--line)}
.opt small{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.opt h3{font-size:clamp(28px,3vw,38px);margin:12px 0 10px}
.opt p{color:var(--mute);max-width:46ch}
.opt .tagfee{display:inline-block;margin-left:12px;padding:5px 9px;border:1px solid var(--gold-lo);color:var(--gold-hi);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;vertical-align:middle}
.signature .ph{aspect-ratio:5/6}
.signature .ph img{object-position:66% 50%}
.split .ph{aspect-ratio:5/4}
.note a,.opt a{color:var(--gold-hi)}
.reqnote{margin-top:26px;padding:18px 22px;border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--panel);color:#cfc9bb;font-size:15.5px;max-width:62ch}

@media (max-width:980px){
  .hero{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding-top:72px!important}
  .hero::after{display:none}
  .hero .bgwrap{position:relative;inset:auto;height:clamp(200px,34svh,340px);z-index:0;margin-bottom:-36px;overflow:hidden}
  .hero .bgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1a1a1a00 40%,#1a1a1ad9 78%,#1a1a1a 94%)}
  .hero img.bg{position:absolute;inset:0;width:100%;height:100%;left:0;right:auto;-webkit-mask-image:none;mask-image:none;object-position:50% 42%}
  .hero .wrap{position:relative;z-index:1;padding-bottom:56px}
  .signature .ph,.split .ph{aspect-ratio:4/3}
  .signature .ph img{object-position:50% 50%}
  .work figure{min-height:0;aspect-ratio:4/3}
  .work figure:first-child{min-height:0;aspect-ratio:3/2}
  .gallery{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .gallery a:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/3}
}
@media (max-width:700px){
  section{padding-block:64px}
  .head{margin-bottom:34px;gap:20px}
  .phero{padding-top:128px;padding-bottom:48px}
  .eyebrow{letter-spacing:.14em;font-size:11px;line-height:1.5}
  .hero .eyebrow{margin-bottom:18px!important}
  .hero .row{flex-direction:column;align-items:stretch;gap:24px;margin-top:24px}
  .strip div{padding:20px 0}
  .tier{padding:30px 0}
  .step{padding:26px 0 26px;border-bottom:1px solid var(--line)}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%;justify-content:center}
  .final h2{max-width:none}
  .card,.tile{padding:28px 24px}
  .bands b{font-size:32px}
  summary{font-size:23px}
  footer{padding:40px var(--gutter);gap:32px}
  footer .cols{gap:36px}
  .lb img{max-width:96vw}
}

/* ===== featured job (case study) ===== */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:-20px 0 clamp(40px,5vw,64px)}
.chips span{padding:8px 14px;border:1px solid var(--gold-lo);color:var(--gold-hi);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.stage{display:grid;grid-template-columns:minmax(200px,.8fr) 3fr;gap:24px clamp(30px,4vw,60px);padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--line)}
.stage-h i{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--gold);font-style:normal}
.stage-h h3{font-size:clamp(32px,3.4vw,46px);margin:14px 0 12px}
.stage-h p{color:var(--mute);font-size:15.5px;max-width:30ch}
.stage-h small{display:block;margin-top:22px;font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sgrid+.sub{margin-top:26px}
.sub{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sgrid a{position:relative;display:block;overflow:hidden;background:var(--panel);cursor:zoom-in;aspect-ratio:4/3}
.sgrid.tall a{aspect-ratio:3/4}
.sgrid a.wide{grid-column:span 2}
.sgrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sgrid a:hover img{transform:scale(1.05)}
.sgrid span{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,#1a1a1ae0);font:500 10px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);pointer-events:none}
.signature .ph{aspect-ratio:4/5}
.signature .ph img{object-position:50% 55%}
@media (max-width:980px){
  .stage{grid-template-columns:1fr}
  .stage-h p{max-width:none}
  .sgrid{grid-template-columns:1fr 1fr}
  .signature .ph{aspect-ratio:4/5}
  .signature .ph img{object-position:50% 55%}
}

/* ===== meet your detailer + certification ===== */
.meet{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,110px);align-items:center}
.meet .ph{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);margin:0}
.meet .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.meet .ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;background:linear-gradient(transparent,#1a1a1ae6);font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.meet h2{margin:20px 0 28px}
.meet p{color:#cfc9bb}
.meet p+p{margin-top:18px}
.meet .sig{margin-top:30px;font:italic 400 34px/1 var(--serif);color:var(--gold-hi)}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.creds span{padding:9px 14px;border:1px solid var(--gold-lo);color:var(--gold-hi);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.badge{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border:1px solid var(--gold-lo);background:#c8a45a12}
.badge i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink);font:700 10px/1 var(--mono);letter-spacing:.04em;font-style:normal}
.badge b{display:block;font:400 18px/1.1 var(--serif);color:var(--bone)}
.badge small{display:block;margin-top:3px;font:500 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cert{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;margin-top:clamp(56px,7vw,100px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.cert a{display:block;border:1px solid var(--line);background:#fff;padding:10px;cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.cert a:hover{transform:translateY(-4px);box-shadow:0 18px 40px #00000066}
.cert a img{width:100%}
.cert h3{font-size:clamp(30px,3vw,42px);margin:16px 0 14px}
.cert p{color:var(--mute);max-width:44ch}
.cert p a{display:inline;border:0;background:none;padding:0;color:var(--gold-hi);cursor:pointer;box-shadow:none;transform:none}
.meet-mini{display:grid;grid-template-columns:auto 1fr auto;gap:28px 44px;align-items:center;padding:clamp(30px,4vw,48px);border:1px solid var(--line);background:var(--panel)}
.meet-mini img{width:clamp(110px,12vw,150px);aspect-ratio:1;object-fit:cover;object-position:50% 30%;border-radius:50%;border:1px solid var(--gold-lo)}
.meet-mini h3{font-size:clamp(30px,3vw,42px);margin:10px 0 10px}
.meet-mini p{color:var(--mute);max-width:54ch}
.tier .cred{display:inline-block;margin-top:12px;font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
footer .brandblock .badge{margin-top:16px}
@media (max-width:980px){
  .meet,.cert{grid-template-columns:1fr}
  .meet-mini{grid-template-columns:1fr;text-align:left}
}

/* ===== polishing clip in "Meet Kenny" ===== */
.meet .media{position:relative;margin-bottom:40px}
.meet .clip{position:absolute;right:-28px;bottom:-40px;width:44%;aspect-ratio:3/4;margin:0;overflow:hidden;border:1px solid var(--gold-lo);background:var(--panel);box-shadow:0 20px 50px #000000aa}
.meet .clip video{width:100%;height:100%;object-fit:cover;display:block}
.meet .clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;background:linear-gradient(transparent,#1a1a1ae6);font:500 9.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.meet .clip figcaption::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0463a;margin-right:7px;vertical-align:middle;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
@media (max-width:980px){.meet .clip{right:10px;bottom:-30px;width:42%}}
@media (prefers-reduced-motion:reduce){.meet .clip figcaption::before{animation:none}}

/* recent jobs: service list beside each vehicle */
.svc{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.svc li{font:500 11px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.svc li::before{content:"";display:inline-block;width:12px;height:1px;background:var(--gold);margin-right:10px;vertical-align:middle}
.svc li:first-child{color:var(--gold-hi)}
@media (max-width:980px){.svc{flex-direction:row;flex-wrap:wrap;gap:8px 18px}}

/* before & after pairs (owner-confirmed) */
.bagrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ba{margin:0;border:1px solid var(--line);background:var(--panel)}
.ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ba a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;cursor:zoom-in}
.ba img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ba a:hover img{transform:scale(1.05)}
.ba b{position:absolute;left:8px;top:8px;padding:5px 9px;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.ba b.before{background:#1a1a1acc;color:var(--bone);border:1px solid #3a3a35}
.ba b.after{background:var(--gold);color:var(--ink)}
.ba figcaption{padding:12px 14px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:700px){.bagrid{grid-template-columns:1fr}}

/* Detailing Success certificates */
.ds{display:grid;grid-template-columns:minmax(240px,.8fr) 2.2fr;gap:28px clamp(30px,5vw,80px);align-items:start;margin-top:clamp(48px,6vw,84px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.ds-h h3{font-size:clamp(30px,3vw,42px);margin:16px 0 14px}
.ds-h p:not(.eyebrow){color:var(--mute)}
.ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ds-grid a{position:relative;display:block;background:#fff;padding:6px 6px 0;border:1px solid var(--line);cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.ds-grid a:hover{transform:translateY(-4px);box-shadow:0 16px 36px #00000066}
.ds-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ds-grid span{display:block;margin:0 -6px;padding:10px 10px 11px;background:var(--panel);font:500 9.5px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);min-height:44px}
@media (max-width:980px){.ds{grid-template-columns:1fr}.ds-grid{grid-template-columns:repeat(2,1fr)}}

/* suit texture on the page background (panels stay solid for contrast) */
body{background-color:var(--ink);background-image:radial-gradient(120% 70% at 15% -10%,#ffffff12,transparent 55%),radial-gradient(90% 60% at 100% 110%,#c8a45a0d,transparent 60%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIyMC43ODQ2IiB2aWV3Qm94PSIwIDAgMTIgMjAuNzg0NiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJ1IiB4MT0iMCIgeTE9IjAiIHgyPSIwLjM1IiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDM1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cG9seWdvbiBwb2ludHM9IjAsMTAuMzkyMyA2LDAgMTIsMTAuMzkyMyIgZmlsbD0idXJsKCN1KSIvPjxwb2x5Z29uIHBvaW50cz0iLTYsMCA2LDAgMCwxMC4zOTIzIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuMTMiLz48cG9seWdvbiBwb2ludHM9IjYsMCAxOCwwIDEyLDEwLjM5MjMiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4xMyIvPjxwb2x5Z29uIHBvaW50cz0iLTYsMjAuNzg0NiAwLDEwLjM5MjMgNiwyMC43ODQ2IiBmaWxsPSJ1cmwoI3UpIi8+PHBvbHlnb24gcG9pbnRzPSI2LDIwLjc4NDYgMTIsMTAuMzkyMyAxOCwyMC43ODQ2IiBmaWxsPSJ1cmwoI3UpIi8+PHBvbHlnb24gcG9pbnRzPSIwLDEwLjM5MjMgMTIsMTAuMzkyMyA2LDIwLjc4NDYiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4xMyIvPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMiIgc3Ryb2tlLXdpZHRoPSIuNSI+PHBhdGggZD0iTTAgMEgxMk0wIDEwLjM5MjNIMTJNMCAxMC4zOTIzTDYgMEwxMiAxMC4zOTIzTS02IDBMMCAxMC4zOTIzTDYgMjAuNzg0Nk02IDIwLjc4NDZMMTIgMTAuMzkyM0wxOCAwTTAgMjAuNzg0Nkw2IDEwLjM5MjMiLz48L2c+PC9zdmc+");background-size:auto,auto,12px 20.785px;background-attachment:fixed,fixed,scroll}
.signature,.strip,.marquee,.card,.tile,.ba,.meet-mini{background-image:none}

/* training footage (About page, under the certificates) */
.training{margin-top:clamp(40px,5vw,64px)}
.training-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.training-grid>a,.tclip{position:relative;display:block;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.training-grid>a{cursor:zoom-in}
.training-grid img,.tclip video{width:100%;height:100%;object-fit:cover;display:block}
.training-grid>a img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.training-grid>a:hover img{transform:scale(1.05)}
.training-grid span,.tclip figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,#1a1a1ae6);font:500 10px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);pointer-events:none}
.tclip{border-color:var(--gold-lo)}
.tclip figcaption::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0463a;margin-right:7px;vertical-align:middle;animation:rec 1.6s ease-in-out infinite}
@media (max-width:980px){.training-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.tclip figcaption::before{animation:none}}