/* Loft Conversions Bromley
   CSS lives in a real .css file and is copied at build time, NOT embedded in a
   Python string. That sidesteps %-escaping and heredoc-quoting hazards
   (the landscapers-wexford practice).

   Palette measured, not eyeballed:
     --brand  #154234 on white ... 11.29:1
     --ink    #393A46 on white ... 11.24:1
     --accent #AE9D69 ............ 2.68:1 as text on white -> FILL ONLY
     --accent + --on-accent ...... 6.65:1  <- the only passing CTA pairing
*/

:root {
  --brand: #154234;
  --brand-dark: #0D2A21;
  --ink: #393A46;
  --accent: #AE9D69;
  --on-accent: #14181B;
  --muted: #F4F2ED;
  --border: #DDD8CC;
  --white: #fff;

  /* Single source for header height. The mobile nav offsets from this rather
     than a hardcoded px value, so growing the bar cannot leave a gap under it
     (the kitchen-fitters-croydon fix). */
  --headerH: 84px;

  --wrap: 1120px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 {
  color: var(--brand);
  line-height: 1.22;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: 2.15rem; }
h2 { font-size: 1.6rem; margin-top: 1.8em; }
h3 { font-size: 1.18rem; margin-top: 1.4em; }
p { margin: 0 0 1.1em; }

/* ---------- buttons ---------------------------------------------------- */
/* white-space:nowrap stops CTA labels wrapping to 2-3 lines in the ~900-1024px
   band and bloating the header (the limerick-roofers fix). */
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  font-size: 1rem;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: #9C8B59; border-color: #9C8B59; color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: var(--white); }

/* ---------- header ----------------------------------------------------- */
/* White bar: the logo is RGB with no alpha on an opaque white ground. Locked
   at Gate 3 before the logo arrived, and correct. */
.site-header {
  background: var(--header-bg, #fff);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header .wrap {
  height: var(--headerH);
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 204px; height: 68px; object-fit: contain; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav__links { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
.nav__links > li { position: relative; }
.nav__links > li > a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  font-size: .97rem;
  padding: 8px 0;
  display: inline-block;
}
.nav__links > li > a:hover { color: var(--accent-dark, #8E7E4F); }

/* The caret rule needs specificity 0-3-3 so `.nav__links>li>a` (0-1-2) cannot
   outrank it and draw over the last letters of the label. Both landscapers-wexford
   (7px overlap) and window-repairs-cork (-6px) lost exactly this fight.
   Verified by MEASURED geometry, target >= 8px clearance. */
.nav .nav__links li.has-sub > a.has-sub__link {
  padding-right: 20px;
  position: relative;
}
.nav .nav__links li.has-sub > a.has-sub__link::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.subnav {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  display: none;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { display: block; }
.subnav a {
  display: block;
  padding: 9px 18px;
  color: var(--brand);
  text-decoration: none;
  font-size: .95rem;
}
.subnav a:hover { background: var(--muted); }

/* CTA buttons sit OUTSIDE .nav__links so the 0-1-2 descendant rule cannot
   silently override them. landscapers-wexford shipped a header Call button at
   1.58:1 through exactly this. */
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__cta .btn { padding: 10px 16px; font-size: .92rem; min-width: 124px; text-align: center; }

.burger {
  display: none;
  background: none;
  border: 0;
  width: 46px; height: 46px;
  cursor: pointer;
  padding: 10px;
}
.burger span { display: block; height: 2px; background: var(--brand); margin: 5px 0; }

/* ---------- hero ------------------------------------------------------- */
/* No supplied photo is large enough for a full-bleed hero (largest usable
   1760px), so heroes render on the brand gradient. A one-dict IMAGES swap
   changes this if higher-resolution shots arrive. */
.hero {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 66px 0 60px;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 14px;
}
.hero__lead { font-size: 1.16rem; max-width: 62ch; color: rgba(255,255,255,.94); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; max-width: 460px; margin-top: 26px; }
.hero__cta .btn { flex: 1 1 0; text-align: center; }

/* ---------- sections --------------------------------------------------- */
.section { padding: 54px 0; }
.section--alt { background: var(--muted); }
.section__lead { font-size: 1.1rem; max-width: 68ch; }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card--link { text-decoration: none; display: block; color: inherit; }
.card--link:hover { border-color: var(--accent); }

.linklist { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 24px; }
.linklist li { margin: 0 0 9px; break-inside: avoid; }

/* tables scroll inside their own container; the page body never scrolls
   sideways */
.tablewrap { overflow-x: auto; margin: 0 0 1.4em; }
table { border-collapse: collapse; width: 100%; min-width: 460px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
th { background: var(--brand); color: #fff; font-weight: 700; }
tbody tr:nth-child(even) { background: var(--muted); }

.band img { width: 100%; height: 320px; object-fit: cover; }

.cta-band { background: var(--brand); color: #fff; padding: 50px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.94); max-width: 60ch; }
.cta-band .hero__cta { margin-top: 20px; }

.note {
  border-left: 4px solid var(--accent);
  background: var(--muted);
  padding: 14px 18px;
  margin: 0 0 1.4em;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- forms ------------------------------------------------------ */
.formcard {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  color: var(--ink);
}
.formcard h2 { margin-top: 0; }
.field { margin: 0 0 15px; }
.field label { display: block; font-weight: 600; margin: 0 0 6px; color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.field textarea { min-height: 110px; }
.field small { display: block; margin-top: 5px; color: #5C5F6B; }
.hp { position: absolute; left: -9999px; }

.hero--form .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }

/* ---------- footer ----------------------------------------------------- */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,.86); padding: 52px 0 26px; }
/* h2 not h3: an h3 here creates an h1->h3 skip on thin legal pages
   (the loft-conversions-ealing defect). */
.site-footer h2 { color: #fff; font-size: 1.02rem; margin: 0 0 14px; }
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 9px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-logo { width: 190px; height: auto; margin-bottom: 14px; }
.disclosure {
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 34px;
  padding-top: 20px;
  font-size: .92rem;
  max-width: 88ch;
}
.legal-row {
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 20px;
  padding-top: 18px;
  font-size: .88rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* ---------- responsive -------------------------------------------------- */
/* Mobile nav breaks at 1024px, NOT 900. The cramped tablet band is exactly
   where CTA labels wrapped and bloated the header on limerick-roofers. */
@media (max-width: 1024px) {
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed;
    inset: var(--headerH) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 20px;
    max-height: calc(100vh - var(--headerH));
    overflow-y: auto;
    display: none;
    margin-left: 0;
  }
  .nav.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links > li > a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .subnav { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 8px 14px; min-width: 0; }
  .nav .nav__links li.has-sub > a.has-sub__link::after { display: none; }
  .nav__cta { padding-top: 14px; gap: 10px; }
  .nav__cta .btn { flex: 1 1 0; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero--form .wrap { grid-template-columns: 1fr; }
  .linklist { columns: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --headerH: 72px; }
  .logo img { width: 174px; height: 58px; }
  h1 { font-size: 1.72rem; }
  h2 { font-size: 1.34rem; }
  .hero { padding: 46px 0 42px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .linklist { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__cta { max-width: none; }
  .hero__cta .btn { flex: 1 1 100%; }
  .band img { height: 220px; }
}