/* ==========================================================================
   מנעולן בזמן — Design System v2
   Light, airy, card-based. Charcoal actions, pastel iconography, soft shadows.
   Typeface: Futurism (self-hosted, 200/400/700 — verified full Hebrew coverage).
   RTL-first. Mobile-first. Breakpoints at 620 / 700 / 1000 / 1280.
   ========================================================================== */

/* ------------------------------------------------------------------- FONTS */
@font-face {
  font-family: 'Futurism';
  src: url('/assets/fonts/futurism-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futurism';
  src: url('/assets/fonts/futurism-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Ground — the neutral carries a slight green bias so it belongs to the mark */
  --page:       #F2F5F1;
  --surface:    #FFFFFF;
  --surface-2:  #FAFCF9;
  --surface-3:  #E9EFE7;

  /* Ink */
  --ink:        #101A14;
  --body:       #4C5651;
  --body-2:     #57625B;   /* 5.44:1 on --surface-3 */
  --on-dark:    #F2F8F3;
  --on-dark-2:  #C7DDCB;
  --on-dark-3:  #B4CFBA;   /* 4.91:1 on --dark-lift, the lightest ground it lands on */

  /* Lines */
  --line:        #DDE6DB;
  --line-2:      #ECF1EA;
  --line-dark:   rgba(242, 248, 243, .22);
  --line-dark-2: rgba(242, 248, 243, .12);

  /* Brand.
     --brand is the green sampled off the logo. It is a fill, not a text
     colour: on white it measures 2.87:1. Green *text* therefore uses
     --brand-ink on light grounds (5.28:1) and --brand-glow on dark (5.83:1). */
  --brand:      #55AC26;
  --brand-lift: #63C42C;
  --brand-ink:  #3A7A16;   /* 5.28:1 on white */
  --brand-ink-2: #31680F;  /* 5.95:1 on --brand-wash */
  --brand-glow: #7BD742;
  --brand-wash: #EAF4E2;
  --on-brand:   #06220E;   /* 5.89:1 on --brand */

  /* The deep ground, sampled off the background artwork. Every dark band on
     the site is this one colour now. */
  --dark:       #0D4925;
  --dark-lift:  #135B2E;
  --dark-sunk:  #0A3A1E;

  /* Icon tones. The six pastels were a different system's signature; one
     accent means one family, separated by depth rather than by hue. */
  --t1-bg: #E4F2DA; --t1: #33690F;
  --t2-bg: #DCEEE2; --t2: #1D6135;
  --t3-bg: #E9F3E0; --t3: #3A7A16;
  --t4-bg: #D9EBDE; --t4: #17572E;
  --t5-bg: #EEF6E7; --t5: #2F6410;
  --t6-bg: #E1EFE5; --t6: #245B33;

  --alarm:      #A62E24;
  --alarm-bg:   #FBEDEA;
  --whatsapp:   #17843F;

  /* Type */
  --f: 'Futurism', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-3xs: 11px;
  --t-2xs: 12.5px;
  --t-xs:  13.5px;
  --t-sm:  15px;
  --t-md:  16.5px;
  --t-lg:  18px;
  --t-xl:  clamp(20px, 2.2vw, 23px);
  --t-2xl: clamp(23px, 3.2vw, 30px);
  --t-3xl: clamp(27px, 4.2vw, 40px);
  --t-4xl: clamp(31px, 5.6vw, 52px);
  --t-5xl: clamp(36px, 7vw, 66px);

  --lh-tight: 1.14;
  --lh-head:  1.26;
  --lh-body:  1.78;
  --lh-loose: 1.92;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 44px; --s8: 64px;
  --s9: 88px; --s10: 120px;
  --band: clamp(56px, 8.5vw, 108px);

  /* Frame */
  --shell: 1200px;
  --read:  700px;
  --gutter: 18px;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Elevation — soft and low, never harsh */
  --sh-1: 0 6px 16px -10px rgba(6,34,14,.26);
  --sh-2: 0 12px 30px -12px rgba(6,34,14,.28);
  --sh-3: 0 18px 40px -12px rgba(6,34,14,.34);

  --header-h: 92px;
  --dock-h: 68px;
}

/* ------------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--f);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  word-spacing: .05em;
  padding-bottom: var(--dock-h);
}
@media (min-width: 700px) { body { padding-bottom: 0; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--f); font-weight: 700; color: var(--ink);
  line-height: var(--lh-head); text-wrap: balance;
  /* Futurism's space is only 0.175em wide — far narrower than the ~0.26em
     norm. Without extra word-spacing, Hebrew words visually collide, and any
     negative tracking makes it worse. Hence: no negative tracking on headings. */
  letter-spacing: -.005em; word-spacing: .12em;
}
p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--on-dark); padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--r) var(--r); font-size: var(--t-sm); font-weight: 700;
}
.skip-link:focus { inset-inline-start: 12px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ LAYOUT */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 700px) { :root { --gutter: 28px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

.band { padding-block: var(--band); }
.band--sunk { background: var(--surface); }
.band--ink { background: var(--dark); color: var(--on-dark-2); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--on-dark); }
.band--tight { padding-block: calc(var(--band) * .68); }

.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------- SECTION HEAD */
.sec-head { margin-bottom: var(--s6); }
.sec-index {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em;
  color: var(--brand-ink-2); background: var(--brand-wash);
  padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--s4);
}
.band--ink .sec-index { color: #A6E97E; background: rgba(123,215,66,.10); }
.sec-title { font-size: var(--t-3xl); max-width: 24ch; }
.sec-sub { margin-top: var(--s4); max-width: 60ch; font-size: var(--t-md); color: var(--body); line-height: var(--lh-loose); }
.band--ink .sec-sub { color: var(--on-dark-2); }

/* ------------------------------------------------------------------ HEADER */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(1.8) blur(26px);
  -webkit-backdrop-filter: saturate(1.8) blur(26px);
  border-bottom: 1px solid var(--line-2);
  height: var(--header-h);
  display: flex; align-items: center;
}
.site-header .shell { display: flex; align-items: center; gap: var(--s5); width: 100%; }
@media (min-width: 1150px) { }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; gap: var(--s1); margin-inline: auto; }
  .nav a {
    font-size: var(--t-sm); font-weight: 400; color: var(--body);
    padding: 9px 15px; border-radius: var(--r-pill);
    transition: color .18s, background .18s;
  }
  .nav a:hover { color: var(--ink); background: var(--surface-3); }
  .nav a[aria-current="page"] { color: var(--ink); font-weight: 700; background: var(--surface-3); }
}

