/* ==========================================================================
   AJ3 Cool-Aire 2026
   Design system. Single-hue heat scale.

   There is no second colour in this system. Every value is the AJ3 logo
   orange moved along one axis: driven down to a warm near-black for panels,
   up through burnt amber and the brand orange itself, out to a pale warm
   highlight. Neutrals are warmed to match rather than left cool grey, so
   nothing on the page reads as blue.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------
   The orange is sampled from the AJ3 logo itself: the saturated core of the
   wordmark sits at hsl(24 95% 62%), which is --t7 below. Every warm value in
   the ramp is derived from it rather than picked by eye.
   Light is the default scheme. Dark is opt-in via [data-theme="dark"].       */
:root {
  /* Single-hue ramp. Every step is the logo orange driven up and down in
     lightness, so there is no second colour anywhere in the system. */
  --t1: #1a1108;   /* warm near-black, the panel ground */
  --t2: #2a1c0f;
  --t3: #6b3a10;   /* burnt amber */
  --t4: #c9690f;   /* mid orange, focus rings and icon accents */
  --t5: #ffc08a;   /* light warm highlight */
  --t6: #ffc98a;
  --t7: #fa8c42;   /* AJ3 logo orange */

  --heat: var(--t7);
  --heat-deep: #ac550d;  /* 5.2:1 on paper, for orange text and links */
  --ice: var(--t5);      /* kept as a name; it is now warm, not cyan */

  /* surfaces, warm neutrals */
  --paper: #faf7f4;
  --card: #ffffff;
  --sunk: #f4efe9;
  --line: #e6ddd4;
  --line-soft: #efe8e1;

  /* ink */
  --ink: #1c1208;
  --ink-2: #52453a;
  --ink-3: #7a6a5c;
  --on-heat: #1a1206;

  /* dark panel ink, used inside .panel regardless of scheme */
  --p-ink: #f7efe8;
  --p-ink-2: #d3bfae;
  --p-line: rgba(250, 140, 66, .22);

  /* type */
  --display: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* metrics */
  --wrap: 1240px;
  --gap: 24px;
  --r: 14px;
  --r-lg: 22px;
  --r-sm: 9px;

  --shadow: 0 1px 2px rgba(44, 26, 10, .06), 0 8px 24px -12px rgba(44, 26, 10, .18);
  --shadow-lg: 0 2px 4px rgba(44, 26, 10, .06), 0 24px 56px -22px rgba(44, 26, 10, .3);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .34s;
}

/* Dark is a deliberate choice, not a system default. The toggle in the header
   writes data-theme and persists it, so the first paint is always light. */
html[data-theme="dark"] {
  --paper: #1a1108;
  --card: #261a10;
  --sunk: #201509;
  --line: #4a3524;
  --line-soft: #362614;
  --ink: #f7efe8;
  --ink-2: #d3bfae;
  --ink-3: #a8927e;
  --heat-deep: #ffab63;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 56px -22px rgba(0, 0, 0, .7);
}

/* --- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible {
  outline: 3px solid var(--t4);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed; top: -100px; left: 12px; z-index: 999;
  background: var(--heat); color: var(--on-heat);
  padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700;
}
.skip:focus { top: 12px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. TYPE SCALE ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
.d2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.d3 { font-size: clamp(1.35rem, 2.2vw, 1.72rem); letter-spacing: -.022em; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.03rem, 1.5vw, 1.18rem); color: var(--ink-2); max-width: 60ch; }
.small { font-size: .875rem; color: var(--ink-3); }

/* The mono face carries units, codes and labels only. Never body copy. */
.tag {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--heat-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 3px;
  background: linear-gradient(90deg, var(--t3), var(--heat));
  border-radius: 2px;
}
.eyebrow--ice { color: var(--ice); }

/* Numerals are the star of this design, so they get tabular alignment. */
.num { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.04em; }

/* --- 4. LAYOUT ---------------------------------------------------------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
@media (max-width: 620px) { .wrap { width: min(100% - 28px, var(--wrap)); } }

.sec { padding-block: clamp(56px, 7.5vw, 104px); }
.sec--tight { padding-block: clamp(40px, 5vw, 68px); }
.sec--sunk { background: var(--sunk); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; }
.sec-head p { max-width: 52ch; margin-top: 12px; color: var(--ink-2); }

/* --- 5. BUTTONS --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px;
  border-radius: 100px;
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease), background-color .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Dark ink on orange. White on orange is 2.7:1 and fails. */
.btn--heat { background: var(--heat); color: var(--on-heat); }
.btn--heat:hover { background: #c99672; }

.btn--line { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn--line:hover { border-color: var(--t4); color: var(--t4); }

.btn--ghost { border-color: var(--p-line); color: var(--p-ink); }
.btn--ghost:hover { border-color: var(--ice); color: var(--ice); }

.btn--sm { padding: 10px 16px; font-size: .85rem; }
.btn--block { width: 100%; }

/* --- 5b. MARQUEE. Brand orange band, unit types and the standing offer. -- */
.marquee {
  background: var(--heat);
  color: var(--on-heat);
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee ul {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
  flex: none;
}
.marquee li {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 10px 0;
  white-space: nowrap;
}
.marquee li::after {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .45;
  margin: 0 22px;
}
.marquee li.hot { font-weight: 700; }
.marquee li.hot b { font-weight: 700; }

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: 100%; }
  .marquee { overflow-x: auto; }
}

/* --- 6. UTILITY BAR + HEADER ------------------------------------------- */
.util {
  background: var(--t1);
  color: var(--p-ink-2);
  font-size: .78rem;
}
.util .wrap { display: flex; align-items: center; gap: 22px; height: 38px; }
.util a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.util a:hover { color: var(--ice); }
.util svg { width: 14px; height: 14px; opacity: .75; }
.util .spacer { margin-left: auto; }
.util .live { display: inline-flex; align-items: center; gap: 7px; color: var(--ice); }
.util .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 0 rgba(250, 140, 66, .6); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 8px rgba(250, 140, 66, 0); } }
@media (max-width: 900px) { .util .hide-sm { display: none; } }

.head {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.7) blur(14px);
  -webkit-backdrop-filter: saturate(1.7) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.head .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 10px; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.16rem; letter-spacing: -.035em; line-height: 1; }
.brand-sub { font-family: var(--mono); font-size: .53rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 4px; }

.menu { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.menu a {
  text-decoration: none; padding: 9px 13px; border-radius: 8px;
  font-size: .92rem; font-weight: 600; color: var(--ink-2);
  transition: color .16s, background-color .16s;
}
.menu a:hover { color: var(--ink); background: var(--sunk); }
.menu a[aria-current] { color: var(--heat-deep); }

.head-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.head-call { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.head-call svg { width: 19px; height: 19px; color: var(--heat); }
.head-call b { display: block; font-size: .93rem; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.head-call span { font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* The logo file is a JPG with a baked-in white background, so it always sits
   on its own white plaque. That reads as intentional in dark mode instead of
   as a stray white rectangle. */
.brand-logo {
  height: 42px; width: auto; flex: none;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(44, 26, 10, .14);
}
@media (max-width: 520px) { .brand-logo { height: 34px; padding: 3px 6px; } }

.icon-btn {
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); border-radius: 10px;
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: border-color .16s, color .16s, background-color .16s;
}
.icon-btn:hover { border-color: var(--t4); color: var(--t4); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .moon { display: none; }
html[data-theme="dark"] .icon-btn .moon { display: block; }
html[data-theme="dark"] .icon-btn .sun { display: none; }

.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; align-items: center; justify-content: center; }
.burger svg { width: 20px; height: 20px; }

@media (max-width: 1080px) { .head-call { display: none; } }
@media (max-width: 940px) {
  .burger { display: flex; }
  .menu {
    position: fixed; inset: 110px 16px auto 16px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); padding: 10px; box-shadow: var(--shadow-lg);
    margin: 0; display: none;
  }
  .menu[data-open] { display: flex; }
  .menu a { padding: 13px 14px; font-size: 1rem; }
}

/* --- 7. THE PANEL. Dark thermal instrument. ---------------------------- */
.panel {
  position: relative;
  background: var(--t1);
  color: var(--p-ink);
  overflow: hidden;
  isolation: isolate;
}
/* Thermal bloom. Heat pooling in the top right, cold settling bottom left. */
.panel::before {
  content: '';
  position: absolute; inset: -30% -10% auto auto;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 62% 38%, rgba(250, 140, 66, .34), rgba(201, 105, 15, .16) 44%, transparent 70%);
  z-index: -1;
  filter: blur(6px);
}
.panel::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--p-line) 1px, transparent 1px), linear-gradient(90deg, var(--p-line) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
  opacity: .5;
  z-index: -1;
}
.panel .lede { color: var(--p-ink-2); }

.hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 4.5vw, 66px); align-items: center; padding-block: clamp(46px, 5.6vw, 84px); }
@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; gap: 40px; } }

/* --- 7b. VIDEO BANNER --------------------------------------------------
   The client's own footage is shot 9:16 for social. Stretching it across a
   wide hero would crop most of the frame away, so the video keeps its native
   portrait ratio and sits beside the headline instead of behind it. */
.vhero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--t1); color: var(--p-ink);
}
.vhero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 78% 30%, rgba(250, 140, 66, .30), transparent 62%),
    radial-gradient(ellipse 70% 60% at 12% 78%, rgba(201, 105, 15, .26), transparent 64%);
}
.vhero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--p-line) 1px, transparent 1px), linear-gradient(90deg, var(--p-line) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 45%, #000 15%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 45%, #000 15%, transparent 76%);
  opacity: .45;
}

.vhero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-block: clamp(48px, 6vw, 92px);
}
@media (max-width: 940px) { .vhero-grid { grid-template-columns: 1fr; gap: 40px; } }

.vhero h1 { color: #fff; max-width: 16ch; }
.vhero .lede { color: var(--p-ink-2); max-width: 52ch; }
.vhero .btn-row { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.vhero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--heat); color: var(--on-heat);
  padding: 9px 16px; border-radius: 100px;
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 22px;
}

/* Portrait frame, sized like the phone the footage was shot on. */
.vframe {
  position: relative;
  width: min(100%, 326px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(250, 140, 66, .30);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9), 0 0 90px -30px rgba(250, 140, 66, .5);
}
.vframe video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 940px) { .vframe { width: min(100%, 280px); } }

