/* ===== Fonts (self-hosted, variable, cyrillic-safe) ===== */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-cyrillic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-cyrillic-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* ===== Tokens ===== */
:root {
  --bg: #faf9f7;
  --ink: #14130f;
  --ink-soft: #55534c;
  --line: rgba(20,19,15,0.12);
  --accent: #c85a2e;
  --accent-ink: #faf9f7;
  --panel-dark: #1c1a15;
  --panel-dark-ink: #f1efeb;

  --glass: rgba(250, 249, 247, 0.78);
  --glass-strong: rgba(250, 249, 247, 0.92);
  --glass-border: rgba(255, 255, 255, 0.55);

  --font: 'Manrope', Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(18px, 5vw, 64px);
  --space-xs: 8px;
  --space-s: 14px;
  --space-m: 26px;
  --space-l: 44px;
  --space-xl: clamp(48px, 7vw, 96px);

  --radius: 4px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bottom-bar-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  padding-bottom: var(--bottom-bar-h);
}

/* fixed blurred photo texture behind everything — replaces flat white */
/* flat fill, not the old blurred-photo-texture + gradient wash — that
   combination is what read as a gray patch at the hero/services seam */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }
p { margin: 0; color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--accent); }

/* ===== Glass panel — the site's recurring "card" language ===== */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  /* now that the background behind it is flat, the card needs its own edge
     definition — a soft ambient shadow instead of leaning on color contrast */
  box-shadow: 0 24px 60px rgba(20,19,15,0.18), 0 8px 20px rgba(20,19,15,0.12);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  min-height: 52px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
/* lift-on-hover: a confident, "ready to click" rise instead of a cursor-follow effect */
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(200,90,46,0.28); }
.btn-primary:hover { background: #b34f27; box-shadow: 0 14px 28px rgba(200,90,46,0.4); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); box-shadow: 0 10px 22px rgba(20,19,15,0.1); }
.btn-block { width: 100%; }
.btn-icon {
  width: 52px; height: 52px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}
.btn-icon svg { stroke: currentColor; fill: none; }
/* real brand marks (WhatsApp/Telegram/MAX) are solid shapes, not line icons —
   more specific than ".btn-icon svg" so it wins regardless of source order */
.btn-icon svg.brand-icon, .bottom-bar svg.brand-icon { stroke: none; fill: currentColor; }
/* trailing arrow nudges forward on hover — pairs with the lift */
.btn-arrow { display: inline-flex; transition: transform 0.3s var(--ease); }
.btn-arrow svg { stroke: currentColor; fill: none; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ===== Top header (desktop-primary; mobile keeps it minimal) ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px 0;
  transition: transform 0.4s var(--ease), background 0.3s;
}
.site-header.is-scrolled { background: var(--glass-strong); backdrop-filter: blur(16px); border-bottom: 1px solid var(--glass-border); }
.site-header.is-hidden { transform: translateY(-110%); }
/* grid, not flex+space-between — a 3-item flex row only "centers" the middle
   item when the outer two are equal width, which logo vs. the actions button
   never are. Grid reserves an equal 1fr on each side so the nav sits at the
   header's true center regardless. */
/* nav is absolutely centered on the header itself (not the logo) so it stays
   put regardless of the logo's width — no header-actions column anymore to
   balance against with a grid split */
.site-header .container { position: relative; display: flex; align-items: center; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.logo-icon { flex-shrink: 0; }
.logo span { color: var(--accent); }
.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a { text-decoration: none; font-size: 0.94rem; font-weight: 600; color: var(--ink-soft); transition: color 0.25s; }
.site-nav a:hover { color: var(--ink); }

/* ===== Hero: full-bleed automatic before/after photo, copy + CTA overlaid ===== */
.hero {
  position: relative;
  overflow: hidden;
}
/* fixed header floats transparently over the top of this until scrolled,
   so the stage intentionally starts flush at the very top of the page */
.hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
}
@supports (height: 100dvh) {
  .hero-stage { height: 100dvh; }
}
/* fades the photo into the page background instead of cutting off hard right
   at the services card below — a soft transition, not a literal image blur */
.hero-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(250,249,247,0) 0%, var(--bg) 90%);
  pointer-events: none;
  z-index: 2;
}
/* ".ba-card.ba-hero" (two classes) so this reliably beats the gallery's
   ".ba-card" width rule further down the file regardless of source order.
   No radius/shadow — it's meant to butt flush against the screen edges.
   Height is driven by .hero-stage (not the photo's native ratio) so there's
   always enough room for the overlaid copy, at any viewport size. */
