@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-400.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-500.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-600.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-700.woff2") format("woff2");}

/* DCS Electrical Services — site styles */
:root {
  /* Brand reds sampled straight from the logo: #CC002B is the right half of
     the badge (the one that reads as "the" DCS red), #AD0022 the left half.
     The bolt orange #FF8B00 is also lifted from the logo. No other reds. */
  --red: #CC002B;
  --red-deep: #AD0022;
  --red-dark: #AD0022;
  --bolt: #FF8B00;
  --ink: #1C1D1F;
  --ink-2: #4A4D51;
  --muted: #6C7075;
  --line: #E4E5E7;
  --wash: #F5F5F6;
  --white: #FFFFFF;
  /* Theme tokens. Light values are the original palette; dark overrides below.
     --band is the always-dark strip colour (top bar, CTA, footer, section bands). */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: var(--ink);
  --text-2: var(--ink-2);
  --band: var(--ink);
  --red-text: var(--red);
  --field-line: #CDCFD2;
  --callbar-bg: rgba(255,255,255,.97);
  --ok: #12703C;
  --info: #8A5200;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1140px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}
/* Dark theme: whites and blacks swap; brand reds, logo and photos stay put.
   Small red text gets a lighter tint so it stays readable on near-black. */
html[data-theme="dark"] {
  --bg: #121314;
  --surface: #1B1C1E;
  --wash: #18191B;
  --line: #2E3033;
  --text: #F2F2F3;
  --text-2: #C9CBCE;
  --muted: #9A9EA3;
  --band: #08090A;
  --red-text: #FF5C75;
  --field-line: #3C3F43;
  --callbar-bg: rgba(18,19,20,.97);
  --ok: #4CC38A;
  --info: #F0A43A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The masthead is position:sticky, so an in-page jump (services.html#residential)
   would otherwise land the heading underneath it. Hold the target clear of it. */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 104px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--bolt); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.todo { border-bottom: 1px dashed currentColor; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 16px/1 var(--sans); text-decoration: none; padding: 15px 22px; border-radius: 4px;
  border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); }