.vhero-ctl {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(26, 17, 8, .68); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.vhero-ctl:hover { background: rgba(26, 17, 8, .92); }
.vhero-ctl svg { width: 14px; height: 14px; }
.vhero-ctl .ico-play { display: none; }
.vhero-ctl[data-paused] .ico-play { display: block; }
.vhero-ctl[data-paused] .ico-pause { display: none; }

/* --- 8. THE SIZER. Signature element. ---------------------------------- */
.sizer { max-width: 610px; }
.sizer h1 { color: var(--p-ink); margin-bottom: 16px; }
.sizer h1 em { font-style: normal; color: var(--ice); }

.ramp { margin-top: 34px; }

.ramp-read { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.ramp-read .num { font-size: clamp(3.4rem, 8vw, 5.2rem); line-height: .85; color: var(--p-ink); }
/* Named ramp-unit, not unit: .unit is the product card, and the shared name
   was painting a white card background behind this label. */
.ramp-unit { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--p-ink-2); letter-spacing: .04em; line-height: 1.25; }
.ramp-read .hint { margin-left: auto; text-align: right; font-size: .82rem; color: var(--p-ink-2); max-width: 20ch; line-height: 1.4; }

/* The track is the thermal ramp itself, so the control shows the concept. */
.ramp-track { position: relative; padding-block: 16px 8px; }
/* The input box is the touch target, so it is 34px tall while the visible
   track stays 12px on the runnable-track pseudo-element. A 12px-tall input
   is close to ungrabbable on a phone. */
.ramp-track input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; margin: 0;
  background: transparent;
  cursor: ew-resize;
}
.ramp-heat {
  height: 12px; border-radius: 100px;
  background: linear-gradient(90deg, #3d2209 0%, #a8560c 26%, #fa8c42 56%, #ffb877 82%, #ffdcbd 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ramp-track input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 100px; background: linear-gradient(90deg, #3d2209 0%, #a8560c 26%, #fa8c42 56%, #ffb877 82%, #ffdcbd 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ramp-track input[type=range]::-moz-range-track { height: 12px; border-radius: 100px; background: linear-gradient(90deg, #3d2209 0%, #a8560c 26%, #fa8c42 56%, #ffb877 82%, #ffdcbd 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

.ramp-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  margin-top: -9px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--t1);
  box-shadow: 0 0 0 2px rgba(250, 140, 66, .9), 0 6px 18px rgba(0, 0, 0, .55);
  transition: transform .16s var(--ease);
}
.ramp-track input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.ramp-track input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 4px solid var(--t1);
  box-shadow: 0 0 0 2px rgba(250, 140, 66, .9), 0 6px 18px rgba(0, 0, 0, .55);
}

.ramp-ticks { display: flex; justify-content: space-between; margin-top: 12px; }
.ramp-ticks span { font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; color: var(--p-ink-2); opacity: .8; }

/* Result readout */
.result {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  margin-top: 30px; padding: 20px 22px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--p-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(4px);
}
.hp-badge {
  display: grid; place-items: center; text-align: center;
  width: 108px; height: 108px; flex: none;
  border-radius: 18px;
  background: linear-gradient(155deg, var(--t7), #ff9d3d);
  color: var(--on-heat);
  box-shadow: 0 12px 34px -12px rgba(242, 117, 26, .75);
}
.hp-badge .num { font-size: 2.5rem; line-height: .9; }
/* "horsepower" is 10 wide-advance mono characters; at .6rem it overran the
   92px badge on small phones. */
.hp-badge .tag { display: block; margin-top: 5px; opacity: .78; font-size: .5rem; letter-spacing: .07em; }

.result-body h2 { font-size: 1.16rem; letter-spacing: -.025em; color: var(--p-ink); margin-bottom: 5px; }
.result-body p { font-size: .89rem; color: var(--p-ink-2); margin-bottom: 13px; }
.result-body p b { color: var(--ice); font-family: var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .result { grid-template-columns: 1fr; }
  .hp-badge { width: 92px; height: 92px; }
}

.disclaim { margin-top: 16px; font-size: .78rem; color: var(--p-ink-2); opacity: .82; max-width: 54ch; }
.disclaim a { color: var(--ice); }

/* Live matching units, dark variant */
.match { display: grid; gap: 12px; }
.match-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.match-head .tag { color: var(--p-ink-2); }
.match-head a {
  color: var(--ice); font-size: .82rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 4px;
}
.match-head a:hover { text-decoration: underline; }

.mrow {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 16px; align-items: center;
  padding: 12px 16px 12px 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--p-line);
  border-radius: var(--r);
  text-decoration: none;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.mrow:hover { background: rgba(255, 255, 255, .09); border-color: rgba(250, 140, 66, .45); transform: translateX(4px); }
.mrow img { width: 62px; height: 48px; object-fit: contain; border-radius: 7px; background: #fff; padding: 4px; }
.mrow-b { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: var(--ice); }
.mrow-n { font-size: .85rem; font-weight: 600; color: var(--p-ink); line-height: 1.3; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mrow-p { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--p-ink); letter-spacing: -.03em; text-align: right; }
.mrow-p span { display: block; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; color: var(--p-ink-2); font-weight: 500; margin-top: 3px; }

/* --- 9. STAT STRIP ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--p-line); }
.stats div { padding: 26px 22px 30px; border-right: 1px solid var(--p-line); }
.stats div:last-child { border-right: 0; }
.stats .num { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--p-ink); display: block; line-height: 1; }
.stats .num i { font-style: normal; color: var(--ice); }
.stats .tag { color: var(--p-ink-2); display: block; margin-top: 10px; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--p-line); }
}

/* --- 10. BRAND RAIL ----------------------------------------------------- */
.brands { display: flex; flex-wrap: wrap; gap: 9px; }
/* The anchor must be the flex box, not an inline wrapper, or the tap target
   collapses to the text height instead of the pill height. */
.brands a { display: inline-flex; text-decoration: none; }
.brands span {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: 100px;
  color: var(--ink-2); background: var(--card);
  transition: border-color .16s, color .16s;
}
.brands a:hover span { border-color: var(--t4); color: var(--t4); }

/* --- 11. PRODUCT CARD --------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
/* Holds three across on tablets. Dropping to two at 820 made 376px cards,
   which is wider than the product photo can usefully fill. */
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.unit {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease);
}
.unit:hover { border-color: var(--t4); box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.unit-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  display: grid; place-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.unit-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.unit:hover .unit-media img { transform: scale(1.05); }

.hp-chip {
  position: absolute; top: 10px; left: 10px;
  background: var(--t1); color: #fff;
  padding: 5px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em;
}
/* Fixed inks, not theme tokens: this chip always sits on the white photo
   plate, so a themed colour would drop to 1.8:1 in dark mode. */
.type-chip {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255, 255, 255, .94); color: #3a4f54;
  border: 1px solid #dae3e4;
  padding: 5px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: .55rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

.unit-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.unit-brand { font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .13em; color: var(--heat-deep); }
/* Model codes like AR09TYHYEWKNTC are single unbreakable tokens, so they need
   an explicit break opportunity or they push past the card. */
.unit-name {
  font-size: .92rem; font-weight: 600; line-height: 1.34; margin-top: 7px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
  overflow-wrap: anywhere;
}
.mrow-n, .pdp h1 { overflow-wrap: anywhere; }
.unit-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.unit-price { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.28rem; letter-spacing: -.04em; line-height: 1; }
.unit-price span { display: block; font-family: var(--mono); font-size: .5rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.unit-go {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  transition: background-color .2s, border-color .2s, color .2s;
}
.unit-go svg { width: 15px; height: 15px; }
.unit:hover .unit-go { background: var(--heat); border-color: var(--heat); color: var(--on-heat); }

/* --- 12. FILTER RAIL ---------------------------------------------------- */
.shop { display: grid; grid-template-columns: 236px 1fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .shop { grid-template-columns: 1fr; gap: 20px; } }

.rail { position: sticky; top: 92px; display: grid; gap: 24px; }
@media (max-width: 900px) { .rail { position: static; } }

.fgroup > .tag { color: var(--ink-3); display: block; margin-bottom: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--card);
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  transition: background-color .16s, border-color .16s, color .16s;
}
.chip:hover { border-color: var(--t4); color: var(--t4); }
.chip[aria-pressed=true] { background: var(--t1); border-color: var(--t1); color: #fff; }

.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.shop-bar .count { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; color: var(--ink-3); }
.shop-bar .count b { color: var(--ink); font-size: .95rem; }
.sortsel { padding: 9px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); font-size: .84rem; font-weight: 600; }

.empty { grid-column: 1 / -1; text-align: center; padding: 64px 20px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-2); }

/* --- 13. TRUE PRICE TABLE ---------------------------------------------- */
.price-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.price-row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 16px 22px; border-bottom: 1px solid var(--line-soft);
}
.price-row:last-child { border-bottom: 0; }
.price-row b { font-weight: 600; font-size: .96rem; }
.price-row small { display: block; color: var(--ink-3); font-size: .8rem; margin-top: 2px; }
.price-row .amt { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.1rem; letter-spacing: -.03em; white-space: nowrap; }

/* --- 14. SERVICE CARD --------------------------------------------------- */
/* Four across needs ~270px a card to stay readable. Below that it drops
   straight to two rather than squeezing four into 230px each. */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1160px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-grid { grid-template-columns: 1fr; } }

