/* CNTRL P brand site. Black / white / lime. Plain CSS, no custom properties (avoids double-hyphen tokens). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Abel", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  color: #eaecf2;
  background: #000000;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: #eaecf2; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ===== Scroll progress bar ===== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg,#2a6bff,#ff3b46); z-index: 200; transition: width .08s linear; }

/* ===== Scroll-reveal system ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.965) translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal-scale.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; } .d5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .spool, .spool-img, .marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5,5,6,0.72);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 32px; width: auto; display: block; }
.brand-stack { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.byline { font-family: "Orbitron", "Abel", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: #8c93a4; margin-top: 6px; text-align: center; }
.brand:hover .byline { color: #c4cad6; }

.nav { display: flex; align-items: center; }
.nav a { color: #aab3c5; margin-left: 26px; font-size: 14.5px; font-weight: 500; transition: color .15s ease; }
.nav a:hover { color: #fff; }
.nav .cta { background: #fff; color: #000000; padding: 9px 17px; border-radius: 999px; font-weight: 700; transition: background .15s ease, color .15s ease; }
.nav .cta:hover { background: linear-gradient(135deg,#2a6bff,#4f9bff); color: #fff; }
@media (max-width: 820px) {
  .nav a { margin-left: 15px; font-size: 13px; }
  .nav a:not(.cta) { display: none; }
}

/* ===== Buttons ===== */
.btn-row { margin-top: 34px; display: flex; gap: 13px; flex-wrap: wrap; }
.center .btn-row { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em;
  transition: transform .14s ease, box-shadow .18s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg,#2a6bff,#4f9bff); color: #fff; box-shadow: 0 8px 26px rgba(63,139,255,0.30); }
.btn-primary:hover { box-shadow: 0 12px 34px rgba(63,139,255,0.32); }
.btn-secondary { background: rgba(255,255,255,0.06); color: #eef2f8; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.btn-secondary:hover { background: rgba(255,255,255,0.12); }

.eyebrow { text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; font-weight: 750; color: #3f8bff; }

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1100px 560px at 78% -8%, #0e1c40 0%, #060a16 52%, #000000 100%);
  padding: 92px 0 88px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(820px 520px at 76% 4%, #000 0%, transparent 76%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: 66px; line-height: 1.0; letter-spacing: -0.04em; font-weight: 850; margin-top: 18px; color: #f6f8fc; }
.hero h1 .accent { background: linear-gradient(120deg,#6aa3ff,#2f6bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .lede { font-size: 19px; color: #a2a9b8; margin-top: 22px; max-width: 460px; }
.hero-tags { display: flex; gap: 9px; margin-top: 26px; flex-wrap: wrap; }
.tag { font-size: 12.5px; font-weight: 600; color: #cfd4de; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); padding: 7px 13px; border-radius: 999px; }
.tag b { color: #3f8bff; }

/* Hero spool visual */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.hero-stage { display: flex; align-items: center; justify-content: center; width: 100%; padding: 34px 30px;
  border-radius: 26px; border: 1px solid rgba(255,255,255,0.07);
  background: radial-gradient(115% 80% at 50% 22%, #38465f 0%, #1a2230 48%, #0a0e16 100%); }
.hero-visual .glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(63,139,255,0.10), transparent 62%); filter: blur(6px); }
.spool { width: 100%; max-width: 420px; animation: spin 26s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.spool-img { width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 26px 44px rgba(0,0,0,0.7)); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.spool-tag { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: #8b91a0; background: rgba(8,8,10,0.7); border: 1px solid rgba(255,255,255,0.1); padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(4px); }

/* ===== Sections ===== */
section.block { padding: 96px 0; }
section.block.alt { background: #0a0a0d; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
section.tight { padding: 70px 0; }
.center { text-align: center; }
h2.section-title { font-size: 40px; letter-spacing: -0.03em; font-weight: 820; margin-bottom: 14px; color: #f6f8fc; text-align: center; }
p.section-sub { color: #8b91a0; font-size: 18px; max-width: 640px; margin: 0 auto 46px; text-align: center; }
.center p.section-sub { margin-left: auto; margin-right: auto; }

/* ===== Big statement line ===== */
.statement { padding: 110px 0; text-align: center; background: radial-gradient(900px 420px at 50% 130%, #0e1c40 0%, #03050c 60%, #000000 100%); }
.statement h2 { font-size: clamp(34px, 6vw, 78px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 850; color: #f6f8fc; }
.statement h2 .lime { background: linear-gradient(120deg,#4f9bff,#ff4d57); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.statement h2 .dim { color: #4a4f5c; }
.statement p { color: #8b91a0; font-size: 19px; margin-top: 22px; }

/* ===== Marquee ===== */
.marquee { overflow: hidden; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); background: #08080a; }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 28s linear infinite; }
.marquee-track span { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #1c1d22; margin: 0 26px; }
.marquee-track span b { color: #3f8bff; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== Sticky scroll story ===== */
.story .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.story-sticky { position: sticky; top: 110px; }
.story-sticky .eyebrow { margin-bottom: 16px; display: block; }
.story-sticky h2 { font-size: 44px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 850; color: #f6f8fc; }
.story-steps { display: flex; flex-direction: column; gap: 18px; }
.story-step { border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 30px 30px; background: linear-gradient(180deg,#101013,#0b0b0d); }
.story-step .n { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: #3f8bff; }
.story-step h3 { font-size: 23px; letter-spacing: -0.02em; margin: 10px 0 8px; color: #f6f8fc; }
.story-step p { color: #8b91a0; font-size: 16px; }
@media (max-width: 900px) { .story .wrap { grid-template-columns: 1fr; gap: 30px; } .story-sticky { position: static; } }

/* ===== Cards (generic) ===== */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 30px;
  background: linear-gradient(180deg,#101013,#0a0a0c);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,0.6); border-color: rgba(63,139,255,0.35); }
.card h3 { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 8px; color: #f6f8fc; }
.card p { color: #8b91a0; font-size: 15.5px; }
.card a.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 650; color: #3f8bff; }
.card a.more:hover { gap: 9px; }

/* ===== Product cards (range) ===== */
.prod {
  position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 30px 30px 26px;
  background: linear-gradient(180deg,#101013,#09090b);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prod:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(0,0,0,0.62); border-color: rgba(63,139,255,0.4); }
.prod .wm { position: absolute; top: -14px; right: 14px; font-size: 120px; font-weight: 850; letter-spacing: -0.06em; color: rgba(255,255,255,0.035); pointer-events: none; line-height: 1; }
.prod .mat-tag { position: relative; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #7d8394; }
.prod h3 { position: relative; font-size: 25px; letter-spacing: -0.02em; margin: 8px 0 8px; color: #f6f8fc; }
.prod p { position: relative; color: #8b91a0; font-size: 15px; min-height: 44px; }
.prod .row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; }
.colourway { display: flex; gap: 9px; }
.colourway .dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
.price-tag { display: flex; align-items: baseline; gap: 6px; }
.price-tag .amt { font-size: 27px; font-weight: 850; color: #f6f8fc; letter-spacing: -0.03em; }
.price-tag .unit { font-size: 12.5px; color: #7d8394; font-weight: 500; }
.badge-soon {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ff6470; background: rgba(255,59,70,0.10); border: 1px solid rgba(255,59,70,0.34);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.buy-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; font-size: 14px; color: #3f8bff; }
.buy-link:hover { gap: 9px; }

/* Carbon fibre treatment */
.prod.cf { border-color: rgba(255,255,255,0.12); }
.prod.cf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 20px; opacity: .5;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px);
}
.prod.cf .price-tag .amt { color: #3f8bff; }

/* Gradient teaser */
.prod.grad {
  background:
    linear-gradient(#09090b,#09090b) padding-box,
    linear-gradient(120deg,#3f8bff,#ffffff,#3f8bff) border-box;
  border: 1.5px solid transparent;
}

/* ===== Price summary table ===== */
.pricetable { width: 100%; border-collapse: collapse; border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; overflow: hidden; }
.pricetable th, .pricetable td { text-align: left; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 15px; }
.pricetable thead th { color: #7d8394; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; background: rgba(255,255,255,0.02); }
.pricetable tbody tr:last-child td { border-bottom: none; }
.pricetable td.name { color: #f6f8fc; font-weight: 650; }
.pricetable td.price { color: #3f8bff; font-weight: 750; text-align: right; }
.pricetable td.mat { color: #8b91a0; }
.pricetable tbody tr:hover { background: rgba(255,255,255,0.02); }

/* ===== Material tiles (home) ===== */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
  padding: 26px; min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg,#0e0e11,#09090b); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(63,139,255,0.4); box-shadow: 0 22px 48px rgba(0,0,0,0.6); }
.tile .big { position: absolute; top: -18px; left: 14px; font-size: 92px; font-weight: 850; letter-spacing: -0.06em; color: rgba(255,255,255,0.04); }
.tile .name { position: relative; font-size: 19px; font-weight: 750; color: #f6f8fc; letter-spacing: -0.02em; }
.tile .desc { position: relative; font-size: 13.5px; color: #8b91a0; margin-top: 3px; }
.tile .pr { position: relative; margin-top: 12px; font-size: 14px; font-weight: 750; color: #3f8bff; }
.tile.feature { background: linear-gradient(150deg,#101013,#09090b); border-color: rgba(255,255,255,0.12); }

/* ===== Material page swatch row (legacy support) ===== */
.mat-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7d8394; }
.swatch-row { display: flex; gap: 16px; margin-top: 18px; }
.swatch-row .sw { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: #8b91a0; }
.swatch-row .dot { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); }

/* ===== Spec tables (material pages) ===== */
table.spec { width: 100%; border-collapse: collapse; margin: 22px 0 30px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
table.spec th, table.spec td { text-align: left; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 15.5px; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: none; }
table.spec th { color: #7d8394; font-weight: 600; width: 38%; background: rgba(255,255,255,0.02); }
table.spec td { color: #d4dae6; }

/* ===== Article body ===== */
.prose { max-width: 780px; margin-left: auto; margin-right: auto; }
.prose h1 { letter-spacing: -0.03em; color: #f6f8fc; font-size: 46px; }
.prose h2 { font-size: 29px; margin: 44px 0 14px; letter-spacing: -0.025em; color: #f6f8fc; }
.prose h3 { font-size: 21px; margin: 30px 0 8px; color: #eef2f8; }
.prose p { margin-bottom: 16px; color: #b6bdca; }
.prose ul { margin: 0 0 20px 22px; }
.prose li { margin-bottom: 9px; color: #b6bdca; }
.prose strong { color: #f6f8fc; }

/* ===== Stockist locator ===== */
.stockist {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 32px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg,#101013,#09090b);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.stockist .badge { background: #3f8bff; color: #000000; font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; }
.stockist .meta { flex: 1; min-width: 260px; }
.stockist .meta h3 { font-size: 24px; letter-spacing: -0.015em; margin: 12px 0 6px; color: #f6f8fc; }
.stockist .meta p { color: #8b91a0; font-size: 15px; }

/* ===== Stockist locator with map ===== */
.stockist-card {
  border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg,#101013,#09090b); display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}
.stockist-card .info { padding: 32px; }
.stockist-card .badge { display: inline-block; background: #3f8bff; color: #000000; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; }
.stockist-card h3 { font-size: 26px; letter-spacing: -0.02em; margin: 14px 0 8px; color: #f6f8fc; }
.stockist-card .addr { color: #8b91a0; font-size: 15px; }
.stockist-card .addr b { color: #d4dae6; font-weight: 600; }
.stk-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.stk-tag { font-size: 12px; font-weight: 600; color: #cfd4de; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); padding: 6px 12px; border-radius: 999px; }
.stk-tag.lime { color: #3f8bff; border-color: rgba(63,139,255,0.3); background: rgba(63,139,255,0.08); }
.stockist-card .stk-btns { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }
.stockist-card .map { position: relative; min-height: 320px; background: #0b0b0d; border-left: 1px solid rgba(255,255,255,0.08); }
.stockist-card .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9); }
@media (max-width: 820px) {
  .stockist-card { grid-template-columns: 1fr; }
  .stockist-card .map { min-height: 260px; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); order: -1; }
}

/* ===== Note / callout ===== */
.note { background: rgba(63,139,255,0.06); border: 1px solid rgba(63,139,255,0.24); border-radius: 12px; padding: 16px 20px; font-size: 15px; color: #d9e0b0; margin: 24px 0; }

/* ===== Check your spool ===== */
.spool-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; max-width: 560px; }
.spool-input {
  flex: 1; min-width: 220px; font-size: 16px; font-family: "Orbitron", "Abel", sans-serif; letter-spacing: 0.04em;
  color: #f6f8fc; background: #0d0d10; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 15px 18px;
}
.spool-input::placeholder { color: #5c6373; letter-spacing: 0.02em; }
.spool-input:focus { outline: none; border-color: #3f8bff; box-shadow: 0 0 0 3px rgba(63,139,255,0.16); }
.spool-msg { margin-top: 16px; font-size: 14.5px; color: #cfd4de; background: rgba(63,139,255,0.06); border: 1px solid rgba(63,139,255,0.24); border-radius: 12px; padding: 14px 18px; display: none; }
.spool-msg.show { display: block; }

.prusa-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; border: 1px solid rgba(63,139,255,0.3); background: linear-gradient(120deg, rgba(42,107,255,0.14), rgba(255,59,70,0.05)); border-radius: 16px; padding: 18px 22px; margin-top: 22px; }
.prusament-logo { height: 26px; width: auto; display: block; }
.prusa-banner .pb-mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.prusa-banner .pb-mark img { width: 100%; height: 100%; display: block; }
.prusa-banner p { font-size: 14.5px; color: #c5ccda; margin: 0; line-height: 1.5; }
.prusa-banner strong { color: #f6f8fc; }
.prusa-banner a { color: #7fb0ff; font-weight: 650; white-space: nowrap; }

.sr-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.sr-hero .h { background: #090b11; padding: 24px 26px; }
.sr-hero .h .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7d8394; font-weight: 700; }
.sr-hero .h .big { font-size: 34px; font-weight: 850; letter-spacing: -0.03em; color: #f6f8fc; margin-top: 6px; line-height: 1; }
.sr-hero .h .big small { font-size: 14px; color: #8b91a0; font-weight: 600; }
.sr-hero .h .big.grad { background: linear-gradient(120deg,#6aa3ff,#2f6bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 680px) { .sr-hero { grid-template-columns: 1fr; } }

.spool-result { border: 1px solid rgba(255,255,255,0.09); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg,#101013,#09090b); box-shadow: 0 22px 50px rgba(0,0,0,0.55); margin-top: 34px; }
.spool-result .sr-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 26px 30px; border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.015); }
.sr-head .sr-id { font-family: "Orbitron", "Abel", sans-serif; font-size: 13px; letter-spacing: 0.14em; color: #8b91a0; }
.sr-head h3 { font-size: 27px; letter-spacing: -0.02em; color: #f6f8fc; margin-top: 4px; }
.sample-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8b91a0; border: 1px dashed rgba(255,255,255,0.25); padding: 5px 11px; border-radius: 999px; }
.pass-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg,#2a6bff,#4f9bff); padding: 6px 13px; border-radius: 999px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.06); }
@media (max-width: 820px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
.spec-item { background: #0c0c0f; padding: 20px 22px; }
.spec-item .k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7d8394; }
.spec-item .v { font-size: 21px; font-weight: 750; color: #f6f8fc; letter-spacing: -0.02em; margin-top: 6px; }
.spec-item .v small { font-size: 12px; color: #8b91a0; font-weight: 500; letter-spacing: 0; }
.spec-item .v.lime { color: #3f8bff; }
.graph-wrap { padding: 28px 30px 10px; }
.graph-wrap .gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.graph-wrap .gh h4 { font-size: 16px; color: #f6f8fc; letter-spacing: -0.01em; }
.graph-wrap .gh span { font-size: 12.5px; color: #7d8394; }
.spool-graph { width: 100%; height: auto; display: block; }
.sr-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 30px 28px; border-top: 1px solid rgba(255,255,255,0.07); }
.qr { width: 76px; height: 76px; border-radius: 12px; background: #fff; padding: 7px; flex: none; }
.sr-foot p { font-size: 13.5px; color: #8b91a0; flex: 1; min-width: 220px; }
.credit-box { border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px 26px; background: #0b0b0d; margin-top: 30px; }
.credit-box h4 { font-size: 15px; color: #f6f8fc; margin-bottom: 7px; }
.credit-box p { font-size: 14.5px; color: #8b91a0; }
.credit-box a { color: #3f8bff; }

/* spool result: 2-col body with photo + data */
.sr-body { display: grid; grid-template-columns: 300px 1fr; }
@media (max-width: 800px) { .sr-body { grid-template-columns: 1fr; } }
.sr-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 24px; background: radial-gradient(115% 80% at 50% 22%, #38465f 0%, #1a2230 48%, #0a0e16 100%); border-right: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 800px) { .sr-photo { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } }
.sr-photo img.spool { width: 100%; max-width: 215px; filter: drop-shadow(0 22px 32px rgba(0,0,0,0.65)); }
.sr-photo .cap { margin-top: 16px; font-size: 11.5px; letter-spacing: 0.02em; color: #6e7585; text-align: center; line-height: 1.5; }
.sr-photo .qr { width: 66px; height: 66px; margin-top: 20px; border-radius: 8px; }
.sr-data { display: flex; flex-direction: column; min-width: 0; }

/* interactive diameter chart */
.dia-wrap { padding: 26px 28px 16px; }
.dia-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.dia-head h4 { font-size: 15.5px; color: #f6f8fc; letter-spacing: -0.01em; }
.dia-head span { font-size: 12px; color: #6e7585; }
.dia-chart { position: relative; width: 100%; }
.dia-svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.dia-grid { stroke: rgba(255,255,255,0.055); stroke-width: 1; }
.dia-grid.nom { stroke: rgba(255,255,255,0.18); stroke-dasharray: 4 4; }
.dia-axl { fill: #6e7585; font-family: "Abel", sans-serif; font-size: 11px; }
.dia-line { fill: none; stroke: #4f9bff; stroke-width: 2.2; }
.dia-cross { stroke: rgba(255,255,255,0.4); stroke-width: 1; }
.dia-dot { fill: #4f9bff; stroke: #fff; stroke-width: 1.6; }
.dia-peak.hi { fill: #ff5a64; }
.dia-peak.lo { fill: #4f9bff; }
.dia-tip { position: absolute; pointer-events: none; transform: translate(-50%, -130%); background: #0b0e16; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 7px 11px; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,0.55); opacity: 0; transition: opacity .1s; display: flex; flex-direction: column; gap: 1px; }
.dia-tip b { color: #7fb0ff; font-weight: 700; font-size: 13px; }
.dia-tip span { font-size: 11px; color: #8b91a0; }
.dia-tip.show { opacity: 1; }

/* ===== Feature chips ===== */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.chips.center { justify-content: center; }
.chip {
  font-size: 13px; font-weight: 550; color: #cfd4de;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
}
.chip .tick { color: #3f8bff; font-weight: 800; }

/* ===== Footer ===== */
.site-footer { background: #000000; color: #7d8394; padding: 64px 0 48px; border-top: 1px solid rgba(255,255,255,0.06); }
.site-footer .cols { display: flex; gap: 64px; flex-wrap: wrap; }
.site-footer h4 { color: #f6f8fc; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; }
.site-footer a { color: #7d8394; display: block; margin-bottom: 9px; font-size: 14.5px; transition: color .15s ease; }
.site-footer a:hover { color: #3f8bff; }
.site-footer .legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #5c6373; }
.site-footer .legal a { display: inline; color: #7d8394; }

/* ===== Responsive hero ===== */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero h1 { font-size: 48px; }
  .hero-visual { min-height: 280px; }
  .spool { max-width: 300px; }
}

/* ===== Mobile menu ===== */
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); border-radius: 12px; cursor: pointer; padding: 0; align-items: center; justify-content: center; margin-left: 12px; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: #eef2f8; border-radius: 2px; position: relative; transition: background .15s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #eef2f8; border-radius: 2px; transition: transform .2s ease; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .site-header .wrap { height: 62px; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
         background: #08080b; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09);
         padding: 6px 20px 16px; display: none; }
  .nav-open .nav { display: flex; }
  .nav a:not(.cta) { display: block; margin: 0; padding: 15px 2px; font-size: 16px; color: #dfe4ee; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav .cta { margin: 16px 0 0; text-align: center; padding: 14px 17px; font-size: 15px; }
}

/* ===== Mobile spacing scale =====
   The site was built desktop-first: 96px section padding and 30px cards read as
   enormous dead space on a 375px screen. Everything below is a density pass only,
   no colours, no structure. */
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }

  .hero { padding: 34px 0 44px; }
  .hero .wrap { gap: 18px; }
  .hero h1 { font-size: 38px; margin-top: 0; }
  .hero .lede { font-size: 16px; margin-top: 14px; }
  .hero-visual { min-height: 0; }
  .hero-stage { padding: 22px 18px; border-radius: 18px; }
  .spool-img { max-width: 230px; }
  .btn-row { gap: 10px; }
  .btn { padding: 12px 18px; font-size: 14.5px; }

  section.block { padding: 46px 0; }
  section.tight { padding: 36px 0; }
  .statement { padding: 56px 0; }
  .statement p { font-size: 16px; margin-top: 14px; }
  h2.section-title { font-size: 27px; margin-bottom: 10px; }
  p.section-sub { font-size: 15px; margin-bottom: 22px; }

  /* story steps: compact rows, number inline with the title */
  .story .wrap { gap: 20px; }
  .story-sticky h2 { font-size: 30px; }
  .story-steps { gap: 8px; }
  .story-step { padding: 14px 16px; border-radius: 12px;
                display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
  .story-step .n { grid-column: 1; grid-row: 1; font-size: 11px; }
  .story-step h3 { grid-column: 2; grid-row: 1; font-size: 17px; margin: 0; }
  .story-step p { grid-column: 2; grid-row: 2; font-size: 14px; margin-top: 3px; }

  /* two tiles per row beats six full-width blocks to scroll past */
  .tiles { gap: 10px; }
  .tile { padding: 16px 14px; }
  .tile .big { font-size: 58px; top: -10px; }
  .tile .name { font-size: 15.5px; }
  .tile .pr { font-size: 13px; margin-top: 8px; }

  .site-footer { padding: 40px 0 30px; }
  .site-footer .cols { gap: 28px; }
  .site-footer .legal { margin-top: 24px; }
}
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; } }

/* ===== Mobile density: page-specific components =====
   The 760px pass above only covered shared classes. These are the per-page
   components (products, materials, quality, about, stockists) that were still
   carrying desktop padding and type sizes on a phone. */
@media (max-width: 760px) {
  /* products: cards + the price table, which was 409px wide in a 375px viewport
     and forced the whole page to scroll sideways */
  .prod { padding: 20px 18px; }
  .prod .wm { font-size: 74px; top: -8px; right: 10px; }
  .prod h3 { font-size: 20px; margin: 6px 0; }
  .prod p { font-size: 14px; min-height: 0; }
  .prod .row { margin-top: 14px; gap: 10px; }
  .colourway .dot { width: 20px; height: 20px; }

  .pricetable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pricetable { font-size: 13px; }
  .pricetable th, .pricetable td { padding: 10px 11px; font-size: 13px; white-space: nowrap; }
  .pricetable thead th { font-size: 10px; letter-spacing: 0.05em; }

  /* material + long-form pages */
  .prose h1 { font-size: 30px; }
  .prose h2 { font-size: 22px; margin: 28px 0 10px; }
  .prose h3 { font-size: 17px; margin: 20px 0 6px; }
  .prose p, .prose li { font-size: 15px; }
  .spec { font-size: 14px; }
  .spec th, .spec td { padding: 10px 12px; }

  /* stockist locator */
  .stockist-card { grid-template-columns: 1fr; }
  .stockist { padding: 18px 16px; }

  .card-head { flex-wrap: wrap; gap: 8px; }
  .chips { gap: 7px; }
}


/* ===== Centred text pass =====
   Owner's call: centre text wherever it reads well. Long-form body paragraphs in
   .prose are deliberately left alone, centred ragged text over many lines is hard
   to read; their headings are centred instead. Tables keep their own alignment. */
.hero-copy { text-align: center; margin-left: auto; margin-right: auto; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero .btn-row, .hero-tags { justify-content: center; }
.story-sticky { text-align: center; }
.tile { text-align: center; }
.tile .big { left: 0; right: 0; text-align: center; }
.prod .mat-tag, .prod h3, .prod p { text-align: center; }
.prod .row { justify-content: center; }
.colourway { justify-content: center; }
.prose h1, .prose h2, .prose h3 { text-align: center; }
.spool-form { justify-content: center; }

@media (max-width: 760px) {
  .story-step { text-align: center; grid-template-columns: 1fr; }
  .story-step .n { grid-column: 1; grid-row: 1; }
  .story-step h3 { grid-column: 1; grid-row: 2; margin-top: 2px; }
  .story-step p { grid-column: 1; grid-row: 3; }
  .site-footer .cols { justify-content: center; text-align: center; }
  .site-footer .legal { text-align: center; }
  .stockist, .stockist-card { text-align: center; }
  .chips { justify-content: center; }
}
/* ===== Layout + readability rework (2026-08-20) =====
   Problem this fixes: the earlier centred-text pass centred headings but left
   body copy, lists, buttons and the footer left-aligned, all inside a .prose
   column that had no auto margins and so sat hard against the left edge of a
   1240px wrap. Centred headings over left copy in a left-shoved column is what
   read as "weird". This makes the whole thing one system: centred column,
   centred short elements, generous vertical rhythm, and long paragraphs kept
   left-aligned inside the centred column because centred ragged body text over
   many lines is genuinely harder to read. */

/* --- Logo --- */
.brand-logo { height: 46px; }
.site-header .wrap { height: 88px; }
.byline { font-size: 10px; letter-spacing: 0.14em; margin-top: 5px; }

/* --- Centred column at a comfortable reading measure --- */
.prose { max-width: 700px; margin-left: auto; margin-right: auto; }

/* --- Vertical rhythm: more air between blocks, looser lines --- */
.prose p { line-height: 1.78; margin-bottom: 22px; }
.prose li { line-height: 1.72; margin-bottom: 11px; }
.prose h1 { margin-bottom: 20px; }
.prose h2 { margin: 64px 0 18px; }
.prose h3 { margin: 40px 0 10px; }
.prose > p:last-of-type { margin-bottom: 0; }

/* --- Short elements centre; long paragraphs stay left for readability --- */
.prose .eyebrow { display: block; text-align: center; margin-bottom: 16px; }
.prose p, .prose ul, .prose ol { text-align: left; }
.prose .btn-row { justify-content: center; margin-top: 48px; }

/* Lists read left but sit centred as a block, so they don't hang off one side */
.prose ul, .prose ol { width: fit-content; max-width: 100%; margin: 0 auto 26px; padding-left: 22px; }

/* Symmetric callout instead of a left bar in a centred layout */
/* The old .tldr "In short:" callout box is retired. Its content is now a plain lead
   paragraph: bigger and lighter than body copy, centred, no box, no label. */
.lede-p { font-size: 20px; line-height: 1.62; color: #c8cedb; text-align: center;
          max-width: 620px; margin: 4px auto 48px; }

/* Tables centre as blocks */
.spec, .pricetable { margin-left: auto; margin-right: auto; }

/* Footer to match */
.site-footer .cols { justify-content: center; text-align: center; }
.site-footer .legal { text-align: center; }

/* --- Section rhythm --- */
section.block { padding: 104px 0; }
p.section-sub { margin-bottom: 54px; }

@media (max-width: 760px) {
  .brand-logo { height: 36px; }
  .site-header .wrap { height: 70px; }
  .prose p { line-height: 1.7; margin-bottom: 18px; }
  .prose h2 { margin: 40px 0 12px; }
  .prose h3 { margin: 26px 0 8px; }
  .prose .btn-row { margin-top: 32px; }
  .lede-p { font-size: 16.5px; line-height: 1.6; margin: 2px auto 28px; }
  section.block { padding: 52px 0; }
  p.section-sub { margin-bottom: 26px; }
}

/* Page titles that live outside .prose and .hero (check-your-spool, where-to-buy,
   carbon-fibre). These previously carried inline font-size, which beat the mobile
   media queries and left 42-48px headings on a 375px screen. */
section.block > .wrap:not(.prose) > h1,
h1.section-title {
  font-size: 44px; letter-spacing: -0.03em; font-weight: 820;
  color: #f6f8fc; text-align: center; margin-bottom: 16px;
}
@media (max-width: 760px) {
  section.block > .wrap:not(.prose) > h1,
  h1.section-title { font-size: 29px; margin-bottom: 12px; }
  .hero h1 { font-size: 34px; }
}

/* ===== FAQ accordions =====
   Native <details>, so answers stay in the DOM for crawlers and the page works
   with JS off. Questions read left inside a centred list: a centred question
   with a chevron pinned right looks misaligned once questions differ in length. */
.faq-wrap { max-width: 800px; }
.faq-list { margin-top: 8px; text-align: left; }

.faq-item {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: linear-gradient(135deg,#101013,#09090b);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
.faq-item:hover { border-color: rgba(255,255,255,0.20); }
.faq-item[open] { border-color: rgba(63,139,255,0.42); background: linear-gradient(135deg,#0e1526,#08090d); }

.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  font-size: 17.5px; font-weight: 650; color: #f6f8fc; line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #fff; }

.faq-chev {
  flex: 0 0 auto; width: 10px; height: 10px; margin-right: 3px;
  border-right: 2px solid #7d8496; border-bottom: 2px solid #7d8496;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .22s ease, border-color .18s ease;
}
.faq-item[open] .faq-chev { border-color: #4f9bff; transform: rotate(225deg) translate(-2px,-2px); }
.faq-item summary:hover .faq-chev { border-color: #cfd4de; }

.faq-a { padding: 0 24px 22px; }
.faq-a p { color: #b6bdca; font-size: 16px; line-height: 1.72; margin: 0; text-align: left; }
.faq-a a { color: #4f9bff; }
.faq-a a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .faq-item summary { padding: 16px 17px; font-size: 15.5px; gap: 12px; }
  .faq-a { padding: 0 17px 18px; }
  .faq-a p { font-size: 14.8px; }
}

/* ===== Homepage stockist card =====
   Map first, text cut back to name, address and two buttons. The tag pills and
   the "more stockists coming" line were removed: with one stockist the map does
   the explaining and the section was mostly words. */
.stk-home {
  max-width: 900px; margin: 0 auto; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
  background: linear-gradient(135deg,#101013,#09090b);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.stk-home .map { min-height: 260px; }
.stk-home .map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; filter: grayscale(0.35) contrast(1.05); }
.stk-home .info { padding: 32px 30px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.stk-home .badge {
  background: #3f8bff; color: #000; font-size: 11px; font-weight: 800;
  padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em;
  display: inline-block; align-self: center;
}
.stk-home h3 { font-size: 22px; margin: 14px 0 6px; color: #f6f8fc; }
.stk-home .addr { color: #8b91a0; font-size: 15px; margin-bottom: 22px; }
.stk-home .stk-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .stk-home { grid-template-columns: 1fr; border-radius: 14px; }
  .stk-home .map, .stk-home .map iframe { min-height: 200px; }
  .stk-home .info { padding: 22px 18px; }
  .stk-home h3 { font-size: 19px; margin: 12px 0 5px; }
  .stk-home .addr { font-size: 14px; margin-bottom: 18px; }
  .stk-home .stk-btns .btn { width: 100%; justify-content: center; }
}

/* ===== Type pairing: Orbitron headings + Abel body =====
   Matches siddament.com.au, which runs Orbitron on headings and Abel on body.
   Two things this pairing forces:
   1. Orbitron is a WIDE geometric face. At the sizes the site was set in (66px
      hero, 46px prose h1) it overflows, so every heading step comes down and the
      negative tracking is removed, since Orbitron is already open.
   2. Abel ships a single weight (400). Anything asking for 500-850 in body copy
      gets a synthesised bold. Siddament has the same behaviour, so this is
      consistent rather than a regression, but it means weight can no longer
      carry hierarchy in body text. Size and colour do it instead. */

h1, h2, h3, h4,
.section-title, .hero h1,
.prose h1, .prose h2, .prose h3,
.tile .name, .prod h3, .stk-home h3, .sr-head h3,
.site-footer h4, .faq-item summary, .eyebrow, .badge {
  font-family: "Orbitron", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
}

/* Orbitron runs wide: bring the display scale down so it fits */
.hero h1 { font-size: 48px; line-height: 1.12; }
h2.section-title, h1.section-title,
section.block > .wrap:not(.prose) > h1 { font-size: 30px; letter-spacing: 0; }
.prose h1 { font-size: 34px; letter-spacing: 0; line-height: 1.18; }
.prose h2 { font-size: 22px; letter-spacing: 0; }
.prose h3 { font-size: 17px; }
.faq-item summary { font-size: 15.5px; letter-spacing: 0.01em; }
.stk-home h3 { font-size: 21px; }
.eyebrow { font-size: 11px; letter-spacing: 0.16em; }

/* Abel is narrow and light: a touch more size and leading keeps it readable */
body { font-size: 18px; }
.prose p { font-size: 17.5px; line-height: 1.72; }
.lede-p { font-size: 20px; line-height: 1.55; }

@media (max-width: 760px) {
  .hero h1 { font-size: 26px; line-height: 1.16; }
  h2.section-title, h1.section-title,
  section.block > .wrap:not(.prose) > h1 { font-size: 21px; }
  .prose h1 { font-size: 23px; }
  .prose h2 { font-size: 18px; }
  .prose h3 { font-size: 15.5px; }
  .faq-item summary { font-size: 14px; }
  body { font-size: 17px; }
  .prose p { font-size: 16px; }
  .lede-p { font-size: 17px; }
}

/* ===== Pricing table (custom colour) =====
   Now a per-material rate card: standard price beside the 20 kg and 100 kg
   custom prices, so the surcharge is shown as an actual number per material
   rather than a "+$10" the reader has to do arithmetic on. */
.ctable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px auto 12px; max-width: 640px; }
.ctable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg,#101013,#09090b);
}
.ctable thead th {
  text-align: right; padding: 13px 16px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: #9aa2b4; background: rgba(255,255,255,0.055);
  border-bottom: 1px solid rgba(255,255,255,0.14); white-space: nowrap;
}
.ctable thead th:first-child { text-align: left; }
.ctable td {
  padding: 15px 16px; font-size: 16px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
}
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable td.mat { text-align: left; color: #fff; font-weight: 700; font-size: 17px; }
.ctable td.std { color: #7d8496; text-decoration: line-through; text-decoration-color: rgba(125,132,150,0.5); }
.ctable td.price { color: #4f9bff; font-weight: 700; }
.ctable td.price.alt { color: #6ee7a8; }
.tnote { text-align: center; color: #7d8496; font-size: 14px; margin-bottom: 30px; line-height: 1.6; }

@media (max-width: 760px) {
  .ctable td { padding: 12px 11px; font-size: 14.5px; }
  .ctable thead th { padding: 10px 11px; font-size: 9.5px; letter-spacing: 0.06em; }
  .ctable td.mat { font-size: 15px; }
  .tnote { font-size: 13px; }
}

/* ===== Become a stockist ===== */
.stockist-cta {
  max-width: 620px; margin: 44px auto 0; text-align: center;
  border: 1px solid rgba(63,139,255,0.30); border-radius: 16px; padding: 30px 26px;
  background: linear-gradient(135deg, rgba(63,139,255,0.09), rgba(63,139,255,0.02));
}
.stockist-cta h3 { font-size: 20px; color: #f6f8fc; margin-bottom: 8px; }
.stockist-cta p { color: #9aa2b4; font-size: 15.5px; margin-bottom: 20px; }
.stk-more { color: #7d8496; font-size: 15px; margin-top: 24px; text-align: center; }
.stk-more a { color: #4f9bff; }
.stk-more a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .stockist-cta { padding: 22px 18px; margin-top: 30px; }
  .stockist-cta h3 { font-size: 17px; }
  .stockist-cta p { font-size: 14.5px; }
  .stockist-cta .btn { width: 100%; justify-content: center; }
}

/* Homepage hero reverted to the original 2-column layout (copy left, spool
   right) on Sidd's call. Single-column put the copy on the true page axis but
   he preferred the original composition. */

/* ===== Page background: pitch black at the top, bluer as it descends ===== */
body {
  background-color: #000;
  /* Blues sampled from siddament.com.au: #151B3F (navy) and #183879 (the deep
     vibrant one, --color-background 24,56,121). Pitch black at the top of the
     page, descending into #183879 at the bottom. */
  background-image: linear-gradient(180deg,
      #000000 0%,
      #000000 16%,
      #05091d 34%,
      #0b1236 52%,
      #10204f 70%,
      #152c66 86%,
      #183879 100%);
  /* NOT background-attachment: fixed. Fixed pins the gradient to the viewport,
     so the top of the SCREEN stays black no matter how far you scroll. The brief
     is that it gets bluer further down the PAGE, so it scrolls with the document. */
  background-repeat: no-repeat;
}

/* let the gradient show through: these were painted solid black over it */
.site-footer { background: transparent; }
.facility, section.block.alt { background: transparent; }
/* .statement and .hero paint their own radial gradients over the page one.
   Make them translucent so the descending blue reads through consistently. */
.hero { background: radial-gradient(1100px 560px at 50% -10%, rgba(20,42,96,0.55) 0%, rgba(6,10,22,0.35) 52%, transparent 100%); }
.statement { background: radial-gradient(900px 420px at 50% 130%, rgba(24,48,110,0.55) 0%, rgba(3,5,12,0.30) 60%, transparent 100%); }

/* ===== Check your spool: centred, compact =====
   Was a 1000px left-aligned wrap with a large bordered Prusa credit block, a
   300px photo panel and a 2-column spec grid, so the card ran very tall. This
   centres the column, slims the credit to one line and packs the data denser. */
.spool-wrap { max-width: 940px; margin-left: auto; margin-right: auto; text-align: center; }
.spool-wrap .eyebrow { display: block; text-align: center; }
.spool-wrap > .section-sub { margin-left: auto; margin-right: auto; }

.credit-line {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
  font-size: 12.5px; color: #7d8496; margin: 14px auto 4px; line-height: 1.5;
}
.credit-line img { opacity: 0.55; display: inline-block; }
.credit-line a { color: #6f9fe0; }
.credit-line a:hover { text-decoration: underline; }

.spool-form { justify-content: center; max-width: 620px; margin-left: auto; margin-right: auto; margin-top: 22px; }
.spool-msg { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }

.spool-result { margin-top: 26px; border-radius: 18px; text-align: left; }
.spool-result .sr-head { padding: 18px 22px; }
.sr-body { grid-template-columns: 230px 1fr; }
.sr-photo { padding: 20px 16px; }
.sr-photo .spool { max-width: 150px; }
.sr-photo .qr { width: 78px; margin-top: 14px; border-radius: 6px; }

/* stat row: bigger numbers, less padding */
.sr-hero .h { padding: 16px 18px; }
.sr-hero .h .big { font-size: 30px; margin-top: 3px; }
.sr-hero .h .k { font-size: 10px; letter-spacing: 0.1em; }

/* 4 across instead of 2, which halves the card height */
.spec-grid { grid-template-columns: repeat(4, 1fr); }
.spec-item { padding: 13px 15px; }

.dia-wrap { padding: 16px 18px; }

@media (max-width: 820px) {
  .sr-body { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .spool-result .sr-head { padding: 14px 16px; }
  .sr-hero .h { padding: 13px 15px; }
  .sr-hero .h .big { font-size: 25px; }
  .credit-line { font-size: 11.5px; }
  .sr-photo .spool { max-width: 130px; }
}

/* No background grid. The hero painted a 52px line grid via .hero::before;
   Sidd wants solid colour. */
.hero::before { display: none; }

/* Black holds much further down the page before the blue starts. */
body {
  background-image: linear-gradient(180deg,
      #000000 0%,
      #000000 55%,
      #030718 68%,
      #071031 79%,
      #0c1a4a 89%,
      #122a62 95%,
      #183879 100%);
}