/* ══════════════════════════════════════════════════════════════
   Bromley Plumbing & Heating — concept site.

   Deliberately dense: white ground, navy identity, red for actions
   only, pale grey for panels. Rectangular throughout (2px radius on
   controls, nothing else), visible borders, compact bands. This is
   the opposite end of the portfolio from Fieldwork's paper-and-air
   editorial layout, on purpose.

   Contrast, measured on white: navy 13.6, body grey 7.4, red 5.9.
   White on navy 13.6, white on red 5.9. All clear AA.
   ══════════════════════════════════════════════════════════════ */

:root {
  --navy:      #0E2A47;
  --navy-2:    #17395C;
  --navy-deep: #091D33;
  --red:       #C4181C;
  --red-dark:  #A01216;
  --ink:       #16202B;
  --body:      #4A5764;
  --line:      #D4DAE2;
  --line-2:    #B9C2CE;
  --grey:      #F2F4F7;
  --grey-2:    #E8ECF1;
  --white:     #FFFFFF;

  --wrap: 1280px;
  --pad: clamp(16px, 2.6vw, 34px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; line-height: 1.15; color: var(--navy); }
h1 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }
h2 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--navy); color: #fff; padding: 10px 14px; }

/* ── concept strip ─────────────────────────────────────────── */
.concept { background: var(--navy-deep); color: #C7D4E2; font-size: 12.5px; }
.concept .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.concept a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.concept a:hover { text-decoration: underline; }
.concept .tag { border: 1px solid #40597A; padding: 2px 8px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }

/* ── business header ───────────────────────────────────────── */
.biz { border-bottom: 1px solid var(--line); }
.biz .wrap { display: flex; align-items: center; gap: 22px; padding-block: 12px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logo .mark { flex: none; }
.logo .name { display: block; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.32rem; letter-spacing: .01em; color: var(--navy); line-height: 1; }
.logo .sub { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); margin-top: 3px; }

.facts { display: flex; gap: 26px; font-size: 13px; color: var(--body); }
.facts div { line-height: 1.35; }
.facts b { display: block; color: var(--navy); font-size: 13.5px; font-weight: 600; }
.facts .demo { color: var(--body); font-size: 11.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  padding: 11px 18px; border: 1px solid var(--red); border-radius: 2px;
  background: var(--red); color: #fff;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-navy { background: var(--navy); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--grey); border-color: var(--navy); }
.btn-sm { padding: 8px 13px; font-size: 14px; }
.btn-block { width: 100%; }

/* ── navigation ────────────────────────────────────────────── */
.nav { background: var(--navy); }
.nav .wrap { display: flex; align-items: stretch; gap: 0; }
.nav a {
  color: #fff; text-decoration: none; font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600; font-size: 15.5px; letter-spacing: .02em;
  padding: 13px 17px; display: inline-flex; align-items: center; border-right: 1px solid rgba(255,255,255,.13);
}
.nav a:first-child { border-left: 1px solid rgba(255,255,255,.13); }
.nav a:hover { background: var(--navy-2); }
.nav a[aria-current="page"] { background: var(--red); }
.nav .navtoggle { display: none; }

@media (max-width: 900px) {
  .nav .wrap { display: block; padding: 0; }
  .nav a { display: none; width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.15); padding: 14px var(--pad); }
  .nav.open a { display: flex; }
  .nav .navtoggle {
    display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0;
    color: #fff; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 16px;
    padding: 13px var(--pad); cursor: pointer;
  }
  .nav .navtoggle i { display: block; width: 18px; height: 2px; background: #fff; box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff; }
}

/* ── first screen ──────────────────────────────────────────── */
.lede { border-bottom: 1px solid var(--line); }
.lede .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; padding-block: 20px; align-items: stretch; }

.shot { position: relative; display: block; min-height: 348px; border: 1px solid var(--line); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.shot .plate {
  position: absolute; left: 0; bottom: 0; max-width: 64%;
  background: rgba(255,255,255,.95); border-top: 3px solid var(--red);
  padding: 16px 20px 14px;
}
.shot .plate h1 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); }
.shot .plate p { margin-top: 5px; color: var(--body); font-size: 14.5px; max-width: 46ch; }
.shot .links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; }
.shot .links a { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 1px; }
.shot .links a:hover { color: var(--red); }