.svc {
  padding: 24px 22px 26px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc:hover { border-color: var(--t4); transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-ico {
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(150deg, var(--t3), var(--t4));
  display: grid; place-items: center; color: #fff; margin-bottom: 16px;
}
.svc-ico svg { width: 21px; height: 21px; }
.svc h3 { font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: 8px; }
.svc p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.svc .amt { display: inline-block; margin-top: 13px; font-family: var(--mono); font-size: .65rem; font-weight: 700; letter-spacing: .06em; color: var(--heat-deep); }

/* --- 15. PROCESS. Numbered because it is a real sequence. --------------- */
/* Five across only works when each column clears ~210px of text. Under that
   the sequence reads better stacked, which is also the clearer order on a
   phone, so it becomes a numbered vertical list rather than a squeezed row. */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 1100px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 26px 22px 30px 0; position: relative; }
@media (min-width: 1101px) { .step { padding-right: 26px; } .step::after { content: ''; position: absolute; top: -2px; right: 0; bottom: auto; width: 1px; height: 26px; background: var(--line); } .step:last-child::after { display: none; } }
@media (max-width: 1100px) {
  .step { border-bottom: 1px solid var(--line); padding: 18px 0; display: grid; grid-template-columns: 54px 1fr; align-items: start; column-gap: 12px; }
  .step .num { margin-bottom: 0; grid-row: 1 / span 2; }
  .step p { grid-column: 2; }
}
.step .num { display: block; font-size: 1.05rem; color: var(--heat-deep); margin-bottom: 12px; }
.step h3 { font-size: 1.02rem; letter-spacing: -.022em; margin-bottom: 7px; }
.step p { font-size: .87rem; color: var(--ink-2); line-height: 1.55; }

/* --- 16. SPLIT FEATURE -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.checklist { display: grid; gap: 13px; margin-top: 26px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; font-size: .95rem; color: var(--ink-2); }
.checklist svg { width: 22px; height: 22px; color: var(--t4); margin-top: 1px; }
.checklist b { color: var(--ink); font-weight: 600; }
ul.checklist { list-style: none; padding: 0; }

/* --- 17. FAQ ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1.03rem; letter-spacing: -.022em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; width: 13px; height: 13px; flex: none;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details[open] summary { color: var(--heat-deep); }
.faq p { padding-bottom: 22px; color: var(--ink-2); max-width: 68ch; font-size: .95rem; }

/* --- 18. CTA BAND ------------------------------------------------------- */
.band { border-radius: var(--r-lg); padding: clamp(34px, 5vw, 62px); }
.band h2 { color: var(--p-ink); max-width: 18ch; }
.band p { color: var(--p-ink-2); max-width: 48ch; margin-top: 14px; }
.band .btn-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* --- 19. FORM ----------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > label { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); font-size: .95rem;
  transition: border-color .16s, box-shadow .16s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--t4); box-shadow: 0 0 0 3px rgba(250, 140, 66, .22);
}
.field textarea { resize: vertical; min-height: 108px; }
.field--err input, .field--err select, .field--err textarea { border-color: #d1442b; }
.err { font-size: .8rem; color: #d1442b; display: none; }
.field--err .err { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .two { grid-template-columns: 1fr; } }

.form-note { font-size: .8rem; color: var(--ink-3); }
.ok {
  display: none; padding: 18px 20px; border-radius: var(--r);
  background: rgba(250, 140, 66, .12); border: 1px solid var(--t4); color: var(--ink);
  font-size: .93rem;
}
.ok[data-on] { display: block; }

/* --- 20. FOOTER --------------------------------------------------------- */
.foot { background: var(--t1); color: var(--p-ink-2); padding-top: 62px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ice); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4 { font-size: .78rem; font-family: var(--mono); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--p-ink); margin-bottom: 16px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 9px; font-size: .89rem; }
.foot p { font-size: .89rem; line-height: 1.6; max-width: 40ch; }
.foot-bot { border-top: 1px solid var(--p-line); padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .8rem; }
.foot .brand-name { color: var(--p-ink); }

/* --- 21. STICKY MOBILE ACTION BAR -------------------------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; gap: 9px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.dock .btn { flex: 1; }
@media (max-width: 720px) { .dock { display: flex; } body { padding-bottom: 74px; } }

/* --- 22. MOTION --------------------------------------------------------
   Two ideas carry the motion, and nothing else is animated for decoration.

   1. One orchestrated arrival. The hero staggers in on load; that is the only
      "entrance" moment on the page.
   2. The instrument responds. In the sizer, the metre reading is the user's
      own input so it tracks instantly, while horsepower, stock count and price
      are *computed*, so they settle. Direct input snaps, derived output eases.

   Only transform and opacity are animated, so everything stays on the
   compositor. Reveals use IntersectionObserver rather than CSS scroll-driven
   animations because those still have no Firefox support and these are
   one-shot, where the two are visually equivalent. */
/* Every hidden starting state is scoped to html.js, which the inline head
   script sets. Without JS nothing is ever left at opacity 0. */
html.js [data-rise] { opacity: 0; transform: translateY(18px); }
html.js [data-rise].in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero arrival */
  html.js .vhero [data-seq] { opacity: 0; transform: translateY(18px); }
  html.js .vhero.is-ready [data-seq] { opacity: 1; transform: none; transition: opacity .62s var(--ease), transform .62s var(--ease); }
  html.js .vhero.is-ready [data-seq="1"] { transition-delay: .06s; }
  html.js .vhero.is-ready [data-seq="2"] { transition-delay: .14s; }
  html.js .vhero.is-ready [data-seq="3"] { transition-delay: .22s; }
  html.js .vhero.is-ready [data-seq="4"] { transition-delay: .30s; }
  html.js .vframe { opacity: 0; transform: translateY(26px) scale(.975); }
  html.js .vhero.is-ready .vframe { opacity: 1; transform: none; transition: opacity .8s var(--ease) .16s, transform .8s var(--ease) .16s; }

  /* 2. The badge reacts only when the horsepower class actually changes,
        not on every pixel of slider travel. */
  @keyframes hpPulse { 0% { transform: scale(1); } 36% { transform: scale(1.075); } 100% { transform: scale(1); } }
  .hp-badge.is-changed { animation: hpPulse .46s var(--ease); }

  /* Matching stock restacks when the class changes */
  @keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } }
  .mrow { animation: rowIn .42s var(--ease) backwards; }
  .mrow:nth-child(2) { animation-delay: .07s; }
  .mrow:nth-child(3) { animation-delay: .14s; }

  /* FAQ answers */
  @keyframes faqIn { from { opacity: 0; transform: translateY(-5px); } }
  .faq details[open] > p { animation: faqIn .32s var(--ease); }

  /* Product and service cards, staggered per row */
  .unit, .svc { transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease), opacity .5s var(--ease); }
}

/* Header condenses once you leave the top of the page */
.head { transition: box-shadow .25s var(--ease), background-color .25s; }
.head .wrap { transition: height .25s var(--ease); }
.head.is-stuck { box-shadow: 0 6px 24px -14px rgba(44, 26, 10, .5); }
.head.is-stuck .wrap { height: 60px; }
@media (max-width: 600px) { .head.is-stuck .wrap { height: 56px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-rise] { opacity: 1; transform: none; }
  .btn:hover, .unit:hover, .svc:hover, .mrow:hover { transform: none; }
}

/* --- 23. PRODUCT DETAIL ------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 880px) { .pdp { grid-template-columns: 1fr; } }

.pdp-media {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 48px); display: grid; place-items: center;
  aspect-ratio: 1 / 1; position: sticky; top: 92px;
}
@media (max-width: 880px) { .pdp-media { position: static; aspect-ratio: 4 / 3; } }
.pdp-media img { width: 100%; height: 100%; object-fit: contain; }

.pdp-brand { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--heat-deep); }
.pdp h1 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 12px 0 20px; }

.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.pdp-price .amt { font-family: var(--display); font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 4.4vw, 2.9rem); letter-spacing: -.045em; line-height: 1; }
.pdp-price .lbl { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 24px 0; }
.spec div { background: var(--card); padding: 16px 18px; }
.spec dt { font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.spec dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
@media (max-width: 560px) { .spec { grid-template-columns: 1fr 1fr; } }

/* --- 24. MOBILE TIGHTENING ---------------------------------------------
   Stacked at 375px the page ran past 12,000px. Trimming block padding and
   card chrome pulls it back without dropping a single line of content. */
@media (max-width: 620px) {
  .sec { padding-block: 42px; }
  .sec--tight { padding-block: 32px; }
  .sec-head { margin-bottom: 26px; }

  .svc { padding: 18px 16px 20px; }
  .svc-ico { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 11px; }
  .svc-ico svg { width: 17px; height: 17px; }
  .svc h3 { font-size: .97rem; margin-bottom: 6px; }
  .svc p { font-size: .85rem; line-height: 1.5; }

  .step { padding: 16px 0; }
  .step .num { margin-bottom: 8px; }

  .faq summary { padding: 16px 0; }
  .faq p { padding-bottom: 18px; }

  .price-row { padding: 13px 17px; }
  .unit-body { padding: 12px 13px 14px; }
  .band { padding: 26px 22px 30px; }

  .foot { padding-top: 42px; }
  .foot-grid { gap: 26px; padding-bottom: 32px; }
}

/* --- 25. TOUCH TARGETS -------------------------------------------------
   Standalone links inside data rows and breadcrumbs sat at 16 to 18px tall.
   Inline links inside a sentence are exempt; these are not sentences. */
.price-row a, #pdp nav a, #pdp nav span { display: inline-flex; align-items: center; min-height: 34px; }
.foot-grid a { display: inline-flex; align-items: center; min-height: 30px; }

/* --- 25b. NARROW HEADER ------------------------------------------------
   At 360px the logo, theme toggle, CTA and burger totalled 373px and pushed
   13px past the viewport on every page. The dock at the bottom of the screen
   already carries "Book a service", so the header copy of it goes. */
@media (max-width: 600px) {
  .head .wrap { gap: 12px; height: 64px; }
  .head-end { gap: 8px; }
  .head-end > .btn { display: none; }
}
@media (max-width: 380px) {
  .brand-logo { height: 30px; padding: 3px 5px; }
  .icon-btn, .burger { width: 38px; height: 38px; }
}

