/* ============================================================
   Pilone Cables — Design System v2 · "Drawn Copper"
   Dark commanding chrome. Precision-light content. Type does
   the talking. One signature: the drawn copper wire.
   Display: Archivo (800/900). Body: Inter. Data: ui-monospace.
   ============================================================ */

:root {
  /* ground */
  --ink0: #141110;          /* chrome + hero ground */
  --ink1: #1e1a17;          /* elevated dark surface */
  --ink2: #2b2622;          /* dark line / hover surface */
  --paper: #f6f4f0;         /* content ground */
  --panel: #ffffff;

  /* text on dark */
  --d-text: #f2ede7;
  --d-text-2: #b7ada3;
  --d-text-3: #7d746b;

  /* text on light */
  --l-text: #201b17;
  --l-text-2: #6b625a;
  --l-text-3: #9c938a;
  --line: #e6e1d9;
  --line-soft: #efebe4;

  /* accent */
  --copper: #e85d26;
  --copper-hot: #ff8a4d;
  --copper-deep: #a83e12;
  --copper-soft: #fdece3;
  --wa: #0e7a41;
  --wa-deep: #0a6234;

  /* type */
  --f-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(20, 17, 16, 0.05), 0 6px 20px rgba(20, 17, 16, 0.07);
  --shadow-lift: 0 2px 6px rgba(20, 17, 16, 0.08), 0 14px 36px rgba(20, 17, 16, 0.13);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- base ---------- */
body {
  background: var(--paper);
  color: var(--l-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--copper);
  accent-color: var(--copper);
}
::selection { background: var(--copper); color: #fff; }

/* ---------- clickability affordances ----------
   Rule: interactive = white panel + copper cue + motion; informational = flat paper, no cue. */
main p a, main li a, main td a, .ds-callout a, .ds-faq details > div a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}
main p a:hover, main li a:hover, main td a:hover { text-decoration-color: currentColor; }
/* link cards announce themselves: copper arrow that answers hover */
a.ds-card h3::after, a.ds-tile h3::after {
  content: ' \2192';
  color: var(--copper);
  opacity: 0.45;
  display: inline-block;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
a.ds-card:hover h3::after, a.ds-tile:hover h3::after { opacity: 1; transform: translateX(3px); }
/* informational cards recede: flat paper, no lift, no cue */
div.ds-card:not(:has(img)) { background: transparent; box-shadow: none; }
div.ds-card:not(:has(img)):hover { transform: none; border-color: var(--line); }
/* chips that navigate read as links; label chips stay quiet */
a.ds-chip { color: var(--copper-deep); border-color: #ddd2c6; }
a.ds-chip::after { content: ' \2192'; font-size: 11px; opacity: 0.55; }
span.ds-chip { border-color: transparent; background: var(--paper); color: var(--l-text-2); }

/* browser surfaces belong to the system too */
html { scrollbar-color: var(--copper-deep) var(--paper); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #cfc8bf; border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--copper-deep); }
p a, li a, td a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a, button, [tabindex], summary):focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--l-text); }
h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.02; font-weight: 900; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.7rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; }
h3 { font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
img { max-width: 100%; height: auto; }
a { color: var(--copper-deep); }
a:hover { color: var(--copper); }

/* ---------- signature: the drawn wire ----------
   A thin copper filament with a slow traveling glow, like wire
   coming off the drawing die. Heroes + section dividers only. */
.wire {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--copper-deep), var(--copper) 35%, var(--copper-hot) 50%, var(--copper) 65%, var(--copper-deep));
  background-size: 200% 100%;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .wire-live { animation: wire-draw 5s linear infinite; }
  @keyframes wire-draw { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}
.wire-short { width: 76px; }

/* ---------- sheath ribbon (spec line printed on the jacket) ---------- */
.sheath {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.sheath::before, .sheath::after {
  content: '';
  width: 22px;
  height: 7px;
  flex: none;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 7px);
  opacity: 0.5;
}
.on-dark .sheath, .sheath.on-dark { color: var(--copper-hot); }
.sheath.on-light { color: var(--copper-deep); }

