/* ============================================================================
   GLOWUP HOME IMPROVEMENTS
   Visual system: the frame before the boards go down.

   v2, 20 Aug 2026. v1 was rejected and deserved to be: three identical
   before/after blocks stacked in a column, uniform band rhythm, no scale
   contrast, and the "frame" concept present only as a small drawing near the
   bottom. Named a physical object, derived nothing from it.

   What actually derives from it now:
     - set-out marks. Each band carries a pencilled section number in the
       gutter, the way a chippie marks out before building. No full-width
       rules anywhere on the site.
     - one job leads at full size with the before as a callout over it; the
       other two run as a compressed strip. Different weights, not a template.
     - the frame gets its own dark plate mid-page at real scale, because it is
       the argument the whole business rests on.

   Palette and body type are the client's own style guide, not invented here.
   See DESIGN.md one level up.
   ========================================================================== */

:root {
  /* surface — from the GlowUp style guide, converted to OKLCH */
  --paper:      oklch(0.979 0.0054 95.1);   /* #f9f8f4 */
  --paper-2:    oklch(0.945 0.0060 92);     /* #eeede8 — the alt band */

  /* ink */
  --ink:        oklch(0.256 0.0082 223.8);  /* #1f2426 */
  --ink-2:      oklch(0.430 0.0090 200);    /* 7.63 on paper, 6.92 on paper-2 */
  --ink-3:      oklch(0.530 0.0080 180);    /* captions. 4.96 / 4.50 — do not lighten */

  /* The accent, and the darkened sibling that can carry small text.
     Both values are solved against the WORSE background (paper-2), not paper:
     an olive that passes on paper alone fails the moment a label lands in an
     alt band, which is exactly where most of them sit. */
  --olive:      oklch(0.646 0.0266 94.2);   /* #938e7c — LARGE DISPLAY ONLY, 3.09 on paper */
  --olive-text: oklch(0.528 0.0266 94.2);   /* #706b5a — 5.02 / 4.55, AA body on both */
  --stone:      oklch(0.837 0.0148 84.6);   /* #cec9bf */
  --rule:       oklch(0.869 0.0018 247.8);  /* #d3d4d5 */

  --ink-line:   oklch(0.36 0.008 224);      /* hairlines on the dark plate */

  /* Stronger than the built-in curves, which are too weak to read as
     intentional. Emil Kowalski's ease-out. */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

  --gut: clamp(20px, 5vw, 64px);
  --rail: 58px;                              /* gutter the set-out numbers live in */
  --measure: 66ch;

  /* Content shell. Without this the page had no container at all and simply
     kept spreading: 1296px of content at 1440, 1728px at 1920, so the wider
     the monitor the emptier it looked. Matches the 1192px content width the
     Miki build settles on (1320px shell less its padding). */
  --shell: 1192px;
  --pad-x: max(var(--gut), (100% - var(--shell)) / 2);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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: 'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure { margin: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--olive-text); outline-offset: 3px; }

/* ---------------------------------------------------------------- display */

h1, h2, .feat-cap h3, .strip-copy h3, .sched-n {
  font-family: 'Bodoni Moda', 'Times New Roman', serif;
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.022em;
  line-height: 1.0;
}
/* The masthead and footer marks are the client's actual logo files, not type.
   An earlier build typeset "GlowUp" in Bodoni, which was a passable imitation
   of a wordmark his designer had already drawn. logo-ink is the black lockup
   for paper, logo-paper the white one for the ink plate. Both carry real
   alpha. */

/* Scale contrast is deliberate. v1 set every section heading identically, so
   nothing told you what mattered. */
h1        { font-size: clamp(38px, 5.9vw, 74px); }
.h-big    { font-size: clamp(31px, 4.6vw, 55px); }
h2        { font-size: clamp(27px, 3.5vw, 43px); }

h3 {
  font-family: 'Figtree', sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em;
}

p { max-width: var(--measure); }

/* The set-out mark: a tick and a label, the way a joist centre gets marked. */
.lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive-text);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.lbl::before {
  content: '';
  width: 1px; height: 20px;
  background: var(--olive);
  flex: none;
}
.lbl-on-dark { color: var(--stone); }
.lbl-on-dark::before { background: var(--olive); }

/* ---------------------------------------------------------------- masthead */

.mast {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px var(--pad-x);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.mark { text-decoration: none; display: block; line-height: 0; flex: none; }
.mark img { width: clamp(126px, 12vw, 158px); height: auto; }

.nav { margin-left: auto; display: flex; gap: 26px; }
.nav a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink-2);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--olive); }

