/* Layout: a black manufactory. Photographs dissolve out of the black behind the type; one drifting band of finished sets; every section ends at the same button. */
:root{
--ink:#070707;--ink-2:#0E0E0E;--line:rgba(242,239,234,.12);--line-2:rgba(242,239,234,.28);
--white:#F2EFEA;--mute:#A39E97;--red:#C8102E;
--display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
--sans:"Jost","Futura","Century Gothic","Avenir Next",sans-serif;
color-scheme:dark}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:var(--white)}a:hover{color:#ffffff}
::selection{background:#C8102E;color:#F2EFEA}
.wrap{max-width:1400px;margin:0 auto;padding-left:max(20px,4.5vw);padding-right:max(20px,4.5vw);box-sizing:border-box}
.label{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,5.8vw,96px);line-height:.98;letter-spacing:-.02em;margin:0;text-wrap:balance}
.h2 em{font-style:italic;color:var(--mute)}
.body{font-size:17px;line-height:1.75;color:var(--mute);margin:0;max-width:31em;font-weight:400}
.cap-n,.note .nd,.step > span:last-child{font-weight:400}
.h2 em,h1 em{color:#8E8A84}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:56px;padding:0 34px;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;background:var(--white);color:#070707;border:1px solid var(--white);cursor:pointer;transition:background .5s ease,color .5s ease}
.btn:hover{background:transparent;color:var(--white)}
.btn-s{min-height:46px;padding:0 22px;font-size:10.5px}
.link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--white);border-bottom:1px solid var(--line-2);transition:border-color .5s ease,gap .5s ease}
.link:hover{border-bottom-color:var(--white);gap:20px;color:var(--white)}
.navlink{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--white);opacity:.75;transition:opacity .4s ease}
.navlink:hover{opacity:1;color:var(--white)}
.cap-t{font-family:var(--display);font-size:19px;line-height:1.2;color:var(--white)}
.cap-n{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);line-height:1.6}

/* header */
.top{position:sticky;top:0;z-index:50;height:88px;transition:background .5s ease,border-color .5s ease;border-bottom:1px solid transparent}
.top.solid{background:rgba(7,7,7,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(242,239,234,.08)}

/* photo that dissolves out of black */
.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%),linear-gradient(0deg,transparent 0%,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 46%),linear-gradient(0deg,transparent 0%,#000 30%);mask-composite:intersect}
.fade-r{-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 46%),linear-gradient(0deg,transparent 0%,#000 24%),linear-gradient(180deg,transparent 0%,#000 18%);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,transparent 0%,#000 46%),linear-gradient(0deg,transparent 0%,#000 24%),linear-gradient(180deg,transparent 0%,#000 18%);mask-composite:intersect}
.hero{position:relative;margin-top:-88px;min-height:clamp(740px,62vw,960px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-img{position:absolute;top:0;right:0;width:66%;height:100%;object-fit:cover;object-position:58% 35%;filter:brightness(.8) contrast(1.06) saturate(.92);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.1) translateX(-1.5%)}}
.rise{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.rise-2{animation:rise 1.4s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(22px)}to{transform:translateY(0)}}

/* drifting band with magnifier */
.drift{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;padding-block:96px 70px;margin-block:-60px -34px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.drift:active{cursor:grabbing}
.drift img{-webkit-user-drag:none;pointer-events:none}
.card{position:relative;z-index:1;margin:0;flex:0 0 auto;padding-right:30px;display:flex;flex-direction:column;gap:18px;cursor:zoom-in}
.card:hover{z-index:10}
.card .lens{position:relative;width:clamp(190px,17vw,240px);aspect-ratio:4/5;overflow:hidden;background:#0E0E0E;transform-origin:50% 50%;transition:transform .75s cubic-bezier(.2,.7,.2,1),box-shadow .75s ease}
.card:hover .lens{transform:scale(1.42);box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(242,239,234,.08)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:max(24px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:rgba(7,7,7,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:lbIn .45s ease both;cursor:zoom-out;touch-action:pan-y pinch-zoom}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{display:block;max-width:min(92vw,1100px);max-height:80vh;width:auto;height:auto;object-fit:contain;box-shadow:0 40px 120px rgba(0,0,0,.8);animation:lbImg .6s cubic-bezier(.2,.7,.2,1) both;cursor:default}
@keyframes lbImg{from{transform:scale(.96)}to{transform:scale(1)}}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(242,239,234,.3);background:rgba(7,7,7,.6);color:#F2EFEA;display:grid;place-items:center;cursor:pointer;transition:border-color .4s ease,background .4s ease}
.lb-btn:hover{border-color:#F2EFEA;background:rgba(242,239,234,.08)}
/* RS6 loupe */
.loupe{position:absolute;width:46%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:8;background-image:url(/img/fc3c7161e5fd6ae6ab9c26a967786477.jpg);background-repeat:no-repeat;background-size:652% auto;background-color:#070707;box-shadow:0 0 0 1px rgba(242,239,234,.55),0 0 0 6px rgba(7,7,7,.55),0 30px 80px rgba(0,0,0,.85);opacity:0;transform:translate(-50%,-50%) scale(.55);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.loupe.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card .lens img{display:block;width:100%;height:100%;object-fit:cover}
.card figcaption{transition:opacity .4s ease}
.card:hover figcaption{opacity:0}
.arrow{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--white);display:grid;place-items:center;cursor:pointer;transition:border-color .4s ease,background .4s ease}
.arrow:hover{border-color:var(--white);background:rgba(242,239,234,.06)}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.step{display:flex;flex-direction:column;gap:20px;min-width:0}
.step .ph{aspect-ratio:3/4;overflow:hidden;background:#0E0E0E}
.step .ph img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transition:filter .8s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.step:hover .ph img{filter:none;transform:scale(1.04)}

/* materials accordion */
.acc{display:flex;gap:10px;height:clamp(480px,44vw,640px)}
.pan{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#0E0E0E;transition:flex 1s cubic-bezier(.2,.7,.2,1)}
.pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;transform:scale(1.06);transition:filter 1s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.pan .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,7,.9) 0%,rgba(7,7,7,.55) 18%,rgba(7,7,7,0) 40%)}
.pan .short{position:absolute;left:50%;bottom:34px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--display);font-size:30px;white-space:nowrap;color:#F2EFEA;transition:opacity .5s ease}
.pan .full{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);min-width:300px}
.pan{cursor:pointer;outline:none}
.acc .pan.act{flex:4.2 1 0;cursor:default}
.acc .pan.act img{transform:scale(1)}
.acc .pan.act .short{opacity:0}
.acc .pan.act .full{opacity:1;transform:translateY(0);transition-delay:.25s}
.pan .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:8px}
.price{font-family:var(--sans);font-weight:400;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#F2EFEA}
.warr{font-family:var(--sans);font-weight:400;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#F2EFEA;padding:6px 10px;border:1px solid rgba(242,239,234,.4)}

/* currency switch */
.cur{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px}
.cur button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--mute);font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .4s ease,color .4s ease}
.cur button:hover{color:var(--white)}
.cur button.on{background:var(--white);color:#070707}
.textbtn{background:none;border:0;padding:0;cursor:pointer;color:#F2EFEA;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(242,239,234,.35)}
.textbtn:hover{text-decoration-color:#F2EFEA}
.flink{text-decoration:none;color:#F2EFEA;background:none;border:0;padding:0;cursor:pointer}
.flink:hover{color:#ffffff;text-decoration:underline;text-underline-offset:5px}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.upl{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#F2EFEA;border-bottom:1px solid var(--line-2);cursor:pointer;transition:border-color .4s ease}
.upl:hover{border-bottom-color:var(--white)}
.vh:focus-visible + .upl{outline:1px solid var(--white);outline-offset:5px}
.pan:focus-visible,.card:focus-visible,.note:focus-visible{outline:1px solid var(--white);outline-offset:4px}
/* warranty overlay */
.ov{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));background:rgba(7,7,7,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:lbIn .45s ease both}
.wbox{width:100%;max-width:660px;max-height:88vh;overflow:auto;box-sizing:border-box;background:#0E0E0E;border:1px solid var(--line);padding:clamp(26px,4vw,56px);display:flex;flex-direction:column;gap:30px}
.wrow{display:flex;flex-direction:column;gap:8px;padding-block:20px;border-top:1px solid var(--line)}

/* RS6 anatomy */
.mk{position:absolute;z-index:6;cursor:zoom-in;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1px solid #F2EFEA;background:rgba(7,7,7,.55);color:#F2EFEA;display:grid;place-items:center;font-family:var(--sans);font-size:11px;font-weight:500;transition:background .4s ease,transform .4s ease,border-color .4s ease}
.mk.on{background:#C8102E;border-color:#C8102E;transform:scale(1.25);opacity:0}
.note{display:flex;gap:18px;padding-block:22px;border-top:1px solid rgba(242,239,234,.12);cursor:default}
.note .nn{flex:0 0 30px;height:30px;border-radius:50%;border:1px solid rgba(242,239,234,.35);display:grid;place-items:center;font-size:11px;font-weight:500;transition:background .4s ease,border-color .4s ease}
.note.on .nn{background:#C8102E;border-color:#C8102E}
.note .nt{font-family:var(--display);font-size:23px;line-height:1.15;color:#F2EFEA}
.note .nd{font-size:14.5px;line-height:1.65;color:#A39E97}

/* form */
.field{display:flex;flex-direction:column;gap:12px;min-width:0}
.field label{font-family:var(--sans);font-weight:400;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{font-family:var(--display);font-size:20px;color:var(--white);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:8px 0 14px;border-radius:0;outline:none;width:100%;box-sizing:border-box;transition:border-color .4s ease}
.field textarea{resize:vertical;min-height:84px;line-height:1.45}
.field select{appearance:none;cursor:pointer}
.field option{background:#0E0E0E;color:#F2EFEA;font-family:var(--sans)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:#55524E}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--white);outline-offset:5px}

@media (max-width:980px){
.steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.step{flex:0 0 68%;scroll-snap-align:start}
}
@media (max-width:860px){
.nav-mid{display:none!important}
.hero{min-height:880px}
.hero-img{width:100%;height:64%;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 45%);mask-image:linear-gradient(0deg,transparent 0%,#000 45%)}
.studio-img{position:relative!important;width:100%!important;height:420px!important;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 40%)!important;mask-image:linear-gradient(0deg,transparent 0%,#000 40%)!important}
.studio-text{margin-left:0!important}
.acc{flex-direction:column;height:auto}
.pan{flex:none!important;height:200px;transition:height .8s cubic-bezier(.2,.7,.2,1)}
.pan.act{height:440px}
.pan .short{display:none}
.pan .full{opacity:1!important;transform:none!important;min-width:0;padding:22px}
.pan:not(.act) .full > span:not(:nth-child(2)){display:none}
.pan:not(.act) .full > span:nth-child(2){font-size:26px!important}
.card .lens{width:200px}
.card:hover .lens{transform:scale(1.15)}
.loupe{width:58%}
}
@media (prefers-reduced-motion:reduce){
.hero-img,.rise,.rise-2,.lb,.lb img,.ov{animation:none}
.card .lens,.pan,.pan img,.pan .full,.step .ph img,.loupe{transition:none}
}

[hidden]{display:none!important}
@media (max-width:560px){.top{height:72px}.hero{margin-top:-72px}.top .btn-s{min-height:40px;padding:0 14px;font-size:9.5px;letter-spacing:.2em;white-space:nowrap}.top a[href="#top"]{font-size:11px!important;letter-spacing:.24em!important;gap:9px!important}}