.btn--white { background: #fff; color: var(--red); }
.btn--white:hover { background: #F3E4E7; }
.btn--ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { border-color: var(--text); color: var(--text); }
.btn--outline:hover { background: var(--text); color: var(--bg); }
.btn--sm { padding: 11px 16px; font-size: 15px; }

/* Theme toggle (same pattern as the Kelt Systems site) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s; }
.theme-toggle:hover { border-color: var(--red-text); color: var(--red-text); }
.theme-toggle svg { width: 19px; height: 19px; display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun,
html:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }

/* Header */
.topbar { background: var(--band); color: #fff; font-size: 13.5px; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-block: 8px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--bolt); }
.masthead { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.masthead .wrap { display: flex; align-items: center; gap: 18px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { height: 92px; width: auto; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 16px; color: var(--text-2); padding-block: 4px; }
.nav a:hover { color: var(--red-text); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--red); }

/* Hero */
.hero { background: var(--red); color: #fff; text-align: center; padding-block: clamp(40px, 6vw, 62px); }

/* Photo hero. The image sits behind a dark scrim so the white type keeps its
   contrast wherever the picture happens to be bright. */
.hero--photo { position: relative; padding: 0; display: grid; place-items: center;
  min-height: clamp(420px, 48vw, 620px); overflow: hidden; background: var(--ink); }
.hero--photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 10%; }
/* 10% keeps the row of downlights along the top of the wall in frame. At
   desktop width the hero box is ~2.6:1 against a 16:9 photo, so anything
   lower crops them off and leaves just the pendant. */
.hero--photo::after { content: ""; position: absolute; inset: 0;
  /* Nearly clear across the top so the downlights actually read, then it
     ramps up behind the headline. The old flat .36 at the top was dimming
     the one part of the photo worth seeing. */
  background: linear-gradient(180deg,
    rgba(18,12,7,.06) 0%, rgba(18,12,7,.10) 22%, rgba(18,12,7,.44) 46%,
    rgba(18,12,7,.66) 74%, rgba(18,12,7,.80) 100%); }
.hero--photo .wrap { position: relative; z-index: 2; padding-block: clamp(44px, 6vw, 62px); }
.hero--photo h1 { text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 2px 26px rgba(0,0,0,.45); }
/* The hero logo IS the h1 (the name is kept beside it for screen readers and
   search). The chain in the photo was cropped to dead centre so the badge apex
   lines up with it — keep this centred, don't offset it. */
.hero h1.hero-logo { margin: 0 auto 20px; max-width: 500px; }
.hero-logo img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.hero--photo .tagline { text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.hero--photo p { color: #EDE7E2; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hero h1 { font-size: clamp(34px, 6.4vw, 58px); letter-spacing: -.5px; margin-bottom: 10px; max-width: 18ch; margin-inline: auto; }
.hero p { color: #FBE7EA; font-size: clamp(16.5px, 1.6vw, 18.5px); max-width: 40em; margin-inline: auto; }
.hero .tagline { color: #fff; font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); margin-bottom: 8px; }
.hero .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pagehead { background: var(--red-deep); color: #fff; padding-block: clamp(30px, 4.5vw, 46px); }
.pagehead h1 { font-size: clamp(27px, 4.4vw, 38px); }
.pagehead p { color: #FBE7EA; margin-top: 10px; max-width: 46em; }

/* Trust strip */
.strip { background: var(--wash); border-bottom: 1px solid var(--line); }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; }
.strip li { padding: 14px 10px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }

/* Sections */
.section { padding-block: clamp(40px, 6vw, 68px); }
.section--wash { background: var(--wash); }
.section-head { text-align: center; max-width: 42em; margin: 0 auto clamp(26px, 4vw, 40px); }
.section-head h2 { font-size: clamp(24px, 3.4vw, 32px); }
.section-head p { color: var(--muted); margin-top: 8px; }
.lead { font-size: 18px; color: var(--text-2); }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Two-card row (the licensing pair on About). Without this they sit in the
   first two columns of a 3-up grid and leave a hole on the right. */
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 22px; background: var(--surface); display: flex; flex-direction: column; }
.card .ic { width: 42px; height: 42px; border-radius: 6px; background: var(--red); display: grid; place-items: center; margin-bottom: 14px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15.5px; color: var(--text-2); }
.card li { padding-left: 18px; position: relative; padding-block: 3px; }
.card li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 2px; background: var(--red); }
.card .more { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--red-text); text-decoration: none; font-size: 15.5px; }
.card .more:hover { text-decoration: underline; }

/* Split band */
.band { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 44px); align-items: center; }
.band h2 { font-size: clamp(23px, 3vw, 30px); margin-bottom: 12px; }
.band p { color: var(--text-2); }
.band p + p { margin-top: 10px; }
/* When the left column carries a photo it gets much taller than the box beside
   it, so stop centring the pair and hang both from the top. */
.band + .wide-photo { margin-top: clamp(24px, 3vw, 36px); }
/* ---- Job photos. Every one of these is optional; the build omits the
   markup entirely when the file is not there, so no empty boxes. ---- */
.card-photo { display: block; width: calc(100% + 2px); margin: -1px -1px 16px; aspect-ratio: 760 / 420;
  object-fit: cover; border-radius: 6px 6px 0 0; background: var(--wash); }
.card { overflow: hidden; }

/* height:auto matters — without it the img's height="520" attribute pins the box
   and the photo squashes to a square in any container narrower than 1100px. */
.wide-photo { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 520;
  object-fit: cover; border-radius: 6px; background: var(--wash); }

/* Full-bleed heading band for each Services section. With a job photo it gets
   the same treatment as the home hero: image, dark scrim, white heading.
   Without one it stays a flat dark band, so the three sections still match. */
.secband { position: relative; background: var(--band); color: #fff; overflow: hidden;
  display: grid; align-items: end; min-height: clamp(132px, 17vw, 210px); }
.secband .wrap { position: relative; z-index: 2; padding-block: clamp(20px, 2.6vw, 30px); }
.secband h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); }
.secband--photo .secband-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim is weighted to the left, where the heading sits, so the right-hand
   side of the photo stays bright enough to actually read as the work. */
.secband--photo::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(14,9,5,.74) 0%, rgba(14,9,5,.52) 34%, rgba(14,9,5,.14) 66%, rgba(14,9,5,.06) 100%),
    linear-gradient(180deg, rgba(14,9,5,.10) 0%, rgba(14,9,5,.26) 100%); }
.secband--photo h2 { text-shadow: 0 2px 18px rgba(0,0,0,.5); }


/* ---- Job gallery ---- */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.work-tile { display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 5px; overflow: hidden; position: relative; }
/* height:auto is load-bearing: without it the img's height="675" attribute pins
   the box and each tile renders as a tall sliver of the photo. Same trap as
   .wide-photo — any image sized by width + aspect-ratio needs it. */
.work-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--line); transition: transform .35s ease; }
.work-tile:hover img, .work-tile:focus-visible img { transform: scale(1.035); }
@media (max-width: 760px) { .work { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Collapsible gallery. app.js adds .is-collapsed so only the first row shows until
   "Show all photos" is pressed; without JS nothing is hidden. --work-peek tells app.js
   how many tiles show when collapsed, so keep it in step with the nth-child numbers. */
.work { --work-peek: 3; }
.work.is-collapsed > .work-tile:nth-child(n+4) { display: none; }
@media (max-width: 760px) {
  .work { --work-peek: 4; }
  .work.is-collapsed > .work-tile:nth-child(n+4) { display: block; }
  .work.is-collapsed > .work-tile:nth-child(n+5) { display: none; }
}
.work-more { text-align: center; margin-top: clamp(20px, 3vw, 28px); }
.work-toggle { min-width: 14em; background: transparent; }  /* <button> would otherwise get the UA grey */
.work-toggle::after { content: ""; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.work-toggle[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }

/* Tap/click to enlarge. No library — one dialog reused for every tile. */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(10,7,4,.9); }
.lightbox-inner { display: grid; place-items: center; width: 100%; height: 100%; padding: 4vmin; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.lightbox figcaption { color: #E8E4E0; font-size: 15px; text-align: center; margin-top: 14px;
  max-width: 44em; }
.lightbox-close { position: fixed; top: 14px; right: 16px; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.26); }

.promise { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 4px; padding: 20px 22px; }
.promise h3 { font-size: 17px; margin-bottom: 12px; }
.promise ul { list-style: none; margin: 0; padding: 0; }
.promise li { position: relative; padding: 7px 0 7px 26px; font-size: 15.5px; color: var(--text-2); }
.promise li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 11px; height: 6px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }

/* Service detail blocks */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 44px); align-items: start; padding-block: clamp(28px, 4vw, 44px); }
.detail h2 { font-size: clamp(22px, 2.8vw, 28px); margin-bottom: 10px; }
.detail p { color: var(--text-2); }
.detail ul { list-style: none; margin: 0; padding: 0; }
.detail li { padding: 10px 0 10px 24px; border-bottom: 1px solid var(--line); position: relative; font-size: 16px; }
.detail li:first-child { border-top: 1px solid var(--line); }
.detail li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 2px; background: var(--red); }

