/* ===========================================================================
   INNER PAGES
   The homepage's system, carried onto the five pages that sit behind it:
   the same pale stock, navy print and gold asset tags; Inter Tight at 200 in
   capitals for anything that is a headline, and in sentence case at 300/400
   for anything that is read; PT Mono only where the homepage uses it, on
   references, spec tables and the quote slip.

   The homepage sets its type in vw because it is a poster measured at one
   size. These pages carry long copy, so the same ramp is clamped: it matches
   the homepage at 1440 and stops shrinking before it stops being readable.
   ======================================================================== */

:root {
  --ink:   #1D2D4A;
  --ink-2: #2B4068;
  --gold:  #F2AE1C;
  --gold-lt: #F7CB63;
  --mute:  #5B6474;
  --body-c: #3A4760;
  --hair:  rgba(29, 45, 74, .5);
  --rule:  rgba(29, 45, 74, .14);
  --paper: #FFFFFF;
  --wa:    #25D366;

  --f-sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'PT Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-giant: clamp(54px, 8.6vw, 150px);
  --t-strap: clamp(26px, 2.7vw, 46px);
  --t-h3:    clamp(19px, 1.45vw, 24px);
  --t-body:  clamp(16px, 1.08vw, 18px);
  --t-small: clamp(13px, .9vw, 15px);

  --edge: clamp(20px, 8vw, 150px);
  --gap:  clamp(90px, 13vh, 150px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  background: #EEEFEC;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 500; }

.pg-bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F7 34%, #EEEFEC 72%, #E3E6E4 100%);
}
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 99px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* --- shared type ---------------------------------------------------------- */

.tit {
  font-size: var(--t-giant);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.strap {
  font-size: var(--t-strap);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.copy > p + p { margin-top: 1em; }
.copy p { color: var(--body-c); max-width: 62ch; }
.ref {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  line-height: 1;
  padding: 5px 8px 4px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 3px;
}

/* --- buttons -------------------------------------------------------------- */

.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.acts--center { justify-content: center; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  font-size: var(--t-small);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition: background .3s, color .3s, border-color .3s;
}
.pill:hover { background: var(--ink); color: #fff; }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
.pill--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pill--gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--ink); }
.pill--wa { background: var(--wa); border-color: var(--wa); color: #fff; font-weight: 600; }
.pill--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: #fff; }
.pill img { width: 20px; height: 20px; }

/* ===========================================================================
   CHROME — the homepage's two pills, plus the name, on a strip that clears
   the copy scrolling underneath it.
   ======================================================================== */

.chrome {
  position: fixed; inset: 0 0 auto 0;
  z-index: 70;
  height: 76px;
  padding: 0 clamp(14px, 1.4vw, 24px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .4s;
}
.chrome.is-stuck { border-bottom-color: var(--rule); }
.brandmark { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandmark img { width: 42px; height: 42px; flex: none; }
.brandmark span {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
}
.chrome__right { display: flex; align-items: center; gap: 8px; }

.wa-cta {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  height: 46px;
  padding: 0 20px 0 13px;
  border-radius: 99px;
  background: var(--wa);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .35);
  transition: background .3s, transform .35s var(--ease);
}
.wa-cta img { width: 22px; height: 22px; }
.wa-cta:hover { background: #1EBE5A; transform: translateY(-1px); }
.wa-cta:focus-visible { outline-color: var(--ink); }
.wa-cta::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  animation: wa-ring 2.4s 1.6s ease-out 3;
}
@keyframes wa-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.menu-btn {
  display: flex; align-items: center; gap: 9px;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  background: rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}
.menu-btn__bars { display: grid; gap: 3px; width: 14px; }
.menu-btn__bars i { display: block; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child { transform: translateY(2.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child  { transform: translateY(-2.25px) rotate(-45deg); }

.menu {
  position: fixed;
  top: 84px; right: clamp(14px, 1.4vw, 24px);
  z-index: 71;
  width: min(400px, calc(100vw - 28px));
}
.menu[hidden] { display: none; }
.menu__card {
  background: #fff;
  border: 1px solid rgba(29, 45, 74, .18);
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(29, 45, 74, .16);
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  transform-origin: 100% 0;
  animation: menu-in .35s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.menu__pages { display: flex; flex-direction: column; gap: 2px; }
.menu__pages a {
  align-self: flex-start;
  font-size: 34px;
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  background: linear-gradient(var(--gold), var(--gold)) 0 92% / 0 3px no-repeat;
  transition: background-size .4s var(--ease);
}
.menu__pages a:hover, .menu__pages a[aria-current="page"] { background-size: 100% 3px; }
.menu__also { font-size: 15px; color: var(--mute); padding-top: 16px; border-top: 1px solid var(--rule); }
.menu__also:hover { color: var(--ink); }
.menu__mail { font-family: var(--f-mono); font-size: 13px; color: var(--mute); }

/* ===========================================================================
   OPENER — the homepage landing, in miniature: one giant headline, one
   strapline, one paragraph, centred.
   ======================================================================== */

main { display: block; }

.opener {
  padding: calc(76px + clamp(60px, 11vh, 120px)) var(--edge) 0;
  text-align: center;
}
.opener .tit { max-width: 15ch; margin: 0 auto; }
.opener .strap { margin-top: clamp(14px, 1.6vw, 26px); }
.opener__lead {
  max-width: 56ch;
  margin: clamp(22px, 2.4vw, 36px) auto 0;
  color: var(--body-c);
}

/* ===========================================================================
   CHAPTER — a strapline on the left, the reading column on the right, the way
   the homepage's chapters pair a headline with its copy.
   ======================================================================== */

.chapter {
  padding: var(--gap) var(--edge) 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.chapter__head { position: sticky; top: 110px; }
.chapter__head .ref { margin-bottom: 18px; }
.chapter__head .strap { max-width: 18ch; }
.chapter__note { margin-top: 20px; font-size: clamp(15px, 1vw, 17px); color: var(--body-c); max-width: 40ch; }
.chapter--wide { display: block; }
.chapter--wide > .strap { max-width: 22ch; }
.chapter--wide > .chapter__lead { margin-top: 20px; max-width: 58ch; color: var(--body-c); }

/* --- the label card: a spec sheet in the homepage's card outline --------- */

.label {
  margin-top: 34px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  padding: clamp(20px, 1.8vw, 30px);
}
.label__top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-small);
}
.label__top img { width: 104px; height: auto; opacity: .9; }
.label ul { margin-top: 4px; }
.label li {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0;
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.45;
}
.label li + li { border-top: 1px dashed var(--rule); }
.label li::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--gold);
  transform: translateY(-1px);
}

/* --- figure: the page's diagrams, on paper -------------------------------- */

.figure {
  margin-top: 34px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
  background: #F4F4F0;
}
.figure svg { width: 100%; height: auto; }
.figure figcaption {
  padding: 14px 18px;
  border-top: 1px solid var(--hair);
  background: #fff;
  font-size: var(--t-small);
  color: var(--mute);
}

/* ===========================================================================
   ROWS — ruled lists of short statements. Replaces the grid of floating
   cards: each row is one thing, read left to right.
   ======================================================================== */

.rows { margin-top: 38px; border-top: 1px solid var(--hair); }
.rows > * {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 1.8vw, 28px) 0;
  border-bottom: 1px solid var(--hair);
}
.rows h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
.rows p { color: var(--body-c); max-width: 60ch; }

/* Brands: the brand's mark on a white tile, the name set large and light like
   the stats, and what we do with that brand's range in mono underneath. The
   name is always text — the TP-Link and Palo Alto marks carry no lettering. */
.rows--brands .brandlogo {
  display: block;
  box-sizing: border-box;
  width: 176px; height: 76px;
  padding: 16px 44px;
  margin-bottom: 18px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .06);
}
.rows--brands .brandlogos { display: flex; flex-wrap: wrap; gap: 10px; }
/* A landscape plate rather than a square: Hikvision and Panduit are wordmarks
   seven and four times wider than they are tall, so they get less padding at
   the sides to give the lettering the width. The SVGs are cropped to the mark
   itself (see assets/img/brands/README.md), so no other brand needs a rule. */
.rows--brands .brandlogo[src$="hikvision.svg"],
.rows--brands .brandlogo[src$="panduit.svg"] { padding: 16px 16px; }
.rows--brands .brandlogo[src$="dell.svg"] { padding: 11px 44px; }
.rows--brands h3 {
  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.03em;
}
.rows--brands h3 small {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--mute);
}
.inline-link { border-bottom: 1px solid currentColor; }
.inline-link:hover { color: var(--ink-2); border-bottom-color: var(--gold); }

/* Numbered only where the content is a sequence: the tag carries the step. */
.rows--steps h3 { display: flex; align-items: baseline; gap: 16px; }
.rows--steps .step {
  flex: none;
  transform: translateY(-2px);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  line-height: 1;
  padding: 6px 8px 5px;
  background: var(--gold);
  border-radius: 3px;
}

/* ===========================================================================
   PACKS — the price labels. The one place a page repeats the homepage's card
   outright: a product, its monthly rate, and the barcode strip.
   ======================================================================== */

.packs {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}
.pack {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(360px, 30vw, 460px);
  padding: clamp(16px, 1.3vw, 22px);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(255, 255, 255, .6);
}
.pack__name { font-size: var(--t-strap); font-weight: 200; line-height: 1; letter-spacing: -.012em; text-transform: uppercase; }
.pack__price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair); font-size: clamp(40px, 3.8vw, 64px); font-weight: 200; line-height: 1; letter-spacing: -.03em; }
.pack__price small { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0; color: var(--mute); }
.pack__desc { margin: 18px 0 26px; font-size: var(--t-small); line-height: 1.5; color: var(--body-c); }
.pack__code { margin-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.pack__code img { width: 46%; height: 26px; object-fit: cover; object-position: left; }
.packs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(12px, 1.2vw, 20px); }
.packs--2 .pack { min-height: 0; }
.packs--2 .pack__price { font-size: var(--t-strap); }