.enq { border: 2px solid var(--navy); display: flex; flex-direction: column; }
.enq h2 { background: var(--navy); color: #fff; font-size: 1.02rem; padding: 9px 15px; }
.enq .inner { padding: 12px 15px 13px; display: grid; gap: 9px; }
.enq label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.enq .note { font-size: 12px; color: var(--body); line-height: 1.4; }
.enq .hours { margin-top: auto; border-top: 1px solid var(--line); padding: 9px 15px; background: var(--grey); font-size: 12.5px; color: var(--body); }
.enq .hours b { color: var(--navy); }

select, input, textarea {
  font: inherit; font-size: 15px; width: 100%; padding: 9px 10px;
  border: 1px solid var(--line-2); border-radius: 2px; background: #fff; color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
select:focus-visible, input:focus-visible, textarea:focus-visible { border-color: var(--red); }

/* ── quick strip ───────────────────────────────────────────── */
.quick { background: var(--grey); border-bottom: 1px solid var(--line); }
.quick .wrap { display: flex; flex-wrap: wrap; gap: 0; }
.quick a {
  flex: 1 1 0; min-width: 190px; text-decoration: none; color: var(--navy);
  padding: 11px 16px; border-right: 1px solid var(--line); font-size: 14.5px; font-weight: 600;
  display: flex; align-items: center; gap: 9px;
}
.quick a:last-child { border-right: 0; }
.quick a:hover { background: #fff; }
.quick span { color: var(--red); font-weight: 700; }

/* ── page body ─────────────────────────────────────────────── */
.band { padding-block: 34px; border-bottom: 1px solid var(--line); }
.band-grey { background: var(--grey); }
.band h2 + .sub { margin-top: 6px; color: var(--body); max-width: 68ch; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 34px; align-items: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; gap: 26px; } }

/* service rows: photo + text + scope list, alternating */
.srow { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; padding: 20px 0; border-top: 1px solid var(--line); align-items: start; }
.srow:first-of-type { border-top: 0; padding-top: 6px; }
.srow img { width: 100%; height: 190px; object-fit: cover; border: 1px solid var(--line); }
.srow h3 a { text-decoration: none; }
.srow h3 a:hover { color: var(--red); }
.srow p { margin-top: 6px; color: var(--body); font-size: 15.3px; }
.srow ul { margin-top: 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; }
.srow li { list-style: none; font-size: 14.3px; color: var(--body); padding-left: 15px; position: relative; }
.srow li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; background: var(--red); }
.srow .more { margin-top: 10px; display: inline-block; font-weight: 600; font-size: 14.5px; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--red); }
@media (max-width: 720px) { .srow { grid-template-columns: 1fr; } .srow ul { grid-template-columns: 1fr; } .srow img { height: 200px; } }

/* sidebar panels */
.panel { border: 1px solid var(--line); margin-bottom: 18px; }
.panel h3 { background: var(--grey); border-bottom: 1px solid var(--line); padding: 10px 14px; font-size: 1rem; }
.panel .body { padding: 13px 14px; font-size: 14.3px; color: var(--body); }
.panel .body p + p { margin-top: 8px; }
.panel.red { border-color: var(--red); }
.panel.red h3 { background: var(--red); color: #fff; border-bottom-color: var(--red); }
.arealist { columns: 2; column-gap: 16px; font-size: 14.2px; }
.arealist li { list-style: none; padding: 3px 0; break-inside: avoid; color: var(--body); }
.hourrow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dotted var(--line-2); font-size: 14.2px; }
.hourrow:last-child { border-bottom: 0; }
.hourrow b { color: var(--navy); font-weight: 600; }

/* gallery */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.gal figure { margin: 0; border: 1px solid var(--line); }
.gal img { width: 100%; height: 168px; object-fit: cover; }
.gal figcaption { padding: 9px 11px; font-size: 13.4px; color: var(--body); border-top: 1px solid var(--line); }
.gal figcaption b { display: block; color: var(--navy); font-size: 14.2px; font-weight: 600; margin-bottom: 2px; }
.gal .wide { grid-column: span 2; }
.gal .wide img { height: 230px; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gal .wide { grid-column: span 2; } }
@media (max-width: 560px) { .gal { grid-template-columns: 1fr; } .gal .wide { grid-column: span 1; } }

/* quote checklist */
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.checks > div { padding: 15px 17px; border-right: 1px solid var(--line); }
.checks > div:last-child { border-right: 0; }
.checks h4 { color: var(--navy); }
.checks p { margin-top: 5px; font-size: 14.3px; color: var(--body); }
@media (max-width: 760px) { .checks { grid-template-columns: 1fr; } .checks > div { border-right: 0; border-bottom: 1px solid var(--line); } .checks > div:last-child { border-bottom: 0; } }

/* faq */
.faq { border-top: 1px solid var(--line); margin-top: 14px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 12px 0; font-weight: 600; color: var(--navy); cursor: pointer; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 0 13px; color: var(--body); font-size: 15px; max-width: 76ch; }