.mast-call { text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger-box { display: block; width: 26px; }
.burger-box i {
  display: block; height: 1.5px; background: var(--ink);
  transition: transform 250ms var(--ease-out);
}
.burger-box i + i { margin-top: 7px; }
.burger[aria-expanded='true'] i:first-child { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded='true'] i:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.drawer { display: none; padding: 8px var(--pad-x) 32px; border-bottom: 1px solid var(--rule); }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  text-decoration: none; padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 19px;
}
.drawer-call {
  display: inline-block; margin-top: 24px;
  background: var(--ink); color: var(--paper);
  padding: 15px 28px; text-decoration: none; font-weight: 600;
}

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

/* Full-bleed photograph with the headline set over it.
   All three sites Jed named as references do exactly this: sunshinecoastdecks
   (photo, no overlay), zanettobuilders (serif headline over a dark interior),
   saltypilates (serif headline centred over the studio). The earlier build was
   a contained text-left / image-right split, which is the one shape none of
   them use. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 74vh, 700px);
  padding: clamp(48px, 7vw, 104px) var(--pad-x) clamp(36px, 4.4vw, 64px);
  background: var(--ink);
}

.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* The scrim MUST paint over the photo. As ::after it is the last child in
   paint order, so it lands above .hero-bg without needing a z-index race.
   Getting this backwards produces a scrim that changes nothing on screen. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    oklch(0.256 0.0082 223.8 / 0.94) 0%,
    oklch(0.256 0.0082 223.8 / 0.86) 26%,
    oklch(0.256 0.0082 223.8 / 0.58) 52%,
    oklch(0.256 0.0082 223.8 / 0.22) 78%,
    oklch(0.256 0.0082 223.8 / 0.10) 100%
  );
}

.hero-in { position: relative; max-width: 40ch; }
.hero h1 { color: var(--paper); margin-bottom: 18px; max-width: 13ch; }
.hero-p {
  font-size: clamp(16.5px, 1.35vw, 19px);
  color: var(--stone);
  max-width: 40ch;
  margin-bottom: 28px;
}
.hero-cred {
  margin-top: 24px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  max-width: none;
}

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

.acts { display: flex; flex-wrap: wrap; gap: 10px; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--ink);
  /* composited wipe, not a pseudo-element behind the background */
  background-image: linear-gradient(var(--olive-text), var(--olive-text));
  background-repeat: no-repeat;
  background-size: 100% 0%;
  background-position: 50% 100%;
  transition: background-size 240ms var(--ease-out), transform 140ms var(--ease-out);
}
/* Instant physical feedback. Buttons must feel like the interface heard you. */
.btn:active { transform: scale(0.975); }

.btn-line { background-color: transparent; color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); }
.btn-light { background-color: var(--paper); color: var(--ink); border-color: var(--paper); background-image: linear-gradient(var(--stone), var(--stone)); }
.btn-ghost { background-color: transparent; color: var(--paper); border-color: var(--olive); background-image: linear-gradient(var(--paper), var(--paper)); }

/* Hover gated: touch devices fire hover on tap, which strands the filled state */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-size: 100% 100%; }
  .btn-line:hover { color: var(--paper); }
  .btn-ghost:hover { color: var(--ink); }
  .nav a:hover { color: var(--ink); border-bottom-color: var(--olive); }
  .mast-call:hover { color: var(--olive-text); }
}

/* ------------------------------------------------------------------- bands */

.band { padding: clamp(40px, 4.8vw, 76px) var(--pad-x); position: relative; }
.band-alt { background: var(--paper-2); }

/* The set-out number. Sits in the gutter like a pencil mark on a bearer.
   Deliberately NOT a left border: a coloured side stripe is a banned pattern
   and reads as a callout box. This reads as a drawing. */
.band[data-n]::before,
.plate[data-n]::before {
  content: attr(data-n);
  position: absolute;
  left: calc(var(--pad-x) - var(--rail));
  top: clamp(40px, 4.8vw, 76px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--olive-text);
  padding-top: 14px;
  border-top: 1px solid var(--olive);
  width: 34px;
}
.plate[data-n]::before { color: var(--stone); border-top-color: var(--olive); }

@media (max-width: 1200px) {
  .band[data-n]::before, .plate[data-n]::before { display: none; }
}

.sec-head { margin-bottom: clamp(24px, 2.8vw, 40px); }
.sec-head h2 { margin-bottom: 20px; }
.sec-lede { font-size: clamp(16.5px, 1.3vw, 18.5px); color: var(--ink-2); max-width: 56ch; }

