:root{
  --ink:#16181c; --ink2:#3a3f47; --mute:#6b7079;
  --red:#c62a36; --red-d:#9e1f2a; --red-t:#fbeaeb;
  --blue:#1f4fbf; --gold:#b08d57; --yellow:#fff1a6; --yellow-d:#e8cf55;
  --paper:#ffffff; --cream:#faf8f3; --rule:#e2ddd3;
  --serif:'Source Serif 4', Georgia, serif;
  --cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --wrap:1080px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ font-family:var(--serif); color:var(--ink); background:var(--cream); font-size:17px; line-height:1.6 }
a{ color:var(--blue) }
img{ max-width:100%; display:block }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px }
.cond{ font-family:var(--cond); letter-spacing:.14em; text-transform:uppercase }

/* header */
.top{ background:var(--ink); color:#fff }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:16px }
.brand{ color:#fff; text-decoration:none; font-family:var(--cond); font-weight:700; letter-spacing:.22em; font-size:16px; display:flex; align-items:center; gap:10px }
.brand i{ display:inline-block; width:10px; height:22px; background:var(--red) }
.nav{ display:flex; gap:20px; flex-wrap:wrap }
.nav a{ color:#d9d5cc; text-decoration:none; font-family:var(--cond); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:14px }
.nav a:hover{ color:#fff }

/* hero */
.hero{ padding:64px 0 48px; border-bottom:1px solid var(--rule) }
.kicker{ font-family:var(--cond); font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--red); font-size:15px }
h1{ font-weight:800; font-size:clamp(36px,6vw,60px); line-height:1.04; letter-spacing:-.02em; margin:12px 0 18px; max-width:800px }
h1 span{ color:var(--red) }
.lede{ font-size:20px; color:var(--ink2); max-width:640px }
.rule{ width:90px; height:3px; background:var(--gold); margin:26px 0 }

/* catalogue */
.section{ padding:56px 0 }
.sh{ font-weight:800; font-size:30px; letter-spacing:-.01em; padding-bottom:10px; border-bottom:3px solid var(--ink); position:relative; margin-bottom:28px }
.sh::after{ content:""; position:absolute; left:0; bottom:-3px; width:70px; height:3px; background:var(--red) }
.card{ display:grid; grid-template-columns:240px 1fr; gap:32px; background:#fff; border:1.5px solid var(--ink); padding:24px; text-decoration:none; color:inherit }
.card img{ border:1px solid var(--rule); box-shadow:4px 5px 0 rgba(22,24,28,.12) }
.card h3{ font-size:26px; line-height:1.15; margin:6px 0 10px }
.card p{ color:var(--ink2) }
.tag{ display:inline-block; font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding:2px 8px; background:var(--red); color:#fff }
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 }
.tags span{ font-family:var(--cond); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--ink); padding:2px 8px; background:var(--cream) }
.price{ font-family:var(--cond); font-weight:800; font-size:34px; color:var(--ink); line-height:1 }
.price small{ font-size:14px; font-weight:600; letter-spacing:.12em; color:var(--mute); margin-left:6px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; background:var(--red); color:#fff; border:0; cursor:pointer;
  font-family:var(--cond); font-weight:700; font-size:18px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; box-shadow:3px 3px 0 var(--ink) }
.btn:hover{ background:var(--red-d) }
.btn:focus-visible{ outline:3px solid var(--blue); outline-offset:3px }
.btn[disabled]{ opacity:.6; cursor:wait }
.row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:18px }

/* product */
.prod{ display:grid; grid-template-columns:1fr 360px; gap:44px; align-items:start }
.buybox{ background:#fff; border:1.5px solid var(--ink); padding:24px; position:sticky; top:20px }
.buybox .lab{ font-family:var(--cond); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:var(--mute) }
.buybox ul{ list-style:none; margin:18px 0; border-top:1px solid var(--rule) }
.buybox li{ padding:9px 0; border-bottom:1px solid var(--rule); font-size:15.5px; display:flex; gap:10px }
.buybox li::before{ content:""; flex:none; width:8px; height:8px; margin-top:9px; background:var(--red); transform:rotate(45deg) }
.buybox .btn{ width:100% }
.small{ font-size:14px; color:var(--mute); margin-top:12px }
.msg{ font-size:15px; margin-top:12px; color:var(--red-d); min-height:1em }
.inside{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:28px 0 }
.stat{ background:#fff; border:1.5px solid var(--ink); padding:16px 12px; text-align:center }
.stat b{ display:block; font-family:var(--cond); font-weight:800; font-size:38px; color:var(--red); line-height:1 }
.stat span{ font-size:14.5px; color:var(--ink2) }
.cases{ list-style:none; border-top:2px solid var(--ink); margin:12px 0 28px; background:#fff }
.cases li{ display:grid; grid-template-columns:44px 1fr; gap:6px; padding:11px 14px; border-bottom:1px solid var(--rule) }
.cases b{ font-family:var(--cond); font-weight:800; color:var(--red); font-size:19px }
.cases em{ display:block; font-family:var(--cond); font-style:normal; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.samples{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:12px 0 28px }
.samples figure{ background:#fff; border:1px solid var(--rule); padding:8px }
.samples figcaption{ font-family:var(--cond); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); text-align:center; padding-top:8px }
h2.sub{ font-size:24px; margin-top:34px }
.faq details{ background:#fff; border:1px solid var(--rule); border-left:3px solid var(--ink); padding:14px 18px; margin-bottom:10px }
.faq summary{ cursor:pointer; font-weight:700 }
.faq details p{ margin-top:8px; color:var(--ink2) }

/* policy pages */
.doc{ max-width:760px; background:#fff; border:1px solid var(--rule); padding:44px clamp(20px,5vw,56px); margin:48px auto }
.doc h1{ font-size:clamp(30px,5vw,42px); margin-top:6px }
.doc h2{ font-size:21px; margin:28px 0 8px }
.doc p, .doc li{ color:var(--ink2); margin-bottom:10px }
.doc ul, .doc ol{ padding-left:22px }
.doc .upd{ font-family:var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-size:14px }

/* footer */
.foot{ background:var(--ink); color:#bdb8ae; padding:36px 0 30px; margin-top:40px; font-size:15px }
.foot .wrap{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px }
.foot a{ color:#e8e4dc; text-decoration:none }
.foot a:hover{ text-decoration:underline }
.foot nav{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; font-family:var(--cond); letter-spacing:.12em; text-transform:uppercase; font-size:14px }
.foot .fine{ grid-column:1/-1; border-top:1px solid #33363c; padding-top:16px; font-size:13.5px; color:#8f8b83 }

@media (max-width:860px){
  .prod{ grid-template-columns:1fr }
  .buybox{ position:static }
  .card{ grid-template-columns:1fr }
  .card img{ max-width:220px }
  .inside{ grid-template-columns:repeat(2,1fr) }
  .samples{ grid-template-columns:1fr 1fr }
  .foot .wrap{ grid-template-columns:1fr }
  .nav{ gap:14px }
}
@media (max-width:520px){
  body{ font-size:16px }
  .samples{ grid-template-columns:1fr }
  .top .wrap{ flex-direction:column; align-items:flex-start; padding-top:12px; padding-bottom:12px }
}