.ba-card.ba-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;
}
/* starts fully on "before" so there's no flash of a 50/50 split (the gallery's
   default split) before script.js takes over on the first frame */
.ba-hero .ba-after { clip-path: inset(0 100% 0 0); }
/* glowing vertical seam tracking the auto-wipe boundary — hidden at rest,
   shown only mid-transition (JS-toggled), same trick used elsewhere on the page */
.hero-ba-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 24px 4px rgba(255,255,255,0.7);
  opacity: 0;
  transition: opacity 0.25s linear;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

/* floating stat badges over the hero photo's left edge — pointer-events:none so
   they never intercept clicks meant for the page underneath. Kept clear of the
   copy card (right side) and the CTA (bottom-center). */
.stat-badge {
  position: absolute;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
.stat-badge b { color: var(--accent); font-weight: 800; margin-right: 5px; }
/* positioned to flank the house itself (roofline corners + walkway), not the
   screen's corners — plain left/top (not transform) because the float
   animation's GSAP `y` tween sets `transform` directly and would silently
   overwrite a transform used for centering here, same as elsewhere on this page */
.stat-badge-1 { left: calc(28% - 67px); top: calc(9.5% - 21px); }
.stat-badge-2 { left: calc(71% - 66px); top: calc(9.5% - 21px); }
.stat-badge-3 { left: calc(26% - 66px); top: calc(78% - 21px); }

/* copy card: a glass panel docked to the right side of the photo, vertically
   centered — collapses to a centered full-width panel on narrow screens.
   Centered via inset+auto-margin, NOT transform: [data-reveal] already owns
   this element's transform (its slide-up-on-scroll effect) and, being defined
   later in the stylesheet, would silently overwrite a transform set here. */
.hero-copy {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: fit-content;
  right: clamp(4px, 1.2vw, 16px);
  width: min(360px, 34vw);
  padding: var(--space-m);
  /* stronger than the site's usual .glass blur — this panel sits directly on
     a busy photo and needs more softening behind it than a card on a flat bg */
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
}
/* smaller than the site's default h1 — this one sits inside a compact
   overlay card on a photo, not spanning a full text column */
.hero-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: var(--space-s) 0 var(--space-m); }
.hero-title .line { display: block; overflow: hidden; }
.hero-lede { font-size: 0.92rem; font-weight: 600; margin-bottom: 0; }

/* CTA: its own floating pill, bottom-center of the photo — same reasoning,
   centered via left/right+auto-margin instead of transform:translateX(-50%) */
.hero-cta {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: clamp(20px, 6vw, 56px);
  width: fit-content;
}
/* equal gap on all four sides between the button's edge and its text —
   the site-wide .btn padding is asymmetric (pill-shaped, wider than tall) */
.hero-cta .btn {
  padding: 22px;
  min-height: 0;
}