/* Areas */
.areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.areas li { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: 15px; font-weight: 500; }
.areas li.home { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.facts div { border-top: 3px solid var(--red); padding-top: 14px; }
.facts b { display: block; font-size: 22px; }
.facts span { font-size: 14.5px; color: var(--muted); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.steps h3 { font-size: 17.5px; margin-bottom: 5px; }
.steps p { color: var(--muted); font-size: 15.5px; }

/* FAQ */
.faq { max-width: 46em; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding-block: 18px; font-weight: 600; font-size: 17.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 22px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 18px; color: var(--text-2); }

/* CTA band */
.cta { background: var(--band); color: #fff; text-align: center; padding-block: clamp(34px, 5vw, 52px); }
.cta h2 { font-size: clamp(23px, 3.2vw, 30px); margin-bottom: 10px; }
.cta p { color: #C4C7CA; max-width: 40em; margin-inline: auto; }
.cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 4vw, 48px); align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding-block: 14px; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list b { display: block; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.contact-list a { color: var(--red-text); font-weight: 600; text-decoration: none; font-size: 19px; }
.contact-list a:hover { text-decoration: underline; }
.contact-list .sms-link { display: inline-block; margin-left: 14px; font-size: 16px; }

/* Form */
.form { background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: clamp(18px, 3vw, 28px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 15px; }
.field .req { color: var(--red); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--text); background: var(--surface);
  border: 1px solid var(--field-line); border-radius: 4px; padding: 12px 13px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,0,43,.15); }
.field .hint { font-size: 13.5px; color: var(--muted); }
.field input[type="file"] { padding: 9px; font-size: 14.5px; color: var(--muted); }
.field input[type="file"]::file-selector-button { font: 600 14px/1 var(--sans); background: var(--surface); color: var(--text); border: 1px solid var(--field-line); border-radius: 3px; padding: 9px 13px; margin-right: 12px; cursor: pointer; }
.more { grid-column: 1 / -1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-block: 15px; font-weight: 600; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; margin-left: auto; color: var(--red); font-size: 20px; line-height: 1; }
.more[open] > summary::after { content: "\2212"; }
.more > summary span { font-weight: 400; font-size: 14.5px; color: var(--muted); }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding-bottom: 20px; }
.scope { border: 0; margin: 0; padding: 0; min-width: 0; grid-column: 1 / -1; }
.scope legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 10px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.35; cursor: pointer; font-weight: 400; }
.checks input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--red); flex: none; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-status { font-size: 15px; color: var(--muted); }
.form-status[data-state="ok"] { color: var(--ok); font-weight: 600; }
.form-status[data-state="err"] { color: var(--red-text); font-weight: 600; }
.form-status[data-state="info"] { color: var(--info); font-weight: 600; }
.hp { position: absolute; left: -9999px; }