.header-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s3); }
@media (min-width: 1000px) { .header-end { margin-inline-start: 0; } }

.pip { display: none; align-items: center; gap: 7px; font-size: var(--t-2xs); color: var(--body); }
@media (min-width: 820px) { .pip { display: inline-flex; } }
.pip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-lift); box-shadow: 0 0 0 0 rgba(85,172,38,.55); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18,161,95,.45); } 70% { box-shadow: 0 0 0 8px rgba(18,161,95,0); } 100% { box-shadow: 0 0 0 0 rgba(18,161,95,0); } }

/* ----------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 13px var(--s5); border-radius: var(--r-sm);
  font-family: var(--f); font-size: var(--t-sm); font-weight: 700;
  border: 1px solid transparent; line-height: 1.2; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .14s, box-shadow .18s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--call { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-1); }
.btn--call:hover { background: var(--brand-lift); box-shadow: var(--sh-2); }
.btn--call-solid { background: var(--brand); color: var(--on-brand); }
.btn--call-solid:hover { background: var(--brand-lift); }
.btn--ghost {
  background: rgba(255,255,255,.55); border-color: rgba(16,26,20,.14); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn--ghost-ink { border-color: var(--line-dark); color: var(--on-dark); }
.btn--ghost-ink:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
/* Secondary: the call is the primary action, so this is an outline. The
   glyph keeps the channel's own green so it is still recognisable. */
.btn--wa {
  background: rgba(255,255,255,.55); border-color: rgba(16,26,20,.14); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
}
.btn--wa svg { color: var(--whatsapp); }
.btn--wa:hover { border-color: var(--whatsapp); color: var(--whatsapp); }
.pagehead .btn--wa, .cta .btn--wa, .band--ink .btn--wa {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: var(--on-dark);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.pagehead .btn--wa svg, .cta .btn--wa svg, .band--ink .btn--wa svg { color: var(--brand-glow); }
.pagehead .btn--wa:hover, .cta .btn--wa:hover, .band--ink .btn--wa:hover {
  background: var(--on-dark); color: var(--ink); border-color: var(--on-dark);
}
.pagehead .btn--wa:hover svg, .cta .btn--wa:hover svg, .band--ink .btn--wa:hover svg { color: var(--whatsapp); }
.btn--lg { padding: 16px var(--s6); font-size: var(--t-md); }
.btn--block { width: 100%; }
.header-end .btn { padding: 11px var(--s5); font-size: var(--t-xs); }

/* ------------------------------------------------------------ BURGER/DRAWER */
.burger { display: inline-flex; flex-direction: column; gap: 4px; padding: 11px 7px; }
@media (min-width: 1000px) { .burger { display: none; } }
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.drawer {
  color: var(--ink);
  position: fixed; inset: 0; z-index: 90; background: var(--surface); color: var(--body);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; padding: var(--s5) var(--gutter) var(--s8); display: flex; flex-direction: column;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s6); }
.drawer__close { min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; padding: 8px 13px; color: var(--ink); border-radius: var(--r-sm); background: var(--surface-3); }
.drawer nav ul { list-style: none; }
.drawer nav li + li { border-top: 1px solid var(--line-2); }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) 0; font-size: var(--t-xl); font-weight: 700; color: var(--ink);
}
.drawer nav a .mono { font-size: var(--t-2xs); font-weight: 400; color: var(--body-2); }
.drawer__ctas { margin-top: var(--s7); display: grid; gap: var(--s3); }

/* ------------------------------------------------------- MOBILE ACTION DOCK */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  height: var(--dock-h); padding: var(--s2) var(--s3);
}
@media (min-width: 700px) { .dock { display: none; } }
.dock a { display: flex; align-items: center; justify-content: center; gap: var(--s2); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 700; }
.dock a svg { width: 18px; height: 18px; }
/* The dock is the last thing a thumb reaches, so it repeats the same
   hierarchy as everywhere else: the call is the green box, WhatsApp is the
   quieter one. */
.dock__call { background: var(--brand); color: var(--on-brand); }
.dock__wa { background: var(--dark); color: var(--on-dark); }
.dock__wa svg { color: var(--brand-glow); }

/* ======================================================================
   HERO v4  —  reference layout, brand assets
   ====================================================================== */
:root {
  --brand-logo: #55AC26;      /* sampled from the logo artwork */
  --brand-logo-lift: #63C42C;
  --hero-green: #0D4925;      /* sampled from the background base */
  --shell-wide: 1200px;       /* narrowed on Liav's call; was 1368 */
}