@media (max-width: 760px) {
  /* same copy as desktop, just resized to fit a small card — there's enough
     clearance above the photo card now that it's been pushed further down */
  .hero-copy {
    top: 14%;
    bottom: auto;
    right: 5%;
    left: 5%;
    width: auto;
    height: auto;
    padding: 12px 16px;
  }
  .hero-copy .eyebrow { font-size: 0.62rem; margin-bottom: 1px; }
  .hero-copy .hero-title { font-size: 1.12rem; margin: 4px 0 6px; }
  .hero-copy .hero-lede { font-size: 0.72rem; line-height: 1.4; }

  /* mobile-only: the before/after photo becomes its own rounded card sitting
     in the gap between the copy card and the bottom badge/CTA, instead of
     filling the whole screen edge-to-edge — desktop keeps the full-bleed photo.
     More breathing room above (from the copy card) and pushed further down. */
  .ba-card.ba-hero {
    top: 46.3%;
    left: 5%;
    right: 5%;
    bottom: auto;
    height: 40%;
    width: auto;
    aspect-ratio: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 55px rgba(10,9,7,0.24), 0 8px 18px rgba(10,9,7,0.14);
  }

  /* smaller pills, repositioned to sit on the corners of the now-lower
     photo card instead of the desktop's full-screen anchor points */
  .stat-badge { padding: 4px 8px; font-size: 0.54rem; }
  .stat-badge-1 { left: 12%; top: 49.3%; right: auto; bottom: auto; }
  .stat-badge-2 { left: auto; right: 8%; top: 49.3%; bottom: auto; }
  .stat-badge-3 { left: 8%; top: auto; bottom: 15%; right: auto; }

  /* shorter pill — desktop keeps its own equal-padding size */
  .hero-cta .btn { padding: 13px 26px; }
}

/* ===== Reveal primitives ===== */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); }

/* ===== Section shell ===== */
.section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.section-card {
  margin: var(--space-l) var(--gutter);
  padding: var(--space-l) var(--space-l);
}
@media (min-width: 700px) {
  .section-card { padding: var(--space-xl) var(--space-xl); }
}
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-m); margin-bottom: var(--space-l); flex-wrap: wrap; }
.section-head .lede { max-width: 36ch; }

/* ===== Services: always-visible preview cards (title above photo) ===== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}
.service-card { display: flex; flex-direction: column; gap: var(--space-s); }
.service-card-head { display: flex; align-items: baseline; gap: 10px; }
.service-card-num { font-size: 0.85rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.service-card-title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
.service-card-photo {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(20,19,15,0.04);
}
.service-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.service-card:hover .service-card-photo img { transform: scale(1.05); }
.service-card-desc { font-size: 0.95rem; }

/* link-through on the home page teaser, from 3 cards to the full services page */
.services-more { text-align: center; margin-top: var(--space-l); }

/* ===== Service tags: full breadth of work in one glance, without a dry bullet list ===== */
.service-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-xl);
  text-align: center;
}
/* flex-basis:100% pushes every chip after it onto its own row, so the label
   reads as a proper sub-heading instead of a small inline prefix */
.service-tags-label {
  flex-basis: 100%;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.service-tags span:not(.service-tags-label) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(200,90,46,0.3);
  background: rgba(200,90,46,0.08);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.service-tags span:not(.service-tags-label)::before {
  content: '✓';
  color: var(--accent);
  font-weight: 800;
}

/* ===== Process strip: the 4 steps, front and center — "this is simple" ===== */
.process-heading {
  text-align: center;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin-bottom: var(--space-m);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}
.process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
}
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-m);
}
.process-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
}
.process-num {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--line);
  -webkit-text-stroke: 1.5px var(--accent);
  color: transparent;
}
.process-label { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.process-cap { font-size: 0.85rem; color: var(--ink-soft); }

/* ===== Gallery: filter chips + drag carousel with real before/after pairs ===== */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-m); }
.filter-chip {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.filter-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===== Gallery: 2-up grid of before/after pairs (was a drag carousel) ===== */
.gallery-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
}
@media (max-width: 560px) {
  .gallery-track { grid-template-columns: 1fr; }
}
.ba-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #eee;
  touch-action: none; /* without this, mobile browsers grab the drag gesture
    as a page-scroll after a few px of movement and cancel the pointer
    sequence mid-drag — the slider "moves a little then freezes" */
  user-select: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.ba-card.is-hidden { display: none; }