/* ---------- dark chrome: header ---------- */
.main-header { position: sticky; top: 0; z-index: 1000; background: var(--ink0); box-shadow: none; transition: box-shadow 0.25s var(--ease); }
/* the build-time wrapper must not become the sticky scrollport, or the header
   scrolls away with it — display:contents lifts the header to the body flow */
#header-placeholder { display: contents; }
.main-header.ds-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.ds-topstrip { background: #000; border-bottom: 1px solid #1c1917; color: var(--d-text-3); font-size: 13px; }
.ds-topstrip .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; flex-wrap: wrap; padding-top: 3px; padding-bottom: 3px; }
.ds-topstrip .ds-topstrip-note { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; color: var(--d-text-3); }
.ds-topstrip i { color: var(--copper); font-size: 10px; }
.ds-topstrip-contacts { display: flex; gap: 18px; }
.ds-topstrip a { color: var(--d-text-2); font-weight: 500; display: inline-flex; align-items: center; padding: 6px 4px; }
.ds-topstrip a:hover { color: var(--copper-hot); }
@media (max-width: 640px) { .ds-topstrip .ds-topstrip-note { display: none; } .ds-topstrip .container { justify-content: center; } }

.main-nav { background: transparent; }
.nav-content { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.logo img { height: 44px; width: auto; }
.nav-menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu a {
  color: var(--d-text-2);
  font-weight: 500;
  font-size: 14px;
  padding: 9px 13px;
  border-radius: 8px;
  display: inline-block;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-menu a:hover { color: #fff; background: var(--ink1); }
.nav-menu li.current > a { color: #fff; }
.nav-menu li.current > a::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  background: var(--copper);
  border-radius: 2px;
}
.nav-menu .dropdown {
  background: var(--ink1) !important;
  border: 1px solid var(--ink2);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 6px;
  min-width: 220px;
}
.nav-menu .dropdown li a { color: var(--d-text-2) !important; padding: 9px 12px; display: block; border-radius: 7px; font-size: 13.5px; }
.nav-menu .dropdown li a:hover { background: var(--ink2); color: #fff !important; }
.ds-nav-cta {
  background: var(--copper);
  color: #fff !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  margin-left: 8px;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease) !important;
}
.ds-nav-cta:hover { background: var(--copper-hot) !important; transform: translateY(-1px); }
.mobile-menu-toggle span { background: var(--d-text); }
@media (max-width: 960px) {
  .nav-menu, .navigation { display: none; }
  .mobile-menu-toggle { display: flex; }
}
@media (min-width: 961px) { .mobile-menu-toggle { display: none; } }

/* mega menu */
.nav-menu li.has-mega { position: static; }
.mega {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 6px);
  width: min(760px, calc(100vw - 48px));
  display: none;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 8px 28px;
  background: var(--ink1);
  border: 1px solid var(--ink2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 22px 26px;
  z-index: 1100;
}
.nav-menu li.has-mega:hover .mega,
.nav-menu li.has-mega:focus-within .mega { display: grid; }
/* invisible bridge across the 6px offset so the hover chain survives the cursor path */
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
/* base.css's legacy `.nav-menu li.current a` must not flood the open panel */
.nav-menu li.current .mega a { color: var(--d-text-2); }
.nav-menu li.current .mega a:hover { color: #fff; }
.nav-menu li.current .mega a.mega-cta { color: #fff; }
.nav-menu li.current .dropdown li a { color: var(--d-text-2) !important; }
.nav-menu li.current .dropdown li a:hover { color: #fff !important; }
.mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-head {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-text-3);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink2);
}
.mega-col a { color: var(--d-text-2); font-size: 13.5px; padding: 6px 8px; border-radius: 6px; }
.mega-col a:hover { color: #fff; background: var(--ink2); }
.mega-cta {
  margin-top: 10px;
  background: var(--wa);
  color: #fff !important;
  font-weight: 600;
  text-align: center;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}
.mega-cta:hover { background: var(--wa-deep) !important; }
.main-nav .container { position: relative; }

/* search button + modal */
.ds-search-btn {
  background: transparent;
  border: 1px solid var(--ink2);
  color: var(--d-text-2);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.ds-search-btn:hover { color: #fff; border-color: var(--d-text-3); }
.nav-mobile-actions { display: none; align-items: center; gap: 8px; }
@media (max-width: 960px) { .nav-mobile-actions { display: flex; } }
@media (min-width: 961px) { .ds-search-btn-mobile { display: none; } }
.ds-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(10, 8, 7, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(14vh, 120px) 18px 24px;
}
.ds-search-panel {
  width: min(640px, 100%);
  background: var(--ink1);
  border: 1px solid var(--ink2);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.ds-search-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ink2); }
.ds-search-input-row i { color: var(--copper); }
.ds-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-family: var(--f-body);
  font-size: 16px;
}
.ds-search-input::placeholder { color: var(--d-text-3); }
.ds-search-kbd { font-family: var(--f-mono); font-size: 10.5px; color: var(--d-text-3); border: 1px solid var(--ink2); border-radius: 5px; padding: 3px 7px; }
.ds-search-results { max-height: min(48vh, 420px); overflow-y: auto; padding: 8px; }
.ds-search-results a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--d-text);
  font-size: 14.5px;
}
.ds-search-results a:hover, .ds-search-results a.active { background: var(--ink2); color: #fff; }
.ds-search-tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-hot); flex: none; width: 68px; }
.ds-search-empty { padding: 22px 16px; color: var(--d-text-3); font-size: 14px; text-align: center; }

/* skip link */
.ds-skip {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 1400;
  background: var(--copper);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.15s var(--ease);
}
.ds-skip:focus-visible { top: 12px; color: #fff; }

/* full-bleed night band section (rhythm variety) — usable inside ds-main */
.ds-night-section {
  background: var(--ink0);
  color: var(--d-text);
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 6vw, 64px) calc(50vw - 50%);
  margin: clamp(40px, 7vw, 72px) calc(50% - 50vw);
}
.ds-night-section h2 { color: #fff; }
.ds-night-section .ds-step { background: var(--ink1); border-color: var(--ink2); }
.ds-night-section .ds-step h3 { color: #fff; }
.ds-night-section .ds-step p { color: var(--d-text-2); }

/* mobile drawer — dark */
.mobile-nav-overlay { background: rgba(10, 8, 7, 0.6); backdrop-filter: blur(3px); }
.mobile-nav-content { background: var(--ink0); }
.mobile-nav-header { border-bottom: 1px solid var(--ink2); }
.mobile-nav-close { color: var(--d-text); background: none; border: 0; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; }
.mobile-nav-menu a { color: var(--d-text-2); font-weight: 500; }
.mobile-nav-menu a:hover { color: #fff; }
.mobile-submenu { background: var(--ink1) !important; border-radius: 10px; }
.mobile-submenu a { color: var(--d-text-2) !important; }
.mobile-submenu.active { max-height: 420px !important; }
.mobile-nav-contact { display: grid; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink2); }
.mobile-nav-contact a { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--d-text); }
.mobile-nav-contact i { color: var(--copper); width: 18px; }

/* ---------- dark hero band ---------- */
.hero-dark {
  background: var(--ink0);
  color: var(--d-text);
  padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 72px);
  position: relative;
  overflow: hidden;
}
.hero-dark::before {
  /* faint strand cross-sections drifting in the ground */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 260px at 88% 18%, rgba(232, 93, 38, 0.09), transparent 70%),
    radial-gradient(circle 200px at 8% 85%, rgba(232, 93, 38, 0.05), transparent 70%);
  pointer-events: none;
}
.hero-dark h1 { color: #fff; max-width: 17ch; position: relative; }
.hero-strands {
  position: absolute;
  right: max(3vw, 30px);
  top: 50%;
  transform: translateY(-52%);
  width: clamp(240px, 30vw, 420px);
  height: auto;
  color: var(--copper);
  opacity: 0.34;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-strands { animation: strands-turn 90s linear infinite; }
  @keyframes strands-turn { to { transform: translateY(-52%) rotate(360deg); } }
}
@media (max-width: 900px) { .hero-strands { display: none; } }
.hero-dark .ds-main { position: relative; }
.hero-dark .hero-sub { color: var(--d-text-2); font-size: clamp(1rem, 2.2vw, 1.18rem); max-width: 52ch; margin: 18px 0 26px; }
.hero-dark .wire { margin: 26px 0 0; max-width: 520px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* size rail — mono strip of quick size links */
.size-rail {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 13px;
  margin-top: 34px;
  border-top: 1px solid var(--ink2);
}
.size-rail a {
  color: var(--d-text-3);
  padding: 12px 16px 10px;
  border-top: 2px solid transparent;
  margin-top: -1px;
  letter-spacing: 0.04em;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.size-rail a:hover { color: var(--copper-hot); border-top-color: var(--copper); }
.size-rail .size-rail-label { color: var(--d-text-3); padding: 12px 16px 10px 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px; }

/* ---------- buttons ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0) scale(0.99); }
.ds-btn-brand { background: var(--copper); color: #fff; }
.ds-btn-brand:hover { background: var(--copper-hot); color: #fff; box-shadow: 0 8px 24px rgba(232, 93, 38, 0.35); }
.ds-btn-wa { background: var(--wa); color: #fff; }
.ds-btn-wa:hover { background: var(--wa-deep); color: #fff; box-shadow: 0 8px 24px rgba(14, 122, 65, 0.3); }
.ds-btn-ghost-dark { background: transparent; color: var(--d-text); border-color: var(--ink2); }
.ds-btn-ghost-dark:hover { border-color: var(--d-text-3); color: #fff; }
.ds-btn-ghost { background: transparent; color: var(--l-text); border-color: var(--line); }
.ds-btn-ghost:hover { border-color: var(--l-text-3); }

/* ---------- sticky mobile contact bar ---------- */
.ds-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  display: none;
  grid-template-columns: 1fr 1.5fr;
  background: var(--ink0);
  border-top: 1px solid var(--ink2);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
.ds-sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  background: var(--ink1);
  color: var(--d-text);
}
.ds-sticky-cta a i { color: var(--copper); font-size: 16px; }
.ds-sticky-cta a.ds-sticky-wa { background: var(--wa); color: #fff; }
.ds-sticky-cta a.ds-sticky-wa i { color: #fff; }
@media (max-width: 767px) {
  .ds-sticky-cta { display: grid; }
  body { padding-bottom: 64px; }
}

/* ---------- content scaffolding ---------- */
main.ds-main, .ds-main { max-width: 1160px; margin: 0 auto; padding: 0 20px 48px; }
.ds-section { margin: clamp(40px, 7vw, 72px) 0; }
.ds-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ds-section-head .wire { width: 76px; margin-top: 12px; }
.ds-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-deep);
  display: block;
  margin-bottom: 10px;
}
.ds-measure { max-width: 70ch; }
.ds-muted { color: var(--l-text-2); }
.ds-mono { font-family: var(--f-mono); }

.ds-breadcrumbs { font-size: 13px; color: var(--l-text-3); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 20px 0 6px; }
.ds-breadcrumbs a { color: var(--l-text-2); }
.ds-breadcrumbs a:hover { color: var(--copper-deep); }
.ds-breadcrumbs .sep { color: var(--line); }

/* ---------- cards ---------- */
.ds-grid { display: grid; gap: 16px; }
.ds-grid-2 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
@media (max-width: 980px) { .ds-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ds-grid-3 { grid-template-columns: 1fr; } }
.ds-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
a.ds-card { color: var(--l-text); display: block; }
a.ds-card::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -1px;
  height: 2px;
  background: var(--copper);
  transition: right 0.3s var(--ease);
  border-radius: 2px;
}
a.ds-card:hover { border-color: transparent; box-shadow: var(--shadow-lift); transform: translateY(-3px); color: var(--l-text); }
a.ds-card:hover::after { right: 0; }
.ds-card h3 { margin-bottom: 6px; }
.ds-card-meta { font-family: var(--f-mono); font-size: 11.5px; color: var(--l-text-3); letter-spacing: 0.05em; }
.ds-card-img { border-radius: 8px; overflow: hidden; margin-bottom: 14px; aspect-ratio: 4/3; background: var(--paper); }
.ds-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
a.ds-card:hover .ds-card-img img { transform: scale(1.04); }

/* ---------- spec table ---------- */
.ds-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 16px 0 8px; }
/* mobile: spec tables are wider than the phone, so say so and show the edge.
   The gradient is painted on the wrap's own background layer, so it stays
   pinned to the right edge while the table scrolls under it. */
@media (max-width: 767px) {
  .ds-spec-table caption { position: sticky; left: 0; width: calc(100vw - 40px); box-sizing: border-box; font-size: 13px; }
  .ds-tablewrap {
    -webkit-overflow-scrolling: touch;
    background: var(--panel) linear-gradient(to left, rgba(20, 17, 16, 0.10), rgba(20, 17, 16, 0) 40px) right center / 40px 100% no-repeat;
  }
  .ds-tablewrap::before {
    content: 'Swipe the table sideways \2192';
    display: block;
    position: sticky;
    left: 0;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--copper-deep);
    padding: 8px 16px 0;
  }
  /* ui.js marks wraps that already fit, and wraps scrolled to their end:
     the cue then retires instead of lying. No JS = cue always shown. */
  .ds-tablewrap.ds-fits, .ds-tablewrap.ds-at-end { background: var(--panel); }
  .ds-tablewrap.ds-fits::before { display: none; }
}
.ds-spec-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.ds-spec-table caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--l-text-3); padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.ds-spec-table th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--l-text-3);
  font-weight: 600;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  white-space: nowrap;
}
.ds-spec-table td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.ds-spec-table tr:last-child td { border-bottom: none; }
.ds-spec-table tr:hover td { background: #fbf9f6; }
.ds-spec-table td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-spec-table td:first-child { font-weight: 500; }

/* ---------- price block ---------- */
.ds-price-block {
  background: var(--ink0);
  color: var(--d-text);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.ds-price-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 200px at 90% 0%, rgba(232, 93, 38, 0.16), transparent 70%);
  pointer-events: none;
}
.ds-price-label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-text-3); }
.ds-price-range { font-family: var(--f-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 2px; color: #fff; font-variant-numeric: tabular-nums; }
.ds-price-range small { font-size: 0.5em; font-weight: 500; color: var(--d-text-2); letter-spacing: 0; }
.ds-price-updated { font-family: var(--f-mono); font-size: 12px; color: var(--d-text-3); margin-bottom: 16px; }
.ds-price-note { font-size: 13px; color: var(--d-text-2); margin-top: 14px; }

/* ---------- product hero ---------- */
.product-hero { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .product-hero { grid-template-columns: 1fr; gap: 22px; } }

/* grid blowout guard: unbreakable content (sheath ribbons, long mono
   strings, tables) must never widen a column past its track */
.product-hero > *, .ds-grid > *, .ds-bento > *, .ds-steps > *, .calc-grid > *, .ds-band > * { min-width: 0; }
.sheath { text-overflow: ellipsis; }

/* ---------- rating ---------- */
.ds-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--l-text-2); }
.ds-rating .stars { color: var(--copper); letter-spacing: 2px; font-size: 13px; }