/* Heading left, lede right. A capped single column left the whole right half
   of the band empty, which is the same hole this rebuild was meant to close. */
.sec-head-wide {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.sec-head-wide .lbl { grid-column: 1 / -1; }
.sec-head-wide h2 { margin-bottom: 0; max-width: 16ch; }
.sec-head-wide .sec-lede { padding-bottom: 6px; }

@media (max-width: 900px) {
  .sec-head-wide { grid-template-columns: 1fr; align-items: start; }
  .sec-head-wide h2 { margin-bottom: 18px; max-width: none; }
}

.sub { margin-bottom: clamp(30px, 3.2vw, 50px); }
.sub:last-child { margin-bottom: 0; }
.sub h2 { margin-bottom: 18px; }
.sub p + p { margin-top: 15px; }
.sub p { color: var(--ink-2); }

/* ----------------------------------------------- the lead job (feature) */

.feat {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  margin-bottom: clamp(44px, 5vw, 84px);
}
.feat-after img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* The before sits over the after as a callout, the way a detail is called out
   on a drawing. One image is the subject, the other is the reference. */
.feat-before {
  position: absolute;
  left: clamp(-16px, -1.4vw, 0px);
  bottom: clamp(-24px, -2.4vw, -12px);
  width: clamp(120px, 17%, 210px);
  border: 6px solid var(--paper);
  background: var(--paper);
}
.feat-before img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.feat-before .tag { position: absolute; left: 0; top: 0; }

.feat-cap h3 {
  font-size: clamp(24px, 2.9vw, 38px);
  margin-bottom: 16px;
}
.feat-cap p { color: var(--ink-2); max-width: 42ch; }

/* -------------------------------------------- the supporting jobs (strips) */

.strips { display: grid; gap: clamp(26px, 3vw, 44px); }

.strip {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;   /* smaller than the feature, on purpose */
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.strip-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.strip-imgs figure { position: relative; }
.strip-imgs img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.strip-imgs figcaption { position: absolute; left: 0; top: 0; }

.strip-n {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--olive-text); margin-bottom: 10px;
}
.strip-copy h3 { font-size: clamp(19px, 1.9vw, 25px); margin-bottom: 10px; }
.strip-p { color: var(--ink-2); font-size: 15.5px; }

.tag {
  display: inline-block;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 12px;
}
.tag-after { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------- the frame, dark plate */

.plate { background: var(--ink); color: var(--paper); padding: clamp(44px, 5.2vw, 82px) var(--pad-x); position: relative; }
.plate h2 { margin-bottom: 20px; max-width: 18ch; }
.plate-p { color: var(--stone); max-width: 52ch; }
.plate-p + .plate-p { margin-top: 15px; }
.plate-detail { margin-top: 28px; font-size: 13px; letter-spacing: 0.06em; color: var(--olive); }

.frame-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}


/* ---------------------------------------------------------------- schedule */

.schedule { border-top: 1px solid var(--rule); }

.sched {
  display: grid;
  grid-template-columns: 40px minmax(140px, 0.85fr) 2fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

/* The row slides its CONTENT, not itself. Animating padding-left triggers
   layout on every hover, and translating the whole row would drag its
   border-bottom out of line with the rows above and below it. */
.sched-i, .sched-n, .sched-d { transition: transform 240ms var(--ease-out); }
/* Columns are pinned explicitly rather than left to implicit placement. A
   service page once rendered this row without .sched-i, every child shuffled
   one column left, and the service name landed inside the 40px number column
   and printed straight over its own description. Pinning makes a missing
   child leave a gap instead of causing a collision. */
.sched-i { grid-column: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--olive-text); }
.sched-n { grid-column: 2; font-size: clamp(21px, 2.2vw, 29px); }
.sched-d { grid-column: 3; color: var(--ink-2); font-size: 15.5px; }
.sched-go { grid-column: 4; color: var(--olive-text); font-size: 17px; transition: transform 240ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .sched:hover .sched-i,
  .sched:hover .sched-n,
  .sched:hover .sched-d { transform: translateX(10px); }
  .sched:hover .sched-go { transform: translateX(5px); }
}

/* ------------------------------------------------------------------ "also" */

.also-grid {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 3.8vw, 56px);
}
.also-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.also-copy h3 { margin-bottom: 12px; }
.also { color: var(--ink-2); max-width: 50ch; }
.also-cap { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }

/* ------------------------------------------------------------------- about */

.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 4.5vw, 76px);
  align-items: start;
}
.about-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about-copy h2 { margin-bottom: 20px; }
.about-copy p { color: var(--ink-2); }
.about-copy p + p { margin-top: 15px; }