.ba-card .ba-slider { position: absolute; inset: 0; }
.ba-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.ba-card .ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); cursor: ew-resize; }
.ba-handle::after {
  content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; background: var(--accent); color: var(--accent-ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.ba-label { position: absolute; bottom: var(--space-s); left: var(--space-s); background: rgba(20,19,15,0.72); color: #fff; padding: 7px 13px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; z-index: 3; }

/* smaller and one line — the default h2 size wrapped this onto two lines */
#trust h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }

/* ===== Trust: documents/permits checklist, 2 per row ===== */
.trust-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  padding: var(--space-s) 0;
  width: fit-content;
  margin: 0 auto;
}
.trust-list span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.trust-list span::before {
  content: '✓';
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
}
@media (max-width: 620px) {
  .trust-list { grid-template-columns: 1fr; width: 100%; }
}

/* ===== Final CTA: single button + icon row (different pattern) ===== */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 18ch; margin: 0 auto var(--space-m); }
.cta-icons { display: flex; justify-content: center; gap: var(--space-m); margin-top: var(--space-m); }

/* ===== Footer ===== */
.site-footer { padding: var(--space-l) 0 var(--space-m); }
.footer-top { display: flex; justify-content: space-between; gap: var(--space-l); margin-bottom: var(--space-l); flex-wrap: wrap; }
.footer-col h3 { font-size: 1rem; margin-bottom: var(--space-s); }
.footer-col a, .footer-col p { display: block; text-decoration: none; font-size: 0.94rem; margin-bottom: 6px; }
/* the footer logo is itself an <a> inside .footer-col, so the rule above
   (block/0.94rem) was winning on specificity and squashing .logo's own
   inline-flex/1.5rem layout — restore it explicitly */
.footer-col a.logo { display: inline-flex; font-size: 1.5rem; margin-bottom: 0; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 0.83rem; color: var(--ink-soft); padding-top: var(--space-m); border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px; }

/* ===== Mobile bottom tab bar — page navigation, since .site-nav is hidden here ===== */
/* ===== Mobile bottom tab bar — page navigation (site-nav is hidden here) ===== */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
}
.bottom-tab svg { stroke: currentColor; fill: none; }
.bottom-tab.is-active { color: var(--accent); }

/* ===== Responsive ===== */
@media (min-width: 860px) {
  /* header's own container breaks out of the shared 1200px content column so
     the logo pins to the true browser-window corner instead of sitting on a
     centered column with a big empty margin on wide screens — mobile is
     untouched, still using the normal centered container. */
  .site-header .container { max-width: none; padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 560px) and (max-width: 859px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 859px) {
  .site-nav { display: none; }
  .bottom-bar { display: grid; }
  /* nav is hidden here, so the logo is the only header content — center it
     instead of leaving it flush left (desktop keeps its own corner position) */
  .site-header .container { justify-content: center; }
  .section-card { margin-left: 12px; margin-right: 12px; }
  .container { padding-left: var(--gutter); padding-right: var(--gutter); }
  .service-grid { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-l); }
  /* the fixed bottom bar shows up in this range too — without this, it sits
     on top of and covers the hero's own CTA button and bottom-edge badge,
     since the hero is exactly 100dvh tall and butts right up against it */
  .hero-stage { height: calc(100vh - var(--bottom-bar-h)); }
  @supports (height: 100dvh) {
    .hero-stage { height: calc(100dvh - var(--bottom-bar-h)); }
  }
  /* footer columns are narrow (the logo one especially), so plain flex-wrap
     let two of them share a row instead of each stacking cleanly full-width */
  .footer-top { flex-direction: column; gap: var(--space-m); }
  .footer-col { width: 100%; }
  /* mobile: instead of one long vertical list per column, lay the links/lines
     out two-per-row and shrink the text so each footer block reads compact */
  .footer-col { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-s); row-gap: 2px; }
  .footer-col h3 { grid-column: 1 / -1; }
  .footer-col a.logo { grid-column: 1 / -1; }
  .footer-col a, .footer-col p { font-size: 0.78rem; margin-bottom: 0; }
  /* services/works/guarantees pages have no hero above them — their first
     section sits right under the fixed header with barely any clearance
     (and the card's own rounded top edge was getting clipped under it) */
  .page-top.section-card { margin-top: 84px; }
  .page-top.section { padding-top: 100px; }
  /* the long phone number + white-space:nowrap on .btn forced this one edge
     to edge on narrow screens — shrink it so it reads as a centered pill */
  .cta-final .btn-primary { padding: 12px 18px; font-size: 0.82rem; }
}