/* ---------- chips, badges, callouts ---------- */
.ds-chip { display: inline-block; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; margin: 3px; font-size: 13.5px; color: var(--l-text-2); transition: border-color 0.18s var(--ease), color 0.18s var(--ease); }
a.ds-chip:hover { border-color: var(--copper); color: var(--copper-deep); }
.ds-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: #e7f2ea; color: #2c6b3f; }
.ds-callout { border-left: 3px solid var(--copper); background: var(--copper-soft); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 18px 0; font-size: 14.5px; max-width: 75ch; }
.ds-callout-safety { border-left-color: #9a6a00; background: #fdf4e0; }
.ds-callout-safety::before { content: 'SAFETY'; display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: #9a6a00; margin-bottom: 4px; }

/* ---------- FAQ ---------- */
.ds-faq { display: grid; gap: 10px; margin: 18px 0; }
.ds-faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ds-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 16px 46px 16px 20px; list-style: none; position: relative; transition: background 0.18s var(--ease); }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 300; color: var(--copper); transition: transform 0.25s var(--ease); }
.ds-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ds-faq summary:hover { background: var(--paper); }
.ds-faq details > div { padding: 0 20px 18px; color: var(--l-text-2); font-size: 14.5px; max-width: 75ch; }

/* ---------- dark CTA band ---------- */
.ds-band {
  background: var(--ink0);
  color: var(--d-text);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.ds-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 300px at 92% 50%, rgba(232, 93, 38, 0.14), transparent 70%); pointer-events: none; }