/* --- 26. PRINT ---------------------------------------------------------- */
@media print {
  .head, .util, .dock, .foot, .panel::before, .panel::after { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =======================================================================
   27. HUMAN REFINEMENT — AUG 2026
   Softer colour from the logo, less orange, more natural and branch-ready.
   ======================================================================= */
:root {
  --display: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t1: #2f2925;
  --t2: #4a4038;
  --t3: #8e6b55;
  --t4: #b98967;
  --t5: #e9d4c4;
  --t6: #f4e6db;
  --t7: #d8a57d;
  --heat: #d8a57d;
  --heat-deep: #93684d;
  --ice: #ecd7c3;
  --paper: #fbf8f4;
  --card: #fffdfb;
  --sunk: #f2ece5;
  --line: #e3d9cf;
  --line-soft: #eee6de;
  --ink: #1f1915;
  --ink-2: #5c534d;
  --ink-3: #847870;
  --on-heat: #231a15;
  --p-ink: #faf5ef;
  --p-ink-2: #d9cec3;
  --p-line: rgba(255,255,255,.12);
  --r: 16px;
  --r-lg: 24px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(32,24,18,.04), 0 14px 34px -24px rgba(32,24,18,.18);
  --shadow-lg: 0 2px 4px rgba(32,24,18,.05), 0 28px 70px -30px rgba(32,24,18,.24);
}

html[data-theme="dark"] {
  --paper: #171412;
  --card: #221e1a;
  --sunk: #1b1815;
  --line: #3c342e;
  --line-soft: #2d2824;
  --ink: #f6f1eb;
  --ink-2: #d4ccc3;
  --ink-3: #a59a90;
  --heat-deep: #e0b38f;
}

body {
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: -.005em;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -.04em;
}
.d1 { font-size: clamp(2.65rem, 5.8vw, 4.75rem); line-height: .98; }
.d2 { font-size: clamp(2rem, 3.8vw, 3.15rem); line-height: 1.03; }
.d3 { letter-spacing: -.035em; }
.lede { font-size: clamp(1.04rem, 1.35vw, 1.16rem); line-height: 1.72; }

.wrap { width: min(100% - 48px, 1220px); }
.sec { padding-block: clamp(72px, 8.5vw, 116px); }
.sec--tight { padding-block: clamp(48px, 6vw, 76px); }
.sec-head { margin-bottom: clamp(34px, 4vw, 50px); }
.sec-head p { margin-top: 16px; }

.eyebrow {
  font-size: .59rem;
  letter-spacing: .19em;
  margin-bottom: 20px;
}
.eyebrow::before { width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* Quiet luxury buttons: less pill-like, more tailored. */
.btn {
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.015em;
  box-shadow: none;
}
.btn--sm { min-height: 40px; padding: 9px 14px; border-radius: 10px; }
.btn--heat { box-shadow: 0 10px 26px -16px rgba(239,125,60,.9); }
.btn--heat:hover { background: #e87334; box-shadow: 0 15px 30px -16px rgba(239,125,60,.9); }
.btn--line { background: color-mix(in srgb, var(--card) 88%, transparent); }

/* Promo strip becomes a discreet ribbon rather than a loud banner. */
.marquee { background: #171713; color: #d8d3ca; border-bottom: 0; }
.marquee-track { animation-duration: 52s; }
.marquee li { font-size: .56rem; letter-spacing: .17em; padding: 8px 0; opacity: .88; }
.marquee li.hot { color: #ffb27f; opacity: 1; }
.marquee li::after { width: 3px; height: 3px; margin: 0 24px; opacity: .28; }

/* Contact utility is visually merged into the navigation to reduce chrome. */
.util { display: none; }

.head {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent);
  backdrop-filter: saturate(1.2) blur(20px);
  -webkit-backdrop-filter: saturate(1.2) blur(20px);
}
.head .wrap { height: 82px; gap: 26px; }
.head.is-stuck .wrap { height: 70px; }
.head.is-stuck { box-shadow: 0 16px 34px -30px rgba(25,25,21,.7); }
.brand-logo {
  height: 46px;
  border-radius: 9px;
  padding: 4px 7px;
  box-shadow: none;
  border: 1px solid #eee9e2;
}
.menu { gap: 2px; margin-left: 6px; }
.menu a {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-2);
}
.menu a:hover { background: transparent; color: var(--ink); }
.menu a[aria-current] { color: var(--ink); position: relative; }
.menu a[aria-current]::after {
  content: '';
  position: absolute;
  height: 2px;
  border-radius: 2px;
  left: 12px; right: 12px; bottom: 4px;
  background: var(--heat);
}
.head-call { gap: 9px; }
.head-call b { font-size: .88rem; }
.head-call span { font-size: .49rem; }
.icon-btn, .burger { border-color: var(--line-soft); border-radius: 11px; background: color-mix(in srgb, var(--card) 78%, transparent); }

/* Home hero: editorial, warm and spacious instead of industrial. */
.vhero {
  background: #f3eee6;
  color: var(--ink);
  border-bottom: 1px solid #e8e0d7;
}
.vhero::before {
  background:
    radial-gradient(circle at 82% 22%, rgba(239,125,60,.20), transparent 30%),
    radial-gradient(circle at 72% 80%, rgba(239,125,60,.10), transparent 35%),
    linear-gradient(120deg, rgba(255,255,255,.72), transparent 58%);
}
.vhero::after {
  background: none;
  opacity: 0;
}
.vhero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: clamp(48px, 7vw, 92px);
  padding-block: clamp(68px, 8vw, 118px);
}
.vhero h1 { color: var(--ink); max-width: 13ch; }
.vhero .lede { color: var(--ink-2); max-width: 54ch; margin-top: 24px; }
.vhero .btn-row { margin-top: 34px; }
.vhero .btn--ghost { border-color: #cdc5bb; color: var(--ink); background: rgba(255,255,255,.36); }
.vhero .btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,.68); }
.vhero-badge {
  background: rgba(239,125,60,.10);
  color: #8f421e;
  border: 1px solid rgba(239,125,60,.28);
  padding: 8px 12px;
  border-radius: 9px;
  font-size: .56rem;
  letter-spacing: .14em;
  margin-bottom: 26px;
}
.vhero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid #ddd4ca;
  color: #666259;
  font-size: .8rem;
}
.vhero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.vhero-trust span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--heat); }