/* ===========================================================================
   ESTIMATOR — the form is a label card, the result is the quote slip.
   ======================================================================== */

.config {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .55);
}
.config__form { padding: clamp(22px, 2.2vw, 38px); display: grid; gap: 28px; }
.field > label, .field > .field__label { display: block; margin-bottom: 12px; font-size: var(--t-small); font-weight: 500; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hair);
  border-radius: 99px;
  font-size: var(--t-small);
  font-weight: 400;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.qty { display: flex; align-items: center; gap: 22px; }
.qty input[type="range"] { flex: 1; accent-color: var(--ink); height: 28px; }
.qty output { min-width: 3ch; text-align: right; font-size: var(--t-strap); font-weight: 200; line-height: 1; }
.estimate-note { font-size: var(--t-small); color: var(--mute); padding-top: 18px; border-top: 1px solid var(--rule); }

.config__out {
  position: relative;
  padding: clamp(22px, 2.2vw, 38px);
  background: #fff;
  border-left: 1px dashed var(--hair);
  font-family: var(--f-mono);
  display: flex; flex-direction: column;
}
.config__out .slip__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); padding-bottom: 12px; border-bottom: 1px dashed var(--hair); }
.estimate { margin-top: 26px; font-family: var(--f-sans); font-size: clamp(40px, 4vw, 66px); font-weight: 200; line-height: 1; letter-spacing: -.03em; }
.estimate small { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0; color: var(--mute); }
.estimate--text { font-size: var(--t-strap); text-transform: uppercase; }
.estimate-sum { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--hair); font-size: 14px; line-height: 1.55; color: var(--body-c); }
.config__out .acts { margin-top: auto; padding-top: 26px; font-family: var(--f-sans); }