/* Footer */
.site-footer { background: var(--band); color: #B7B9BC; font-size: 15px; padding-block: 34px 26px; }
.site-footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 26px; }
.site-footer img { height: 132px; width: auto; margin-bottom: 14px; }
.site-footer h2 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: #B7B9BC; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .legal { border-top: 1px solid #34363A; margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 13.5px; }

/* Mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  grid-template-columns: 1fr 1fr 1.45fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--callbar-bg); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
}
.callbar .btn { padding: 14px 8px; font-size: 15.5px; }

@media (max-width: 960px) {
  .cards, .facts, .steps { grid-template-columns: repeat(2, 1fr); }
  .band, .detail, .contact-grid { grid-template-columns: 1fr; }
  /* Stacked on a phone the info column would land above the form. Pull the
     form up — tapping to call is always available from the fixed call bar. */
  .contact-grid > form { order: -1; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 128px); }
  body { padding-bottom: 76px; }
  .callbar { display: grid; }
  .topbar { display: none; }
  .masthead .wrap { padding-block: 10px; gap: 10px 14px; }
  .brand img { height: 68px; }
  .hero h1.hero-logo { max-width: 300px; }
  .site-footer img { height: 104px; }
  .nav { width: 100%; justify-content: space-between; gap: 10px; order: 3; }
  .nav a { font-size: 15px; }
  .masthead .btn { display: none; }
  /* A 2x2 grid of these reads as a lumpy block on a phone. Run them as one
     centred line with middots so they flow like a sentence instead. */
  .strip ul { display: flex; flex-wrap: wrap; justify-content: center;
    align-items: baseline; column-gap: 0; row-gap: 0; padding-inline: 4px; }
  .strip li { padding: 3px 0; font-size: 13.5px; }
  /* separator trails its item, so a wrap never starts a line with a stray dot */
  .strip li:not(:last-child)::after { content: "·"; color: var(--muted); opacity: .55;
    padding: 0 9px; display: inline; }
  .cards, .facts, .steps, .form, .more-grid, .checks { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }