/* Kor: cold, clean, product-like. White wall, deep navy, ice-blue light,
   one warm signal (the call) for the person whose AC just died.
   The base rules are the finished still; all motion sits in the
   no-preference block at the end. */

@font-face {
  font-family: 'Rubik';
  src: url('assets/fonts/rubik.woff') format('woff');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --wall: #e2e4e7;          /* the rendered wall, graded cool; the page continues it */
  --paper: #f3f5f6;
  --white: #ffffff;
  --ink: #0c1b2a;
  --ink-2: #485868;         /* 7:1 on paper */
  --ink-3: #5f6e7c;         /* 5:1 on paper, meta only */
  --line: #d8dfe5;
  --frost: #e4eef5;
  --navy: #0a1726;
  --navy-2: #112338;
  --navy-line: #22374f;
  --on-navy: #e9f1f7;
  --on-navy-2: #a9bccd;     /* 8:1 on navy */
  --ice: #a8dcf4;
  --signal: #c2410c;        /* the call: 5.2:1 under white text */
  --signal-deep: #9a330a;
  --wa: #12833f;            /* the kit's deepened WhatsApp green, AA under white */
  --focus: #1d6fd6;

  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-hero: clamp(2.6rem, 1.7rem + 4.4vw, 5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.3rem);
  --fs-lede: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1240px;
  --radius: 18px;
  --header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 8px; inset-inline-start: 8px; z-index: 100;
  padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white);
  font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 16px;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.1; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-xl { min-height: 60px; font-size: 1.1875rem; border-radius: 18px; padding: 0 26px; }