/* ---------------------------------------------------------------- HEADER */
/* On the home page the header sits over the hero with no ground of its own.
   Everywhere else it is the solid sticky bar the inner pages already had. */
.topbar {
  background: transparent; border: 0;
  position: relative; z-index: 3;
}
/* inner pages: the bar has a page under it, so it needs its own ground */
.topbar--solid { background: var(--hero-green); }
.topbar--solid .shell { align-items: center; padding-block: 9px; }
.topbar--solid .topcall { padding-top: 0; padding-block: 6px; min-height: 42px; }
.topbar--solid .topcall__lbl, .topbar--solid .topcall__num { font-size: 17px; }
.topbar--solid .topcall__ic { width: 17px; height: 17px; }
.topbar__note {
  font-size: 14px; color: #C7DDCB; display: flex; align-items: center; gap: 14px;
}
.topbar__hours {
  padding-inline-start: 14px; border-inline-start: 1px solid rgba(255,255,255,.26);
}
@media (max-width: 860px) { .topbar__hours { display: none; } }
@media (max-width: 620px) { .topbar__note { display: none; } }
.topbar .shell {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); padding-block: 18px 0;
}
/* The lockup is a stacked mark, taller than it is wide, so the bar is built
   around it rather than the other way round. */
.brandlock { display: block; order: 2; line-height: 0; }
.brandlock__img { height: 86px; width: auto; display: block; }
.brandlock--inner .brandlock__img { height: 68px; }
.brandlock--drawer .brandlock__img { height: 54px; }
.topbar__end { order: 2; display: flex; align-items: center; gap: 14px; }
.topbar .burger { display: none; }
@media (max-width: 1000px) { .topbar .burger { display: inline-flex; } }
.topbar .burger span { background: #fff; }
.topcall { order: 1; display: flex; align-items: center; gap: 11px; padding-top: 7px; }
.topcall__num {
  font-size: 27px; font-weight: 700; color: var(--brand-logo-lift);
  letter-spacing: .005em; font-variant-numeric: tabular-nums;
}
.topcall__ic { width: 21px; height: 21px; color: #fff; flex-shrink: 0; }
.topcall__lbl { font-size: 19px; font-weight: 700; color: #fff; }
.topcall:hover .topcall__num { color: #fff; }

.hnav { position: relative; z-index: 3; }
.hnav .shell { max-width: var(--shell-wide); }
.hnav__row {
  display: flex; justify-content: flex-start; align-items: center;
  gap: 34px; padding-block: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.hnav__row a {
  font-size: 19px; font-weight: 700; color: #fff; white-space: nowrap;
  transition: color .16s;
}
.hnav__row a:hover { color: var(--brand-logo-lift); }
.hnav__row a[aria-current="page"] { color: var(--brand-logo-lift); }
@media (max-width: 1000px) { .hnav { display: none; } }

/* ======================================================================
   LIQUID GLASS
   A nearly clear panel that reads through to the background. Its presence
   comes from the rim, not the fill: --glass-rim paints a 1px gradient border
   via a mask, bright where the light would catch it and soft on the far side,
   and --glass-lens re-blurs a narrow band inside the edge so the panel bends
   what is behind it the way real glass does.
   ====================================================================== */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(157deg,
              rgba(255,255,255,.24) 0%,
              rgba(255,255,255,.10) 46%,
              rgba(255,255,255,.17) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.35) brightness(1.18);
  backdrop-filter: blur(18px) saturate(1.35) brightness(1.18);
  box-shadow:
    0 22px 48px -18px rgba(4,22,12,.62),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,255,255,.2);
  transition: background .22s, box-shadow .22s, transform .18s;
}
/* refraction: a band inside the edge that blurs harder than the body */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  -webkit-backdrop-filter: blur(3px) saturate(1.15) brightness(1.22);
  backdrop-filter: blur(3px) saturate(1.15) brightness(1.22);
  /* Four edge gradients, unioned. Each is opaque at its own edge and gone
     20px in, so the band has no inner boundary to read as a second frame. */
  -webkit-mask:
    linear-gradient(to right, #000, transparent 20px),
    linear-gradient(to left, #000, transparent 20px),
    linear-gradient(to bottom, #000, transparent 20px),
    linear-gradient(to top, #000, transparent 20px);
  -webkit-mask-composite: source-over;
  mask:
    linear-gradient(to right, #000, transparent 20px),
    linear-gradient(to left, #000, transparent 20px),
    linear-gradient(to bottom, #000, transparent 20px),
    linear-gradient(to top, #000, transparent 20px);
  mask-composite: add;
}
/* the specular rim */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg,
              rgba(255,255,255,1) 0%,
              rgba(255,255,255,.28) 24%,
              rgba(255,255,255,.08) 56%,
              rgba(255,255,255,.7) 100%);
  padding: 1.5px; z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass > * { position: relative; z-index: 2; }

/* A browser without backdrop-filter gets a solid panel rather than a
   near-transparent one over a photograph. And a browser that parses the fill
   but not mask-composite would paint the rim gradient across the whole card
   instead of a 1px ring, so the rim is declared only where the mask works. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(10,58,30,.88); border: 1px solid rgba(255,255,255,.22); }
  .glass::before, .glass::after { display: none; }
}
@supports not ((mask-composite: add) or (-webkit-mask-composite: xor)) {
  .glass::before, .glass::after { display: none; }
  .glass { border: 1px solid rgba(255,255,255,.34); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(10,58,30,.86); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before { display: none; }
}

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative; overflow: visible;
  background: var(--hero-green) url("/assets/img/hero-bg.jpg") center / cover no-repeat;
  color: #fff;
}
/* the artwork has bright patches; this keeps white text safe everywhere */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,32,16,.62) 0%, rgba(6,32,16,.30) 34%,
                    rgba(6,32,16,.58) 60%, rgba(6,32,16,.76) 80%,
                    rgba(6,32,16,.86) 100%);
}
.hero__body { position: relative; z-index: 2; text-align: center; padding-top: 92px; }
.hero__body .shell { max-width: var(--shell-wide); }

.hero h1 {
  font-size: 62px; line-height: 1.06; font-weight: 700; color: #fff;
  letter-spacing: -.012em; word-spacing: .14em; margin: 0 auto; max-width: 20ch;
  text-shadow: 0 2px 22px rgba(0,0,0,.34);
}
.hero__sub {
  margin: 26px auto 0; font-size: 22px; font-weight: 400; color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.34);
}

/* ---- call box: 450 x 84 in the reference ---- */
.callbox {
  margin: 36px auto 0; width: 450px; max-width: 100%; min-height: 84px;
  background: var(--brand-logo); color: #06220E;
  border-radius: 8px; padding: 12px 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.45);
  transition: background .16s, transform .14s;
}
.callbox:hover { background: var(--brand-logo-lift); }
.callbox:active { transform: translateY(1px); }
/* the reference sets a dotted texture inside both short edges */
.callbox::before, .callbox::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; width: 34px;
  background-image: radial-gradient(rgba(6,34,14,.34) 1.4px, transparent 1.4px);
  background-size: 7px 7px;
}
.callbox::before { inset-inline-start: 12px; }
.callbox::after { inset-inline-end: 12px; }
.callbox__label { font-size: 19px; font-weight: 700; line-height: 1.1; }
.callbox__num {
  font-size: 38px; font-weight: 700; line-height: 1.15; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* ---- trust trio: centres 220px apart in the reference ---- */
.trio {
  margin: 42px auto 0; display: flex; justify-content: center;
  align-items: flex-start; gap: 74px;
}
.trio__item { width: 190px; text-align: center; }
.trio__top { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 14px; min-height: 56px; }
.trio__ic { width: 46px; height: 46px; flex-shrink: 0; }
.trio__ic svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trio__v { font-size: 46px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; }
.trio__v--sm { font-size: 30px; }
.trio__u { margin-top: 6px; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -.005em; }

/* ---- service cards straddling the hero edge ---- */
.hero__cards { position: relative; z-index: 2; margin-top: 48px; padding-bottom: 64px; }
.hero__cards .shell { max-width: var(--shell-wide); }
.rail {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px;
}
/* On a wide screen the six cards are each their own panel, so the container
   gives its material back. */
@media (min-width: 701px) {
  .rail.glass {
    background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .rail.glass::before, .rail.glass::after { display: none; }
}
.rail__card {
  border-radius: 22px; min-height: 152px;
  padding: 20px 16px 16px; display: flex; flex-direction: column;
}
.rail__card:hover {
  transform: translateY(-4px);
  background: linear-gradient(157deg,
              rgba(255,255,255,.26) 0%,
              rgba(255,255,255,.13) 44%,
              rgba(255,255,255,.2) 100%);
  box-shadow:
    0 26px 52px -18px rgba(4,22,12,.66),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.2);
}
.rail__ic { height: 46px; display: flex; align-items: center; justify-content: center; }
.rail__ic svg { width: 40px; height: 40px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail__t {
  font-size: 14px; font-weight: 700; color: #fff; line-height: 1.28;
  text-align: start; text-wrap: balance; text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.rail__go {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.42); display: grid; place-items: center;
  color: #fff; font-size: 15px; line-height: 1;
  transition: background .16s, color .16s, border-color .16s;
}
.rail__card:hover .rail__go { background: rgba(255,255,255,.9); border-color: transparent; color: var(--on-brand); }

/* the page has to clear the overhanging cards */
.hero + * { padding-top: var(--band); }

/* ---- floating WhatsApp ---- */
.wafloat {
  position: fixed; z-index: 65; inset-inline-start: 24px; bottom: 74px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--whatsapp); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px -6px rgba(23,132,63,.6);
  transition: transform .16s, background .16s;
}
.wafloat:hover { transform: scale(1.06); background: #11692F; }
.wafloat svg { width: 30px; height: 30px; }
.wafloat span {
  position: absolute; inset-inline-start: 0; top: 62px; width: 56px;
  text-align: center; font-size: 11px; color: var(--body); line-height: 1.2;
}
@media (max-width: 700px) { .wafloat { display: none; } }

/* -------------------------------------------------------- PAGE HEAD (inner) */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--dark) url("/assets/img/hero-bg-900.jpg") center / cover no-repeat;
  color: var(--on-dark-2); padding-block: var(--s8) var(--s7);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,42,22,.86), rgba(8,42,22,.95));
}
.pagehead .shell { position: relative; }
.pagehead h1 { font-size: var(--t-4xl); max-width: 24ch; word-spacing: .13em; color: var(--on-dark); }
.pagehead__lede { margin-top: var(--s4); font-size: var(--t-lg); color: var(--on-dark-2); max-width: 60ch; line-height: var(--lh-loose); }
.pagehead__meta { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-2xs); color: var(--on-dark-2); }
.pagehead__meta > span { background: rgba(242,248,243,.13); border-radius: var(--r-pill); padding: 7px 14px; }
.pagehead__meta b { color: var(--on-dark); font-weight: 700; }
.pagehead .btn--ghost { background: transparent; border-color: var(--line-dark); color: var(--on-dark); }
.pagehead .btn--ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.pagehead__ctas { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }

/* -------------------------------------------------------------- BREADCRUMBS */
.crumbs { background: var(--surface); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-block: 11px; font-size: var(--t-2xs); color: var(--body-2); }
.crumbs a { display: inline-block; padding-block: 3px; }
.crumbs a { color: var(--body); }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs li + li::before { content: "\2039"; margin-inline-end: var(--s2); color: var(--body-2); }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------- CONTENT / PROSE */
.prose { max-width: var(--read); font-size: var(--t-md); line-height: var(--lh-loose); color: var(--body); }
.prose > * + * { margin-top: var(--s5); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s8); }
.prose h3 { font-size: var(--t-xl); margin-top: var(--s7); }
.prose h4 { font-size: var(--t-md); margin-top: var(--s6); }
.prose p { color: var(--body); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn) { color: var(--brand-ink); font-weight: 700; box-shadow: inset 0 -1px 0 rgba(58,122,22,.34); }
.prose a:not(.btn):hover { background: var(--brand-wash); box-shadow: inset 0 -1px 0 var(--brand-ink); }
.prose ul, .prose ol { padding-inline-start: 0; list-style: none; }
.prose ul > li, .prose ol > li { position: relative; padding-inline-start: 28px; color: var(--body); }
.prose ul > li + li, .prose ol > li + li { margin-top: var(--s3); }
.prose ul > li::before { content: ""; position: absolute; inset-inline-start: 8px; top: 12px; width: 7px; height: 7px; background: var(--brand-ink); border-radius: 50%; }
.prose ol { counter-reset: n; }
.prose ol > li::before {
  counter-increment: n; content: counter(n);
  position: absolute; inset-inline-start: 0; top: 5px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-wash); color: var(--brand-ink-2);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.prose blockquote { margin: 0; padding: var(--s5) var(--s6); background: var(--surface); border-radius: var(--r); border-inline-start: 3px solid var(--brand); font-size: var(--t-md); color: var(--ink); box-shadow: var(--sh-1); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose table th, .prose table td { text-align: start; padding: 13px var(--s4); border-bottom: 1px solid var(--line-2); }
.prose table th { font-size: var(--t-2xs); letter-spacing: .04em; color: var(--body-2); font-weight: 700; background: var(--surface-2); }
.prose table tr:last-child td { border-bottom: 0; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); }
.tablewrap table { min-width: 480px; }

/* ------------------------------------------------------------ ARTICLE LAYOUT */
.doc { display: block; }
@media (min-width: 1000px) {
  .doc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s8); align-items: start; }
}
.doc__aside { display: none; }
@media (min-width: 1000px) { .doc__aside { display: block; position: sticky; top: calc(var(--header-h) + 20px); } }
.toc { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); padding: var(--s5); box-shadow: var(--sh-1); }
.toc__title { font-size: var(--t-2xs); letter-spacing: .06em; color: var(--body-2); font-weight: 700; margin-bottom: var(--s4); }
.toc ol { list-style: none; counter-reset: t; }
.toc li { counter-increment: t; }
.toc li + li { margin-top: 11px; }
.toc a { display: flex; gap: var(--s3); font-size: var(--t-xs); color: var(--body); line-height: 1.5; align-items: flex-start; }
.toc a::before {
  content: counter(t, decimal-leading-zero); flex-shrink: 0;
  font-size: 10px; font-weight: 700; color: var(--brand-ink-2);
  background: var(--brand-wash); border-radius: 5px; padding: 3px 6px;
}
.toc a:hover { color: var(--ink); }

/* --------------------------------------------------------------------- CARDS */
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.cell {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s3);
  transition: transform .2s, box-shadow .2s, border-color .2s; position: relative;
}
a.cell:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line); }
.cell__idx { font-size: var(--t-3xs); color: var(--body-2); letter-spacing: .05em; }
.cell__ic {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--t2-bg); margin-bottom: var(--s1);
}
.cell__ic svg { width: 24px; height: 24px; stroke: var(--t2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cell--t1 .cell__ic { background: var(--t1-bg); } .cell--t1 .cell__ic svg { stroke: var(--t1); }
.cell--t2 .cell__ic { background: var(--t2-bg); } .cell--t2 .cell__ic svg { stroke: var(--t2); }
.cell--t3 .cell__ic { background: var(--t3-bg); } .cell--t3 .cell__ic svg { stroke: var(--t3); }
.cell--t4 .cell__ic { background: var(--t4-bg); } .cell--t4 .cell__ic svg { stroke: var(--t4); }
.cell--t5 .cell__ic { background: var(--t5-bg); } .cell--t5 .cell__ic svg { stroke: var(--t5); }
.cell--t6 .cell__ic { background: var(--t6-bg); } .cell--t6 .cell__ic svg { stroke: var(--t6); }
.cell__title { font-size: var(--t-lg); font-weight: 700; color: var(--ink); line-height: 1.34; transition: color .18s; }
a.cell:hover .cell__title { color: var(--brand-ink); }
.cell__desc { font-size: var(--t-sm); color: var(--body); line-height: 1.72; flex: 1; }
.cell__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: var(--t-2xs); color: var(--body-2); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.cell__foot b { color: var(--brand-ink); font-weight: 700; }

/* Ink variant */
.band--ink .cell { background: var(--dark-lift); border-color: rgba(255,255,255,.06); }
.band--ink a.cell:hover { background: #17703A; border-color: rgba(255,255,255,.13); }
.band--ink .cell__title { color: var(--on-dark); }
.band--ink .cell__desc { color: var(--on-dark-2); }
.band--ink .cell__idx { color: var(--on-dark-3); }
.band--ink .cell__foot { color: var(--on-dark-3); border-top-color: var(--line-dark-2); }
.band--ink a.cell:hover .cell__title { color: var(--brand-glow); }
.band--ink .cell__foot b { color: var(--brand-glow); }

/* --------------------------------------------------------- CITY / LINK LIST */
.linkgrid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (min-width: 700px) { .linkgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .linkgrid { grid-template-columns: repeat(4, 1fr); } }
.linkgrid a {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 3px; height: 100%;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.linkgrid a:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line); }
.linkgrid b { font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.linkgrid span { font-size: var(--t-2xs); color: var(--body-2); }
.linkgrid a:hover b { color: var(--brand-ink); }
.band--ink .linkgrid a { background: var(--dark-lift); border-color: rgba(255,255,255,.06); }
.band--ink .linkgrid b { color: var(--on-dark); }
.band--ink .linkgrid span { color: var(--on-dark-3); }

/* ------------------------------------------------------------------ PROCESS */
.steps { list-style: none; counter-reset: st; display: grid; gap: var(--s3); }
.steps li {
  counter-increment: st; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: var(--s5); display: grid;
  grid-template-columns: 46px 1fr; gap: var(--s4); align-items: start;
}
.steps li::before {
  content: counter(st, decimal-leading-zero);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-wash); color: var(--brand-ink-2);
  font-size: var(--t-sm); font-weight: 700;
  display: grid; place-items: center;
}
.steps h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.steps li > div { max-width: 72ch; }
.steps p { font-size: var(--t-sm); color: var(--body); line-height: 1.72; max-width: 68ch; }
.band--ink .steps li { background: var(--dark-lift); border-color: rgba(255,255,255,.06); }
.band--ink .steps li::before { background: rgba(123,215,66,.10); color: #A6E97E; }
.band--ink .steps p { color: var(--on-dark-2); }

/* ---------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: var(--s3); }
.faq details {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0 var(--s5); transition: box-shadow .2s, border-color .2s;
}
.faq details[open] { box-shadow: var(--sh-1); border-color: var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s5) var(--s7) var(--s5) 0;
  font-size: var(--t-md); font-weight: 700; color: var(--ink); line-height: 1.5;
  position: relative; display: block; transition: color .16s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-ink); }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 50%; margin-top: -12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101A14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 13px no-repeat;
  transition: transform .22s, background-color .18s;
}
.faq details[open] summary::after { transform: rotate(180deg); background-color: var(--brand-wash); }
.faq__a { padding: 0 0 var(--s5); font-size: var(--t-sm); line-height: var(--lh-loose); color: var(--body); max-width: 74ch; }
.faq__a > * + * { margin-top: var(--s3); }
.band--ink .faq details { background: var(--dark-lift); border-color: rgba(255,255,255,.06); }
.band--ink .faq summary { color: var(--on-dark); }
.band--ink .faq__a { color: var(--on-dark-2); }

/* -------------------------------------------------------------- DATA / SPECS */
.speclist { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.speclist__row { display: grid; grid-template-columns: 1fr; gap: 3px; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-2); }
@media (min-width: 700px) { .speclist__row { grid-template-columns: 200px 1fr; gap: var(--s5); align-items: baseline; } }
.speclist__row:last-child { border-bottom: 0; }
.speclist__k { font-size: var(--t-2xs); letter-spacing: .03em; color: var(--body-2); font-weight: 700; }
.speclist__v { font-size: var(--t-sm); color: var(--body); line-height: 1.72; }
.speclist__v strong { color: var(--ink); }

/* Callout */
.note { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); border-inline-start: 3px solid var(--brand); padding: var(--s5); box-shadow: var(--sh-1); }
.note--alarm { border-inline-start-color: var(--alarm); background: var(--alarm-bg); border-color: rgba(166,46,36,.14); }
.note__title { font-size: var(--t-2xs); letter-spacing: .05em; font-weight: 700; color: var(--brand-ink); margin-bottom: var(--s3); }
.note--alarm .note__title { color: var(--alarm); }
.note p { font-size: var(--t-sm); color: var(--body); line-height: 1.78; }
.note p + p { margin-top: var(--s3); }
.note ul { list-style: none; margin-top: var(--s3); }
.note ul li { position: relative; padding-inline-start: 22px; font-size: var(--t-sm); color: var(--body); line-height: 1.72; }
.note ul li + li { margin-top: 7px; }
.note ul li::before { content: ""; position: absolute; inset-inline-start: 5px; top: 11px; width: 6px; height: 6px; background: var(--brand-ink); border-radius: 50%; }
.note--alarm ul li::before { background: var(--alarm); }

/* Pills */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.pills li { font-size: var(--t-2xs); border-radius: var(--r-pill); padding: 7px 14px; color: var(--body); background: var(--surface); border: 1px solid var(--line-2); }
.band--ink .pills li { border-color: var(--line-dark-2); background: var(--dark-lift); color: var(--on-dark-2); }

/* ----------------------------------------------------------------- CTA BAND */
.cta { background: var(--dark); color: var(--on-dark-2); position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset-inline-end: -140px; top: -150px;
  width: 470px; height: 470px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(123,215,66,.20), transparent 60%);
}
.cta__inner { position: relative; padding-block: var(--band); }
@media (min-width: 1000px) { .cta__inner { display: grid; grid-template-columns: 1.5fr auto; gap: var(--s8); align-items: center; } }
.cta h2 { font-size: var(--t-3xl); max-width: 22ch; color: var(--on-dark); }
.cta p { margin-top: var(--s4); color: var(--on-dark-2); max-width: 52ch; font-size: var(--t-md); line-height: var(--lh-loose); }
.cta__actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (min-width: 1000px) { .cta__actions { margin-top: 0; flex-direction: column; align-items: stretch; min-width: 264px; } }
.cta__phone { font-size: var(--t-2xl); font-weight: 700; color: var(--brand-glow); }
.cta .btn--call { background: var(--brand); color: var(--on-brand); }
.cta .btn--call:hover { background: var(--brand-lift); }

/* ------------------------------------------------------------------- FOOTER */
.site-footer { border-top: 1px solid var(--line-dark-2); background: var(--dark-sunk); color: var(--on-dark-2); padding-block: var(--s8) var(--s6); font-size: var(--t-sm); }
.footer-grid { display: grid; gap: var(--s7); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s7); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.footer-col h3 { font-size: var(--t-2xs); letter-spacing: .06em; color: var(--on-dark-3); font-weight: 700; margin-bottom: var(--s4); }
.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 2px; }
.footer-col a { font-size: var(--t-sm); color: var(--on-dark-2); transition: color .16s; display: block; padding-block: 7px; }
.footer-col a:hover { color: var(--brand-glow); }
.footer-about p { font-size: var(--t-sm); line-height: 1.78; color: var(--on-dark-2); max-width: 40ch; margin-top: var(--s4); }
.footer-nap { margin-top: var(--s5); font-size: var(--t-2xs); line-height: 1.95; color: var(--on-dark-3); }
.footer-nap b { color: var(--on-dark); font-weight: 700; }
.footer-bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line-dark-2); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; font-size: var(--t-2xs); color: var(--on-dark-3); }
.footer-bottom a:hover { color: var(--brand-glow); }
.muted { color: var(--body-2); font-size: var(--t-xs); }
.band--ink .muted { color: var(--on-dark-3); }
.maxread { max-width: var(--read); }

