:root {
  --blue: #2196f3;
  --blue-dark: #0f6fb8;
  --ink: #101214;
  --paper: #f3efe5;
  --paper-2: #e8e2d4;
  --cream: #fbf8ef;
  --red: #a7332c;
  --steel: #81878a;
  --muted: #5f625f;
  --line: #c8c1b2;
  --max: 1180px;
  --shadow: 0 14px 30px rgba(16,18,20,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(16,18,20,.025) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 5px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.topbar {
  background: var(--ink);
  color: #fff;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  padding: 8px 12px;
}

.site-header {
  border-bottom: 1px solid rgba(16,18,20,.2);
  background: rgba(243,239,229,.96);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.logo img { width: 174px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: .82rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.nav-links a:not(.btn):hover { color: var(--blue-dark); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: .16s ease;
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn.light { background: transparent; color: var(--ink); }
.btn.light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.blue { background: var(--blue); border-color: var(--blue); }
.btn.blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.hero {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-grid {
  min-height: 650px;
  display: grid;
  grid-template-columns: .96fr 1.04fr;
  align-items: stretch;
}
.hero-copy {
  padding: 96px 68px 88px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
}
.eyebrow::before { content:""; width: 30px; height: 3px; background: var(--blue); }
h1,h2,h3 { margin: 0; }
h1 {
  margin-top: 24px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: clamp(4rem, 7vw, 7.2rem);
  line-height: .89;
  letter-spacing: -.055em;
  max-width: 650px;
}
.hero-copy > p {
  margin: 28px 0 0;
  max-width: 590px;
  font-size: 1.1rem;
  color: #4f514f;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 24px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #73756f; }

.hero-visual {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 32px 18px;
}
.hero-art-card {
  width: min(640px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 22px 36px rgba(16,18,20,.2));
}
.hero-art-card img {
  width: 100%;
  max-height: 640px;
  object-fit: contain;
}

.section { padding: 92px 0; }
.section.dark { background: var(--ink); color: #fff; }
.section.blue-band { background: var(--blue); color: #fff; }
.section-title { max-width: 780px; }
.kicker { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; color: var(--blue-dark); margin-bottom: 14px; }
.dark .kicker, .blue-band .kicker { color: #fff; opacity: .76; }
h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.045em;
}
.section-title p { margin: 22px 0 0; color: var(--muted); font-size: 1.06rem; max-width: 680px; }
.dark .section-title p, .blue-band .section-title p { color: rgba(255,255,255,.74); }

.three-up { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:46px; }
.feature { background:var(--cream); padding:34px; min-height:260px; }
.feature .num { color:var(--blue); font-family:Georgia,serif; font-size:2.2rem; font-weight:900; }
.feature h3 { margin-top:48px; font-size:1.18rem; text-transform:uppercase; letter-spacing:.06em; }
.feature p { margin:12px 0 0; color:var(--muted); font-size:.95rem; }
.feature-dark { background:#17191a; }
.feature-dark p { color:rgba(255,255,255,.72); }

.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:74px; }
.product-block { background:var(--paper-2); border:1px solid var(--line); padding:20px; }
.product-block img { width:100%; filter:saturate(.84) contrast(1.02); }
.product-photo {
  background: #161819;
  padding: 16px;
}
.product-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.04);
}
.copy-block h2 { font-size:clamp(2.7rem,4.8vw,4.8rem); }
.copy-block p { color:var(--muted); font-size:1.05rem; margin:22px 0 0; }
.copy-block .btn { margin-top:28px; }

.wholesale-hero { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }
.wholesale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 42px;
  background: var(--line);
  border: 1px solid var(--line);
}
.wholesale-card {
  background: var(--cream);
  padding: 34px;
}
.wholesale-card h3 {
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wholesale-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .98rem;
  max-width: 520px;
}
.wholesale-grid-tight { margin-top: 34px; }
.contact-panel {
  margin-top: 28px;
  padding: 30px 34px;
  background: var(--ink);
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 30px;
  align-items: end;
}
.contact-panel h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.contact-panel p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.76);
  max-width: 640px;
}
.contact-actions {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.quote-band { padding:44px 0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.quote-band p { margin:0; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,3.2rem); font-weight:900; letter-spacing:-.025em; text-align:center; }

.cta-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:end; }
.cta-grid p { max-width:610px; color:rgba(255,255,255,.83); }
.cta-grid .actions { display:flex; justify-content:flex-end; }
.blue-band .btn { background:#fff; color:var(--ink); border-color:#fff; }
.blue-band .btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

.footer { background:#0b0c0d; color:#c7c4bc; padding:44px 0; }
.footer-grid { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.footer img { width:145px; filter:grayscale(1) brightness(3); opacity:.92; }
.footer p { margin:14px 0 0; font-size:.77rem; max-width:460px; color:#888982; }
.footer-links { display:flex; gap:22px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; font-size:.72rem; }
.footer-email {
  color: #f3efe5;
  text-decoration: underline;
  text-decoration-color: rgba(243,239,229,.35);
  text-underline-offset: 3px;
}

/* How it works */
.page-hero { padding:94px 0 70px; border-bottom:1px solid var(--line); }
.page-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:end; }
.page-hero h1 { max-width:820px; }
.page-hero p { color:var(--muted); font-size:1.08rem; max-width:600px; margin:24px 0 0; }
.page-hero-side { border-left:4px solid var(--blue); padding-left:25px; font-size:.93rem; color:#555852; }

.instruction-list { margin-top:50px; border-top:1px solid var(--line); }
.instruction-row { display:grid; grid-template-columns:100px 1fr .72fr; gap:32px; padding:42px 0; border-bottom:1px solid var(--line); align-items:center; }
.instruction-number { font-family:Georgia,serif; color:var(--blue); font-size:4.2rem; line-height:1; font-weight:900; }
.instruction-copy h3 { font-family:Georgia,serif; font-size:2rem; letter-spacing:-.03em; }
.instruction-copy p { margin:10px 0 0; color:var(--muted); max-width:620px; }
.instruction-tag { justify-self:end; text-transform:uppercase; font-size:.72rem; font-weight:900; letter-spacing:.12em; border:1px solid var(--line); padding:10px 13px; background:var(--cream); }

.warning-box { margin-top:34px; padding:22px 24px; background:#ece7db; border-left:4px solid var(--red); font-size:.9rem; color:#4e504d; }
.warning-box strong { color:var(--ink); }
.usage-note {
  margin-top:22px;
  padding:24px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.usage-note h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.usage-note p {
  margin: 12px 0 0;
  color: var(--muted);
  max-width: 760px;
}

.compatibility-wrap { margin-top:72px; border-top:1px solid var(--line); padding-top:40px; }
details.compatibility { border:1px solid #bdb6a9; background:#ebe6db; }
details.compatibility summary { cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
details.compatibility summary::-webkit-details-marker { display:none; }
details.compatibility summary::after { content:"+"; font-size:1.4rem; color:var(--blue-dark); }
details.compatibility[open] summary::after { content:"–"; }
.compatibility-body { padding:0 24px 28px; display:grid; grid-template-columns:1fr 1fr; gap:34px; color:#555852; }
.compatibility-body h3 { color:var(--ink); font-size:1.05rem; text-transform:uppercase; letter-spacing:.06em; }
.compatibility-body p { margin:10px 0 0; }
.rare-note { font-size:.82rem; color:#777970; margin-top:18px; }

.restrictor-card { margin:0 24px 24px; padding:30px; background:var(--ink); color:#fff; display:grid; grid-template-columns:1fr .9fr; gap:38px; align-items:center; }
.restrictor-card h3 { font-family:Georgia,serif; font-size:2.1rem; }
.restrictor-card p { color:rgba(255,255,255,.74); }
.restrictor-facts { display:grid; gap:10px; }
.fact { border-top:1px solid rgba(255,255,255,.19); padding-top:10px; text-transform:uppercase; font-weight:900; letter-spacing:.08em; font-size:.74rem; }

@media (max-width: 900px) {
  .nav-links a:not(.btn) { display:none; }
  .hero-grid, .split, .page-hero-grid, .cta-grid, .wholesale-grid, .contact-panel { grid-template-columns:1fr; }
  .hero-copy { padding-right:0; }
  .hero-visual { margin-left:-20px; margin-right:-20px; min-height:480px; padding: 28px 0 0; }
  .three-up { grid-template-columns:1fr; }
  .split { gap:38px; }
  .cta-grid .actions { justify-content:flex-start; }
  .contact-actions { justify-content:flex-start; }
  .instruction-row { grid-template-columns:70px 1fr; }
  .instruction-tag { grid-column:2; justify-self:start; }
  .compatibility-body, .restrictor-card { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .container { width:min(calc(100% - 24px),var(--max)); }
  .nav { min-height:68px; }
  .logo img { width:138px; }
  .nav-links { gap:10px; }
  .nav .btn { min-height:42px; padding:0 14px; font-size:.7rem; }
  .hero-copy { padding:68px 0 56px; }
  .hero-visual { padding:24px 0 0; min-height:390px; }
  h1 { font-size:clamp(3.5rem,18vw,5.3rem); }
  .section { padding:68px 0; }
  .feature { min-height:auto; }
  .footer-grid { flex-direction:column; align-items:flex-start; }
  .instruction-row { grid-template-columns:1fr; gap:12px; padding:32px 0; }
  .instruction-number { font-size:3rem; }
  .instruction-tag { grid-column:auto; }
}