/* forms */
.formgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.field .hint { font-size: 12.5px; color: var(--body); margin-top: 4px; }
.err { color: var(--red-dark); font-size: 13px; font-weight: 600; margin-top: 4px; }
[aria-invalid="true"] { border-color: var(--red); }
.demo-box { border: 1px solid var(--line-2); background: var(--grey); padding: 12px 14px; font-size: 13.6px; color: var(--body); }
.demo-box b { color: var(--navy); }
.sent { border: 2px solid var(--navy); padding: 18px 20px; }
.sent h3 { font-size: 1.2rem; }
.sent p { margin-top: 8px; color: var(--body); }
.sent dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.3px; }
.sent dt { color: var(--body); }
.sent dd { margin: 0; color: var(--ink); font-weight: 600; }

/* footer */
.foot { background: var(--navy); color: #C9D6E4; font-size: 14.2px; }
.foot .wrap { padding-block: 30px 22px; }
.foot .fcols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 26px; }
@media (max-width: 860px) { .foot .fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot .fcols { grid-template-columns: 1fr; } }
.foot h4 { color: #fff; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 9px; }
.foot a { color: #C9D6E4; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot li { list-style: none; padding: 3px 0; }
.foot .small { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.17); font-size: 12.6px; color: #9FB2C6; }
.foot .small a { color: #fff; text-decoration: underline; }

/* page header for inner pages */
.phead { background: var(--grey); border-bottom: 1px solid var(--line); padding-block: 22px; }
.crumb { font-size: 13px; color: var(--body); margin-bottom: 6px; }
.crumb a { color: var(--body); }
.phead p { margin-top: 7px; color: var(--body); max-width: 74ch; }

.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 800px) { .twocol { grid-template-columns: 1fr; } }
.scope { border: 1px solid var(--line); }
.scope h3 { background: var(--grey); padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.scope ul { padding: 12px 14px; display: grid; gap: 6px; }
.scope li { list-style: none; padding-left: 16px; position: relative; font-size: 14.6px; color: var(--body); }
.scope li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--red); }

/* ── phones and small tablets ────────────────────────────────
   The desktop layout is deliberately dense. None of that density
   survives a 390px screen, so the bands reflow into a single reading
   order: who they are, what they do, then the enquiry panel. */
@media (max-width: 900px) {
  .biz .wrap { flex-wrap: wrap; gap: 12px 18px; padding-block: 12px 14px; }
  .logo { margin-right: 0; flex: 1 1 100%; }
  .facts { flex: 1 1 100%; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; }
  .facts div { flex: 1 1 160px; }
  .biz .btn { flex: 1 1 100%; }

  .lede .wrap { grid-template-columns: 1fr; gap: 16px; padding-block: 16px; }
  .shot { min-height: 0; }
  .shot img { position: static; height: 210px; }
  .shot .plate { position: static; max-width: none; border-top-width: 3px; padding: 14px 16px 16px; }
  .shot .plate h1 { font-size: 1.42rem; }
  .shot .links { gap: 10px 16px; }
  .shot .links a { padding: 4px 0; }

  .quick .wrap { display: grid; grid-template-columns: 1fr 1fr; }
  .quick a { min-width: 0; border-bottom: 1px solid var(--line); font-size: 14px; padding: 12px 14px; }
  .quick a:nth-child(even) { border-right: 0; }

  .band { padding-block: 26px; }
  .srow img { height: 180px; }
  .gal img { height: 180px; }
}

@media (max-width: 560px) {
  .facts div { flex: 1 1 100%; }
  .quick .wrap { grid-template-columns: 1fr; }
  .quick a { border-right: 0; }
  .srow ul { grid-template-columns: 1fr; }
  .arealist { columns: 2; }
}

/* The first service is the one people ring about, so it gets the wider
   treatment and a bigger photograph. The rest stay in the scan-friendly
   ladder below it. */
.srow.lead { grid-template-columns: 420px minmax(0, 1fr); gap: 26px; padding-bottom: 24px; }
.srow.lead img { height: 250px; }
.srow.lead h3 { font-size: 1.32rem; }
.srow.lead p { font-size: 16.2px; }
@media (max-width: 900px) { .srow.lead { grid-template-columns: 1fr; } .srow.lead img { height: 200px; } }

/* Heading levels follow the document outline; these classes keep the size the
   old levels had, so correcting the outline changed nothing visually. */
.scope .as-h3 { background: var(--grey); padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.as-h3 { font-size: 1.12rem; font-weight: 700; }
.foot .as-h4 { color: #fff; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 9px; font-weight: 700; }
.checks h3 { color: var(--navy); font-size: 1rem; }

/* For headings the outline needs and the layout does not show. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }