:root{
  color-scheme:light;
  --white:#ffffff; --tint:#f4f5f7; --tile:#eef0f2;
  --line:#e2e5e9; --line-2:#cfd3d9;
  --ink:#0f1216; --text:#4f5660; --muted:#8a9099;
  --red:#ae1311; --red-2:#c41714;
  --dark:#101317; --dark-2:#171b20; --dark-text:#b4bac2; --dark-line:#2a2f36;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:clamp(16px,4vw,72px);
  --nav:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{margin:0;background:var(--white);color:var(--text);font:400 1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{margin:0;color:var(--ink);font-weight:400;letter-spacing:-.025em;text-wrap:balance}
svg{flex:none}
.wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--gut)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* type helpers */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.eyebrow.rule::after{content:"";width:48px;height:1px;background:var(--line-2);transform-origin:left}
.split > span{display:block}
.split .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.split .ln > span{display:inline-block}
.accent{color:var(--red)}
.body{font-size:.98rem;color:var(--text);max-width:46ch}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;color:var(--red);text-decoration:none;padding-bottom:4px;border-bottom:1px solid currentColor}
.text-link svg{width:16px;height:16px;transition:transform .3s}
.text-link:hover svg{transform:translateX(4px)}
.text-link.light{color:#fff}

/* buttons: square, like the reference */
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 24px;font:500 .9rem/1 var(--font);text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn svg{width:16px;height:16px;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--red);border-color:var(--red)}
.btn.outline{background:transparent;color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:#fff}
.btn.sm{padding:11px 18px;font-size:.82rem}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:transform .4s}
.nav.hide{transform:translateY(-100%)}
.nav-in{height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:32px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a:not(.btn){font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{margin-left:12px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--ink);background:#fff;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:960px){
  .burger{display:flex}
  .nav-links{position:fixed;inset:calc(var(--nav) + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:8px var(--gut) 24px;border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line)}
  .nav-cta{margin:16px 0 0;justify-content:center}
  .brand img{height:26px}
}

/* hero: full screen, dark product photograph behind the copy */
.hero{position:relative;min-height:100svh;background:#07090b;color:#c9ced4;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav)}
.hero{background:#0b0d10}
.hero-img{position:absolute;inset:0;overflow:hidden}
/* photo anchored bottom-right and sized by width, so the drums never sit under the copy */
.hero-img img{position:absolute;right:0;bottom:0;width:min(78vw,187svh);height:auto;max-width:none;transform-origin:100% 100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 24%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 24%);mask-composite:intersect}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0d10 0%,rgba(11,13,16,.85) 22%,rgba(11,13,16,0) 48%),linear-gradient(180deg,#0b0d10 0%,#0b0d10 8%,rgba(11,13,16,0) 36%)}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,8vh,96px)}
.hero-copy{max-width:620px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero .eyebrow{color:#fff}
.hero h1{font-size:clamp(2.2rem,3.6vw,4.2rem);line-height:1.04;font-weight:400;letter-spacing:-.035em;color:#fff}
.hero .accent{color:#e0241f}
.lead{font-size:1.12rem;max-width:40ch;color:#c9ced4}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.hero .btn.solid{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn.solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.hero .btn.outline{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn.outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:12px;padding-left:18px;border-left:1px solid var(--red)}
.hero-tags li{font-size:.7rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#fff}
.hero-foot{position:absolute;right:var(--gut);bottom:28px;z-index:2;font-size:.66rem;color:#fff}
.hero-foot svg{width:28px;height:16px}
@media (max-width:760px){
  .hero{min-height:100svh;justify-content:flex-end}
  .hero-img img{inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;-webkit-mask-image:none;mask-image:none}
  .hero-img::after{background:linear-gradient(0deg,rgba(7,9,11,.95) 0%,rgba(7,9,11,.75) 45%,rgba(7,9,11,.1) 75%)}
  .hero-foot{display:none}
}

/* sections */
.sec{padding-block:clamp(72px,8vw,112px)}
.sec.white{background:var(--white)}
.sec.tint{background:var(--tint)}
.sec h2{font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.1}
.two{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.intro{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:8px}
@media (max-width:960px){.two{grid-template-columns:minmax(0,1fr)}}

/* consistency: batch cards */
.batches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.batch{background:var(--tint);padding:14px 14px 10px;display:flex;flex-direction:column}
.swatch{aspect-ratio:1/1;max-width:100%;margin:0 6px 20px;border-radius:3px;background:
  radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),
  linear-gradient(160deg,#c21a17 0%,#a31311 45%,#7d0d0b 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 24px -12px rgba(120,10,8,.55),0 2px 4px rgba(0,0,0,.12)}
.batch h3{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 6px 10px}
.batch dl{margin:0 6px}
.batch dl div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:.78rem}
.batch dt{color:var(--text)}
.batch dd{color:var(--ink);font-variant-numeric:tabular-nums}
.batch-note{grid-column:1 / -1;font-size:.78rem;color:var(--muted);margin-top:4px}
@media (max-width:1100px){.batches{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* products */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.sec-head > div{display:flex;flex-direction:column;gap:22px}
.side{max-width:34ch;font-size:.92rem;color:var(--muted)}
.ranges{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.range + .range{padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--line-2)}
.range-head{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--red);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.range-line{flex:1;height:1px;background:var(--line-2);transform-origin:left}
.range-head svg{width:18px;height:18px;transition:transform .3s}
.range-head:hover svg{transform:translateX(4px)}
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.thumb{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.thumb figure{aspect-ratio:4/5;background:var(--tile);overflow:hidden;max-width:100%}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.thumb:hover img{transform:scale(1.06)}
.thumb span{font-size:.84rem;line-height:1.3;color:var(--ink)}
@media (max-width:1100px){.ranges{grid-template-columns:1fr}.range + .range{padding-left:0;border-left:0}}
@media (max-width:640px){.thumbs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}}

/* process */
.process-wrap{align-items:center}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 6px}
.steps li + li::before{content:"";position:absolute;left:-7px;top:14px;width:8px;height:8px;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);transform:rotate(45deg)}
.ico{width:36px;height:36px;fill:none;stroke:var(--red);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.steps h3{font-size:.98rem;font-weight:500;margin-top:6px}
.steps p{font-size:.78rem;line-height:1.45;color:var(--muted)}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}.steps li:nth-child(4)::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:nth-child(odd)::before{display:none}.steps li:nth-child(4)::before{display:block}}

/* split band */
.band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.band-dark{position:relative;background:var(--dark);color:var(--dark-text);overflow:hidden;min-height:420px;display:flex;align-items:flex-end}
.band-img{position:absolute;inset:0}
.band-img img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;opacity:.55}
.band-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,19,23,.96) 0%,rgba(16,19,23,.7) 45%,rgba(16,19,23,.15) 100%)}
.band-copy{position:relative;z-index:2;padding:clamp(32px,4vw,56px) var(--gut);display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:520px}
.band-copy .eyebrow{color:#fff}
.band-copy h2{color:#fff;font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.12}
.band-copy p{font-size:.92rem}
.band-light{background:var(--tint);padding:clamp(40px,5vw,72px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,3vw,48px);align-items:center}
.lib-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.lib-copy .eyebrow{color:var(--red)}
.lib-copy h2{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.15}
.contact-line{font-size:.86rem;color:var(--muted)}
.contact-line span{color:var(--ink);font-weight:500;user-select:all}
.docs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.doc{grid-column:span 2;background:#fff;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:4px;min-height:112px;transition:border-color .3s,transform .3s}
.doc.wide{grid-column:span 3}
.doc:hover{border-color:var(--ink);transform:translateY(-3px)}
.doc svg{width:24px;height:24px;color:var(--ink);margin-bottom:auto}
.doc b{font-size:.84rem;font-weight:600;color:var(--ink);margin-top:14px}
.doc span{font-size:.72rem;color:var(--muted)}
@media (max-width:1100px){.band{grid-template-columns:1fr}.band-light{grid-template-columns:1fr}}
@media (max-width:520px){.docs{grid-template-columns:repeat(2,minmax(0,1fr))}.doc,.doc.wide{grid-column:span 1}}

/* footer */
.foot{background:var(--dark);color:var(--dark-text)}
.foot-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;padding-block:44px;border-bottom:1px solid var(--dark-line)}
.foot-logo{height:34px;width:auto;filter:brightness(0) invert(1)}
.foot-tag{font-size:.8rem;max-width:32ch;padding-left:32px;border-left:1px solid var(--dark-line)}
.foot-links{display:flex;flex-wrap:wrap;gap:28px}
.foot-links a{font-size:.8rem;text-decoration:none;color:#e6e9ec}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px;font-size:.74rem;color:#7d848d}
@media (max-width:900px){.foot-top{grid-template-columns:1fr}.foot-tag{padding-left:0;border-left:0}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}