.vframe {
  width: min(100%, 350px);
  border-radius: 28px;
  border: 8px solid rgba(255,255,255,.72);
  outline: 1px solid rgba(86,76,65,.12);
  box-shadow: 0 32px 70px -34px rgba(40,31,23,.55), 0 10px 24px -18px rgba(40,31,23,.3);
}
.vframe::after {
  content: 'AJ3 technicians · Manila';
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 1;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(20,20,18,.68);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.vhero-ctl { right: 14px; top: 14px; bottom: auto; background: rgba(255,255,255,.78); color: #171713; border-color: rgba(0,0,0,.08); }

/* Brand rail reads like a subtle trust marker. */
.brands { gap: 8px; }
.brands span {
  padding: 9px 14px;
  border-color: #e7e1d9;
  background: rgba(255,255,255,.58);
  font-size: .6rem;
  color: #626057;
}
.brands a:hover span { border-color: #bdb5aa; color: var(--ink); }

/* Signature dark panel: flat charcoal, restrained glow, no visible grid. */
.panel { background: #181816; }
.panel::before {
  inset: auto -12% -40% auto;
  width: 65vw; height: 65vw;
  background: radial-gradient(circle, rgba(239,125,60,.20), transparent 66%);
  filter: blur(18px);
}
.panel::after { opacity: 0; background-image: none; }
.hero { padding-block: clamp(68px, 8vw, 108px); gap: clamp(44px, 6vw, 82px); }
.sizer { max-width: 650px; }
.ramp { margin-top: 40px; }
.result { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); border-radius: 22px; padding: 22px; }
.hp-badge { border-radius: 20px; box-shadow: 0 18px 40px -22px rgba(239,125,60,.9); }
.mrow { border-radius: 16px; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.10); padding: 13px 15px 13px 13px; }
.mrow:hover { transform: translateX(2px); background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.18); }
.stats { border-top-color: rgba(255,255,255,.12); }
.stats div { padding-top: 32px; padding-bottom: 34px; border-right-color: rgba(255,255,255,.10); }
.stats .tag { letter-spacing: .1em; }

/* Generic interior page hero panels. */
main > .panel:first-child > .wrap {
  padding-block: clamp(68px, 7.5vw, 104px) !important;
}
main > .panel:first-child h1 { max-width: 13ch !important; }
main > .panel:first-child .lede { margin-top: 22px !important; }
main > .panel:first-child .btn-row { margin-top: 32px !important; }

/* Product and service cards: larger radii, near-borderless, softer motion. */
.grid { gap: 20px; }
.unit {
  border-color: var(--line-soft);
  border-radius: 22px;
  box-shadow: 0 12px 30px -28px rgba(25,25,21,.35);
}
.unit:hover { border-color: var(--line); box-shadow: 0 24px 54px -30px rgba(25,25,21,.38); transform: translateY(-5px); }
.unit-media { padding: 18px; border-bottom-color: var(--line-soft); }
.unit-body { padding: 18px 18px 20px; }
.hp-chip, .type-chip { border-radius: 9px; }
.unit-brand { font-size: .55rem; color: #a34c22; }
.unit-name { font-size: .96rem; margin-top: 8px; }
.unit-price { font-size: 1.34rem; }
.unit-go { border-color: var(--line); background: var(--paper); }

.svc-grid { gap: 20px; }
.svc {
  border-radius: 22px;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: 0 14px 32px -30px rgba(25,25,21,.35);
}
.svc:hover { border-color: var(--line); box-shadow: 0 24px 54px -32px rgba(25,25,21,.38); transform: translateY(-4px); }
.svc-ico { border-radius: 13px; background: rgba(239,125,60,.10); color: #b25125; }

.price-card { border-color: var(--line); border-radius: 24px; box-shadow: 0 20px 48px -38px rgba(25,25,21,.38); }
.price-row { padding: 19px 22px; }

.steps { border-top: 1px solid var(--line); }
.step { border-bottom-color: var(--line); }
.step .num { color: #ad4e22; }

.checklist { gap: 16px; }
.checklist svg { color: #b45124; }

.faq { max-width: 900px; }
.faq summary { padding: 23px 0; font-weight: 650; font-size: 1.05rem; }
.faq details[open] summary { color: var(--ink); }
.faq details[open] summary::after { border-color: var(--heat); }

.band {
  border-radius: 30px;
  padding: clamp(42px, 6vw, 72px);
  box-shadow: 0 28px 70px -48px rgba(0,0,0,.8);
}
.band h2 { max-width: 19ch; }
.band p { margin-top: 18px; }
.band .btn-row { margin-top: 32px; }

/* Forms and filters feel less utilitarian. */
.field input, .field select, .field textarea, .sortsel, .chip {
  border-color: var(--line);
  background: color-mix(in srgb, var(--card) 96%, transparent);
}
.field input, .field select, .field textarea { border-radius: 12px; padding: 14px 15px; }
.chip { padding: 8px 13px; }
.chip[aria-pressed=true] { background: #1b1b18; border-color: #1b1b18; }
.rail { gap: 28px; }

.pdp-media { border-color: var(--line); border-radius: 28px; box-shadow: 0 24px 60px -44px rgba(25,25,21,.4); }
.spec { border-radius: 18px; }

.foot {
  background: #151513;
  padding-top: 74px;
}
.foot-grid { gap: 52px; padding-bottom: 58px; }
.foot h4 { font-size: .68rem; color: #f4efe8; }
.foot p, .foot ul { color: #bcb7ae; }
.foot-bot { padding-block: 24px 32px; color: #8f8a82; }

.dock { background: color-mix(in srgb, var(--paper) 94%, transparent); border-top-color: var(--line); padding-top: 9px; }

@media (max-width: 1080px) {
  .head .wrap { gap: 18px; }
  .menu a { padding-inline: 10px; }
}

@media (max-width: 940px) {
  .vhero-grid { grid-template-columns: 1fr; text-align: left; padding-block: 64px 72px; }
  .vhero h1 { max-width: 12ch; }
  .vframe { width: min(100%, 330px); margin-inline: 0; }
  .menu { inset: 100px 18px auto 18px; padding: 12px; border-radius: 18px; box-shadow: 0 28px 70px -34px rgba(25,25,21,.4); }
  .menu a[aria-current]::after { display: none; }
}

@media (max-width: 760px) {
  .grid { gap: 14px; }
  .unit { border-radius: 17px; }
  .unit-media { padding: 12px; }
  .unit-body { padding: 14px; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 30px, 1220px); }
  .sec { padding-block: 52px; }
  .sec--tight { padding-block: 38px; }
  .head .wrap { height: 66px; }
  .head.is-stuck .wrap { height: 60px; }
  .brand-logo { height: 36px; }
  .d1 { font-size: clamp(2.42rem, 12vw, 3.55rem); }
  .d2 { font-size: clamp(1.85rem, 9vw, 2.55rem); }
  .vhero-grid { padding-block: 52px 62px; gap: 42px; }
  .vhero .lede { margin-top: 20px; }
  .vhero .btn-row { margin-top: 28px; }
  .vhero .btn-row .btn { width: 100%; }
  .vhero-trust { gap: 10px 16px; margin-top: 28px; padding-top: 20px; }
  .vframe { width: min(100%, 300px); }
  .hero { padding-block: 54px 62px; gap: 38px; }
  main > .panel:first-child > .wrap { padding-block: 54px 62px !important; }
  .band { border-radius: 22px; padding: 32px 24px 36px; }
  .foot { padding-top: 50px; }
  .foot-grid { gap: 30px; padding-bottom: 38px; }
}

@media (max-width: 430px) {
  .marquee li { padding-block: 7px; }
  .marquee li::after { margin-inline: 18px; }
  .vhero-badge { line-height: 1.35; }
  .vframe::after { font-size: .45rem; }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .unit-price { font-size: 1.12rem; }
  .unit-go { width: 30px; height: 30px; }
}


/* Dark-theme polish for the elegant layer. */
html[data-theme="dark"] .vhero { background: #181816; border-bottom-color: #2b2a26; }
html[data-theme="dark"] .vhero::before {
  background:
    radial-gradient(circle at 82% 22%, rgba(239,125,60,.18), transparent 30%),
    radial-gradient(circle at 72% 80%, rgba(239,125,60,.08), transparent 35%);
}
html[data-theme="dark"] .vhero h1 { color: var(--ink); }
html[data-theme="dark"] .vhero .lede { color: var(--ink-2); }
html[data-theme="dark"] .vhero-badge { color: #ffc39b; background: rgba(239,125,60,.11); border-color: rgba(239,125,60,.3); }
html[data-theme="dark"] .vhero .btn--ghost { border-color: #45443e; color: var(--ink); background: rgba(255,255,255,.025); }
html[data-theme="dark"] .vhero .btn--ghost:hover { border-color: #757168; background: rgba(255,255,255,.06); }
html[data-theme="dark"] .vhero-trust { border-top-color: #34332e; color: var(--ink-2); }
html[data-theme="dark"] .brands span { border-color: var(--line); background: rgba(255,255,255,.025); color: var(--ink-2); }
html[data-theme="dark"] .unit-brand { color: #ffad77; }
html[data-theme="dark"] .svc-ico { color: #ffad77; background: rgba(239,125,60,.09); }

/* =======================================================================
   28. AJ3 HUMAN-DESIGNED PASS — AUG 2026
   Less template polish, more local-business editorial design.
   Straight edges, restrained motion, clear hierarchy and practical detail.
   ======================================================================= */
:root {
  --paper: #fbfaf7;
  --card: #ffffff;
  --sunk: #f5f2ec;
  --line: #ddd8cf;
  --line-soft: #ebe7df;
  --ink: #1c1c19;
  --ink-2: #56554f;
  --ink-3: #7c786f;
  --heat: #ef7d3c;
  --heat-deep: #a94b1f;
  --r: 8px;
  --r-lg: 14px;
  --r-sm: 5px;
  --shadow: none;
  --shadow-lg: none;
}

html[data-theme="dark"] {
  --paper: #171714;
  --card: #1e1e1a;
  --sunk: #1b1b18;
  --line: #383731;
  --line-soft: #2e2d28;
  --ink: #f3f0e9;
  --ink-2: #c5c0b6;
  --ink-3: #989388;
}

body { background: var(--paper); }
.wrap { width: min(100% - 48px, 1180px); }

/* The old ticker was visually loud. Keep the promotion in meaningful content instead. */
.marquee { display: none !important; }
.util { display: none !important; }

.head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.head .wrap { height: 74px; gap: 24px; }
.head.is-stuck { box-shadow: none; }
.head.is-stuck .wrap { height: 68px; }
.brand-logo {
  height: 43px;
  padding: 3px 5px;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}
.menu { gap: 2px; }
.menu a {
  padding: 9px 11px;
  border-radius: 0;
  font-size: .86rem;
  font-weight: 600;
}
.menu a[aria-current]::after { left: 11px; right: 11px; bottom: 2px; height: 2px; }
.icon-btn, .burger { border-radius: 5px; background: var(--card); }

.btn {
  min-height: 46px;
  border-radius: 5px;
  padding: 12px 18px;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover, .btn:active { transform: none; }
.btn--sm { border-radius: 4px; }

/* Home: a real full-bleed video banner, not a video card. */
.video-banner {
  position: relative;
  min-height: clamp(650px, 80svh, 860px);
  overflow: hidden;
  background: #1c1916;
  color: #fff;
  display: flex;
  align-items: stretch;
}
.video-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 67% 50%;
  filter: saturate(.82) contrast(.96) brightness(.88);
}
.video-banner__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(13,13,11,.86) 0%, rgba(13,13,11,.65) 35%, rgba(13,13,11,.20) 68%, rgba(13,13,11,.10) 100%),
    linear-gradient(0deg, rgba(13,13,11,.72) 0%, rgba(13,13,11,0) 48%);
}
.video-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(90px, 11vw, 140px);
  padding-bottom: 190px;
}
.video-banner__kicker {
  margin: 0 0 20px;
  padding-left: 44px;
  position: relative;
  font-family: var(--mono);
  font-size: .61rem;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.video-banner__kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 30px;
  height: 1px;
  background: var(--heat);
}
.video-banner h1 {
  max-width: 12.5ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6.2vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.052em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.video-banner__copy {
  max-width: 57ch;
  margin-top: 24px;
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.7;
}
.video-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 30px;
}
.video-banner__textlink {
  color: #fff;
  font-weight: 650;
  font-size: .91rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.58);
  padding-bottom: 3px;
}
.video-banner__textlink:hover { border-bottom-color: var(--heat); }
.video-banner__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,.22);
  background: rgba(15,15,13,.58);
}
.video-banner__foot-inner {
  min-height: 118px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr)) auto;
  align-items: center;
  gap: 22px;
}
.video-banner__foot-inner > div { min-width: 0; }
.video-banner__foot b {
  display: block;
  font-family: var(--display);
  font-size: .91rem;
  letter-spacing: -.02em;
  color: #fff;
}
.video-banner__foot span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  line-height: 1.4;
  color: rgba(255,255,255,.62);
}
.video-banner__ctl {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
}
.video-banner__ctl svg { width: 15px; height: 15px; }
.video-banner__ctl > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.video-banner__ctl .ico-play { display: none; }
.video-banner__ctl[data-paused] .ico-play { display: block; }
.video-banner__ctl[data-paused] .ico-pause { display: none; }

/* Interior page mastheads: warm, editorial and intentionally simple. */
main > .panel:first-child {
  background: var(--sunk);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
main > .panel:first-child::before,
main > .panel:first-child::after { display: none; }
main > .panel:first-child > .wrap:first-child {
  padding-top: clamp(58px, 7vw, 88px) !important;
  padding-bottom: clamp(46px, 6vw, 74px) !important;
}
main > .panel:first-child .eyebrow,
main > .panel:first-child .eyebrow--ice { color: var(--heat-deep); }
main > .panel:first-child h1 {
  color: var(--ink) !important;
  max-width: 17ch !important;
  font-size: clamp(2.55rem, 5.2vw, 4.45rem);
  line-height: 1;
}
main > .panel:first-child .lede {
  color: var(--ink-2);
  max-width: 62ch;
}
main > .panel:first-child .stats {
  color: var(--ink);
  border-top: 1px solid var(--line);
}
main > .panel:first-child .stats div { border-right-color: var(--line); }
main > .panel:first-child .stats .tag { color: var(--ink-3); }

/* The sizing tool and CTA bands remain dark, but flat and purposeful. */
.panel { background: #23201d; }
.panel::before, .panel::after { display: none; }
.band { border-radius: 8px; box-shadow: none; }
.result, .mrow { border-radius: 7px; }
.hp-badge { border-radius: 7px; box-shadow: none; }

/* Cards should feel drawn by a designer, not generated as floating tiles. */
.grid, .svc-grid { gap: 18px; }
.unit,
.svc,
.price-card,
.pdp-media,
.spec {
  border-radius: 7px;
  box-shadow: none;
}
.unit:hover,
.svc:hover {
  transform: none;
  box-shadow: none;
  border-color: #c8bdae;
}
.unit-media { padding: 16px; }
.unit-body { padding: 17px 17px 19px; }
.hp-chip, .type-chip, .svc-ico { border-radius: 4px; }
.unit-go { border-radius: 50%; }
.price-row { padding: 18px 20px; }

/* Fewer decorative effects; let spacing and copy do the work. */
.sec { padding-block: clamp(66px, 7.5vw, 96px); }
.sec--sunk { background: var(--sunk); }
.sec-head { align-items: flex-start; }
.eyebrow { letter-spacing: .16em; }
.brands span { border-radius: 3px; background: transparent; padding: 8px 12px; }
.steps { border-top-color: var(--line); }
.faq summary { font-size: 1rem; }
.field input, .field select, .field textarea, .sortsel { border-radius: 5px; }
.chip { border-radius: 999px; }

/* Reveal content immediately; functional polish without staged template animation. */
.js [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }

.foot { background: #1d1917; }
.foot-grid { gap: 44px; }
.dock { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 940px) {
  .video-banner { min-height: 780px; }
  .video-banner__media { object-position: 62% 50%; }
  .video-banner__shade {
    background:
      linear-gradient(90deg, rgba(13,13,11,.87) 0%, rgba(13,13,11,.58) 60%, rgba(13,13,11,.20) 100%),
      linear-gradient(0deg, rgba(13,13,11,.78) 0%, rgba(13,13,11,0) 52%);
  }
  .video-banner__content { padding-bottom: 225px; }
  .video-banner__foot-inner { grid-template-columns: repeat(2, minmax(0,1fr)) 48px; padding-block: 22px; min-height: 0; }
  .video-banner__foot-inner > div:nth-child(3),
  .video-banner__foot-inner > div:nth-child(4) { display: none; }
  .menu { top: 80px; border-radius: 5px; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 30px, 1180px); }
  .head .wrap { height: 64px; }
  .head.is-stuck .wrap { height: 60px; }
  .video-banner { min-height: 760px; }
  .video-banner__media { object-position: 58% center; }
  .video-banner__shade {
    background:
      linear-gradient(90deg, rgba(13,13,11,.84) 0%, rgba(13,13,11,.49) 78%, rgba(13,13,11,.28) 100%),
      linear-gradient(0deg, rgba(13,13,11,.86) 0%, rgba(13,13,11,.08) 62%);
  }
  .video-banner__content { justify-content: flex-start; padding-top: 92px; padding-bottom: 205px; }
  .video-banner h1 { font-size: clamp(2.65rem, 12.8vw, 4rem); max-width: 11ch; }
  .video-banner__copy { font-size: .98rem; line-height: 1.62; max-width: 38ch; }
  .video-banner__actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .video-banner__actions .btn { width: auto; }
  .video-banner__foot-inner { grid-template-columns: 1fr 1fr 42px; gap: 13px; padding-block: 17px; }
  .video-banner__ctl { width: 42px; height: 42px; }
  .sec { padding-block: 54px; }
  main > .panel:first-child h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .band { border-radius: 6px; }
}

@media (max-width: 430px) {
  .video-banner { min-height: 735px; }
  .video-banner__content { padding-top: 72px; }
  .video-banner__kicker { padding-left: 36px; font-size: .55rem; }
  .video-banner__kicker::before { width: 24px; }
  .video-banner__foot b { font-size: .8rem; }
  .video-banner__foot span { font-size: .65rem; }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}


/* --- 27b. FIXES + BRANCHES -------------------------------------------- */
main > .panel:first-child .stats .num { color: var(--ink); }
main > .panel:first-child .stats .tag { color: var(--ink-3); }

.util { background: #3b322d; color: #eadfd4; }
.util .live, .util a:hover { color: #f5e5d5; }
.util .dot { background: #f0d1b6; }

.video-banner__kicker::before { background: rgba(255,255,255,.65); }
.video-banner__shade {
  background:
    linear-gradient(90deg, rgba(16,14,12,.80) 0%, rgba(16,14,12,.56) 38%, rgba(16,14,12,.18) 70%, rgba(16,14,12,.08) 100%),
    linear-gradient(0deg, rgba(16,14,12,.62) 0%, rgba(16,14,12,0) 50%);
}
.video-banner__foot { background: rgba(20,17,14,.54); }

.head-call svg, .brands a:hover span, .menu a[aria-current], .foot a:hover { color: var(--heat-deep); }
.icon-btn:hover, .btn--line:hover, .unit:hover, .svc:hover { border-color: var(--heat-deep); }

.foot-grid { grid-template-columns: 1.55fr 1fr 1fr 1.15fr 1.05fr; }
@media (max-width: 1050px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

.branch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.branch-card {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 16px;
  transition: border-color .18s ease, background-color .18s ease;
}
.branch-card:hover { border-color: var(--heat-deep); background: #fff; }
.branch-card strong {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -.02em;
}
.branch-card span {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: .86rem;
  line-height: 1.45;
}
.branch-card--plain { background: var(--sunk); }
.branch-card--plain:hover { background: var(--sunk); }
.branch-note { margin-top: 16px; color: var(--ink-3); font-size: .92rem; }

@media (max-width: 980px) {
  .branch-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .branch-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 430px) {
  .branch-grid { grid-template-columns: 1fr; }
}


/* --- 28. BRANCH NAVIGATION + BRANCH PAGES ------------------------------ */
.branch-nav { position: relative; display: flex; align-items: center; }
.branch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 0;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.branch-toggle:hover,
.branch-toggle[aria-current="page"] { color: var(--heat-deep); }
.branch-toggle .chev {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  display: inline-block;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: 55% 55%;
  transition: transform .18s ease;
}
.branch-nav[data-open] .branch-toggle .chev,
.branch-nav:hover .branch-toggle .chev,
.branch-nav:focus-within .branch-toggle .chev {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.branch-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  z-index: 120;
  min-width: 220px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 18px 45px -28px rgba(32,24,18,.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.branch-nav:hover .branch-menu,
.branch-nav:focus-within .branch-menu,
.branch-nav[data-open] .branch-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu .branch-menu a {
  display: block;
  padding: 10px 11px;
  border-radius: 4px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--ink-2);
}
.menu .branch-menu a:hover,
.menu .branch-menu a[aria-current="page"] {
  background: var(--sunk);
  color: var(--ink);
}
.branch-menu__all {
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 5px;
  padding-bottom: 10px !important;
  font-weight: 700 !important;
}

.branch-hero { padding-block: clamp(58px, 7vw, 90px); }
.branch-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: end;
}
.branch-hero__copy { max-width: 64ch; }
.branch-hero__copy .lede { margin-top: 18px; }
.branch-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.branch-hero__aside {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 14px;
}
.branch-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.branch-meta:last-child { border-bottom: 0; padding-bottom: 0; }
.branch-meta span:first-child {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.branch-meta strong { font-size: .94rem; font-weight: 650; }
.branch-meta a { text-decoration: none; color: var(--heat-deep); }

.branch-directory {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.branch-directory .branch-card { min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; }
.branch-card small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: .76rem;
  font-weight: 650;
  color: var(--heat-deep);
}
.branch-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.branch-service {
  background: var(--card);
  padding: clamp(22px, 3vw, 34px);
}
.branch-service h3 { font-size: 1.08rem; }
.branch-service p { margin-top: 9px; color: var(--ink-2); font-size: .92rem; }
.branch-contact-note {
  border-left: 3px solid var(--heat);
  padding: 3px 0 3px 18px;
  color: var(--ink-2);
  max-width: 65ch;
}

@media (max-width: 940px) {
  .menu .branch-nav { width: 100%; display: block; }
  .branch-toggle { width: 100%; justify-content: space-between; padding: 13px 14px; font-size: 1rem; }
  .branch-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin: 0 0 6px;
    padding: 5px;
    border: 0;
    border-radius: 5px;
    background: var(--sunk);
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .branch-nav[data-open] .branch-menu { display: block; }
  .branch-nav:hover:not([data-open]) .branch-menu,
  .branch-nav:focus-within:not([data-open]) .branch-menu { display: none; }
  .menu .branch-menu a { padding: 10px 12px; font-size: .93rem; }
  .branch-hero__inner { grid-template-columns: 1fr; align-items: start; }
  .branch-directory { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .branch-directory { grid-template-columns: 1fr 1fr; }
  .branch-services { grid-template-columns: 1fr; }
  .branch-meta { grid-template-columns: 84px 1fr; }
}
@media (max-width: 430px) {
  .branch-directory { grid-template-columns: 1fr; }
}


/* --- 29. MOBILE LEFT NAV DRAWER ---------------------------------------- */
.mobile-menu-head,
.mobile-menu-actions,
.nav-scrim { display: none; }

@media (max-width: 940px) {
  body.nav-open { overflow: hidden; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 198;
    background: rgba(24, 19, 16, .42);
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, visibility .24s ease;
  }
  body.nav-open .nav-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu {
    display: flex !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 200;
    width: min(86vw, 360px);
    height: 100dvh;
    margin: 0 !important;
    padding: 0 20px 24px !important;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border: 0 !important;
    border-right: 1px solid var(--line);
    border-radius: 0 !important;
    box-shadow: 22px 0 60px -34px rgba(32, 24, 18, .48) !important;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .30s cubic-bezier(.22,.61,.36,1), visibility .30s ease;
  }
  .menu[data-open] {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 88px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    flex: none;
  }
  .mobile-menu-brand {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    background: transparent !important;
  }
  .mobile-menu-brand img {
    width: 152px;
    height: auto;
    display: block;
    border-radius: 5px;
  }
  .mobile-menu-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-family: Arial, sans-serif;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
  }

  .menu > a,
  .branch-toggle {
    min-height: 50px;
    width: 100%;
    padding: 13px 8px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--ink-2);
    background: transparent !important;
  }
  .menu > a:hover,
  .menu > a[aria-current="page"],
  .branch-toggle:hover,
  .branch-toggle[aria-current="page"] {
    color: var(--ink);
  }
  .menu > a[aria-current="page"] {
    position: relative;
    padding-left: 19px !important;
  }
  .menu > a[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--heat);
    transform: translateY(-50%);
  }
  .menu > a[aria-current="page"]::after { display: none !important; }

  .menu .branch-nav { width: 100%; display: block; }
  .branch-toggle { justify-content: space-between; }
  .branch-menu {
    margin: 0 0 8px !important;
    padding: 7px 0 9px 16px !important;
    background: var(--sunk) !important;
    border-left: 2px solid var(--heat) !important;
  }
  .menu .branch-menu a {
    padding: 9px 10px !important;
    min-height: 42px;
    border: 0 !important;
    font-size: .93rem !important;
  }

  .mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: auto;
    padding-top: 28px;
  }
  .mobile-menu-actions p {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--ink-3);
    font-size: .8rem;
    line-height: 1.5;
  }
  .mobile-menu-actions .btn {
    min-height: 44px;
    padding-inline: 10px;
    font-size: .8rem;
  }

  .burger {
    display: flex;
    position: relative;
    z-index: 201;
  }
}

@media (max-width: 430px) {
  .menu { width: min(90vw, 340px); padding-inline: 16px !important; }
  .mobile-menu-brand img { width: 140px; }
  .mobile-menu-actions { grid-template-columns: 1fr; }
  .mobile-menu-actions p { grid-column: auto; }
}


/* --- 31. HOME SPLIT HERO + FACEBOOK REEL ------------------------------
   The social video stays in its natural portrait format at the right side,
   while the main message remains a calm, readable editorial hero. */
.home-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: clamp(42px, 7vw, 94px);
  align-items: center;
  padding-block: clamp(58px, 7vw, 92px);
}
.home-hero__copy { max-width: 720px; }
.home-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--heat-deep);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.home-hero__kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.home-hero h1 {
  max-width: 13ch;
  color: var(--ink);
  font-size: clamp(3rem, 5.7vw, 5rem);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.055em;
}
.home-hero__lead {
  max-width: 57ch;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: clamp(1.03rem, 1.4vw, 1.15rem);
  line-height: 1.75;
}
.home-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 30px;
}
.home-hero__textlink {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.home-hero__textlink:hover { border-bottom-color: var(--heat-deep); color: var(--heat-deep); }
.home-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  margin-top: clamp(42px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.home-hero__facts > div {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid var(--line);
}
.home-hero__facts > div:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.home-hero__facts b {
  display: block;
  font-family: var(--display);
  font-size: .91rem;
  letter-spacing: -.02em;
}
.home-hero__facts span {
  display: block;
  margin-top: 5px;
  color: var(--ink-3);
  font-size: .76rem;
  line-height: 1.45;
}

.reel-card {
  width: min(100%, 410px);
  justify-self: end;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px;
  box-shadow: 0 24px 60px -42px rgba(39,28,20,.34);
}
.reel-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 4px 14px;
}
.reel-card__head > div { min-width: 0; }
.reel-card__head strong {
  display: block;
  margin-top: 3px;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -.025em;
}
.reel-card__head > svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--heat-deep);
}
.reel-card__eyebrow {
  display: block;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reel-card__frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #141210;
  overflow: hidden;
}
.reel-card__frame iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.reel-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 4px 3px;
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}
.reel-card__link:hover { color: var(--heat-deep); }
.reel-card__link svg { width: 16px; height: 16px; }

@media (max-width: 960px) {
  .home-hero__grid {
    grid-template-columns: minmax(0,1fr) minmax(280px,.7fr);
    gap: 36px;
  }
  .home-hero h1 { font-size: clamp(2.7rem, 6.5vw, 4rem); }
}
@media (max-width: 780px) {
  .home-hero__grid {
    grid-template-columns: 1fr;
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .home-hero__copy { max-width: none; }
  .home-hero h1 { max-width: 14ch; }
  .reel-card { justify-self: start; width: min(100%, 390px); }
}
@media (max-width: 560px) {
  .home-hero__grid { gap: 42px; }
  .home-hero h1 { font-size: clamp(2.55rem, 11.8vw, 3.65rem); max-width: 12ch; }
  .home-hero__lead { font-size: .98rem; line-height: 1.65; }
  .home-hero__actions { align-items: flex-start; flex-direction: column; }
  .home-hero__facts { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .home-hero__facts > div {
    padding: 0 0 14px;
    margin: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .home-hero__facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .reel-card { width: 100%; padding: 10px; }
  .reel-card__head { padding: 7px 4px 12px; }
}


/* Facebook's old embedded social-video plugin is no longer relied on.
   The exact Reel is presented as a robust branded preview linking to Facebook. */
.reel-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 9 / 15.6;
  min-height: 520px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(248,242,236,.95)),
    var(--sunk);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.reel-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 54%, rgba(216,165,125,.12) 54% 66%, transparent 66%),
    linear-gradient(45deg, transparent 0 65%, rgba(147,104,77,.06) 65% 78%, transparent 78%);
  pointer-events: none;
}
.reel-preview__brand,
.reel-preview__center,
.reel-preview__foot { position: relative; z-index: 1; }
.reel-preview__brand { padding: 22px 22px 0; }
.reel-preview__brand img {
  width: min(190px, 58%);
  height: auto;
  background: #fff;
  padding: 6px 9px;
  border-radius: 4px;
}
.reel-preview__center {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 26px;
}
.reel-preview__play {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--heat);
  color: var(--on-heat);
  margin-bottom: 20px;
  transition: transform .18s ease, background-color .18s ease;
}
.reel-preview:hover .reel-preview__play { transform: scale(1.04); background: #c99672; }
.reel-preview__play svg { width: 22px; height: 22px; margin-left: 3px; }
.reel-preview__center strong {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -.04em;
}
.reel-preview__center > span:last-child {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: .82rem;
}
.reel-preview__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reel-preview__foot svg { width: 17px; height: 17px; color: var(--heat-deep); }

@media (max-width: 780px) {
  .reel-preview { min-height: 500px; }
}


/* --- 28. HOME SIZE STAGE ------------------------------------------------ */
.size-stage-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 16%, rgba(216,165,125,.22), transparent 28%),
    radial-gradient(circle at 86% 30%, rgba(255,255,255,.06), transparent 20%),
    linear-gradient(180deg, #26211d 0%, #211c19 100%);
}
.size-stage-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .18;
  pointer-events: none;
}
.size-stage { position: relative; z-index: 1; padding-block: clamp(70px, 9vw, 110px) 0; }
.size-stage__wrap { display: grid; gap: 30px; }
.size-stage__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 360px);
  gap: clamp(24px, 5vw, 56px);
  align-items: end;
}
.size-stage__copy h2 { color: var(--p-ink); max-width: 12ch; margin: 0; }
.size-stage__copy .lede { color: var(--p-ink-2); max-width: 58ch; margin-top: 16px; }
.size-stage__meter { display: flex; justify-content: flex-end; }
.size-stage__meter-card {
  position: relative;
  min-height: 280px;
  width: min(100%, 360px);
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.size-stage__meter-card::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 18px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,165,125,.38), rgba(216,165,125,0) 70%);
  pointer-events: none;
}
.size-stage__meter-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5.6rem, 13vw, 8.6rem);
  line-height: .86;
  letter-spacing: -.08em;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.size-stage__meter-unit {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
.size-stage__meter-room {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 18px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: .92rem;
}
.size-stage__slider-block {
  padding: 26px 28px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.size-stage__slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--p-ink-2);
}
.size-stage__slider-head span {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.size-stage__slider-head strong {
  color: var(--p-ink);
  font-size: 1rem;
  font-family: var(--display);
  letter-spacing: -.02em;
}
.size-stage__track input[type=range]::-webkit-slider-runnable-track {
  height: 16px;
  background: linear-gradient(90deg, #6b4d38 0%, #b98967 26%, #d8a57d 58%, #ead3be 84%, #fbf0e6 100%);
}
.size-stage__track input[type=range]::-moz-range-track {
  height: 16px;
  background: linear-gradient(90deg, #6b4d38 0%, #b98967 26%, #d8a57d 58%, #ead3be 84%, #fbf0e6 100%);
}
.size-stage__track input[type=range]::-webkit-slider-thumb {
  margin-top: -7px;
  width: 30px;
  height: 30px;
  border: 4px solid #2b2521;
  box-shadow: 0 0 0 5px rgba(216,165,125,.18), 0 8px 24px rgba(0,0,0,.42);
}
.size-stage__track input[type=range]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 4px solid #2b2521;
  box-shadow: 0 0 0 5px rgba(216,165,125,.18), 0 8px 24px rgba(0,0,0,.42);
}
.size-stage__ticks span { color: rgba(255,255,255,.62); }
.size-stage__result-row { margin-bottom: 42px; }
.size-stage__result {
  grid-template-columns: auto 1fr;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(6px);
}
.size-stage__badge {
  width: 126px;
  height: 126px;
  background: linear-gradient(160deg, #d8a57d, #b98967 72%);
}
.size-stage__badge.is-changed { animation: badgePulse .55s ease; }
@keyframes badgePulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.size-stage__body h3 { color: var(--p-ink); }
.size-stage__body p { color: var(--p-ink-2); }
.size-stage__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.size-stage__toggle {
  text-align: left;
  min-height: 44px;
  padding-inline: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.size-stage__toggle-main { font-size: .9rem; font-weight: 700; }
.size-stage__toggle-sub { font-size: .68rem; opacity: .72; }
.size-stage__toggle[aria-expanded="true"] .size-stage__toggle-main::before { content: '− '; }
.size-stage__toggle[aria-expanded="false"] .size-stage__toggle-main::before { content: '+ '; }
.size-stage__disclaim { max-width: 68ch; }
.size-stage__stock-shell {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s ease, opacity .28s ease, margin-top .35s ease;
  margin-top: 0;
}
.size-stage__stock-shell.is-open { opacity: 1; margin-top: 8px; }
.size-stage__stock-wrap {
  padding: 0 0 48px;
}
.size-stage__stock-head { margin-bottom: 16px; }
.size-stage__stock-head .tag { color: var(--p-ink); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; }
.size-stage__stock-head a { color: var(--ice); }
.size-stage__stock-list { gap: 14px; }
.size-stage__stock-list .mrow {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.size-stage__stock-list.is-refreshing .mrow {
  animation: stockLift .34s ease;
}
@keyframes stockLift {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 960px) {
  .size-stage__hero { grid-template-columns: 1fr; }
  .size-stage__meter { justify-content: flex-start; }
  .size-stage__meter-card { min-height: 220px; width: 100%; max-width: 420px; }
}
@media (max-width: 720px) {
  .size-stage { padding-top: 58px; }
  .size-stage__slider-block,
  .size-stage__meter-card { padding: 20px; border-radius: 14px; }
  .size-stage__result { grid-template-columns: 1fr; }
  .size-stage__badge { width: 98px; height: 98px; }
  .size-stage__actions { flex-direction: column; align-items: stretch; }
  .size-stage__actions .btn { width: 100%; justify-content: center; }
  .size-stage__meter-unit { font-size: .68rem; }
}


/* --- 29. GLOBAL SCROLL MOTION ------------------------------------------
   Applied by JS to meaningful content blocks on every page. Downward scroll
   reveals content; upward scroll lets content leave with a softer reverse
   motion. No layout shift, no animation when reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
  html.js body.scrollfx-ready .scrollfx-item {
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) scale(.992) !important;
    transition:
      opacity .62s cubic-bezier(.22,.61,.36,1),
      transform .72s cubic-bezier(.22,.61,.36,1) !important;
    transition-delay: var(--scrollfx-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  html.js body.scrollfx-ready .scrollfx-item.scrollfx-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  html.js body.scrollfx-ready .scrollfx-item.scrollfx-out {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) scale(.996) !important;
    transition-duration: .28s, .34s !important;
    transition-delay: 0ms !important;
  }

  html.js body.scrollfx-ready .scrollfx-item.scrollfx-soft {
    transform: translate3d(0, 16px, 0) !important;
  }
  html.js body.scrollfx-ready .scrollfx-item.scrollfx-soft.scrollfx-visible {
    transform: translate3d(0, 0, 0) !important;
  }
  html.js body.scrollfx-ready .scrollfx-item.scrollfx-soft.scrollfx-out {
    transform: translate3d(0, 14px, 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js body .scrollfx-item,
  html.js body .scrollfx-item.scrollfx-visible,
  html.js body .scrollfx-item.scrollfx-out {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* --- 31. BRANCH EDITORIAL PAGES --------------------------------------- */
.branch-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}
.branch-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 650;
  text-decoration: none;
}
.branch-jump a:hover { border-color: var(--heat-deep); color: var(--ink); }

.branch-showcase {
  position: relative;
  border-top: 1px solid var(--line-soft);
}
.branch-showcase:nth-of-type(even) { background: var(--sunk); }
.branch-showcase__grid,
.branch-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(34px, 6vw, 78px);
}
.branch-showcase--reverse .branch-showcase__media,
.branch-story--reverse .branch-story__media { order: 2; }
.branch-showcase--reverse .branch-showcase__copy,
.branch-story--reverse .branch-story__copy { order: 1; }

.branch-showcase__media,
.branch-story__media {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #f5eee8, #fffdfb);
}
.branch-showcase__media::before,
.branch-story__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 20%, rgba(216,165,125,.24), transparent 27%),
    linear-gradient(135deg, transparent 0 72%, rgba(147,104,77,.055) 72% 100%);
  pointer-events: none;
  z-index: 1;
}
.branch-showcase__media img,
.branch-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(24px, 5vw, 58px);
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .branch-showcase__media img,
html[data-theme="dark"] .branch-story__media img { mix-blend-mode: normal; }
.branch-media-note {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,253,251,.88);
  border: 1px solid rgba(70,50,38,.10);
  color: #665b53;
  font-size: .72rem;
  font-weight: 650;
  backdrop-filter: blur(8px);
}
.branch-showcase__copy,
.branch-story__copy { max-width: 620px; }
.branch-showcase__copy .lede,
.branch-story__copy .lede { margin-top: 16px; }
.branch-showcase__copy p:not(.lede),
.branch-story__copy p:not(.lede) { margin-top: 16px; color: var(--ink-2); }
.branch-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 18px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}
.branch-points li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: .91rem;
}
.branch-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--heat);
}
.branch-showcase__actions,
.branch-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.branch-story { border-top: 1px solid var(--line-soft); }
.branch-story--sunk { background: var(--sunk); }
.branch-story__media { min-height: 390px; }
.branch-story__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--heat-deep);
  font-size: .78rem;
  font-weight: 800;
}
.branch-contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 30px;
  align-items: start;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.branch-contact-panel__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.branch-contact-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .9rem;
}
.branch-contact-panel__row strong { color: var(--ink); text-align: right; }
.branch-contact-panel__row a { color: var(--heat-deep); text-decoration: none; }

