/* ==========================================================================
   RENOVEXA HOME — V8 visual system
   Same identity as V7: black ground, silver rules, Georgia display type,
   wide-tracked uppercase UI type. Rebuilt for responsiveness (down to 320px),
   contrast and keyboard accessibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg: #070707;
  --bg-raise: #0d0d0d;
  --panel: #101010;
  --panel-2: #151515;
  /* Decorative rules only (section dividers, footer separators) — these carry
     no information, so WCAG 1.4.11 does not apply to them. */
  --line: #2b2b2b;
  --line-strong: #3d3d3d;
  /* Boundaries of actual UI components: cards that are links, inputs, buttons.
     #636363 clears the 3:1 non-text contrast minimum against both the page
     (#070707) and the card fills (#111). V7 used #333 / #3b3b3b — 1.59:1 and
     1.72:1, so cards and fields were barely perceptible outdoors.
     Soften this one value if you want V7's near-invisible edges back. */
  --line-ui: #636363;

  --silver: #e9e9e9;
  --text: #f4f4f4;
  --muted: #b0b0b0;          /* raised from #999 — 8.4:1 on --bg */
  --muted-soft: #8f8f8f;     /* 5.2:1 — smallest permitted text colour */
  --placeholder: #8a8a8a;    /* 5.6:1 on the #0e0e0e field fill */
  --accent: #d8d8d8;

  --max: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 82px;
  --radius: 2px;

  /* 4px spacing scale — V7 used 25 ad-hoc pixel values, which is why
     alignment drifted between components. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 80px; --s12: 96px;

  /* Type scale. V7 had 15 sizes, three of them (34/37/38px) doing one job. */
  --fs-micro: 10px;   /* letterspaced eyebrows and meta */
  --fs-small: 12px;   /* UI labels, buttons */
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-h3: clamp(19px, 2.2vw, 24px);
  --fs-h2: clamp(26px, 4.4vw, 38px);
  --fs-h1: clamp(28px, 5vw, 46px);
  --fs-display: clamp(38px, 7vw, 74px);   /* the wordmark only */

  --display: Georgia, 'Times New Roman', serif;
  --ui: Arial, Helvetica, system-ui, sans-serif;

  --shadow: 0 18px 40px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 950px) { :root { --header-h: 66px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
* { min-width: 0; }                     /* stops grid/flex children overflowing */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
body.modal-open, body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
/* Several components set an explicit `display`, which would otherwise beat the
   user-agent rule for [hidden]. Keep hiding predictable across the whole site. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: #000; padding: 10px 16px;
  font-size: 12px; letter-spacing: 1.5px; transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Placeholder values the owner still has to replace */
.is-placeholder {
  color: var(--muted-soft);
  font-style: italic;
  border-bottom: 1px dashed #4a4a4a;
}

/* --------------------------------------------------------------------------
   3. Type scale
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; }
.eyebrow, .kicker {
  font-family: var(--ui);
  font-size: 10px; letter-spacing: 4px; color: var(--muted);
  text-transform: uppercase;
}
.section { padding: clamp(46px, 7vw, 80px) 0; }
.section-head { text-align: center; margin-bottom: clamp(26px, 4vw, 40px); }
.section-head h2,
.section h2 { font-size: clamp(26px, 4.4vw, 38px); letter-spacing: 3px; margin: 10px 0; line-height: 1.2; }
.section-rule { width: 85px; height: 1px; background: var(--line-strong); margin: 18px auto; }
.lede { color: var(--muted); max-width: 760px; margin-inline: auto; text-align: center; line-height: 1.8; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn, .quote-btn, .outline-btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-ui);
  background: transparent; color: #fff;
  padding: 13px 20px;
  font-family: var(--ui); font-size: 12px; letter-spacing: 1.4px;
  cursor: pointer; text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  min-height: 44px;                      /* touch target */
}
.btn:hover, .quote-btn:hover, .outline-btn:hover { background: var(--silver); color: #080808; border-color: var(--silver); }
.btn.primary { background: var(--silver); color: #080808; border-color: var(--silver); font-weight: 700; }
.btn.primary:hover { background: #fff; }
.btn.danger { border-color: #6d4a4a; color: #f0c9c9; }
.btn.danger:hover { background: #7a3b3b; color: #fff; border-color: #7a3b3b; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.small { padding: 9px 13px; min-height: 38px; font-size: 11px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: rgba(5, 5, 5, .97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar .nav {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 26px);
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; overflow: hidden; }
.brand img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: var(--display); font-size: clamp(14px, 2.4vw, 19px);
  letter-spacing: clamp(1.5px, .5vw, 4px); white-space: nowrap;
}
.brand-tag {
  font-size: 10px; letter-spacing: 1.5px; color: var(--muted-soft); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.navlinks { display: flex; gap: clamp(14px, 2.2vw, 30px); align-items: center; font-size: 12px; letter-spacing: 1.2px; }
.navlinks a { padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.navlinks a:hover, .navlinks a.active { border-bottom-color: var(--silver); }

.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; letter-spacing: .5px; color: var(--silver); white-space: nowrap;
  padding: 8px 4px;
}
.header-phone:hover { color: #fff; text-decoration: underline; }
.header-phone-ico { font-size: 14px; }

.mobile-menu {
  display: none;
  border: 1px solid var(--line-ui); background: var(--bg-raise);
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.mobile-menu-bars { display: block; width: 18px; height: 14px; position: relative; }
.mobile-menu-bars i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: #fff;
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.mobile-menu-bars i:nth-child(1) { top: 0; }
.mobile-menu-bars i:nth-child(2) { top: 6px; }
.mobile-menu-bars i:nth-child(3) { top: 12px; }
/* open state: the bars become an X, so the control shows its own state */
.mobile-menu.is-open .mobile-menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu.is-open .mobile-menu-bars i:nth-child(2) { opacity: 0; }
.mobile-menu.is-open .mobile-menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 950px) {
  .navlinks {
    display: none;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: #060606; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gutter) 18px;
    box-shadow: var(--shadow);
  }
  .navlinks.open { display: flex; }
  .navlinks a { padding: 16px 0; border-bottom: 1px solid #1c1c1c; font-size: 13px; }
  .navlinks a.active { border-bottom-color: var(--silver); }
  .mobile-menu { display: inline-flex; order: 3; }
  .nav-actions { order: 2; }
  .header-phone { display: none; }
  .topbar .quote-btn { padding: 10px 12px; font-size: 10px; letter-spacing: 1px; }
}
@media (max-width: 780px) {
  /* below this width the sticky bottom bar carries the CTA, so the header
     button would only duplicate it */
  .topbar .quote-btn { display: none; }
}
@media (max-width: 600px) {
  .brand-tag { display: none; }
  .brand img { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   6. Mobile sticky call / quote bar
   -------------------------------------------------------------------------- */
.mobile-cta { display: none; }
@media (max-width: 780px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(6, 6, 6, .98);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; font-size: 12px; letter-spacing: 1.6px; font-weight: 700;
  }
  .mobile-cta-call { color: var(--silver); border-right: 1px solid var(--line); }
  .mobile-cta-call.is-placeholder { color: var(--muted-soft); border-bottom: 0; font-style: normal; }
  .mobile-cta-quote { background: var(--silver); color: #080808; }
  .mobile-cta.no-phone { grid-template-columns: 1fr; }
  body.has-mobile-cta { padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: 45% 55%;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 70px) var(--gutter);
  background: radial-gradient(circle at 50% 45%, #1b1b1b 0, #080808 62%);
}
/* The wordmark is a brand device, not the page heading. It keeps V7's visual
   weight; the <h1> underneath carries the information. */
.hero-wordmark {
  font-family: var(--display); font-size: var(--fs-display); line-height: .95;
  letter-spacing: clamp(2px, .6vw, 5px); margin: 0; color: var(--text);
}
.hero-wordmark span { display: block; }
.hero-wordmark .hero-sub { font-size: .58em; letter-spacing: clamp(3px, 1.2vw, 10px); margin-top: var(--s2); }
.divider { height: 1px; background: var(--line-strong); width: 72%; margin: var(--s6) 0; }
.hero-headline {
  font-size: clamp(20px, 2.5vw, 28px); line-height: 1.35; letter-spacing: .3px;
  max-width: 22ch; margin: 0; color: var(--text);
}
.hero-headline.has-placeholder { color: var(--muted); }
.hero-intro { color: var(--muted); margin-top: var(--s4); max-width: 46ch; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero-trust {
  margin: var(--s5) 0 0; font-size: 11px; letter-spacing: 1.6px;
  color: var(--muted); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
}
.hero-trust .dot { color: var(--line-ui); }
.hero-trust .is-placeholder { border-bottom: 0; }
.hero-photo {
  min-height: clamp(260px, 42vw, 540px);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  position: relative;
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 38%, rgba(0, 0, 0, .1));
}
@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-block: clamp(28px, 6vw, 48px); }
  /* Photo first on mobile: V7 filled the whole first screen with the brand
     name and pushed the only photograph below the fold. */
  .hero-photo { order: -1; min-height: clamp(190px, 46vw, 300px); }
  .hero-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 45%); }
  .hero-wordmark { font-size: clamp(32px, 9vw, 52px); }
}

/* --------------------------------------------------------------------------
   8. Trust bar
   -------------------------------------------------------------------------- */
.trust {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
/* auto-fit, not a fixed 4 columns: items bound to an unsupplied field hide
   themselves, and a fixed track count would leave an empty cell behind. */
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line);
}
.trust-item {
  background: var(--panel); padding: 20px 16px; text-align: center;
}
.trust-item strong { display: block; font-family: var(--display); font-size: 17px; letter-spacing: 1px; }
.trust-item span { display: block; font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-top: 6px; text-transform: uppercase; }
@media (max-width: 780px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .trust-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.card {
  min-height: 0; border: 1px solid var(--line-ui);
  background: linear-gradient(145deg, #111, #090909);
  padding: 26px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: #888; transform: translateY(-2px); }
.bigicon { color: var(--accent); margin: var(--s1) 0 var(--s3); display: block; }
.bigicon svg { width: 40px; height: 40px; }
.card:hover .bigicon { color: var(--silver); }
.card h3 { font-family: var(--ui); font-size: 14px; letter-spacing: 2px; margin: 0 0 12px; line-height: 1.5; max-width: 260px; }
.card p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 16px; }
.view { font-size: 10px; letter-spacing: 1.5px; color: var(--accent); margin-top: auto; }
@media (max-width: 950px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */
.about {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-raise); border: 1px solid var(--line);
}
.about-copy { padding: clamp(28px, 4vw, 52px); }
.about-copy h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: 2px; margin: 10px 0 18px; }
.about-copy p { color: var(--muted); line-height: 1.85; max-width: 62ch; }
.about-photo { min-height: 320px; background: center/cover no-repeat; }
@media (max-width: 950px) { .about { grid-template-columns: 1fr; } .about-photo { min-height: 240px; order: -1; } }

/* --------------------------------------------------------------------------
   11. Project gallery
   -------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 950px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gallery { grid-template-columns: 1fr; } }

.project-card {
  border: 1px solid var(--line-ui); background: var(--bg-raise);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.project-card:hover { transform: translateY(-2px); border-color: #6f6f6f; }
.project-media {
  position: relative; padding: 0; border: 0; background: #111;
  cursor: pointer; display: block; width: 100%;
}
.project-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.project-media-hint {
  position: absolute; inset: auto 0 0 0; padding: 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  font-size: 10px; letter-spacing: 2px; color: #fff;
  opacity: 0; transition: opacity .2s var(--ease);
}
.project-media:hover .project-media-hint,
.project-media:focus-visible .project-media-hint { opacity: 1; }
.ba-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0, 0, 0, .75); border: 1px solid var(--line-strong);
  font-size: 9px; letter-spacing: 1.6px; padding: 5px 8px; color: var(--silver);
}
.project-body { padding: 18px; }
.project-service { font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.project-title { font-family: var(--display); font-size: 20px; margin: 7px 0 0; letter-spacing: .5px; }
.project-meta { font-size: 11px; letter-spacing: 1px; color: var(--muted-soft); margin-top: 6px; }
.project-desc { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 10px 0 0; }
.empty {
  border: 1px dashed var(--line-strong); padding: clamp(28px, 6vw, 50px);
  text-align: center; color: var(--muted); grid-column: 1 / -1; margin: 0;
}

/* Service filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.filter-chip {
  border: 1px solid var(--line-ui); background: transparent; color: var(--muted);
  padding: 9px 15px; font-size: 11px; letter-spacing: 1.4px; cursor: pointer; min-height: 40px;
  transition: .2s var(--ease);
}
.filter-chip:hover { color: #fff; border-color: #777; }
.filter-chip[aria-pressed="true"] { background: var(--silver); color: #080808; border-color: var(--silver); }

/* --------------------------------------------------------------------------
   12. Before / after comparison
   -------------------------------------------------------------------------- */
.ba { --pos: 50%; }
.ba-frame {
  position: relative; overflow: hidden; background: #111;
  aspect-ratio: 3 / 2; user-select: none; touch-action: pan-y;
  border: 1px solid var(--line-ui);
}
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Clip rather than resize, so both photos stay at identical scale. */
.ba-before-wrap {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--silver); transform: translateX(-1px);
  pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10, 10, 10, .9); border: 1px solid var(--silver);
  color: var(--silver); font-size: 11px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
}
.ba-label {
  position: absolute; bottom: 12px;
  background: rgba(0, 0, 0, .72); border: 1px solid var(--line-strong);
  padding: 5px 10px; font-size: 10px; letter-spacing: 2px; color: var(--silver);
}
.ba-label-before { left: 12px; }
.ba-label-after { right: 12px; }
.ba-range { width: 100%; margin: 14px 0 4px; accent-color: #d8d8d8; min-height: 32px; }
.ba-hint { font-size: 11px; letter-spacing: 1px; color: var(--muted-soft); margin: 0; text-align: center; }
.ba-single { margin: 0; }
.ba-single img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line); }
.ba-single figcaption { font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-top: 8px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   13. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, .88);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(12px, 3vw, 40px); overflow-y: auto;
}
.lightbox[hidden] { display: none; }
.lightbox-inner {
  position: relative; width: min(880px, 100%);
  background: var(--panel); border: 1px solid var(--line-strong);
  padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow);
}
.lightbox-close {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px; font-size: 26px; line-height: 1;
  background: transparent; border: 0; color: var(--silver); cursor: pointer;
}
.lightbox-close:hover { color: #fff; }
.lightbox-head { margin-bottom: 18px; padding-right: 44px; }
.lightbox-head h2 { font-size: clamp(22px, 3.6vw, 30px); letter-spacing: 1.5px; margin: 8px 0 0; }
.lightbox-desc { color: var(--muted); line-height: 1.8; margin-top: 18px; }
.lightbox-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
/* Centres a short list instead of leaving it hanging on the left when the
   owner has fewer reviews than columns. */
.testimonials {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
  gap: 18px; justify-content: center; justify-items: stretch; align-items: start;
}
@media (max-width: 950px) { .testimonials { grid-template-columns: 1fr; } }
/* <figure> carries a 40px side margin from the user-agent sheet, which was
   silently shrinking every review card by 80px. */
.testimonial {
  margin: 0; border: 1px solid var(--line-ui); background: var(--bg-raise); padding: 26px;
}
.testimonial blockquote { margin: 0 0 16px; font-family: var(--display); font-size: 18px; line-height: 1.7; color: var(--text); }
.testimonial figcaption { font-size: 11px; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }
.stars { color: var(--silver); letter-spacing: 3px; margin-bottom: 12px; font-size: 13px; }

/* --------------------------------------------------------------------------
   15. Contact + forms
   -------------------------------------------------------------------------- */
.contact { border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(26px, 4vw, 50px); align-items: start; }
@media (max-width: 950px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); line-height: 1.6; }
.contact-list .ci { color: var(--silver); width: 20px; flex: none; text-align: center; }
.contact-list a { color: var(--silver); }
.contact-list a:hover { text-decoration: underline; }
.contact-list strong { display: block; color: var(--text); font-weight: 400; font-size: 17px; letter-spacing: .4px; }
.contact-list small { display: block; text-transform: uppercase; }

.quote-form { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field-wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; }
.field label, .field .field-label {
  display: block;
  font-size: 11px; letter-spacing: 1.6px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 7px;
}
.field .req { color: #e6a5a5; }
.field .opt { color: var(--muted-soft); letter-spacing: .5px; text-transform: none; font-size: 10px; }
.field input, .field select, .field textarea, .admin-input {
  width: 100%; padding: 13px 14px;
  background: #0e0e0e; border: 1px solid var(--line-ui); color: var(--text);
  font-family: var(--ui); font-size: 15px; border-radius: var(--radius);
  min-height: 46px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus,
.admin-input:focus { border-color: var(--silver); outline: none; box-shadow: 0 0 0 2px rgba(233, 233, 233, .18); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field-help { font-size: 11px; color: var(--muted-soft); margin-top: 6px; }
.field-error { font-size: 12px; color: #f0a5a5; margin: 6px 0 0; min-height: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #a05555; }
.field.has-error .field-error { min-height: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { width: 100%; margin-top: 18px; padding: 16px; font-size: 13px; }
.form-note { font-size: 12px; color: var(--muted-soft); margin: 12px 0 0; text-align: center; }
.form-status { margin-top: 14px; font-size: 14px; line-height: 1.6; padding: 0; }
.form-status.success { border-left: 3px solid #8fbf8f; background: #0f150f; color: #d5ead5; padding: 14px 16px; }
.form-status.error { border-left: 3px solid #bf8f8f; background: #150f0f; color: #f0d5d5; padding: 14px 16px; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: #050505; margin-top: 10px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.4fr;
  gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 58px);
}
@media (max-width: 950px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { width: 54px; height: 54px; }
.footer-name { font-family: var(--display); letter-spacing: 4px; font-size: 17px; margin-top: 12px; }
.footer-tag { font-size: 9px; letter-spacing: 2.6px; color: var(--muted-soft); margin-top: 5px; }
.footer-area { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 16px; }
.footer-col h2 { font-family: var(--ui); font-size: 11px; letter-spacing: 2.4px; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--accent); font-size: 13px; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-contact li { display: flex; gap: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-cta { margin-top: 18px; width: 100%; }
.footer-bottom {
  border-top: 1px solid var(--line); padding-block: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 1px; color: var(--muted-soft);
}

/* --------------------------------------------------------------------------
   17. Admin panel
   -------------------------------------------------------------------------- */
.admin-wrap { padding: clamp(28px, 4vw, 46px) 0 90px; }
.admin-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 22px; flex-wrap: wrap;
}
.admin-head h1 { font-size: clamp(26px, 4vw, 38px); margin: 8px 0 6px; letter-spacing: 1px; }
.admin-head p { color: var(--muted); margin: 0; font-size: 14px; }

.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 26px 0 22px; border-bottom: 1px solid var(--line); }
.admin-tab {
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  color: var(--muted); padding: 12px 18px; cursor: pointer;
  font-size: 12px; letter-spacing: 1.4px; min-height: 44px;
}
.admin-tab:hover { color: #fff; }
.admin-tab[aria-selected="true"] { background: var(--panel); border-color: var(--line-strong); color: #fff; margin-bottom: -1px; }
.admin-panel[hidden] { display: none; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-card {
  border: 1px solid var(--line-ui);
  background: linear-gradient(145deg, #121212, #0b0b0b);
  padding: clamp(18px, 3vw, 26px);
}
.admin-card h2 { font-size: 23px; margin: 0 0 6px; letter-spacing: 1px; }
.admin-card .card-hint { color: var(--muted-soft); font-size: 13px; margin: 0 0 20px; }
.admin-card .field { margin-bottom: 16px; }
.admin-card textarea { min-height: 110px; }
/* Native file inputs render an OS-white "Choose File" button — by far the
   brightest thing on a near-black panel. Hide the control, drive it from a
   styled drop zone label. */
.filedrop { position: relative; display: block; }
.filedrop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.filedrop-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  border: 1px dashed var(--line-ui); background: #0e0e0e;
  padding: var(--s5) var(--s4); min-height: 96px;
  color: var(--muted); font-size: 13px; line-height: 1.5;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.filedrop:hover .filedrop-face,
.filedrop input:focus-visible + .filedrop-face,
.filedrop.is-dragging .filedrop-face { border-color: var(--silver); background: #131313; color: var(--text); }
.filedrop-face b { font-weight: 400; color: var(--text); letter-spacing: 1.2px; font-size: 12px; text-transform: uppercase; }
.filedrop-face small { color: var(--muted-soft); font-size: 11px; }
.filedrop.has-file .filedrop-face { border-style: solid; border-color: #7f9f7f; }

.flag {
  display: inline-block; margin-left: 8px; font-size: 9px; letter-spacing: 1.4px;
  color: #e8c98a; border: 1px solid #6a5a35; padding: 2px 6px; vertical-align: middle;
}
.notice {
  border-left: 3px solid var(--muted); background: var(--panel);
  padding: 15px 18px; color: var(--muted); line-height: 1.7; margin: 22px 0; font-size: 14px;
}
.notice strong { color: var(--text); }
.notice.warn { border-left-color: #c9a35a; }

.meter { height: 6px; background: #1c1c1c; border: 1px solid var(--line); margin: 10px 0 6px; }
.meter span { display: block; height: 100%; background: var(--silver); }
.meter.high span { background: #c98d5a; }
.meter.full span { background: #b45f5f; }

.project-list { display: grid; gap: 12px; margin-top: 8px; }
.saved {
  border: 1px solid var(--line-ui); background: var(--bg-raise); padding: 14px;
  display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center;
}
.saved-thumb { width: 92px; height: 70px; object-fit: cover; background: #171717; border: 1px solid var(--line); }
.saved h3, .saved h4 { font-family: var(--ui); font-size: 15px; letter-spacing: .4px; margin: 0 0 5px; font-weight: 700; }
.saved small { color: var(--muted); font-size: 12px; line-height: 1.5; display: block; }
.saved .tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 9px; letter-spacing: 1.4px; border: 1px solid var(--line-strong); padding: 3px 7px; color: var(--muted); }
.actions { display: flex; gap: 7px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .saved { grid-template-columns: 72px 1fr; }
  .saved-thumb { width: 72px; height: 58px; }
  .actions { grid-column: 1 / -1; }
  .actions .btn { flex: 1; }
}

.status { min-height: 20px; color: var(--muted); font-size: 13px; margin-top: 12px; }
.status.ok { color: #a9d3a9; }
.status.err { color: #eaa9a9; }

.lead { border: 1px solid var(--line-ui); background: var(--bg-raise); padding: 16px; display: grid; gap: 6px; }
.lead-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.lead-head strong { font-size: 16px; font-weight: 400; }
.lead-when { font-size: 11px; color: var(--muted-soft); letter-spacing: 1px; }
.lead-row { font-size: 13px; color: var(--muted); }
.lead-row a { color: var(--silver); }
.lead-msg { font-size: 14px; color: var(--text); line-height: 1.7; border-left: 2px solid var(--line-strong); padding-left: 12px; margin-top: 6px; }

/* Admin modal (edit project) */
.modal { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.85); display: flex; align-items: flex-start; justify-content: center; padding: clamp(12px,3vw,40px); overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { width: min(760px, 100%); background: var(--panel); border: 1px solid var(--line-strong); padding: clamp(18px,3vw,30px); position: relative; box-shadow: var(--shadow); }
.modal-card h2 { margin: 0 0 18px; font-size: 24px; letter-spacing: 1px; padding-right: 48px; }
.modal-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: transparent; border: 0; color: var(--silver); font-size: 26px; cursor: pointer; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.modal-actions .btn { flex: 1 1 160px; }

/* Confirmation dialog */
.confirm-text { color: var(--muted); line-height: 1.7; }
.confirm-text b { color: var(--text); }

/* --------------------------------------------------------------------------
   18. Page header band (inner pages)
   -------------------------------------------------------------------------- */
.page-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0e0e0e, var(--bg)); }
.page-head .container { padding-block: clamp(34px, 5vw, 60px); text-align: center; }
.page-head h1 { font-size: clamp(28px, 5vw, 46px); letter-spacing: 3px; margin: 10px 0; }
.page-head p { color: var(--muted); max-width: 70ch; margin: 14px auto 0; line-height: 1.8; }
.breadcrumb { display: flex; gap: 8px; justify-content: center; font-size: 11px; letter-spacing: 1.4px; color: var(--muted-soft); flex-wrap: wrap; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* Call-to-action band */
.cta-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.cta-band .container { padding-block: clamp(34px, 5vw, 56px); text-align: center; }
.cta-band h2 { font-size: clamp(24px, 3.6vw, 34px); letter-spacing: 2px; margin-bottom: 10px; }
.cta-band p { color: var(--muted); max-width: 60ch; margin: 0 auto 22px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Process steps (about page) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 950px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { border: 1px solid var(--line-ui); background: var(--bg-raise); padding: 24px; }
.step-num { font-family: var(--display); font-size: 30px; color: var(--muted-soft); }
.step h3 { font-family: var(--ui); font-size: 13px; letter-spacing: 2px; margin: 10px 0 8px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   19. Services management (admin) + social access points
   -------------------------------------------------------------------------- */

/* Header Instagram: a hairline glyph, not a social badge. It sits in the
   silver/black language rather than importing a brand colour. */
.header-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--muted);
  border: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.header-social svg { width: 19px; height: 19px; }
.header-social:hover { color: var(--silver); border-color: var(--line-ui); }
@media (max-width: 950px) { .header-social { display: none; } }

/* Contact list: WhatsApp / Instagram rows sit level with phone and email */
.contact-list small {
  color: var(--muted-soft); font-size: 11px; letter-spacing: 1.5px;
}

/* Mobile action bar with three actions */
@media (max-width: 780px) {
  .mobile-cta.has-wa { grid-template-columns: 1fr 1fr 1.2fr; }
  .mobile-cta a { flex-direction: row; gap: 7px; font-size: 11px; letter-spacing: 1.2px; }
  .mobile-cta-wa { color: var(--silver); border-right: 1px solid var(--line); }
  .mobile-cta .mc-ico { font-size: 14px; }
}
@media (max-width: 400px) {
  .mobile-cta a { font-size: 10px; letter-spacing: .8px; gap: 5px; }
}

/* ---- icon picker ---- */
.icon-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}
.icon-choice {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px; cursor: pointer;
  background: #0e0e0e; border: 1px solid var(--line-ui); color: var(--muted);
  transition: .18s var(--ease);
}
.icon-choice svg { width: 24px; height: 24px; }
.icon-choice:hover { color: var(--text); border-color: var(--silver); }
.icon-choice[aria-checked="true"] {
  background: var(--silver); color: #080808; border-color: var(--silver);
}

/* ---- service rows ---- */
.service-row { grid-template-columns: 34px 46px 1fr auto; }
.service-row.is-inactive { opacity: .62; }
.service-row.is-inactive h3 { text-decoration: line-through; text-decoration-color: var(--muted-soft); }
.service-order {
  font-family: var(--display); font-size: 18px; color: var(--muted-soft); text-align: center;
}
.service-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; color: var(--accent);
  border: 1px solid var(--line); background: #0e0e0e;
}
.service-icon svg { width: 24px; height: 24px; }
.svc-icon-img { width: 26px; height: 26px; object-fit: contain; }
.reorder { display: flex; gap: 4px; }
.reorder .btn { min-width: 38px; padding: 6px 8px; }
.tag.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.tag.warn { border-color: #7a5a35; color: #e8c98a; }
@media (max-width: 820px) {
  .service-row { grid-template-columns: 30px 40px 1fr; }
  .service-row .actions { grid-column: 1 / -1; }
  .service-icon { width: 40px; height: 40px; }
}

/* ---- switch ---- */
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: #d8d8d8; flex: none; }
.switch span {
  font-size: 13px; color: var(--muted); letter-spacing: .3px; text-transform: none;
}

/* ---- lightbox scope line ---- */
.lightbox-scope {
  margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.7;
}
.lightbox-scope span {
  display: inline-block; margin-right: 8px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-soft);
}

.footer-empty { color: var(--muted-soft); font-size: 13px; }


/* --------------------------------------------------------------------------
   20. Demo content, quote-request inbox, logo management
   -------------------------------------------------------------------------- */

/* Demo content must be legible as demo at a glance, on the public site too. */
.demo-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 4px 9px; font-size: 9px; letter-spacing: 2px;
  background: rgba(6, 6, 6, .82); border: 1px solid var(--line-ui); color: var(--muted);
}
.project-noimg {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 20px; text-align: center;
  font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--muted-soft); background: repeating-linear-gradient(
    -45deg, #0d0d0d, #0d0d0d 10px, #101010 10px, #101010 20px);
}
.ba-none { color: var(--muted); text-align: center; padding: 30px 0; }

/* ---- quote-request inbox ---- */
.lead-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.lead-list { display: grid; gap: 14px; }
.lead {
  border: 1px solid var(--line-ui); background: var(--bg-raise);
  padding: var(--s5); display: grid; gap: 10px;
}
.lead.is-archived { opacity: .68; border-style: dashed; }
.lead-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: baseline; }
.lead-head strong { font-family: var(--display); font-size: 18px; letter-spacing: .5px; }
.lead-when { font-size: 11px; letter-spacing: 1.4px; color: var(--muted-soft); text-transform: uppercase; }
.lead-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lead-row { font-size: 14px; color: var(--muted); }
.lead-row a { color: var(--text); border-bottom: 1px solid var(--line-ui); }
.lead-row a:hover { border-bottom-color: var(--silver); }
.lead-msg {
  margin: 0; padding: 12px 14px; background: #0b0b0b;
  border-left: 2px solid var(--line-ui); color: var(--text);
  font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lead-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lead-status select { min-height: 38px; padding: 8px 10px; font-size: 11px; letter-spacing: 1.2px; }
.tag.ok { border-color: #4a6d4a; color: #bfe0bf; }
.tag.err { border-color: #7a4a4a; color: #f0c9c9; }
.tag.status-new { border-color: var(--silver); color: var(--silver); }
.tag.status-contacted, .tag.status-quoted { border-color: #5c6a7a; color: #c6d4e2; }
.tag.status-won { border-color: #4a6d4a; color: #bfe0bf; }
.tag.status-lost { border-color: #6a5a4a; color: #ddc9b4; }
@media (max-width: 620px) {
  .lead-actions { flex-direction: column; align-items: stretch; }
  .lead-actions .btn, .lead-status, .lead-status select { width: 100%; }
}

/* ---- logo management ---- */
.logo-preview-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.logo-preview {
  width: 64px; height: 64px; object-fit: contain;
  background: #0b0b0b; border: 1px solid var(--line); padding: 6px;
}


/* ---- publish tab ---- */
.publish-steps { display: grid; gap: 16px; margin: 20px 0; }
.publish-step {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start;
  border: 1px solid var(--line); background: #0b0b0b; padding: var(--s5);
}
.publish-num {
  font-family: var(--display); font-size: 22px; color: var(--muted-soft); line-height: 1;
}
.publish-step h3 { font-size: 17px; letter-spacing: 1px; margin-bottom: 6px; }
.publish-step p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.publish-step p:last-child { margin-bottom: 0; }
.publish-status { margin: 0; display: grid; gap: 1px; background: var(--line); }
.ps-row {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 16px; background: var(--bg-raise); padding: 12px var(--s4);
}
.ps-row dt { color: var(--muted-soft); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; }
.ps-row dd { margin: 0; color: var(--text); font-size: 14px; }
@media (max-width: 620px) {
  .publish-step { grid-template-columns: 1fr; }
  .ps-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------------------------------
   21. Contact & social channels
   -------------------------------------------------------------------------- */

/* Header: icons only, never a labelled social bar. */
.header-channels { display: inline-flex; align-items: center; gap: 2px; }
.header-channels .header-social svg { width: 19px; height: 19px; }
@media (max-width: 950px) { .header-channels { display: none; } }

/* Contact list and footer both take their icon from the channel data. */
.contact-list .ci svg, .footer-contact .ch-ico svg { width: 18px; height: 18px; }
.contact-list .ci { display: inline-flex; color: var(--accent); }
.footer-contact .ch-ico { display: inline-flex; vertical-align: -4px; margin-right: 6px; color: var(--muted-soft); }
.footer-meta { margin-top: 10px; }
.btn .btn-ico svg { width: 16px; height: 16px; }

/* Mobile bar sizes itself to however many channels are enabled. */
.mobile-cta-channels { display: contents; }
.mobile-cta-ch {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--silver); border-right: 1px solid var(--line);
  font-size: 11px; letter-spacing: 1.2px;
}
.mobile-cta-ch svg { width: 15px; height: 15px; }
@media (max-width: 780px) {
  .mobile-cta { grid-template-columns: repeat(var(--mc-count, 2), 1fr); }
  .mobile-cta.has-wa { grid-template-columns: repeat(var(--mc-count, 3), 1fr); }
}
@media (max-width: 400px) { .mobile-cta-ch { font-size: 10px; letter-spacing: .6px; gap: 5px; } }

/* Admin: where a channel appears */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
/* `.field label { display:block }` is more specific than a bare `.loc-item`,
   so this rule has to match at least as strongly to win. */
.field .loc-item, .loc-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  border: 1px solid var(--line); background: #0b0b0b; padding: 12px 14px; cursor: pointer;
  transition: border-color .18s var(--ease);
}
.loc-item:hover { border-color: var(--line-ui); }
.loc-item input { width: 18px; height: 18px; accent-color: #d8d8d8; margin-top: 2px; }
.loc-item strong { display: block; font-weight: 400; font-size: 13px; letter-spacing: .4px; }
.loc-item small { display: block; color: var(--muted-soft); font-size: 11px; line-height: 1.5; margin-top: 3px; }
.channel-row { grid-template-columns: 34px 46px 1fr auto; }
.channel-row.is-inactive { opacity: .62; }
.channel-row small { overflow-wrap: anywhere; }
.field-help.ok { color: #9dc39d; }
.field-help.err { color: #e0a9a9; }
@media (max-width: 820px) {
  .channel-row { grid-template-columns: 30px 40px 1fr; }
  .channel-row .actions { grid-column: 1 / -1; }
}

/* ---- lead notes + toolbar ---- */
.lead-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 14px 0 18px;
}
.lead-toolbar .lead-filters { margin: 0; }
.lead-notes { border-top: 1px solid var(--line); padding-top: 10px; }
.lead-notes summary {
  cursor: pointer; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); list-style: none;
}
.lead-notes summary::-webkit-details-marker { display: none; }
.lead-notes summary::before { content: '▸ '; color: var(--muted-soft); }
.lead-notes[open] summary::before { content: '▾ '; }
.lead-notes summary:hover { color: var(--text); }
.lead-notes .muted { color: var(--muted-soft); text-transform: none; letter-spacing: .4px; }
.lead-notes textarea { margin-top: 10px; min-height: 72px; }
.lead-notes .btn { margin-top: 8px; }

/* ==========================================================================
   V8.8 — HOME PAGE VISUAL SYSTEM
   Extends the V8 identity rather than replacing it: same black ground, same
   silver rules, same Georgia display face. What changes is composition —
   photographs carry the page, and sections are graded into one another
   instead of being stacked as separate boxes.
   ========================================================================== */

:root {
  --fs-hero: clamp(34px, 6.2vw, 68px);
  --sec-y: clamp(64px, 9vw, 128px);
  --grade: #070707;                 /* the colour every gradient resolves to */
}

/* --------------------------------------------------------------------------
   Reveal on scroll. The transform is the only animated property besides
   opacity, so this stays on the compositor and cannot cause layout jank.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
    /* A reduced-motion user gets the finished page, not a faster animation. */
  }
  * { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   1. HERO — one composition
   The photo, the grade and the content share a stacking context. The grade is
   a two-axis gradient: darkest bottom-left where the text sits, and resolving
   to the exact page colour at the bottom edge so the section has no seam.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + var(--s10)) 0 var(--s11);
  overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 38%;
  z-index: -2;
  transform: scale(1.06);
  animation: heroDrift 24s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; transform: none; }
}
.hero-photo.no-photo { background: linear-gradient(140deg, #1a1a1a, #0a0a0a); }

.hero-grade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--grade) 0%, rgba(7,7,7,.86) 18%, rgba(7,7,7,.35) 52%, rgba(7,7,7,.55) 100%),
    linear-gradient(to right, rgba(7,7,7,.92) 0%, rgba(7,7,7,.60) 42%, rgba(7,7,7,.15) 78%, rgba(7,7,7,.35) 100%);
}

.hero-inner { position: relative; max-width: var(--max); }
.hero-eyebrow {
  font: 600 var(--fs-small)/1 var(--ui);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s5);
}
.hero-eyebrow:empty { display: none; }
.hero-title {
  font-family: var(--display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .005em;
  margin: 0;
  max-width: 17ch;
  color: #fff;
  text-wrap: balance;
}
.hero-tagline {
  font: 400 clamp(15px, 1.7vw, 19px)/1.5 var(--ui);
  color: var(--silver);
  margin: var(--s4) 0 0;
  max-width: 40ch;
}
.hero-tagline:empty { display: none; }
.hero-intro {
  font: 400 var(--fs-body)/1.7 var(--ui);
  color: var(--muted);
  margin: var(--s4) 0 0;
  max-width: 46ch;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s8);
}
.hero-call:empty { display: none; }

.btn.lg { padding: 15px 26px; font-size: 13px; }
.btn .btn-ico { display: inline-flex; width: 17px; height: 17px; vertical-align: -3px; margin-right: 8px; }
.btn .btn-ico svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   2. TRUST BADGES
   -------------------------------------------------------------------------- */
.badges {
  list-style: none; margin: var(--s10) 0 0; padding: var(--s7) 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.badges[hidden] { display: none; }
.badge { display: flex; gap: var(--s4); align-items: flex-start; }
.badge-ico { flex: 0 0 auto; width: 26px; height: 26px; color: var(--silver); opacity: .9; }
.badge-ico svg { width: 100%; height: 100%; }
.badge-text { display: block; min-width: 0; }
.badge-text strong {
  display: block;
  font: 600 var(--fs-small)/1.35 var(--ui);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.badge-text span {
  display: block; margin-top: 3px;
  font: 400 13px/1.5 var(--ui); color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. SECTION RHYTHM
   -------------------------------------------------------------------------- */
.section { padding: var(--sec-y) 0; }
.section-alt { background: var(--bg-raise); }
.section[hidden] { display: none; }

.eyebrow {
  font: 600 var(--fs-small)/1 var(--ui);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted-soft); margin: 0 0 var(--s4);
}
.eyebrow:empty { display: none; }
.section-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(27px, 3.6vw, 44px); line-height: 1.15;
  margin: 0; color: var(--text); text-wrap: balance;
}
.section-title:empty { display: none; }
.section-intro {
  font: 400 var(--fs-lead)/1.65 var(--ui);
  color: var(--muted); margin: var(--s4) 0 0; max-width: 62ch;
}
.section-intro:empty { display: none; }
.section-more { margin: var(--s9) 0 0; }

/* --------------------------------------------------------------------------
   4. SERVICE CARDS
   -------------------------------------------------------------------------- */
.svc-grid {
  list-style: none; margin: var(--s9) 0 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
/* Six services land as 3x2 rather than 4+2, which leaves no orphan row. */
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card > a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--panel);
  /* --line-ui, not --line: these cards ARE links, so their boundary is a UI
     component boundary and must clear the 3:1 non-text contrast minimum
     (WCAG 1.4.11). The V7 audit raised exactly this; the run suite asserts it. */
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.svc-card > a:hover, .svc-card > a:focus-visible {
  border-color: var(--line-ui);
  transform: translateY(-3px);
}
.svc-media {
  display: block; position: relative;
  aspect-ratio: 16 / 10; overflow: hidden; background: #141414;
}
.svc-media picture, .svc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-media img { transition: transform .8s var(--ease); }
.svc-card > a:hover .svc-media img { transform: scale(1.05); }
.svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,7,.72), rgba(7,7,7,0) 58%);
}
.svc-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted-soft);
}
.svc-fallback svg { width: 46px; height: 46px; }
.svc-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); flex: 1; }
.svc-head { display: flex; align-items: center; gap: var(--s3); }
.svc-ico { width: 22px; height: 22px; color: var(--silver); flex: 0 0 auto; }
.svc-ico svg { width: 100%; height: 100%; }
.svc-name {
  font: 400 var(--fs-h3)/1.25 var(--display);
  color: var(--text);
}
.svc-desc { font: 400 14px/1.65 var(--ui); color: var(--muted); flex: 1; }
.svc-more {
  font: 600 var(--fs-small)/1 var(--ui);
  letter-spacing: .16em; color: var(--silver);
  margin-top: var(--s2);
}
.svc-card > a:hover .svc-more span { display: inline-block; transform: translateX(4px); transition: transform .3s var(--ease); }
.svc-empty { color: var(--muted); font: 400 var(--fs-body)/1.6 var(--ui); }

/* --------------------------------------------------------------------------
   5. BEFORE / AFTER
   -------------------------------------------------------------------------- */
.ba-grid {
  margin-top: var(--s9);
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.ba-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--line-ui);
  border-radius: var(--radius); overflow: hidden;
}
.ba-meta { padding: var(--s5) var(--s6) var(--s6); }
.ba-svc {
  display: block;
  font: 600 var(--fs-small)/1 var(--ui);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: var(--s3);
}
.ba-meta h3 {
  font: 400 var(--fs-h3)/1.25 var(--display);
  color: var(--text); margin: 0;
}
.ba-loc { font: 400 13px/1.5 var(--ui); color: var(--muted); margin: 6px 0 0; }

/* --------------------------------------------------------------------------
   6. GALLERY MOSAIC
   A real mosaic on wide screens, a single column on phones. Rhythm comes from
   the span classes on individual tiles, which are stored on the record.
   -------------------------------------------------------------------------- */
.mosaic {
  margin-top: var(--s9);
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr;
}
.tile {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #121212;
  aspect-ratio: 4 / 3;
}
.tile picture, .tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile img { transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s7) var(--s5) var(--s4);
  background: linear-gradient(to top, rgba(7,7,7,.9), rgba(7,7,7,0));
  display: flex; flex-direction: column; gap: 2px;
}
.tile figcaption strong {
  font: 400 16px/1.3 var(--display); color: #fff;
}
.tile figcaption span {
  font: 400 12px/1.4 var(--ui); color: var(--muted);
  letter-spacing: .06em;
}

@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .tile { aspect-ratio: auto; grid-column: span 2; grid-row: span 1; }
  .tile-wide { grid-column: span 2; grid-row: span 2; }
  .tile-tall { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1100px) {
  .mosaic { grid-auto-rows: 210px; }
  .tile { grid-column: span 1; }
  .tile-wide { grid-column: span 2; grid-row: span 2; }
  .tile-tall { grid-column: span 1; grid-row: span 2; }
}

/* --------------------------------------------------------------------------
   7. ABOUT + VALUES
   -------------------------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(28px, 5vw, 64px); }
.about-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.about-media picture, .about-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-copy .lede { font: 400 var(--fs-lead)/1.7 var(--ui); color: var(--silver); margin: var(--s5) 0 0; }
.about-copy .muted-copy { font: 400 var(--fs-body)/1.75 var(--ui); color: var(--muted); margin: var(--s4) 0 var(--s7); }
.about-copy .muted-copy:empty { display: none; }

.values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.values[hidden] { display: none; }
.value { display: flex; gap: var(--s4); align-items: flex-start; }
.value-ico { flex: 0 0 auto; width: 26px; height: 26px; color: var(--silver); }
.value-ico svg { width: 100%; height: 100%; }
.value strong { display: block; font: 600 14px/1.4 var(--ui); color: var(--text); letter-spacing: .04em; }
.value p { margin: 5px 0 0; font: 400 13px/1.6 var(--ui); color: var(--muted); }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .about-media { grid-row: span 2; height: 100%; min-height: 420px; }
  .values { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   8. REVIEWS
   -------------------------------------------------------------------------- */
.reviews {
  list-style: none; margin: var(--s9) 0 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.review {
  position: relative;
  background: var(--panel); border: 1px solid var(--line-ui);
  border-radius: var(--radius); padding: var(--s7) var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
.stars { color: var(--silver); letter-spacing: .18em; font-size: 13px; line-height: 1; }
.review blockquote {
  margin: 0; font: 400 15px/1.7 var(--display);
  color: var(--silver); flex: 1;
}
.review-by strong { display: block; font: 600 13px/1.4 var(--ui); color: var(--text); }
.review-by span { display: block; font: 400 12px/1.4 var(--ui); color: var(--muted-soft); margin-top: 2px; }

/* --------------------------------------------------------------------------
   9. FINAL CTA — image, grade and form in one composition
   -------------------------------------------------------------------------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--sec-y) 0;
}
.cta-photo {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.cta-photo.no-photo { background: linear-gradient(140deg, #191919, #0a0a0a); }
.cta-grade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--grade) 0%, rgba(7,7,7,.80) 22%, rgba(7,7,7,.80) 78%, var(--grade) 100%),
    linear-gradient(to right, rgba(7,7,7,.90), rgba(7,7,7,.55));
}
.cta-inner { display: grid; gap: clamp(28px, 5vw, 60px); align-items: start; }
.cta-copy h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(27px, 3.6vw, 44px); line-height: 1.15;
  margin: 0; color: #fff; text-wrap: balance;
}
.cta-copy > p { font: 400 var(--fs-lead)/1.7 var(--ui); color: var(--silver); margin: var(--s5) 0 var(--s7); max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.cta-actions:empty { display: none; }
.cta-contact { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s5); }
.cta-form {
  background: rgba(13,13,13,.86);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 34px);
  backdrop-filter: blur(6px);
}
@media (min-width: 960px) {
  .cta-inner { grid-template-columns: 1fr 1.05fr; }
}

/* --------------------------------------------------------------------------
   10. SOCIAL ROW
   -------------------------------------------------------------------------- */
.social-section { padding-bottom: var(--s12); }
.social-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s8); }
.social-link {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: 12px 20px;
  border: 1px solid var(--line-ui); border-radius: var(--radius);
  background: var(--panel); text-decoration: none;
  color: var(--text);
  font: 600 var(--fs-small)/1 var(--ui); letter-spacing: .1em;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.social-link:hover, .social-link:focus-visible { border-color: var(--silver); background: var(--panel-2); }
.social-ico { width: 20px; height: 20px; display: inline-flex; }
.social-ico svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   11. DEMO TAG — unchanged meaning, restyled for photographs
   -------------------------------------------------------------------------- */
.demo-tag {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font: 600 10px/1 var(--ui); letter-spacing: .18em;
  padding: 6px 9px; border-radius: 2px;
  background: rgba(7,7,7,.82); color: var(--silver);
  border: 1px solid rgba(255,255,255,.28);
}

/* --------------------------------------------------------------------------
   12. MOBILE — treated as its own experience, not the desktop shrunk
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero {
    min-height: 0;
    padding: calc(var(--header-h) + var(--s9)) 0 var(--s10);
    align-items: flex-start;
  }
  .hero-photo { background-position: center 42%; }
  /* On a phone the text sits over the lower half, so the grade is vertical
     only — a horizontal one would leave the copy on a bright patch. */
  .hero-grade {
    background: linear-gradient(to top,
      var(--grade) 0%, rgba(7,7,7,.90) 30%, rgba(7,7,7,.55) 62%, rgba(7,7,7,.45) 100%);
  }
  .hero-title { max-width: none; }
  .hero-tagline, .hero-intro { max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; text-align: center; }
  .badges { margin-top: var(--s7); }
  .svc-grid, .ba-grid, .reviews { grid-template-columns: 1fr; }
  .cta-contact { gap: var(--s6); }
}

/* Comfortable thumb targets everywhere on touch devices. 15px footer links
   were the single worst usability defect in the previous build. */
@media (hover: none) {
  .footer-nav a, .footer-contact a, .cta-contact a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   13. Contact-list icons outside the contact page
   The `contact` channel variant was only ever sized under .contact-list, so
   reusing that markup anywhere else let the SVGs expand to the full column
   width. Size the icon itself rather than relying on an ancestor class, so any
   future context inherits sensible dimensions instead of breaking.
   -------------------------------------------------------------------------- */
.ci { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--accent); }
.ci svg { width: 18px; height: 18px; }

.cta-contact li { display: flex; gap: var(--s4); align-items: flex-start; }
.cta-contact small {
  display: block;
  font: 600 var(--fs-micro)/1 var(--ui);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: 5px;
}
.cta-contact a { text-decoration: none; color: var(--text); }
.cta-contact a strong { font: 400 16px/1.4 var(--ui); color: var(--text); }
.cta-contact a:hover strong, .cta-contact a:focus-visible strong { color: #fff; text-decoration: underline; }

/* The quote form sits on a photograph in the new CTA, so its fields need a
   solid fill of their own rather than the page ground showing through. */
.cta-form .quote-form input,
.cta-form .quote-form select,
.cta-form .quote-form textarea { background: #0d0d0d; }
.cta-form .form-grid { gap: var(--s4); }

/* The global .lede is centred with an auto inline margin for the older pages.
   In the About column it is body copy in a two-column layout, so it reads left
   like every paragraph beside it. Scoped, so the other pages keep their rule. */
.about-copy .lede { max-width: none; margin-inline: 0; text-align: left; }

/* --------------------------------------------------------------------------
   14. Touch targets
   The V8 mobile audit found footer links at 15px and contact links at 27px.
   The earlier attempt at this used class names that do not exist (.footer-nav),
   so it fixed nothing — these are the real ones, verified against the rendered
   page rather than guessed.

   44px is the Apple/Google minimum. Applied on touch devices only, so the
   desktop layout keeps its tighter vertical rhythm.
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 700px) {
  .footer-col a,
  .footer-contact a,
  .contact-list a,
  .cta-contact a,
  .breadcrumb a,
  .social-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The list item, not just the anchor, so the whole row is comfortable and
     adjacent links do not end up touching each other. */
  .footer-col li, .footer-contact li { margin-block: 2px; }

  /* Body and label copy: 10–11px was too small to read on a phone. */
  .eyebrow, .hero-eyebrow { font-size: 11px; }
  .badge-text span, .value p, .review-by span { font-size: 13px; }
  .svc-more, .ba-svc { font-size: 11px; }
  .footer-col a, .footer-contact a { font-size: 14px; }
}

/* ==========================================================================
   V8.9 — MOBILE REWORK
   Driven by a review of the V8.8 build on a real phone. The theme throughout
   is economy of scroll: the same information in fewer screens, with the
   decoration that was costing height removed rather than shrunk.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Metallic buttons
   A brushed-silver surface rather than a flat fill: three stops across the
   width give the highlight, and a hairline top edge reads as a bevel. Kept
   subtle on purpose — a heavy chrome gradient would fight the black ground
   that carries the whole identity.
   -------------------------------------------------------------------------- */
:root {
  --metal: linear-gradient(160deg, #fdfdfd 0%, #dcdcdc 34%, #b6b6b6 58%, #e6e6e6 100%);
  --metal-hover: linear-gradient(160deg, #ffffff 0%, #ececec 34%, #cdcdcd 58%, #f4f4f4 100%);
  --metal-ghost: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 46%, rgba(255,255,255,.10));
}

.btn.primary,
.quote-btn,
.mobile-cta-quote,
.btn.footer-cta {
  background: var(--metal);
  color: #0a0a0a;
  border-color: #cfcfcf;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary:hover, .quote-btn:hover, .mobile-cta-quote:hover, .btn.footer-cta:hover {
  background: var(--metal-hover);
  color: #0a0a0a;
}

/* Secondary buttons get the same material at a whisper, so the family reads
   as one set of metal parts rather than one metal and one flat. */
.btn:not(.primary):not(.danger):not(.small),
.btn.ghost {
  background: var(--metal-ghost);
  border-color: var(--line-ui);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.btn:not(.primary):not(.danger):not(.small):hover,
.btn.ghost:hover {
  background: var(--metal);
  color: #0a0a0a;
  border-color: #cfcfcf;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* --------------------------------------------------------------------------
   2. Section headings
   V8.9 promoted the eyebrow into the section heading; V8.13 then tried to make
   that promoted form match the Our Work title. Both were the wrong reading of
   what was asked for. "OUR SERVICES" is meant to look like "OUR WORK" — the
   small tracked kicker — so all of that special-casing is GONE and the base
   `.eyebrow` rule governs every section, Our Work and Our Services alike.
   That is the reuse that was asked for: one class, one style, no near-copy.
   -------------------------------------------------------------------------- */
/* Sections whose heading IS an h2 (About, Reviews) keep it large. */
.about-copy .section-title, #reviews .section-title { font-size: clamp(24px, 4.4vw, 38px); }

/* --------------------------------------------------------------------------
   3. Hero credibility boxes
   Each badge is its own bordered box and two fit per row, so the four take
   two lines instead of four.
   -------------------------------------------------------------------------- */
.badges {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3);
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s8);
}
.badge {
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(4px);
  align-items: center;
}
.badge-ico { width: 20px; height: 20px; }
.badge-text strong { font-size: 11px; letter-spacing: .1em; }
.badge-text span { font-size: 12px; margin-top: 2px; }

/* --------------------------------------------------------------------------
   4. Service cards — compact, name only
   -------------------------------------------------------------------------- */
.svc-card > a { gap: 0; }
.svc-media { aspect-ratio: 4 / 3; }
.svc-body { padding: var(--s4); gap: 0; }
.svc-name { font-size: clamp(14px, 1.5vw, 18px); line-height: 1.3; display: block; }

/* --------------------------------------------------------------------------
   5. Before / after — the slider chrome goes, the control stays
   The range input is the KEYBOARD control for the comparison and the hint is
   its accessible description. Both are hidden from sight, not removed: the
   divider is draggable by pointer, and a keyboard user can still operate it.
   -------------------------------------------------------------------------- */
.ba-range, .ba-hint {
  position: absolute;
  width: 1px; height: 1px;
  /* min-height must be zeroed too: the earlier .ba-range rule sets 32px, and a
     min-height beats a height, so without this the control stays visible. */
  min-height: 0;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
/* Except when it has focus — a keyboard user must be able to see what they are
   driving, so it comes back into view the moment it is focused. */
.ba-range:focus-visible {
  position: static;
  width: 100%; height: auto; min-height: 32px;
  margin: var(--s4) 0 0; clip: auto; clip-path: none;
  overflow: visible;
}
.ba { position: relative; }

/* --------------------------------------------------------------------------
   6. CTA contact icons — one line, marks only
   -------------------------------------------------------------------------- */
.cta-icons {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s4);
}
.cta-icons .icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid var(--line-ui); border-radius: 50%;
  background: var(--metal-ghost);
  color: var(--silver);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.cta-icons .icon-link svg { width: 21px; height: 21px; }
.cta-icons .icon-link:hover, .cta-icons .icon-link:focus-visible {
  background: var(--metal); color: #0a0a0a; border-color: #cfcfcf;
}

/* --------------------------------------------------------------------------
   7. Reviews — compact, with a reserved portrait slot
   -------------------------------------------------------------------------- */
.review { padding: var(--s5); gap: var(--s3); }
.review-head { display: flex; align-items: center; gap: var(--s3); }
.review-photo {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; background: #1a1a1a; border: 1px solid var(--line-ui);
  display: grid; place-items: center;
}
.review-photo img { width: 100%; height: 100%; object-fit: cover; }
/* An empty slot is a quiet monogram-less disc, not a broken frame. */
.review-photo.is-empty::after {
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  background: #2c2c2c;
}
.review blockquote { font-size: 14px; line-height: 1.6; }
.review-by strong { font-size: 12px; }

/* --------------------------------------------------------------------------
   8. Footer — Company and Contact side by side, tighter rhythm
   -------------------------------------------------------------------------- */
.footer-company ul { line-height: 1.2; }
.footer-company li { margin-block: 0; }

/* --------------------------------------------------------------------------
   9. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Services: six on one screen, three and three. A seventh and beyond scroll
     sideways rather than pushing the rest of the page down. */
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s2);
    grid-auto-flow: row;
  }
  .svc-media { aspect-ratio: 1 / 1; }
  .svc-body { padding: 8px 6px; }
  .svc-name { font-size: 11px; line-height: 1.25; letter-spacing: .01em; }

  /* The V8.9 :has() switch is gone: the count now arrives as --svc-count and
     .is-scroller-mobile from home.js, and having two mechanisms decide the
     same layout meant the flex rule was flattening the two rows into one. */

  /* Before / after: two, stacked. The third is rendered but not shown, so a
     rotation to landscape does not have to re-render anything. */
  .ba-grid .ba-card:nth-child(n+3) { display: none; }

  /* Superseded by the grid-based single row later in this file. */

  /* Footer: the brand spans the full width, then Company and Contact share the
     row beneath it. inline-block does nothing to a grid item, which is why the
     first attempt at this left them stacked. */
  .footer-grid {
    /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to shrink below its
       content, and the email address is wider than half of a 360px screen —
       which is exactly what pushed the page 7px sideways. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s6) var(--s5);
  }
  .footer-col, .footer-contact { min-width: 0; }
  .footer-contact a { overflow-wrap: anywhere; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h2 { margin-bottom: var(--s3); }

  /* Tighter rows: still a comfortable 40px target, without the 44px + gap that
     made the Company list taller than everything around it. */
  .footer-col li { margin-block: 0; }
  .footer-col ul { display: flex; flex-direction: column; gap: 0; }
  .footer-col a { min-height: 40px; }

  .cta-icons { gap: var(--s3); justify-content: flex-start; }
  .cta-icons .icon-link { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   10. Mobile action bar — up to four channels beside the estimate button
   --mc-count is set by renderChannels() from the live channel list.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .mobile-cta { grid-template-columns: repeat(var(--mc-count, 2), 1fr); }
  /* At four or more the labels stop fitting, so the marks carry it. The
     accessible name stays on the link either way. */
  .mobile-cta[style*="--mc-count: 4"] .mc-label,
  .mobile-cta[style*="--mc-count: 5"] .mc-label { font-size: 9px; letter-spacing: .06em; }
  .mobile-cta a { gap: 6px; padding-inline: 4px; }
  .mobile-cta .mc-ico svg { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   11. Hero badges, two per row on a phone
   This has to come AFTER the V8.9 .badges block: that rule is unconditional,
   so an override placed earlier in the file loses the cascade even though it
   is inside a media query. Source order decided this one, not specificity.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }
  .badge { padding: var(--s3); gap: var(--s2); align-items: flex-start; }
  .badge-ico { width: 17px; height: 17px; margin-top: 1px; }
  .badge-text strong { font-size: 10px; letter-spacing: .06em; line-height: 1.3; }
  .badge-text span { font-size: 11px; line-height: 1.35; }
}

/* --------------------------------------------------------------------------
   12. The sticky bar must never swallow a tap
   --mc-h is measured at runtime by trackMobileBarHeight(), because the bar's
   height depends on the channel count and the device safe-area inset. The old
   fixed 56px was one pixel short of the real bar AND took no account of a
   fourth channel, so content could sit under it and become untappable.

   scroll-padding-bottom matters as much as the padding: it keeps anchor jumps
   and keyboard focus from parking an element underneath the bar.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  body.has-mobile-cta { padding-bottom: calc(var(--mc-h, 56px) + 8px); }
  html { scroll-padding-bottom: calc(var(--mc-h, 56px) + 16px); }
  /* Anything the visitor is meant to press keeps clear of the bar when the
     browser scrolls it into view. */
  .section-more .btn, .svc-card, .btn, .social-link, .cta-icons .icon-link {
    scroll-margin-bottom: calc(var(--mc-h, 56px) + 16px);
  }
}

/* ==========================================================================
   V8.10 — SERVICES AND REVIEWS AS SINGLE ROWS
   Three rules run through everything below:
     - a list grows SIDEWAYS, never downwards, once it passes what fits;
     - the number of columns follows the number of records, published by
       home.js as a custom property, so adding a service never adds a row;
     - a row that scrolls says so, with a rail beneath it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2. Hero badges — at most two rows, however many there are
   --badge-cols is written by renderBadges() from the live list.
   -------------------------------------------------------------------------- */
.badges { grid-template-columns: repeat(var(--badge-cols, 2), minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   3. Swipe rail
   -------------------------------------------------------------------------- */
.swipe-rail {
  position: relative;
  height: 3px;
  margin: var(--s4) 0 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}
.swipe-rail[hidden] { display: none; }
.swipe-rail span {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #cfcfcf, #8f8f8f);
  transition: left .12s linear, width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .swipe-rail span { transition: none; } }

/* A row that scrolls, in one place so services and reviews behave identically. */
.rx-row-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rx-row-scroll::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   4. Services — two rows, then sideways
   -------------------------------------------------------------------------- */
.svc-grid {
  grid-template-columns: repeat(var(--svc-cols, 3), minmax(0, 1fr));
  gap: var(--s4);
}
/* Past eight, the two rows scroll instead of a third row appearing. */
.svc-grid.is-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: none;
  grid-auto-columns: calc((100% - var(--s4) * 3) / 4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.svc-grid.is-scroller::-webkit-scrollbar { display: none; }
.svc-grid.is-scroller .svc-card { scroll-snap-align: start; }

/* Cards sized so two rows of three sit inside one desktop screen rather than
   one row filling it. */
@media (min-width: 701px) {
  .svc-media { aspect-ratio: 16 / 11; }
  .svc-body { padding: var(--s4) var(--s5); }
  .svc-name { font-size: clamp(15px, 1.25vw, 18px); }
}

/* --------------------------------------------------------------------------
   5. Reviews — one row, always
   -------------------------------------------------------------------------- */
.reviews {
  display: grid;
  /* NO grid-auto-flow: column here. With explicit columns AND column flow the
     two fight: the 1fr tracks resolve to 0 and implicit auto columns take the
     whole width, which is how review cards ended up 42px wide. Column flow
     belongs only to the scrolling variant, which has no explicit columns. */
  grid-template-columns: repeat(var(--rev-cols, 3), minmax(0, 1fr));
  gap: var(--s4);
}
.reviews.is-scroller {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s4) * 4) / 5);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.reviews.is-scroller::-webkit-scrollbar { display: none; }
.reviews.is-scroller .review { scroll-snap-align: start; }

.review-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.review-who strong {
  font: 600 13px/1.3 var(--ui); color: var(--text); letter-spacing: .02em;
}
.review-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font: 400 12px/1.4 var(--ui); color: var(--muted-soft);
}
.review-meta time { font-variant-numeric: tabular-nums; }

/* Five lines, then a control. -webkit-line-clamp is the only cross-browser way
   to clamp by LINES rather than by height, and it is supported everywhere the
   site targets. The control is added by home.js only when text really overflows. */
.review blockquote[data-rx-clamp] {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review blockquote[data-rx-clamp].is-open {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.read-more {
  align-self: flex-start;
  background: none; border: 0; padding: 4px 0;
  /* nowrap is not cosmetic here: in a narrow review card the label wrapped to
     two lines while min-height kept the box at 32px, so the button measured
     38px wide and its centre landed in the gap BETWEEN the lines — a pointer
     at the centre hit the card, not the button, and the control was dead on
     desktop. 40px also brings it to a proper touch size. */
  white-space: nowrap;
  min-height: 40px;
  font: 600 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--silver); cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.read-more:hover, .read-more:focus-visible { color: #fff; border-bottom-color: var(--silver); }

/* --------------------------------------------------------------------------
   6. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Services: three across, two rows, then sideways. */
  .svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
  }
  .svc-grid.is-scroller-mobile {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: none;
    grid-auto-columns: calc((100% - var(--s2) * 2) / 3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .svc-grid.is-scroller-mobile::-webkit-scrollbar { display: none; }

  /* Reviews: two visible, the rest by swipe — always one row. */
  .reviews {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 47%;
    /* explicit columns cleared above, so column flow is safe here */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: var(--s3);
  }
  .reviews::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: start; }
}

/* Small admin buttons reach a proper touch size on a phone. The owner does
   use the panel from a phone, so they get the same 40px floor as the site. */
@media (hover: none), (max-width: 780px) {
  .btn.small { min-height: 40px; }
}

/* The DEMO tag sits top-right, which collided with the reviewer's name now
   that the name shares that line with the portrait. On a review card it moves
   to the bottom-right, where nothing else lives. */
.review .demo-tag { top: auto; bottom: 10px; right: 10px; }

/* Thumbnail strip for a project's additional photos in Admin. */
.extra-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.extra-strip[hidden] { display: none; }
.extra-item { position: relative; display: inline-block; }
.extra-item img {
  width: 68px; height: 52px; object-fit: cover;
  border: 1px solid var(--line-ui); border-radius: var(--radius); display: block;
}
.extra-remove {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-ui); background: #101010; color: var(--text);
  font: 700 13px/1 var(--ui); cursor: pointer;
}
.extra-remove:hover, .extra-remove:focus-visible { background: #7a3b3b; color: #fff; }

/* Projects grouped under their service in Admin. */
.proj-group { margin-bottom: var(--s8); }
.proj-group-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--s4);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font: 400 var(--fs-h3)/1.2 var(--display); color: var(--text);
}
.proj-group-head .count {
  font: 600 11px/1 var(--ui); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-soft);
}

/* Additional project photographs inside the project lightbox. */
.lightbox-extras { margin-top: var(--s7); }
.lightbox-extras h3 {
  font: 600 var(--fs-small)/1 var(--ui);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-soft); margin: 0 0 var(--s4);
}
.lightbox-extras .extra-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.lightbox-extras figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lightbox-extras img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   Full Gallery — the service index
   -------------------------------------------------------------------------- */
.gal-index {
  list-style: none; margin: var(--s8) 0 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gal-tile > a {
  display: block; height: 100%;
  background: var(--panel);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  overflow: hidden; text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.gal-tile > a:hover, .gal-tile > a:focus-visible {
  border-color: var(--silver); transform: translateY(-3px);
}
.gal-media {
  display: block; position: relative;
  aspect-ratio: 4 / 3; overflow: hidden; background: #141414;
}
.gal-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.gal-tile > a:hover .gal-media img { transform: scale(1.05); }
.gal-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-soft); }
.gal-fallback svg { width: 46px; height: 46px; }
.gal-body { display: flex; flex-direction: column; gap: 4px; padding: var(--s5); }
.gal-name { font: 400 var(--fs-h3)/1.25 var(--display); color: var(--text); }
.gal-count {
  font: 600 11px/1 var(--ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-soft);
}
@media (max-width: 700px) {
  .gal-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .gal-body { padding: var(--s4) var(--s3); }
  .gal-name { font-size: 14px; }
  .gal-count { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   Horizontal rows: the shell that carries the rail and the desktop arrows
   The arrows sit OUTSIDE the scrolling row so they never scroll away with it,
   and they are only inserted into the DOM for a fine pointer.
   -------------------------------------------------------------------------- */
.row-shell { position: relative; }

.row-arrow {
  position: absolute; top: calc(50% - 22px);
  width: 44px; height: 44px;
  display: none; place-items: center;
  border: 1px solid var(--line-ui); border-radius: 50%;
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(6px);
  color: var(--silver);
  font: 400 22px/1 var(--ui);
  cursor: pointer; z-index: 4;
  opacity: .55;
  transition: opacity .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.row-shell.has-overflow .row-arrow { display: grid; }
.row-arrow[hidden] { display: none !important; }
.row-shell:hover .row-arrow { opacity: 1; }
.row-arrow:hover, .row-arrow:focus-visible {
  background: var(--metal); color: #0a0a0a; border-color: #cfcfcf;
  opacity: 1; transform: scale(1.06);
}
.row-arrow:disabled { opacity: .16; cursor: default; transform: none; }
.row-shell:hover .row-arrow:disabled { opacity: .16; }
.row-prev { left: -14px; }
.row-next { right: -14px; }

@media (prefers-reduced-motion: reduce) {
  .row-arrow { transition: none; }
}

/* On a touch device the arrows are never created, and the row keeps the full
   width for content. */
@media (hover: none) {
  .row-arrow { display: none !important; }
}

/* --------------------------------------------------------------------------
   Google Business Profile panel
   Deliberately restrained: it is a credibility marker, not a billboard, and in
   demo it must read as an example at a glance.
   -------------------------------------------------------------------------- */
.gbp {
  position: relative;
  display: flex; align-items: center; gap: var(--s5);
  flex-wrap: wrap;
  margin: var(--s7) 0 0;
  padding: var(--s5) var(--s6);
  border: 1px solid var(--line-ui); border-radius: var(--radius);
  background: var(--panel);
}
.gbp.is-demo { border-style: dashed; }
.gbp-mark { flex: 0 0 auto; width: 30px; height: 30px; color: var(--silver); }
.gbp-mark svg { width: 100%; height: 100%; }
.gbp-body { flex: 1 1 220px; min-width: 0; }
.gbp-body strong {
  display: block; font: 600 13px/1.3 var(--ui);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.gbp-score { display: flex; align-items: baseline; gap: var(--s3); margin-top: 6px; flex-wrap: wrap; }
.gbp-rating { font: 400 20px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.gbp-count { font: 400 12px/1 var(--ui); color: var(--muted); }
.gbp-note { margin: 6px 0 0; font: 400 12px/1.5 var(--ui); color: var(--muted-soft); max-width: 52ch; }
.gbp .demo-tag { top: 10px; right: 10px; }
@media (max-width: 700px) {
  .gbp { gap: var(--s4); padding: var(--s4); }
  .gbp .btn.small { width: 100%; }
}

/* --------------------------------------------------------------------------
   Admin: compact rows for badges and value points
   These were full cards; four of them filled a screen. A table-shaped row
   scans in one pass, and the edit form appears only when asked for.
   -------------------------------------------------------------------------- */
.point-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s4);
  padding: 10px var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 6px;
}
.point-row.is-off { opacity: .62; }
.point-ico { width: 22px; height: 22px; color: var(--silver); }
.point-ico svg { width: 100%; height: 100%; }
.point-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.point-main b { font: 700 14px/1.3 var(--ui); color: var(--text); }
.point-main small { font: 400 12px/1.4 var(--ui); color: var(--muted); }
.point-main small.muted { color: var(--muted-soft); font-style: italic; }
.point-state {
  font: 600 10px/1 var(--ui); letter-spacing: .14em;
  color: var(--muted-soft); white-space: nowrap;
}
.point-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.point-edit {
  grid-column: 1 / -1;
  display: grid; gap: var(--s3);
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.point-edit[hidden] { display: none; }
.point-edit label { display: grid; gap: 5px; font: 600 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-soft); }
.point-edit-actions { display: flex; gap: 6px; }

@media (max-width: 860px) {
  .point-row { grid-template-columns: 26px minmax(0, 1fr); }
  .point-state { grid-column: 2; justify-self: start; }
  .point-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .point-edit { grid-template-columns: 1fr; }
}

/* Admin: the three featured slots. */
.featured-slots { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: var(--s5); }
.featured-slot label { display: block; font: 600 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 6px; }
.featured-slot.is-broken .admin-input { border-color: #7a5b3b; }
.field-help.warn { color: #e0b98a; }

/* --------------------------------------------------------------------------
   Breadcrumb alignment on touch
   The 44px touch-target rule turned breadcrumb LINKS into inline-flex boxes
   that centre their text, while the separators and the current-page label kept
   their natural line at the top of their own box. Measured on a phone: the
   link's text sat 13px lower than its neighbours.

   The fix aligns the whole trail on one axis by making the breadcrumb a flex
   row and giving every child the same band to sit in. Nothing about the size,
   colour or behaviour of the items changes.
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 700px) {
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
  }
  .breadcrumb > * {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1;
  }
  /* The separator does not need a 44px target of its own and should not add
     width to the row. */
  .breadcrumb > span[aria-hidden="true"] { min-height: 0; }
}


/* --------------------------------------------------------------------------
   Privacy link in the footer bottom row, and the legal page's own type.
   Both deliberately plain: this is required reading, not a design surface.
   -------------------------------------------------------------------------- */
.footer-privacy { color: var(--muted-soft); text-decoration: none; }
.footer-privacy:hover, .footer-privacy:focus-visible { color: var(--text); text-decoration: underline; }

.legal { max-width: 74ch; }
.legal h2 {
  font: 400 var(--fs-h3)/1.3 var(--display);
  color: var(--text);
  margin: var(--s9) 0 var(--s3);
  letter-spacing: .01em;
}
.legal h2:first-of-type { margin-top: var(--s6); }
.legal p, .legal li { font: 400 var(--fs-body)/1.75 var(--ui); color: var(--muted); }
.legal p { margin: 0 0 var(--s4); }
.legal ul { margin: 0 0 var(--s4); padding-left: 1.25em; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal a { color: var(--silver); }
.legal-updated {
  font: 600 var(--fs-small)/1 var(--ui);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-soft); margin-bottom: var(--s6);
}
.legal .contact-list { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s5); }

/* --------------------------------------------------------------------------
   404. Same identity, no new design: the section rhythm, the eyebrow, the
   metal buttons and the contact list are all the ones the site already uses.
   -------------------------------------------------------------------------- */
.notfound { padding-block: clamp(60px, 12vh, 140px); }
.notfound-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 5vw, 48px); line-height: 1.15;
  color: var(--text); margin: 0; text-wrap: balance;
}
.notfound-lede {
  font: 400 var(--fs-lead)/1.7 var(--ui);
  color: var(--muted); margin: var(--s4) 0 0; max-width: 52ch;
}
.notfound-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s8) 0 var(--s9); }
.notfound-links {
  list-style: none; margin: 0 0 var(--s8); padding: var(--s6) 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  font: 400 var(--fs-body)/1.6 var(--ui); color: var(--muted-soft);
}
.notfound-links a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-ui); }
.notfound-links a:hover, .notfound-links a:focus-visible { border-bottom-color: var(--silver); }
.notfound-call {
  font: 600 var(--fs-small)/1 var(--ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-soft); margin: 0 0 var(--s5);
}
.notfound .contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 700px) {
  .notfound-actions { flex-direction: column; align-items: stretch; }
  .notfound-actions .btn { justify-content: center; }
}