.btn-call { background: var(--signal); color: var(--white); box-shadow: 0 10px 24px -12px rgba(154, 51, 10, 0.75); }
.btn-call:active { background: var(--signal-deep); }
.btn-wa { background: var(--wa); color: var(--white); box-shadow: 0 10px 24px -12px rgba(10, 80, 38, 0.7); }
.btn-wa:active { background: #0e6c33; }
.btn-ghost { background: transparent; color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--navy-line); }
.btn-mark {
  background: var(--white); color: var(--ink); min-height: 48px; padding: 0 16px; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-mark img { width: 22px; height: 22px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .btn-call:hover { background: #ad3a0b; }
  .btn-wa:hover { background: #0f7538; }
  .btn-mark:hover { box-shadow: inset 0 0 0 1px #b9c5cf; }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #3a5574; }
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  height: var(--header-h);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; margin-inline-end: auto; }
.brand-mark { width: 30px; height: 30px; color: var(--ink); --mark-slot: var(--paper); }
.brand-name { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1; }
.brand-trade { color: var(--ink-3); font-size: 0.9375rem; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); line-height: 1.1; }
.header-tools { display: flex; align-items: center; gap: 6px; }
.btn-head { display: none; min-height: 44px; padding: 0 16px; font-size: 1rem; border-radius: 12px; box-shadow: none; }
.lang, .menu-toggle {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 1rem; color: var(--ink);
}
.lang { box-shadow: inset 0 0 0 1px var(--line); }
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle .icon-close, .site-header[data-open="true"] .menu-toggle .icon-open { display: none; }
.site-header[data-open="true"] .menu-toggle .icon-close { display: block; }

/* Phone: the menu is a disclosure. Every destination at once, opaque, big rows. */
.menu { display: none; }
.site-header[data-open="true"] .menu {
  display: block; position: absolute; inset-inline: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 6px var(--gutter) 18px;
  box-shadow: 0 24px 40px -24px rgba(12, 27, 42, 0.35);
}
.menu a {
  display: flex; align-items: center; min-height: 56px;
  font-size: 1.25rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu li:last-child a { border-bottom: 0; }
.kit-note-header { max-width: var(--max); margin: 0 auto 12px; }

@media (max-width: 420px) {
  .brand-trade { display: none; }
}

/* ---------- hero ---------- */

.hero { position: relative; background: var(--wall); isolation: isolate; }
.hero-media { position: absolute; inset: 0 0 auto 0; z-index: -1; }
.hero-media img {
  width: 100%; height: min(133.34vw, 96svh); object-fit: cover; object-position: 50% 0;
}
/* The render's plain wall fades into the page colour under the words. */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(226, 228, 231, 0) 34%, rgba(226, 228, 231, 0.78) 58%, var(--wall) 92%);
}
.hero-copy {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: calc(min(133.34vw, 96svh) * 0.335) var(--gutter) 34px;
}
.eyebrow { color: var(--ink-2); font-weight: 500; font-size: 1rem; margin-bottom: 10px; }
.hero h1 {
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em;
  max-width: 11ch; text-wrap: balance;
}
.hero-lede { font-size: var(--fs-lede); color: var(--ink-2); margin-top: 14px; max-width: 30ch; }
.hero-actions { display: grid; gap: 10px; margin-top: 26px; max-width: 520px; }
.hero-actions .btn { width: 100%; }
.hero .btn-xl { min-height: 64px; font-size: 1.25rem; }
.speed {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; max-width: 520px;
  padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--line);
}
.speed .icon { width: 24px; height: 24px; margin-top: 1px; color: var(--ink-2); }
.speed-line { display: block; font-weight: 600; line-height: 1.35; }
.speed-note { display: block; color: var(--ink-3); font-size: 1rem; margin-top: 2px; }

@media (min-width: 560px) {
  .hero-actions { grid-template-columns: 1fr 1fr; }
}

/* Desktop: the wide render fills the first screen; the words sit on the open wall. */
@media (min-width: 1024px) {
  .hero { min-height: clamp(620px, calc(100svh - var(--header-h)), 900px); display: flex; align-items: center; }
  .hero-media { inset: 0; }
  .hero-media img { height: 100%; object-position: 0% 18%; }
  [dir="ltr"] .hero-media img { transform: scaleX(-1); }
  .hero-media::after { background: linear-gradient(90deg, rgba(226, 228, 231, 0) 45%, rgba(226, 228, 231, 0.55) 100%); }
  [dir="rtl"] .hero-media::after { background: linear-gradient(270deg, rgba(226, 228, 231, 0) 45%, rgba(226, 228, 231, 0.55) 100%); }
  /* The open wall is always on the inline start: the image is mirrored for English. */
  .hero-copy { width: 100%; padding: 120px var(--gutter) 64px; display: grid; justify-items: start; }
  .hero-copy > * { width: min(100%, 560px); }
  .hero h1 { max-width: 12ch; }
}

/* ---------- section scaffolding ---------- */

.section-title { font-size: var(--fs-h2); font-weight: 750; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.section-lede { font-size: var(--fs-lede); color: var(--ink-2); margin-top: 12px; max-width: 36ch; }
section { scroll-margin-top: var(--header-h); }

/* ---------- the remote ---------- */

.fault {
  background:
    radial-gradient(70% 50% at 50% 42%, #173250 0%, rgba(23, 50, 80, 0) 70%),
    var(--navy);
  color: var(--on-navy);
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}
.fault .section-lede { color: var(--on-navy-2); }
.fault-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; gap: 36px;
  grid-template-areas: 'copy' 'remote' 'message';
}
.fault-copy { grid-area: copy; }
.remote { grid-area: remote; }
.message { grid-area: message; }

.remote {
  position: relative;
  width: min(100%, 348px); margin: 0 auto;
  padding: 26px 20px 22px;
  border-radius: 46px 46px 64px 64px / 46px 46px 80px 80px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6f8 46%, #e4e9ed 100%);
  color: var(--ink);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 18px rgba(30, 55, 80, 0.10),
    inset 2px 0 4px rgba(255, 255, 255, 0.6),
    0 2px 0 #c7d0d8,
    0 40px 70px -24px rgba(0, 0, 0, 0.75),
    0 14px 26px -14px rgba(0, 0, 0, 0.55);
}
.remote-ir {
  width: 70px; height: 10px; margin: -12px auto 18px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #3b3f46, #121418);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.25);
}

.lcd {
  position: relative; overflow: hidden;
  min-height: 148px; padding: 12px 16px 14px;
  border-radius: 14px;
  background: #c4ccc9;
  color: #24313a;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.28),
    0 0 0 7px #18222c,
    0 0 0 8px #0c1218,
    0 1px 0 9px rgba(255, 255, 255, 0.85);
  margin: 8px 8px 24px;
}
.lcd-glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(130% 100% at 50% 0%, #e9f8ff 0%, #bfe6f8 55%, #9fd6f0 100%);
}
.lcd[data-lit="true"] .lcd-glow { opacity: 1; }
.lcd[data-lit="true"] { color: #062033; }
.lcd-status, .lcd-text { position: relative; }
.lcd-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid rgba(6, 32, 51, 0.16);
}
.lcd-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(6, 32, 51, 0.3); }
.lcd[data-lit="true"] .lcd-dot { background: #1c6fa8; }
.lcd[data-urgent="true"] .lcd-dot { background: var(--signal); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18); }
.lcd-text { font-size: 1.0625rem; font-weight: 500; line-height: 1.38; min-height: 4.14em; }
.lcd-caret { display: none; width: 2px; height: 1.05em; margin-inline-start: 2px; background: currentColor; vertical-align: -0.15em; }
.lcd[data-typing="true"] .lcd-caret { display: inline-block; }
.lcd-hint { position: absolute; inset-inline: 16px; top: 52px; color: rgba(36, 49, 58, 0.62); font-size: 1rem; }
.lcd[data-lit="true"] .lcd-hint { display: none; }

.remote-keys { border: 0; margin: 0; padding: 0 2px; min-width: 0; }
.key-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.key-power-wrap { position: relative; display: grid; justify-items: center; }
.key-power {
  display: grid; justify-items: center; gap: 8px; cursor: pointer; padding: 2px 16px 0;
  -webkit-tap-highlight-color: transparent;
}
.power-cap {
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 50% 30%, #e2662f 0%, #c2410c 58%, #a4360a 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(80, 20, 0, 0.35),
    0 3px 0 #8c2e08,
    0 8px 14px -6px rgba(140, 46, 8, 0.8);
}
.power-cap .icon { width: 26px; height: 26px; }
.power-name { font-size: 1rem; font-weight: 600; color: #2a3946; }
.key-input:checked + .key-power .power-cap {
  box-shadow:
    inset 0 3px 6px rgba(80, 20, 0, 0.55),
    0 1px 0 #8c2e08,
    0 0 0 4px #fff,
    0 0 0 6px var(--signal);
  transform: translateY(2px);
}
.key-input:checked + .key-power .power-name { color: var(--signal-deep); }

.key-group {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 4px 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: #66747f;
}
.key-group::after { content: ''; flex: 1; height: 1px; background: #d3dae0; }
.key-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 6px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #e9eef2 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px #d4dce3,
    0 3px 0 #c3ccd4,
    0 6px 10px -4px rgba(15, 35, 55, 0.28);
  font-weight: 500; font-size: 1.0625rem; line-height: 1.15; color: #102435;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.key-soft { background: linear-gradient(180deg, #f4f8fb 0%, #e1e9ef 100%); }
.key-input:checked + .key {
  background: linear-gradient(180deg, #17324f 0%, #0d2238 100%);
  color: #fff;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    0 0 0 1px #0d2238,
    0 1px 0 #0a1a2b,
    0 0 0 4px rgba(168, 220, 244, 0.65);
  transform: translateY(2px);
}
.key-input:focus-visible + .key,
.key-input:focus-visible + .key-power .power-cap { outline: 3px solid var(--focus); outline-offset: 4px; }
.key-input:focus-visible + .key-power { outline: none; }
.remote-brand {
  margin-top: 22px; text-align: center;
  font-weight: 800; font-size: 1.125rem; letter-spacing: 0.12em; color: #cdd5dc;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(20, 40, 60, 0.12);
}

.message { max-width: 560px; }
.message-label { color: var(--on-navy-2); font-size: 1rem; font-weight: 500; }
.message-text {
  margin-top: 8px; font-size: var(--fs-lede); font-weight: 500; line-height: 1.4; color: var(--white);
  padding-inline-start: 16px; border-inline-start: 3px solid var(--ice);
}
.message-tip { margin-top: 14px; color: var(--on-navy-2); }
.message-actions { display: grid; gap: 10px; margin-top: 24px; }
.message-actions .btn { width: 100%; }

@media (min-width: 900px) {
  .fault-inner {
    grid-template-columns: minmax(0, 1fr) 380px; column-gap: clamp(40px, 6vw, 96px); row-gap: 28px;
    grid-template-areas: 'copy remote' 'message remote';
    align-items: start;
  }
  .remote { margin: 0; grid-row: 1 / span 2; }
  .message-actions { grid-template-columns: auto auto; justify-content: start; }
}

/* ---------- services ---------- */

.services {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(56px, 9vw, 128px) var(--gutter);
  display: grid; gap: 32px;
  grid-template-areas: 'head' 'figure' 'list';
}
.services-head { grid-area: head; }
.louver { grid-area: figure; margin-inline: calc(var(--gutter) * -1); }
.louver img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.louver figcaption { padding: 12px var(--gutter) 0; color: var(--ink-3); font-size: 1rem; }
.svc-list { grid-area: list; counter-reset: svc; border-top: 1px solid var(--line); }
.svc-list li {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 8px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--line);
}
.svc-num { grid-row: span 2; font-weight: 500; font-size: 0.9375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 5px; }
.svc-list h3 { font-size: 1.3125rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.svc-list p { color: var(--ink-2); margin-top: 4px; }

@media (min-width: 900px) {
  .services {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px);
    grid-template-areas: 'head head' 'figure list';
    align-items: start;
  }
  .louver { margin: 0; }
  .louver img { border-radius: 24px; }
  .louver figcaption { padding-inline: 4px; }
}

/* ---------- areas ---------- */

.areas {
  background: var(--white);
  padding: clamp(56px, 9vw, 120px) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  display: grid; gap: 28px;
  border-block: 1px solid var(--line);
}
.areas-body { display: grid; gap: 24px; }
.map { margin: 0; }
.map-art { width: 100%; height: auto; display: block; background: var(--paper); border-radius: 22px; }
.map-sea { fill: var(--frost); }
.map-coast { fill: none; stroke: #9cc2da; stroke-width: 1.5; }
.map-sea-label { fill: #5b88a6; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; }
.map-ring { fill: none; stroke: #b9cddc; stroke-width: 1; stroke-dasharray: 3 5; }
.map-ring-2 { stroke: #d2dee7; }
.map-dot { fill: var(--ink); }
.map-halo { fill: rgba(29, 111, 214, 0.14); }
.map-base .map-dot { fill: var(--focus); }
.map-town text { fill: var(--ink); font-size: 13px; font-weight: 600; font-family: var(--font); }
.map-base text { font-weight: 750; }
.map figcaption { color: var(--ink-3); font-size: 1rem; margin-top: 10px; }
.area-list { border-top: 1px solid var(--line); }
.area-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.area-name { font-weight: 650; font-size: 1.125rem; min-width: 7.5em; }
.area-eta { color: var(--ink-2); }
.area-tag {
  margin-inline-start: auto; font-size: 1rem; font-weight: 600; color: var(--focus);
  padding: 2px 10px; border-radius: 999px; background: rgba(29, 111, 214, 0.1);
}
.notice { color: var(--ink-3); font-size: 1rem; max-width: 60ch; }

@media (min-width: 900px) {
  .areas-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
}

/* ---------- contact ---------- */

.contact {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}
.contact-grid { display: grid; gap: 28px; margin-top: 28px; }
.contact-main { display: grid; gap: 10px; max-width: 560px; }
.contact-main .btn { width: 100%; }
.contact-label { color: var(--ink-3); font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 560px) {
  .contact-main { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.2fr 1fr 0.8fr; align-items: end; }
}

/* ---------- the kit's honest notes ---------- */

.kit-note {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px -18px rgba(12, 27, 42, 0.4);
  max-width: 560px;
}
.kit-note q { display: block; margin-top: 8px; font-weight: 500; quotes: none; padding-inline-start: 12px; border-inline-start: 3px solid var(--ice); }
.kit-note .note-close {
  margin-top: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--frost); font-weight: 600; cursor: pointer;
}
.kit-note-dark { background: var(--navy-2); color: var(--on-navy); box-shadow: inset 0 0 0 1px var(--navy-line); }
.kit-note-dark .note-close { background: #1d3550; color: var(--on-navy); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy); color: var(--on-navy-2);
  padding: 48px var(--gutter) 40px;
  display: grid; gap: 10px; justify-items: start;
}
.site-footer > * { max-width: 64ch; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: var(--on-navy); font-weight: 800; font-size: 1.375rem; margin-bottom: 6px; }
.footer-brand .brand-mark { color: var(--on-navy); --mark-slot: var(--navy); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-navy); font-weight: 500; }
@media (min-width: 900px) {
  .site-footer { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
}

/* ---------- the quick bar (phone only) ---------- */

.quickbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 25;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -20px rgba(12, 27, 42, 0.4);
}
.quickbar[data-show="false"] { visibility: hidden; transform: translateY(110%); }
.quickbar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quickbar .btn { min-height: 54px; }
.kit-note-bar { margin: 0 0 10px; max-width: none; }

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .quickbar { display: none; }
  .menu { display: block; position: static; }
  .menu ul { display: flex; gap: 4px; }
  .menu a { min-height: 44px; padding: 0 14px; font-size: 1.0625rem; font-weight: 500; border: 0; border-radius: 12px; }
  .menu a:hover { background: var(--frost); }
  .menu-toggle { display: none; }
  .btn-head { display: inline-flex; }
  .site-header[data-open="true"] .menu { position: static; padding: 0; border: 0; box-shadow: none; background: none; }
}

/* ---------- motion: only when the visitor allows it ---------- */

@media (prefers-reduced-motion: no-preference) {
  .btn, .key, .power-cap, .lang, .menu-toggle {
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, box-shadow 160ms ease;
  }
  .btn:active, .lang:active, .menu-toggle:active { transform: scale(0.97); }
  .key:active { transform: translateY(2px) scale(0.98); }
  .key-power:active .power-cap { transform: translateY(2px) scale(0.97); }
  .quickbar { transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s; }
  .quickbar[data-show="false"] { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 200ms; }
  .lcd-dot { transition: background-color 200ms ease, box-shadow 200ms ease; }
  .lcd[data-typing="true"] .lcd-caret { animation: caret 0.9s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .site-header[data-open="true"] .menu { animation: menu-in 220ms cubic-bezier(0.23, 1, 0.32, 1); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
}