/* Related strip */
.related { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s3); scroll-snap-type: x mandatory; }
.related > * { scroll-snap-align: start; flex: 0 0 min(78%, 300px); }
@media (min-width: 700px) { .related { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } .related > * { flex: initial; } }
.rcard {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3);
  transition: transform .18s, box-shadow .18s;
}
.rcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.rcard__k { font-size: var(--t-3xs); letter-spacing: .06em; font-weight: 700; color: var(--brand-ink-2); background: var(--brand-wash); border-radius: var(--r-pill); padding: 4px 11px; width: fit-content; }
.rcard__t { font-size: var(--t-md); font-weight: 700; color: var(--ink); line-height: 1.36; }
.rcard__d { font-size: var(--t-xs); color: var(--body); line-height: 1.68; }

/* ==========================================================================
   MOBILE
   Most of this audience arrives on a phone, often mid-emergency, so the
   small screen is the primary layout rather than a squeeze of the desktop.
   Measured before these rules: the first service card sat 2,392px down and
   65 elements rendered below 13px.
   ========================================================================== */
@media (max-width: 700px) {
  :root {
    /* small type has to grow on a phone, not shrink */
    --t-3xs: 12px;
    --t-2xs: 13px;
    --t-xs:  14px;
    --t-sm:  15.5px;
    --t-md:  16.5px;
    --header-h: 72px;
    /* the desktop rhythm makes the page three screens taller than it needs */
    --band: 44px;
    --s8: 44px;
    --s9: 52px;
    --s10: 56px;
  }

  /* The hero scrim is what keeps the white text legible over the photograph.
     It was once disabled at this breakpoint, which put the H1 at 2.96:1. It is
     not decoration; do not switch it off. */

  /* comfortable thumb targets */
  .burger { padding: 14px 12px; }
  .drawer__close { padding: 11px 16px; }
  .dock { height: 66px; }
  .dock a { min-height: 46px; }
  .btn { padding: 14px var(--s5); }
  .btn--lg { padding: 15px var(--s5); }
  .footer-col a { padding-block: 9px; }
  .linkgrid a { padding: var(--s4); min-height: 62px; }

  /* hero v4 on a phone: same order, sized for a thumb */
  .topbar .shell { padding-block: 12px 0; flex-wrap: nowrap; }
  .brandlock__img { height: 54px; }
  .brandlock--inner .brandlock__img { height: 52px; }
  .topcall { padding-top: 2px; gap: 7px; min-height: 42px; }
  .topcall__num { font-size: 19px; }
  .topcall__lbl { display: none; }
  .topcall__ic { width: 17px; height: 17px; }

  /* The artwork is the ground, not a band across the top. */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    /* The bar above is reserved twice over, and deliberately. 62px is its
       height; the rest balances the *empty* space rather than the box. The
       eye counts the logo and the phone number as content, so centring the
       group between bar and dock leaves 124px of nothing above it and 198px
       below, and reads as bottom-heavy. */
    padding-top: 136px; padding-bottom: calc(var(--dock-h) + 2px);
  }
  /* out of the flex flow, or it would be centred along with everything else */
  .topbar { position: absolute; inset-inline: 0; top: 0; }
  .hero__body { padding-top: 0; flex: 0 0 auto; }
  .hero__body .shell { width: 100%; }
  .hero h1 { font-size: 34px; line-height: 1.14; max-width: 100%; }
  .hero__sub { font-size: 16.5px; margin-top: 18px; }
  .callbox { width: 100%; margin-top: 34px; padding: 15px 18px; min-height: 84px; }
  .callbox::before, .callbox::after { width: 18px; }
  .callbox__label { font-size: 15px; }
  .callbox__num { font-size: 33px; }

  /* Three rows, not three columns: at 375px the columns were 105px wide and
     every label broke across two lines of 11.5px. */
  /* Three facts side by side, no frame. The descriptions stay in the
     accessibility tree: "33" on its own tells a screen-reader user nothing. */
  .trio { margin-top: 32px; gap: 0; flex-direction: row; align-items: stretch; }
  .trio__item {
    width: auto; flex: 1 1 0; text-align: center; padding: 2px 6px;
  }
  .trio__item + .trio__item { border-inline-start: 1px solid rgba(255,255,255,.22); }
  .trio__top { flex-direction: row-reverse; gap: 7px; min-height: 0; justify-content: center; }
  .trio__ic { width: 21px; height: 21px; }
  .trio__v { font-size: 25px; }
  .trio__u { margin-top: 3px; font-size: 11.5px; line-height: 1.2; }

  /* The first screen is the number and the three promises. The services get
     the section below, which has room to say what they are; repeating them up
     here as six small tiles only crowds the one thing this screen is for. */
  .hero__cards { display: none; }
  .hero + * { padding-top: 44px; }

  /* long-form pages */
  .pagehead { padding-block: var(--s6) var(--s5); }
  .pagehead__meta { margin-top: var(--s5); }
  .prose > * + * { margin-top: var(--s4); }
  .prose h2 { margin-top: var(--s7); }
  .prose h3 { margin-top: var(--s6); }
  .sec-head { margin-bottom: var(--s5); }
  .steps li { padding: var(--s4); grid-template-columns: 40px 1fr; gap: var(--s3); }
  .steps li::before { width: 40px; height: 40px; }
  .cell { padding: var(--s5) var(--s4); }
  .cell__ic { width: 46px; height: 46px; }
  .faq summary { padding: var(--s4) var(--s6) var(--s4) 0; }
  .cta__inner { padding-block: var(--s7); }

  /* tables are the one thing that genuinely needs to scroll sideways */
  .tablewrap { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; }
  .tablewrap table { min-width: 420px; }
  .prose table th, .prose table td { padding: 10px 12px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 30px; }
  .grid--4 { grid-template-columns: 1fr; }
  .linkgrid { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  .site-header, .dock, .drawer, .cta, .site-footer, .doc__aside { display: none !important; }
  body { background: #fff; padding: 0; }
  .band { padding-block: 12px; }
}

/* The card affordance lives here rather than in the copy, so extracted text
   and AI answers get the label without a stray glyph. */
.cell__go::after {
  content: "‹"; display: inline-block; margin-inline-start: 7px;
  transform: translateY(1px); transition: transform .16s;
}
.cell:hover .cell__go::after { transform: translate(-3px, 1px); }

.brandlock--footer .brandlock__img { height: 74px; }

/* The drawer is fixed, so it can be mounted anywhere in the document. It must
   not depend on what it is mounted inside: the hero sets `color: #fff`, which
   once made every label in here invisible. */
.drawer nav a { color: var(--ink); }
.drawer nav a .mono { color: var(--body-2); }
.drawer nav a:hover { color: var(--brand-ink); }

/* Chips are too small for a refraction band, so they take the fill and the rim
   only. Same family, less machinery. */
.pagehead__meta > span,
.pagehead .btn--wa,
.cta .btn--wa,
.band--ink .btn--wa {
  background: linear-gradient(155deg, rgba(255,255,255,.20), rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.12);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
@media (prefers-reduced-transparency: reduce) {
  .pagehead__meta > span, .pagehead .btn--wa, .cta .btn--wa, .band--ink .btn--wa {
    background: rgba(255,255,255,.16); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Questions that are answered on another page. */
.faqlinks { list-style: none; padding: 0; }
.faqlinks li + li { border-top: 1px solid var(--line-2); }
.faqlinks a {
  display: block; padding: 15px 0 15px 30px; position: relative;
  font-size: var(--t-md); font-weight: 700; color: var(--ink); line-height: 1.5;
  transition: color .16s;
}
.faqlinks a::after {
  content: "\2039"; position: absolute; inset-inline-end: 4px; top: 50%;
  transform: translateY(-50%); color: var(--body-2); font-size: 17px;
  transition: transform .16s, color .16s;
}
.faqlinks a:hover { color: var(--brand-ink); }
.faqlinks a:hover::after { color: var(--brand-ink); transform: translate(-3px, -50%); }
.faqlinks__note { margin-top: var(--s4); font-size: var(--t-sm); color: var(--body); }
.band--ink .faqlinks a { color: var(--on-dark); }
.band--ink .faqlinks li + li { border-top-color: var(--line-dark-2); }

/* Short phones. On a 667px screen the full stack does not fit and the last two
   service cards end up behind the dock, so every step of it gives back a few
   pixels. The point of the screen is that all six are visible. */
@media (max-width: 700px) and (max-height: 720px) {
  .hero { padding-top: 140px; padding-bottom: calc(var(--dock-h) + 8px); }
  .hero h1 { font-size: 27px; line-height: 1.14; }
  .hero__sub { font-size: 14px; margin-top: 10px; }
  .callbox { margin-top: 16px; min-height: 64px; padding: 8px 16px; }
  .callbox__label { font-size: 13px; }
  .callbox__num { font-size: 26px; }
  .trio { margin-top: 14px; }
  .trio__v { font-size: 21px; }
  .trio__u { font-size: 11px; }
  .trio__ic { width: 18px; height: 18px; }

}