@media (max-width: 900px) {
  .branch-showcase__grid,
  .branch-story__grid,
  .branch-contact-panel { grid-template-columns: 1fr; }
  .branch-showcase--reverse .branch-showcase__media,
  .branch-showcase--reverse .branch-showcase__copy,
  .branch-story--reverse .branch-story__media,
  .branch-story--reverse .branch-story__copy { order: initial; }
  .branch-showcase__media,
  .branch-story__media { min-height: 330px; }
}
@media (max-width: 600px) {
  .branch-showcase__media,
  .branch-story__media { min-height: 280px; }
  .branch-points { grid-template-columns: 1fr; }
  .branch-contact-panel { padding: 22px; }
  .branch-contact-panel__row { flex-direction: column; gap: 4px; }
  .branch-contact-panel__row strong { text-align: left; }
}


/* --- 32. BRANCH IMAGE SLIDERS ----------------------------------------- */
.branch-showcase__media,
.branch-story__media {
  padding: 0;
}
.branch-showcase__media::before,
.branch-story__media::before {
  display: none;
}
.branch-slider {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: linear-gradient(145deg, #f5eee8, #fffdfb);
}
html[data-theme="dark"] .branch-slider {
  background: linear-gradient(145deg, #2a2420, #1f1b18);
}
.branch-slider__viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
}
.branch-slider__viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(216,165,125,.22), transparent 27%),
    linear-gradient(135deg, transparent 0 72%, rgba(147,104,77,.05) 72% 100%);
}
.branch-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(4%, 0, 0) scale(.985);
  transition: opacity .52s ease, transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.branch-slider__slide--active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}
.branch-slider__slide img,
.branch-showcase__media .branch-slider__slide img,
.branch-story__media .branch-slider__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(24px, 5vw, 58px);
  mix-blend-mode: multiply;
  transition: transform 5.5s ease;
}
html[data-theme="dark"] .branch-slider__slide img { mix-blend-mode: normal; }
.branch-slider__slide--active img { transform: scale(1.025); }
.branch-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid rgba(50,38,30,.14);
  border-radius: 50%;
  background: rgba(255,253,251,.88);
  backdrop-filter: blur(10px);
  color: #3b3029;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.branch-slider:hover .branch-slider__nav,
.branch-slider:focus-within .branch-slider__nav {
  opacity: 1;
  transform: translateY(0);
}
.branch-slider__nav:hover { background: #fff; }
.branch-slider__nav--prev { left: 14px; }
.branch-slider__nav--next { right: 14px; }
.branch-slider__nav span {
  width: 9px;
  height: 9px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
}
.branch-slider__nav--prev span { transform: rotate(-135deg); margin-left: 4px; }
.branch-slider__nav--next span { transform: rotate(45deg); margin-right: 4px; }
.branch-slider__footer {
  position: relative;
  z-index: 4;
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(255,253,251,.88);
  backdrop-filter: blur(12px);
}
html[data-theme="dark"] .branch-slider__footer { background: rgba(31,27,24,.9); }
.branch-slider__caption {
  min-width: 0;
  color: var(--ink-3);
  font-size: .73rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-slider__dots { display: flex; align-items: center; gap: 6px; }
.branch-slider__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3) 35%, transparent);
  transition: width .22s ease, background-color .22s ease;
}
.branch-slider__dot.is-active {
  width: 22px;
  background: var(--heat-deep);
}
.branch-slider__count {
  font-size: .72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.branch-slider__count b { color: var(--ink); font-weight: 750; }

@media (max-width: 900px) {
  .branch-slider__nav { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .branch-slider__nav { width: 40px; height: 40px; margin-top: -20px; }
  .branch-slider__nav--prev { left: 9px; }
  .branch-slider__nav--next { right: 9px; }
  .branch-slider__footer { grid-template-columns: 1fr auto; }
  .branch-slider__caption { display: none; }
  .branch-slider__dots { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .branch-slider__slide,
  .branch-slider__slide img,
  .branch-slider__nav,
  .branch-slider__dot { transition: none !important; }
}


/* --- 33. FULL-WIDTH SLIDER IMAGES + THUMBNAILS ------------------------- */
.branch-showcase__media { min-height: 560px; }
.branch-story__media { min-height: 520px; }

.branch-slider {
  width: 100%;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.branch-slider__viewport {
  width: 100%;
  background: #eee8e1;
}

.branch-slider__slide img,
.branch-showcase__media .branch-slider__slide img,
.branch-story__media .branch-slider__slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}

.branch-slider__slide--active img {
  transform: scale(1.015);
}

.branch-slider__thumbs {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: var(--card);
  border-top: 1px solid var(--line-soft);
}

.branch-slider__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  background: var(--sunk);
  opacity: .62;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.branch-slider__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: inherit;
  pointer-events: none;
}

.branch-slider__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0 !important;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.branch-slider__thumb:hover,
.branch-slider__thumb:focus-visible {
  opacity: .92;
}

.branch-slider__thumb.is-active {
  opacity: 1;
  border-color: var(--heat-deep);
}

.branch-slider__footer {
  min-height: 48px;
  grid-template-columns: 1fr auto;
  padding: 8px 12px;
}
.branch-slider__dots { display: none; }

@media (max-width: 900px) {
  .branch-showcase__media,
  .branch-story__media { min-height: 500px; }
}

@media (max-width: 600px) {
  .branch-showcase__media,
  .branch-story__media { min-height: 420px; }
  .branch-slider__thumbs { gap: 6px; padding: 8px; }
  .branch-slider__thumb { border-radius: 5px; }
  .branch-slider__footer { display: flex; justify-content: space-between; }
  .branch-slider__caption { display: block; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .branch-slider__thumb { transition: none !important; }
}