/* ===========================================================================
   FAQ, STATS, QUOTE, TAGS
   ======================================================================== */

.faq { margin-top: 38px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(18px, 1.6vw, 26px) 0;
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.3;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  font-weight: 200;
  font-size: 22px;
  transition: transform .35s var(--ease), background .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); }
.faq details p { padding: 0 0 26px; max-width: 64ch; color: var(--body-c); }

.stats {
  margin: var(--gap) var(--edge) 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.stats > div { padding: clamp(24px, 3vw, 48px) 0; text-align: center; }
.stats > div + div { border-left: 1px solid var(--hair); }
.stats b { display: block; font-size: clamp(56px, 7.5vw, 130px); font-weight: 200; line-height: .9; letter-spacing: -.04em; }
.stats span { display: block; margin-top: 12px; font-size: var(--t-small); color: var(--mute); }

.quote { padding: var(--gap) var(--edge) 0; text-align: center; }
.quote blockquote { max-width: 30ch; margin: 0 auto; font-size: var(--t-strap); font-weight: 200; line-height: 1.15; letter-spacing: -.015em; }
.quote cite { display: block; margin-top: 22px; font-style: normal; font-size: var(--t-small); color: var(--mute); }

/* The credentials hang like the homepage's price tags: gold stock, a punched
   hole, a slight turn. */
.tags { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 22px 18px; }
.tag {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 170px;
  padding: 18px 40px 14px 16px;
  background: var(--gold);
  border-radius: 7px;
  box-shadow: 0 16px 32px rgba(29, 45, 74, .14);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.25;
}
.tag::before {
  content: '';
  position: absolute; top: 9px; right: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.tag b { font-family: var(--f-sans); font-size: 22px; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.tag:nth-child(odd)  { transform: rotate(-2.5deg); }
.tag:nth-child(even) { transform: rotate(2deg); }

/* ===========================================================================
   CONTACT
   ======================================================================== */

.ways {
  margin: clamp(50px, 8vh, 90px) var(--edge) 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
.way { padding: 26px clamp(0px, 2vw, 32px) 0 0; }
.way + .way { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--rule); }
.way h2 { font-size: var(--t-h3); font-weight: 400; margin-bottom: 10px; }
.way p, .way address { font-style: normal; font-size: var(--t-small); line-height: 1.6; color: var(--body-c); }
.way .pill { margin-top: 18px; }
.way a.mail { border-bottom: 1px solid currentColor; }

.form { margin-top: 34px; display: grid; gap: 26px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form label { display: block; font-size: var(--t-small); font-weight: 500; margin-bottom: 4px; }
.form label small { font-weight: 300; color: var(--mute); }
.input {
  width: 100%;
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  font-size: var(--t-body);
  font-weight: 300;
  transition: border-color .3s;
}
.input:focus { outline: none; border-bottom: 2px solid var(--gold); }
select.input { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231D2D4A' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat; cursor: pointer; }
textarea.input { min-height: 130px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: #8A93A3; }
.err { min-height: 0; font-size: 13px; color: #B3261E; margin-top: 4px; }
.err:empty { display: none; }
.form__status { font-size: var(--t-small); color: var(--body-c); }

/* ===========================================================================
   HERO — the pinned 3D assemblies on Cabling & fiber and CCTV. The scroll
   logic in gd.js and hero.js reads these class names; only the look changes.
   ======================================================================== */

.hero { position: relative; height: 320vh; }
.hero__stage { position: sticky; top: 0; height: 100svh; min-height: 620px; display: flex; align-items: center; overflow: hidden; }
.hero__inner { width: 100%; padding: 0 var(--edge); position: static; }
.hero__copy { position: relative; z-index: 2; max-width: min(50%, 680px); padding: 76px 0 56px; pointer-events: none; }
.hero__copy a, .hero__copy button { pointer-events: auto; }
.hero__copy > .ref { margin-bottom: 22px; }
.hero__acts { position: relative; min-height: clamp(300px, 30vw, 460px); }
.hero__act { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero__act.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero__act .tit { font-size: clamp(42px, 5.6vw, 100px); }
.hero__sub { margin-top: 24px; max-width: 44ch; color: var(--body-c); }
.hero__scroll { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 12px; font-size: var(--t-small); color: var(--mute); transition: opacity .5s; }
.hero__scroll i { display: block; width: 46px; height: 1px; background: var(--hair); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; inset: 0; background: var(--gold); animation: trace 2.4s var(--ease) infinite; }
@keyframes trace { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.hero.is-complete .hero__scroll { opacity: 0; }
.hero__rail { position: absolute; right: clamp(16px, 2vw, 40px); top: 50%; transform: translateY(-50%); width: 1px; height: 180px; background: var(--rule); z-index: 3; }
.hero__rail b { position: absolute; inset: 0 0 auto 0; height: 0; display: block; background: var(--gold); transition: height .2s linear; }
.hero__object { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.hero__canvas:active { cursor: grabbing; }
.hero__fallback { width: auto; height: auto; max-width: min(50vw, 640px); max-height: 76svh; justify-self: end; margin-right: clamp(0px, 7vw, 130px); --p: 0; }
.hero__fallback [data-layer] { transition: transform .1s linear; transform: translateY(calc(var(--off) * (1 - var(--p)) * 1px)); }
.callout { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity .5s; }
.callout.is-on { opacity: 1; }
.callout i { width: 26px; height: 1px; background: var(--gold); display: block; }
.callout small { display: block; font-size: 11px; color: var(--mute); margin-top: 3px; }
.hero .tag { position: absolute; right: clamp(40px, 9vw, 170px); top: 18%; z-index: 4; opacity: 0; transform: rotate(-5deg) translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero.is-complete .tag { opacity: 1; transform: rotate(-5deg); }

/* ===========================================================================
   CHECKOUT — the homepage's last screen, as every page's footer.
   ======================================================================== */

.checkout { padding: calc(var(--gap) * 1.2) var(--edge) 0; text-align: center; }
.checkout .tit { max-width: 13ch; margin: 0 auto; }
.talk {
  display: block;
  width: min(100%, 880px);
  margin: clamp(34px, 5vh, 60px) auto 0;
  padding: clamp(8px, .8vw, 14px) 0 clamp(12px, 1.2vw, 20px);
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: clamp(48px, 7.6vw, 130px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  transition: background .3s, color .3s;
}
.talk:hover { background: var(--ink); color: #fff; }
.talk__alt { margin-top: 18px; font-size: var(--t-small); color: var(--mute); }
.talk__alt a { color: var(--ink); border-bottom: 1px solid currentColor; }
.checkout__links {
  max-width: 880px;
  margin: 34px auto 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px;
  font-size: var(--t-small);
}
.checkout__links a { border-bottom: 1px solid transparent; }
.checkout__links a:hover, .checkout__links a[aria-current="page"] { border-bottom-color: currentColor; }
.credit {
  margin: 44px auto 0;
  padding: 26px 0 34px;
  max-width: 880px;
  border-top: 1px solid var(--hair);
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}
.credit b { display: block; font-weight: 500; letter-spacing: .03em; color: var(--ink); }
.credit p { margin-top: 10px; }
.credit a { border-bottom: 1px solid currentColor; }

/* --- phone action bar (inner pages keep it; thumbs live at the bottom) --- */

.actionbar { display: none; }

/* ===========================================================================
   NARROW
   ======================================================================== */

@media (max-width: 1080px) {
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --edge: 20px; --gap: 84px; }
  .chrome { height: 64px; }
  .brandmark img { width: 36px; height: 36px; }
  .brandmark span { font-size: 11px; letter-spacing: .03em; white-space: normal; max-width: 25ch; }
  .wa-cta { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .wa-cta span { display: none; }
  .menu-btn { height: 44px; padding: 0 14px; }
  .menu { top: 72px; }
  .opener { padding-top: calc(64px + 56px); }
  .opener .tit { font-size: clamp(48px, 14vw, 90px); }
  .chapter { grid-template-columns: 1fr; gap: 22px; }
  .chapter__head { position: static; }
  .rows > *, .rows--steps > * { grid-template-columns: 1fr; gap: 8px; }
  .config { grid-template-columns: 1fr; }
  .config__out { border-left: 0; border-top: 1px dashed var(--hair); }
  .stats { grid-template-columns: 1fr; }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--hair); }
  .ways { grid-template-columns: 1fr; }
  .way, .way + .way { padding: 22px 0; border-left: 0; }
  .way + .way { border-top: 1px solid var(--rule); }
  .form__row { grid-template-columns: 1fr; }
  .tags { gap: 16px; }
  .tag { min-width: 0; flex: 1 1 40%; }

  .hero { height: 260vh; }
  .hero__stage { align-items: flex-start; }
  .hero__inner { padding-top: 96px; }
  .hero__copy { max-width: 100%; padding: 0 0 60px; }
  .hero__act .tit { font-size: clamp(38px, 11vw, 64px); }
  .hero__acts { min-height: 290px; }
  /* Lifted clear of the fixed WhatsApp / quote bar along the bottom edge. */
  .hero__object { inset: auto 0 70px 0; height: 38svh; }
  .hero__fallback { max-width: 82vw; max-height: 44svh; justify-self: center; margin-right: 0; }
  .hero__rail, .callout { display: none; }
  .hero .tag { right: 20px; top: auto; bottom: 30svh; }

  .checkout__links { justify-content: center; }
}

@media (max-width: 620px) {
  .packs { grid-template-columns: 1fr; }
  .pack { min-height: 0; }
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(244, 244, 240, .94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
  }
  .actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 99px; font-size: 16px; font-weight: 500; }
  .actionbar__wa { background: var(--wa); color: #fff; font-weight: 600; }
  .actionbar img { width: 22px; height: 22px; }
  .actionbar__quote { background: var(--ink); color: #fff; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .acts .pill { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-cta::before, .hero__scroll i::after, .menu__card { animation: none; }
  .hero__act, .hero .tag { transition: none; }
}