/* Home page. The filter bar and the stats box are gone: six products do not
   need filtering, and the numbers read better inside the sentences that use
   them. What replaces them is a picture of the thing being sold. */

/* ---------- hero ---------- */
.hero{position:relative;background:#0C1211;overflow:hidden}
.hero>img{width:100%;height:clamp(330px,52vh,520px);object-fit:cover;
  object-position:50% 58%;display:block}
.hero-in{position:absolute;inset:0;display:flex;align-items:center;
  /* dark on the reading side only, so the boot stays visible */
  background:linear-gradient(to left,rgba(8,13,12,.86) 0%,rgba(8,13,12,.72) 38%,rgba(8,13,12,.12) 72%,transparent 100%)}
.hero-kick{font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.17em;color:#8FD3DA;margin-bottom:11px}
.hero h1{color:#fff;font-size:clamp(29px,4.6vw,52px);font-weight:800;
  letter-spacing:-.025em;line-height:1.08}
.hero-sub{color:#D4DEDD;font-size:clamp(15px,1.7vw,18px);margin-top:13px;max-width:34ch}
.hero-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn-onimg{background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(3px)}
.btn-onimg:hover{background:rgba(255,255,255,.2)}

/* ---------- promises ---------- */
.promises{background:var(--surface);border-bottom:1px solid var(--line)}
.promises-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding-block:0}
.promise{display:flex;gap:11px;align-items:flex-start;padding:17px 18px;
  border-inline-start:1px solid var(--line);min-width:0}
.promise:first-child{border-inline-start:0}
.promise svg{width:23px;height:23px;flex:0 0 auto;color:var(--accent);margin-top:2px}
.promise b{display:block;font-family:var(--display);font-size:14px;font-weight:700;
  line-height:1.3}
.promise span{display:block;font-size:13px;color:var(--ink-faint);margin-top:2px}

/* ---------- section headings ---------- */
.sec-intro{padding-block:32px 20px;max-width:58ch}
.sec-intro h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;letter-spacing:-.022em;
  margin-top:7px}
.sec-intro p{color:var(--ink-soft);margin-top:9px;font-size:16px}

.range{padding-bottom:10px}
.range-foot{padding-block:4px 46px;color:var(--ink-soft);font-size:15px}
.range-foot a{color:var(--accent-ink)}

/* ---------- details ---------- */
.details{background:var(--surface);border-block:1px solid var(--line)}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-bottom:46px}
.detail-grid figure{margin:0;min-width:0}
.detail-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line)}
.detail-grid figcaption{padding-top:11px;font-size:14px;color:var(--ink-soft);
  line-height:1.5}
.detail-grid figcaption b{display:block;font-family:var(--display);font-size:15.5px;
  font-weight:700;color:var(--ink);margin-bottom:3px}

/* ---------- wholesale strip ---------- */
.bulkstrip{background:var(--accent-soft)}
.bulkstrip-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding-block:26px}
.bulkstrip-in>div{flex:1 1 300px;min-width:0}
.bulkstrip h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--accent-ink)}
.bulkstrip p{color:var(--accent-ink);opacity:.85;margin-top:5px;font-size:15px}

@media (max-width:900px){
  .promises-in{grid-template-columns:1fr 1fr}
  .promise{border-top:1px solid var(--line)}
  .promise:nth-child(-n+2){border-top:0}
  .promise:nth-child(odd){border-inline-start:0}
  .detail-grid{grid-template-columns:1fr 1fr}
  .detail-grid figure:last-child{grid-column:1/-1}
  .detail-grid figure:last-child img{aspect-ratio:21/9}
}
@media (max-width:620px){
  .hero>img{height:clamp(300px,58vh,420px);object-position:58% 58%}
  .hero-in{background:linear-gradient(to top,rgba(8,13,12,.93) 34%,rgba(8,13,12,.6) 62%,rgba(8,13,12,.25) 100%);
    align-items:flex-end;padding-bottom:22px}
  .hero-sub{max-width:100%}
  .hero-act .btn{flex:1 1 auto}
  .promises-in{grid-template-columns:1fr}
  .promise{border-inline-start:0;border-top:1px solid var(--line);padding:14px 2px}
  .promise:first-child{border-top:0}
  .detail-grid{grid-template-columns:1fr;gap:20px}
  .detail-grid figure:last-child img{aspect-ratio:4/3}
}

/* ---------- statement band ----------
   The page runs light grey from the hero to the footer, and that evenness
   is what made it feel empty. One near-black band, one line of large type,
   placed between the range and the detail shots so the eye gets a break
   before the close-ups. */
.statement{background:#0E1413;color:#fff;position:relative;overflow:hidden}
.statement .wrap{padding-block:clamp(44px,7vw,78px);position:relative;z-index:1}
.statement p{font-family:var(--display);font-weight:800;
  font-size:clamp(28px,5.2vw,58px);line-height:1.06;letter-spacing:-.03em;
  max-width:16ch}
.statement em{font-style:normal;color:#64B4BC}
.statement span{display:block;margin-top:16px;color:#9DAEAC;font-size:clamp(15px,1.8vw,18px);
  max-width:40ch}
/* the brand mark, very faint, bleeding off the inline-end edge */
.statement::after{content:"";position:absolute;inset-block:-18%;
  inset-inline-end:-6%;width:min(46%,430px);
  background:url("../assets/brand/vulcan-mark.svg") no-repeat center/contain;
  opacity:.07;pointer-events:none}

/* ---------- details, now on dark ---------- */
.details{background:#141B1A;border-block:0;color:#E8EDEC}
.details .sec-intro h2{color:#fff}
.details .sec-intro p{color:#A3B0AE}
.details .eyebrow{color:#64B4BC}
.detail-grid img{border-color:#2A3634;background:#1E2928}
.detail-grid figcaption{color:#A3B0AE}
.detail-grid figcaption b{color:#fff}

/* a touch more weight on the section headings throughout */
.sec-intro h2{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.028em}

/* ---------- premium line ---------- */
.premium{background:var(--surface);border-block:1px solid var(--line)}
.prem-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding-bottom:28px;list-style:none;margin:0;padding-inline:0}
.prem-list li{min-width:0;padding-top:16px;border-top:2px solid var(--ink)}
.prem-list b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;color:var(--accent-ink);
  line-height:1}
.prem-list h3{font-size:16px;font-weight:700;margin-top:9px}
.prem-list p{font-size:14px;color:var(--ink-soft);margin-top:5px;line-height:1.55}

.prem-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:46px}
.prem-pair a{display:flex;flex-direction:column;gap:3px;text-decoration:none;
  background:var(--ink);color:var(--bg);padding:16px 20px;border-radius:var(--r);
  min-width:0}
.prem-pair a:hover{background:var(--accent-deep);color:#fff}
.prem-pair span{font-family:var(--display);font-weight:800;font-size:21px}
.prem-pair em{font-style:normal;font-size:13.5px;opacity:.75}

@media (max-width:860px){
  .prem-list{grid-template-columns:1fr;gap:0}
  .prem-list li{padding-block:14px;border-top-width:1px}
  .prem-list li:first-child{border-top-width:2px}
}
@media (max-width:560px){ .prem-pair{grid-template-columns:1fr} }