/* A short fact row instead of a paragraph nobody reads. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  justify-content: start;
}
.facts dt {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--olive-text); margin-bottom: 4px;
}
.facts dd { font-size: 15.5px; }

.about-note { margin-top: 24px; font-size: 15px; color: var(--ink-3); }

/* ------------------------------------------------------- service page head */

.head-band { padding: clamp(36px, 4.4vw, 68px) var(--pad-x) clamp(30px, 3.6vw, 52px); }
.head-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
.head-band h1 { margin-bottom: 22px; max-width: 16ch; }
.head-lede { font-size: clamp(16.5px, 1.35vw, 19px); color: var(--ink-2); margin-bottom: 30px; }

.glance { background: var(--paper-2); padding: 26px 28px; }
.glance dl { display: grid; gap: 18px; }
.glance dt {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--olive-text); margin-bottom: 5px;
}
.glance dd { font-size: 15.5px; line-height: 1.5; }


/* --------------------------------------------------------------- spec rows */

.rows { list-style: none; border-top: 1px solid var(--rule); margin-top: 24px; }
.rows li {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) 2.3fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.row-k { font-weight: 600; font-size: 15.5px; }
.row-v { color: var(--ink-2); font-size: 15.5px; }

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

.foot { background: var(--ink); color: var(--stone); padding: clamp(38px, 4.2vw, 60px) var(--pad-x) 28px; border-top: 1px solid var(--ink-line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 32px; }
.foot-mark { width: clamp(140px, 14vw, 168px); height: auto; }
.foot-p { font-size: 14.5px; margin-top: 15px; max-width: 40ch; }
.foot-h {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper); margin-bottom: 13px;
}
.foot-grid p { font-size: 14.5px; }
.foot-grid div p + p { margin-top: 2px; }
.foot a { text-decoration: none; }

/* Footer links were 18px tall and stacked close together, which is under the
   WCAG 2.2 24px target minimum and awkward under a thumb. Padding takes them
   to 26px; the p margin above was cut to keep the block the same height. */
.foot-grid p a { display: inline-block; padding: 4px 0; }

@media (hover: hover) and (pointer: fine) {
  .foot a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
}

.foot-base {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--ink-line); font-size: 13px;
}

/* -------------------------------------------------------- mobile call bar */

.callbar { display: none; }

/* ----------------------------------------------------------------- reveals */

/* Gated behind .js, set inline in <head>. Without JavaScript nothing is
   hidden. main.js additionally sweeps on load, on fonts.ready, and after a
   3s failsafe, because the observer's first check measures a pre-image,
   pre-webfont layout and stranded the hero CTA at opacity 0 in v1. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js .reveal:nth-child(2) { transition-delay: 50ms; }
.js .reveal:nth-child(3) { transition-delay: 100ms; }
.js .reveal:nth-child(4) { transition-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .sched-i, .sched-n, .sched-d, .sched-go, .nav a, .burger-box i { transition: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hero { min-height: clamp(420px, 68vh, 560px); }
  .hero-in { max-width: none; }
  .feat { grid-template-columns: 1fr; }
  .feat-before { position: static; width: 160px; border-width: 0; margin-top: -60px; margin-left: 16px; position: relative; }
  .strip { grid-template-columns: 1fr; }
  .frame-grid { grid-template-columns: 1fr; }
  .head-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-img { max-width: 380px; }
  .also-grid { grid-template-columns: 0.8fr 1.2fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav, .mast-call { display: none; }
  .burger { display: block; margin-left: auto; }
  .drawer { display: block; }
  .drawer[hidden] { display: none; }

  .sched { grid-template-columns: 34px 1fr auto; gap: 6px 16px; }
  .sched-n { grid-column: 2; }
  .sched-go { grid-column: 3; }
  .sched-d { grid-column: 2 / -1; }
  .rows li { grid-template-columns: 1fr; gap: 6px; }
  .also-grid { grid-template-columns: 1fr; }
  .also-img { max-width: 280px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 18px 28px; }

  .callbar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    border-top: 1px solid var(--ink-line);
  }
  .callbar a {
    text-align: center; padding: 16px 8px;
    text-decoration: none; font-weight: 600; font-size: 15px;
    background: var(--ink); color: var(--paper);
  }
  .callbar a + a { background: var(--paper); color: var(--ink); border-left: 1px solid var(--rule); }
  body { padding-bottom: 56px; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .strip-imgs { gap: 6px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .feat-before { width: 132px; margin-top: -48px; }
}