.ds-band h2 { color: #fff; margin: 0 0 6px; }
.ds-band p { color: var(--d-text-2); margin: 0; max-width: min(52ch, 100%); }
.ds-band > * { position: relative; }

/* ---------- related links ---------- */
.ds-related { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 26px; }
.ds-related h2 { font-size: 17px; margin-bottom: 14px; }
.ds-related ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 22px; padding: 0; }
.ds-related li a { display: flex; align-items: baseline; gap: 9px; color: var(--l-text-2); padding: 5px 0; font-size: 14.5px; }
.ds-related li a::before { content: '\2192'; color: var(--copper); font-size: 13px; }
.ds-related li a:hover { color: var(--copper-deep); }

/* ---------- steps (how buying works) ---------- */
.ds-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: step; }
.ds-step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; counter-increment: step; }
.ds-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--copper);
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0.08em;
}
.ds-step h3 { margin-bottom: 6px; }
.ds-step p { color: var(--l-text-2); font-size: 14.5px; margin: 0; }

/* ---------- footer (dark) ---------- */
.main-footer { background: var(--ink0); color: var(--d-text-2); margin-top: clamp(48px, 8vw, 80px); }
.main-footer .footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 0 30px;
  border-bottom: 1px solid var(--ink2);
}
.main-footer .footer-cta h3 { margin-bottom: 4px; }
.main-footer .footer-cta p { color: var(--d-text-3); margin: 0; }
.main-footer .footer-content-5 { grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1.2fr; }
@media (max-width: 1080px) { .main-footer .footer-content-5 { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (max-width: 700px) { .main-footer .footer-content-5 { grid-template-columns: 1fr 1fr; } .main-footer .footer-info { grid-column: 1 / -1; } }
@media (max-width: 440px) { .main-footer .footer-content-5 { grid-template-columns: 1fr; } }
.main-footer .footer-content { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding: 52px 0 32px; }
.main-footer h3 { color: #fff; font-size: 19px; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; }
.main-footer h4 { color: var(--d-text-3); font-size: 11px; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.main-footer p { color: var(--d-text-3); font-size: 14px; }
.main-footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.main-footer a { color: var(--d-text-2); font-size: 14px; }
.main-footer a:hover { color: var(--copper-hot); }
.main-footer .contact-item { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.main-footer .contact-item i { color: var(--copper); width: 16px; }
.main-footer .social-links { display: flex; gap: 10px; margin-top: 16px; }
.main-footer .social-links a { width: 36px; height: 36px; border-radius: 50%; background: var(--ink1); display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s var(--ease), transform 0.18s var(--ease); }
.main-footer .social-links a:hover { background: var(--copper); color: #fff; transform: translateY(-2px); }
.main-footer .footer-bottom { border-top: 1px solid var(--ink2); padding: 20px 0; font-size: 13px; color: var(--d-text-3); text-align: center; }
.main-footer .footer-bottom .wire { max-width: 120px; margin: 0 auto 16px; }
@media (max-width: 880px) { .main-footer .footer-content { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .main-footer .footer-content { grid-template-columns: 1fr; gap: 26px; } }

/* ============================================================
   v2.5 elevation layer — modern motion, texture, layout
   ============================================================ */

/* view transitions: app-like page changes where supported */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: 0.18s; }
  ::view-transition-new(root) { animation-duration: 0.24s; }
}

/* film grain on night surfaces */
.hero-dark::after, .ds-band::after, .ds-price-block::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.hero-dark, .ds-band, .ds-price-block { isolation: isolate; }
.hero-dark > *:not(.hero-strands), .ds-band > *, .ds-price-block > * { position: relative; z-index: 1; }
.hero-dark .hero-strands { position: absolute; z-index: 0; }

/* drifting copper mesh in the dark hero */
.hero-dark::before {
  background:
    radial-gradient(560px 420px at 82% 12%, rgba(232, 93, 38, 0.16), transparent 65%),
    radial-gradient(420px 380px at 12% 95%, rgba(232, 93, 38, 0.08), transparent 70%),
    radial-gradient(300px 300px at 55% 45%, rgba(255, 138, 77, 0.05), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-dark::before { animation: mesh-drift 26s ease-in-out infinite alternate; }
  @keyframes mesh-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  }
}

/* scroll-driven: section dividers draw themselves in; falls back to static */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wire-short {
      transform-origin: left center;
      animation: wire-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    @keyframes wire-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* reading progress: a wire drawn across the top of the page as you scroll */
.ds-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  z-index: 1200;
  background: linear-gradient(90deg, var(--copper-deep), var(--copper) 60%, var(--copper-hot));
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .ds-progress { animation: progress-draw linear both; animation-timeline: scroll(root); }
  @keyframes progress-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* marquee: the size rail in motion; static scroll strip when motion is reduced */
.ds-marquee {
  overflow: hidden;
  display: flex;
  border-top: 1px solid var(--ink2);
  border-bottom: 1px solid var(--ink2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ds-marquee-track {
  display: flex;
  flex: none;
  gap: 0;
  min-width: 100%;
  align-items: center;
}
.ds-marquee a, .ds-marquee span {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--d-text-3);
  padding: 14px 22px;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.ds-marquee a:hover { color: var(--copper-hot); }
@media (prefers-reduced-motion: no-preference) {
  .ds-marquee-track { animation: marquee 32s linear infinite; }
  .ds-marquee:hover .ds-marquee-track { animation-play-state: paused; }
  /* touch and keyboard have no hover: hold or focus stops the rail too */
  .ds-marquee:active .ds-marquee-track,
  .ds-marquee:focus-within .ds-marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .ds-marquee { overflow-x: auto; }
}
/* phones: moving links are unhittable — hand the rail to the thumb instead.
   The second copy of the loop is hidden so a swipe does not repeat the set. */
@media (max-width: 767px) {
  .ds-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ds-marquee-track { animation: none; }
  .ds-marquee-track > a:nth-of-type(n+11),
  .ds-marquee-track > span:nth-of-type(n+11) { display: none; }
}

/* bento: asymmetric product showcase */
.ds-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ds-bento > * { min-height: 150px; }
.ds-bento .b-wide { grid-column: span 2; }
.ds-bento .b-tall { grid-row: span 2; }
@media (max-width: 980px) { .ds-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ds-bento { grid-template-columns: 1fr; } .ds-bento .b-wide { grid-column: auto; } .ds-bento .b-tall { grid-row: auto; } }
.ds-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 22px;
  color: var(--l-text);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
a.ds-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; color: var(--l-text); }
.ds-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
a.ds-tile:hover img { transform: scale(1.05); }
.ds-tile.has-img img { filter: brightness(0.9); }
.ds-tile .t-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 16, 0.22) 0%, rgba(20, 17, 16, 0.42) 45%, rgba(20, 17, 16, 0.92) 100%);
}
.ds-tile .t-body { position: relative; }
.ds-tile.has-img { color: #fff; min-height: 260px; }
.ds-tile.has-img .ds-card-meta { color: var(--copper-hot); }
.ds-tile.has-img h3 { color: #fff; }
.ds-tile.has-img p { color: var(--d-text-2); }
.ds-tile.t-copper { background: var(--ink0); border-color: transparent; color: var(--d-text); }
.ds-tile.t-copper h3 { color: #fff; }
.ds-tile.t-copper p { color: var(--d-text-2); }

/* horizontal snap rail (mobile card rows) */
@media (max-width: 767px) {
  .ds-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    margin-right: -20px;
    padding-right: 20px;
    scrollbar-width: none;
  }
  .ds-rail::-webkit-scrollbar { display: none; }
  .ds-rail > * { scroll-snap-align: start; }
}

/* sticky aside for split layouts (desktop) */
@media (min-width: 861px) {
  .ds-sticky-aside { position: sticky; top: 96px; align-self: start; }
}

/* full-viewport hero variant */
.hero-cinema { min-height: min(88vh, 860px); display: flex; flex-direction: column; justify-content: center; }
.hero-cinema h1 { font-size: clamp(2.8rem, 9vw, 6.2rem); max-width: 14ch; }
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-text-3);
  margin-top: clamp(28px, 5vh, 56px);
}
.hero-scroll-cue::after {
  content: '';
  width: 1.5px;
  height: 34px;
  background: linear-gradient(180deg, var(--copper), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue::after { animation: cue-drop 1.8s var(--ease) infinite; }
  @keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
}

/* inline size-finder widget */
.ds-widget {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.ds-widget label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-text-3);
}
.ds-widget input {
  background: var(--ink1);
  border: 1px solid var(--ink2);
  border-radius: 10px;
  color: #fff;
  font-family: var(--f-mono);
  font-size: 16px;
  padding: 12px 14px;
  width: 150px;
}
.ds-widget input:focus { outline: 2px solid var(--copper); outline-offset: 1px; border-color: var(--copper); }
@media (max-width: 560px) { .ds-widget input { width: 100%; } .ds-widget label { flex: 1 1 40%; } .ds-widget .ds-btn { flex: 1 1 100%; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hidden state only when JS is confirmed present (html.js set by ui.js) */
  html.js .ds-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  html.js .ds-reveal.ds-in { opacity: 1; transform: none; }
  .ds-reveal-1 { transition-delay: 0.06s; }
  .ds-reveal-2 { transition-delay: 0.12s; }
  .ds-reveal-3 { transition-delay: 0.18s; }
  .hero-dark .hero-load { opacity: 0; transform: translateY(18px); animation: hero-in 0.7s var(--ease) forwards; }
  .hero-dark .hero-load-1 { animation-delay: 0.05s; }
  .hero-dark .hero-load-2 { animation-delay: 0.16s; }
  .hero-dark .hero-load-3 { animation-delay: 0.27s; }
  .hero-dark .hero-load-4 { animation-delay: 0.38s; }
  @keyframes hero-in { to { opacity: 1; transform: none; } }
}