/* DRAFT: phone hero, idea 2 (photo on top, curved sheet over it).
   Only loaded by draft.html. Desktop keeps the current hero. */

.hero-sheet { display: contents; }
.hero-copy .hero-person { order: 10; }
.hero-plumbing, .hero-mobile-photo { display: none; }

@media (max-width: 760px) {
  /* header is off screen at the top and slides in when scrolling back up */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 8px 0 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 6px 20px rgba(13,13,13,.12);
    transform: translateY(-110%);
    transition: transform .28s ease;
  }
  .site-header.is-shown { transform: none; }
  @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

  /* full-bleed photo from the very top */
  .hero { padding-top: 0; }
  .hero > .wrap { padding: 0; }
  .hero-panel { border-radius: 0; padding: 0 0 16px; gap: 0; background: var(--cream); }
  .hero-copy { align-items: stretch; }
  .hero-copy .hero-person { display: none; }
  .hero-mobile-photo { display: block; width: 100%; margin: 0; }
  .hero-mobile-photo img {
    width: 100%; height: 64svh; min-height: 400px; max-height: 560px;
    object-fit: cover; object-position: 50% 45%;
    border: 0; border-radius: 0; aspect-ratio: auto;
  }

  /* the sheet: curved top edge with the blue to orange line from the logo */
  .hero-sheet {
    display: block; position: relative; z-index: 2;
    margin-top: -64px;
    padding: 36px 20px 28px;
    text-align: center;
    border-top: 5px solid transparent;
    border-radius: 50% 50% 0 0 / 56px 56px 0 0;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(90deg, var(--blue), var(--orange) 60%, var(--red)) border-box;
  }
  .hero-sheet .rating { justify-content: center; }
  .hero h1 { margin-top: 12px; font-size: clamp(42px, 12.5vw, 56px); }
  .hero h1 span { display: inline; }
  .hero-lede { margin: 16px auto 0; font-size: 16px; }
  .hero-plumbing { display: block; margin-top: 8px; font-weight: 700; font-size: 16px; color: var(--ink); }
  .hero-actions { margin-top: 20px; align-items: center; }
  .scribble { margin-left: 0; }

  .hero-side { display: none; }
}

/* ---------- Areas map (all widths), modelled on Speedy Roofing ---------- */
.areas .section-head { margin-bottom: 32px; }
.areas-frame {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
  background: #fff; border: 1px solid #E7E4DF; border-radius: 16px; padding: 24px;
  box-shadow: 0 10px 30px rgba(13,13,13,.06);
}
.map-card { display: grid; place-items: center; background: #F7F6F4; border-radius: 12px; padding: 32px; }
.area-map { width: 100%; height: auto; display: block; }
.area { fill: #DADADA; stroke: #fff; stroke-width: 2; stroke-linejoin: round; cursor: pointer; transition: fill .15s; outline: none; }
.area.is-active { fill: var(--blue-deep); }
.area:focus-visible { stroke: var(--orange); stroke-width: 4; }
@media (hover: hover) and (pointer: fine) { .area:not(.is-active):hover { fill: #C5D9E8; } }

.area-card { background: #fff; border: 1px solid #E7E4DF; border-radius: 12px; padding: 36px; box-shadow: 0 4px 14px rgba(13,13,13,.05); }
.area-card-logo { width: 72px; height: 64px; object-fit: cover; border-radius: 10px; }
.area-name { margin-top: 20px; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.area-card h4 { margin: 20px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.area-towns { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.area-towns li { color: #B5461F; font-weight: 500; }
.area-towns li::marker { color: var(--ink-soft); }

.footer-credit { margin-top: 8px; font-size: 11px; color: #7A7A7A; }

@media (max-width: 900px) {
  .areas-frame { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .map-card { padding: 20px; }
  .area-card { padding: 24px; }
}

/* longer headline needs a little less size on desktop */
@media (min-width: 761px) { .hero h1 { font-size: clamp(48px, 5.4vw, 80px); } }

/* ================================================================
   DRAFT round 5: less blocky. No rounded panels or filled cards;
   square corners and thin straight lines to separate things.
   Buttons stay pill-shaped.
   ================================================================ */
:root { --r-lg: 0; --r-md: 0; --r-sm: 0; --rule: #E2DDD5; }

/* header: square, divided by lines */
.strip { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; }
.navbar { border-radius: 0; }
.logo-tile { border-radius: 0; }

/* hero: no cream block, just the page */
.hero-panel { background: transparent; border-radius: 0; border-bottom: 1px solid var(--rule); }
.hero-person img, .hero-photo img { border-radius: 0; }
.hero-person img { border: 0; }
.rope-badge { border-radius: 50%; }

/* service cards: no fill, a strong top line instead */
.card-grid { gap: 0 32px; row-gap: 56px; }
.svc-card { background: transparent; border-radius: 0; padding: 24px 0 0; border-top: 2px solid var(--ink); }
.svc-card h3 { border-bottom: 0; padding-bottom: 0; }
.svc-card img { border-radius: 0; }

/* offer: drop the soft circle */
.offer-circle { display: none; }

/* reviews: quotes sit on the blue, split by thin white lines */
.review-grid { gap: 0; row-gap: 40px; }
.review { background: transparent; color: #fff; border-radius: 0; padding: 0 28px; border-left: 1px solid rgba(255,255,255,.25); }
.review-grid .review:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.review blockquote { color: #E6EEF5; }
.who { color: #BFD3E3; }
.who strong { color: #fff; }
.tag { color: var(--gold); }
.btn-white { border-radius: 999px; }

/* areas: no frame, map and list split by one straight line */
.areas-frame { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.map-card { background: transparent; border-radius: 0; padding: 40px 40px 40px 0; border-right: 1px solid var(--rule); }
.area-card { border: 0; border-radius: 0; box-shadow: none; padding: 40px 0 40px 48px; }
.area-card-logo { border-radius: 0; }

/* contact: no cream block, the form gets straight edges */
.contact-inner { background: transparent; border-radius: 0; padding: 0 var(--gutter); }
.contact-form { background: transparent; border-radius: 0; padding: 0; }
.field input, .field textarea { border-radius: 0; background: #fff; }
.quote-card { border-radius: 0; }

@media (max-width: 1024px) {
  .review { padding: 0 20px; }
  .review-grid .review:nth-child(3n+1) { border-left: 1px solid rgba(255,255,255,.25); padding-left: 20px; }
  .review-grid .review:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .map-card { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .area-card { padding: 24px 0; }
}
@media (max-width: 760px) {
  .review, .review-grid .review:nth-child(n) { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.25); }
  .review-grid { row-gap: 24px; }
  .hero-sheet { border-radius: 50% 50% 0 0 / 56px 56px 0 0; }
  .hero-panel { background: #fff; border-bottom: 0; }
  .contact-inner { padding: 0 var(--gutter); }
  .navbar { border-radius: 0; }
}

/* ================================================================
   DRAFT round 6: desktop header matched to J's reference
   (white strip with rounded top, three icon items, phone and pill on
   the right, coloured nav bar, badge logo hanging over both edges,
   bordered quote button). Phone header is unchanged.
   ================================================================ */
@media (min-width: 761px) {
  .site-header { padding-top: 36px; }
  .header-card { filter: drop-shadow(0 8px 24px rgba(13,13,13,.10)); }

  .strip {
    background: #fff; border: 0; border-radius: 28px 28px 0 0;
    min-height: 84px; padding: 14px 32px 14px 228px;
  }
  .strip-items { gap: 40px; }
  .strip-items li { gap: 10px; font-size: 13px; color: #6B6B6B; }
  .strip-items svg { width: 30px; height: 30px; stroke: var(--blue-deep); stroke-width: 1.5; }
  .strip-items strong { color: var(--blue-deep); font-size: 15px; font-weight: 800; letter-spacing: .01em; }

  .phone-big { color: var(--blue-deep); font-size: 26px; font-weight: 800; gap: 10px; }
  .phone-big svg {
    width: 30px; height: 30px; padding: 5px; border-radius: 50%;
    border: 1.5px solid var(--flame); stroke: var(--flame); stroke-width: 2;
  }
  .pill-emergency {
    font-size: 13px; font-weight: 600; color: var(--flame);
    background: #FDEBDD; border: 1px solid #F3B48F; border-radius: 6px; padding: 3px 12px;
  }

  .navbar {
    background: var(--blue-deep); border-radius: 0;
    min-height: 68px; padding: 10px 24px 10px 228px; gap: 16px;
  }
  .nav-list { justify-content: flex-start; gap: 4px; }
  .nav-list > li > a, .drop-toggle { font-weight: 600; font-size: 14px; letter-spacing: .02em; }
  .nav-list a[aria-current="page"] { color: #fff; }
  .nav-cta {
    border-radius: 8px; border: 2px solid #fff; min-height: 48px; padding: 10px 22px;
    text-transform: uppercase; font-weight: 800; font-size: 15px; letter-spacing: .02em;
    background: var(--orange); color: var(--ink);
    box-shadow: 0 4px 0 rgba(13,13,13,.2);
  }

  /* badge logo overhanging the top of the strip and the bottom of the nav */
  .logo-tile {
    top: -22px; left: calc(var(--gutter) + 28px);
    width: 172px; height: 196px;
    border-radius: 22px; border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(13,13,13,.28);
  }
  .logo-tile img { object-fit: contain; }
  .hero { padding-top: 40px; }
}
@media (min-width: 761px) {
  .strip-items { gap: 28px; }
  .strip-items li, .strip-items strong, .pill-emergency, .phone-big { white-space: nowrap; }
  .strip-items strong { font-size: 14px; }
  .strip-items li { font-size: 12.5px; }
  .logo-tile { width: 164px; height: 200px; top: -20px; }
}
@media (min-width: 761px) and (max-width: 1240px) { .strip-items li:nth-child(2) { display: none; } }

/* ================================================================
   DRAFT round 7: logo without the black box. Transparent flame and
   drop mark, with the name set underneath in the logo's spaced capitals.
   ================================================================ */
.logo-tile {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
}
.logo-tile img { width: auto; height: 76px; object-fit: contain; transform: none; }
.brand-name { margin-top: 6px; font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--blue-deep); }
.brand-sub { margin-top: 5px; font-weight: 700; font-size: 9.5px; line-height: 1; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.area-card-logo { width: auto; height: 56px; object-fit: contain; }

@media (min-width: 761px) {
  .logo-tile { top: -22px; left: calc(var(--gutter) + 28px); width: auto; height: auto; }
  .strip { min-height: 116px; padding-left: 244px; }
  .navbar { padding-left: 28px; }
}
@media (max-width: 760px) {
  .logo-tile { top: 2px; width: auto; height: auto; }
  .logo-tile img { height: 64px; filter: drop-shadow(0 2px 4px rgba(13,13,13,.25)); }
  .brand-name, .brand-sub { display: none; }
}
@media (min-width: 761px) {
  .logo-tile { top: -14px; }
  .logo-tile img { height: 88px; }
  .brand-name { font-size: 24px; margin-top: 8px; }
  .brand-sub { font-size: 11px; margin-top: 6px; }
  .strip { min-height: 128px; padding-left: 268px; }
}
@media (min-width: 761px) {
  .strip { padding-left: 236px; padding-right: 24px; gap: 16px; }
  .strip-items { gap: 22px; }
}
@media (min-width: 761px) and (max-width: 1320px) { .strip-items li:nth-child(2) { display: none; } }
/* phone header keeps the pill J asked for */
@media (max-width: 760px) {
  .navbar { border-radius: 999px; }
  .navbar:has(.nav-list.is-open) { border-radius: 28px; }
}

/* ================================================================
   DRAFT round 8: real review-source icons; full-width desktop header.
   ================================================================ */
.src { width: 32px; height: 32px; border-radius: 0; background: none; display: grid; place-items: center; }
.src svg, .src img { width: 28px; height: 28px; display: block; }
.src img { border-radius: 6px; }
.reviews .src:has(svg path[fill="#0866FF"]) { background: #fff; border-radius: 50%; width: 32px; height: 32px; }
.reviews .src:has(svg path[fill="#0866FF"]) svg { width: 32px; height: 32px; }
.reviews .src:has(svg path[fill="#4285F4"]) { background: #fff; border-radius: 50%; width: 32px; height: 32px; }
.reviews .src:has(svg path[fill="#4285F4"]) svg { width: 18px; height: 18px; }

@media (min-width: 761px) {
  .site-header { padding-top: 0; }
  .header-card { max-width: none; padding: 0; filter: drop-shadow(0 6px 18px rgba(13,13,13,.10)); }
  .strip { border-radius: 0; min-height: 118px; padding: 12px 48px 12px 260px; }
  .logo-tile { top: 10px; left: 48px; }
  .navbar { border-radius: 0; padding: 8px 48px; min-height: 64px; }
  .nav-list { flex: 1; justify-content: space-between; gap: 8px; padding-right: 48px; }
  .nav-list > li > a, .drop-toggle { font-size: 15px; padding: 10px 6px; }
  .hero { padding-top: 32px; }
}
@media (min-width: 761px) {
  .logo-tile { top: 12px; }
  .logo-tile img { height: 66px; }
  .brand-name { font-size: 21px; margin-top: 7px; }
  .brand-sub { font-size: 10px; margin-top: 5px; }
  .strip { min-height: 134px; padding-left: 250px; }
}
/* spread the three trust items across the space between logo and phone */
@media (min-width: 761px) {
  .strip-items { flex: 1; justify-content: space-evenly; gap: 32px; padding: 0 24px; }
}

/* ================================================================
   DRAFT round 9: areas section rebuilt to Speedy Roofing's own sizes
   (measured from speedyroofing.co.uk: .map-wrapper, .map-left,
   .map-right, .council-card and #Districts path rules).
   ================================================================ */
.areas .section-head { margin-bottom: 0; }
.sp-map-wrapper {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start;
  max-width: 740px; margin: 32px auto;
}
.sp-map-left {
  flex: 1 1 0%; min-width: 320px; padding: 16px;
  background: #F9F9F9; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.sp-map-left .area-map { width: 100%; height: auto; max-height: 600px; display: block; }
.sp-map-left .area { fill: #D9D9D9; stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: fill .3s, stroke-width .3s; }
.sp-map-left .area.is-active { fill: var(--flame); stroke-width: 2; }
.sp-map-left .area:focus-visible { stroke: var(--ink); stroke-width: 3; }
@media (hover: hover) and (pointer: fine) { .sp-map-left .area:not(.is-active):hover { fill: var(--blue); stroke-width: 2; } }

.sp-map-right { flex: 1 1 0%; min-width: 320px; display: block; }
.sp-council-card {
  display: inline-block; max-width: 100%;
  padding: 48px; background: #fff;
  border: 1px solid #DDD; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transition: .3s;
}
.sp-card-logo { display: inline-flex; align-items: center; gap: 8px; height: 32px; }
.sp-card-logo img { height: 32px; width: auto; }
.sp-card-logo span { font-weight: 800; font-size: 20px; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-deep); }
.sp-council-card .area-name { margin: 24px 0 8px; font-size: 28.8px; font-weight: 500; line-height: 1.2; color: #333; letter-spacing: 0; }
.sp-council-card h4 { margin: 19px 0 8px; font-size: 22.4px; font-weight: 500; line-height: 1.2; color: #555; text-transform: none; letter-spacing: 0; }
.sp-council-card .area-towns { display: block; list-style: disc; padding-left: 24px; margin: 8px 0 0; }
.sp-council-card .area-towns li { margin-bottom: 4.8px; padding-left: 0; color: #B5461F; font-weight: 500; font-size: 16px; line-height: 1.6; }
.sp-council-card .area-towns li::before { content: none; }
.sp-council-card .area-towns li::marker { color: #555; }

@media (max-width: 768px) {
  .sp-map-wrapper { flex-direction: column; }
  .sp-map-left, .sp-map-right { min-width: 100%; }
  .sp-map-right { margin-top: 24px; }
}

/* round 9b: bigger map, card that keeps the same size whichever area is picked */
.sp-map-wrapper {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px; align-items: stretch; max-width: none; margin: 40px 0 0;
}
.sp-map-left { min-width: 0; padding: 32px; display: flex; align-items: center; justify-content: center; }
.sp-map-left .area-map { max-height: none; }
.sp-map-right { min-width: 0; display: flex; }
.sp-council-card { display: block; width: 100%; height: 100%; }
.sp-council-card .area-towns { columns: 2; column-gap: 32px; }
.sp-council-card .area-towns li { break-inside: avoid; }

@media (max-width: 900px) {
  .sp-map-wrapper { grid-template-columns: 1fr; gap: 24px; }
  .sp-map-left { padding: 16px; }
  .sp-map-right { margin-top: 0; }
  .sp-council-card { padding: 32px; min-height: 340px; }
}

/* ================================================================
   DRAFT round 10: contact section, option 3 (Talha shot) in Gastek
   colours. Details left, form right with job chips and a
   contact-preference choice. Straight lines, square inputs.
   ================================================================ */
.contact3 { padding: 112px 0; }
.c3-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.c3-info h2 { font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); }
.c3-lede { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 34ch; }
.c3-lines { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.c3-lines li { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.c3-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.c3-value { font-size: 17px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
a.c3-value { text-decoration: none; }
a.c3-value:hover { color: var(--blue-deep); }
.c3-phone { font-size: 32px; font-weight: 900; letter-spacing: -0.02em; color: var(--flame); }

.c3-form { border-top: 3px solid var(--ink); padding-top: 28px; }
.c3-set { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.c3-set legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s, color .15s;
}
.chip input:checked + span { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked) + span:hover { border-color: var(--blue-deep); } }
.opt { font-weight: 500; color: var(--muted); }
.c3-form .field-row { gap: 16px; }
.c3-form .field input, .c3-form .field textarea { background: #fff; border-radius: 0; }
.btn-ink { background: var(--ink); color: #fff; min-height: 56px; font-size: 17px; margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .btn-ink:hover { background: var(--blue-deep); } }

@media (max-width: 1024px) {
  .c3-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 760px) {
  .contact3 { padding: 72px 0 88px; }
  .c3-phone { font-size: 28px; }
  .c3-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .chip span { font-size: 14px; padding: 10px 14px; }
}
.c3-send { min-height: 56px; font-size: 17px; margin-top: 8px; }
@media (max-width: 1024px) { .c3-lines li:last-child { border-bottom: 0; } .c3-grid { gap: 32px; } }

/* round 10b: boxes for the contact section, matching the areas map
   (grey panel on the left like the map panel, white bordered card
   on the right like the town card) */
.c3-grid { gap: 32px; align-items: stretch; }
.c3-info {
  background: #F9F9F9; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.05);
  padding: 48px;
}
.c3-form {
  background: #fff; border: 1px solid #DDD; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1);
  padding: 48px; border-top: 1px solid #DDD;
}
.c3-lines li:last-child { border-bottom: 0; }
@media (max-width: 1024px) { .c3-grid { gap: 24px; } }
@media (max-width: 760px) {
  .c3-info, .c3-form { padding: 28px 20px; }
}

/* ================================================================
   DRAFT round 11: section background colours so scrolling moves
   through distinct bands.
   white hero > cream services > pale blue offer > black process >
   deep blue reviews > white areas > cream contact > black footer
   ================================================================ */
:root { --band-cream: #F4F0EA; --band-blue: #EAF2F8; }
.services { background: var(--band-cream); }
.offer { background: var(--band-blue); padding: 96px 0 168px; }
.offer .offer-copy mark { box-shadow: inset 0 -0.4em 0 #FBD9BF; }
.areas { background: #fff; padding-bottom: 112px; }
.contact3 { background: var(--band-cream); }
.c3-info { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.hero-panel { border-bottom: 0; }
@media (max-width: 760px) {
  .offer { padding: 72px 0 120px; }
  .areas { padding-bottom: 80px; }
}

/* ================================================================
   DRAFT round 12: footer redesign. Logo gradient line on top, a
   last call-to-action strip, four tidy columns, slim base bar.
   ================================================================ */
.ft { background: var(--ink); color: #C9C9C9; font-size: 15px; }
.ft-line { height: 4px; background: linear-gradient(90deg, var(--blue), var(--orange) 60%, var(--red)); }
.ft a { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ft a:not(.btn):hover { color: var(--orange); } }

.ft-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 56px; padding-bottom: 56px; border-bottom: 1px solid #262626; }
.ft-cta-title { font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.ft-cta-title span { color: var(--orange); }
.ft-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ft .ft-call { min-height: 56px; font-size: 18px; color: var(--ink); }
.ft-call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.ft .ft-ghost { min-height: 56px; border: 1.5px solid #4A4A4A; color: #fff; background: transparent; }
@media (hover: hover) and (pointer: fine) { .ft .ft-ghost:hover { border-color: var(--orange); } }

.ft-main { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.4fr; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
.ft-logo { display: inline-flex; align-items: center; gap: 12px; }
.ft-logo img { height: 56px; width: auto; }
.ft-logo-text { display: flex; flex-direction: column; }
.ft .brand-name { margin: 0; color: #fff; font-size: 22px; }
.ft .brand-sub { margin-top: 6px; color: var(--blue); font-size: 10px; }
.ft-tag { margin-top: 20px; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.ft-gas { margin-top: 6px; }
.ft-social { display: flex; gap: 10px; margin-top: 20px; }
.ft-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #1C1C1C; }
.ft-social svg { width: 22px; height: 22px; }
.ft-social img { width: 22px; height: 22px; border-radius: 4px; }

.ft-col h2 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ft-col li a { display: inline-block; padding: 6px 0; }
.ft-contact li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.ft-contact li a { padding: 0; overflow-wrap: anywhere; }
.ft-contact li span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; }

.ft-base { background: #070707; padding: 20px 0 24px; font-size: 13px; color: #9A9A9A; }
.ft-base-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ft-credit { margin-top: 8px; font-size: 11px; color: #6E6E6E; }

@media (max-width: 1024px) {
  .ft-cta { flex-direction: column; align-items: flex-start; }
  .ft-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ft-cta { padding-top: 40px; padding-bottom: 40px; }
  .ft-cta-actions, .ft-cta-actions .btn { width: 100%; }
  .ft-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 40px; padding-bottom: 40px; }
  .ft-brand, .ft-contact { grid-column: 1 / -1; }
  .ft-base { padding-bottom: 96px; }
}
@media (max-width: 760px) {
  .ft .brand-name, .ft .brand-sub { display: block; }
  body { padding-bottom: 0; }
}

/* ================================================================
   DRAFT round 13: slimmer phone header. No top row any more, just
   the rounded bar with Menu, the logo mark inside it, and the quote
   button. Bar floats with a small margin and a shadow.
   ================================================================ */
@media (max-width: 760px) {
  .site-header { padding: 8px 0; background: transparent; box-shadow: none; }
  .site-header .strip { display: none; }
  .navbar {
    position: relative; min-height: 56px; padding: 6px;
    box-shadow: 0 8px 24px rgba(13,13,13,.22);
  }
  .logo-tile { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
  .logo-tile img { height: 40px; filter: none; }
  .menu-toggle { min-height: 44px; padding: 8px 14px; }
  .nav-cta { min-height: 44px; padding: 8px 16px; }
  .navbar:has(.nav-list.is-open) .logo-tile { top: 28px; }
  .header-card { position: relative; }
}
/* towns list: real two-column grid so rows line up */
.sp-council-card .area-towns { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 0; align-content: start; }
@media (max-width: 900px) { .sp-council-card { min-height: 0; } }
/* round 13b: logo on the left of the bar, quote button and an icon-only menu on the right */
@media (max-width: 760px) {
  .logo-tile { left: 14px; transform: translateY(-50%); }
  .navbar { justify-content: flex-end; padding-left: 64px; }
  .nav-cta { order: 2; margin-left: auto; }
  .menu-toggle { order: 3; font-size: 0; gap: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .menu-toggle svg { width: 22px; height: 22px; }
  .nav-list { order: 4; }
}
@media (max-width: 760px) {
  .logo-tile { left: calc(var(--gutter) + 12px); }
  .navbar { padding-left: 6px; }
  .header-card:has(.nav-list.is-open) .logo-tile { top: 28px; }
}

/* ================================================================
   DRAFT round 14 (phones): square header bar flush to the top and
   visible on load; bottom call bar slides up only after the hero.
   ================================================================ */
@media (max-width: 760px) {
  .site-header { padding: 0; }
  .site-header .header-card { padding: 0; }
  .navbar, .navbar:has(.nav-list.is-open) { border-radius: 0; box-shadow: 0 4px 16px rgba(13,13,13,.25); padding: 6px 10px; }
  .logo-tile { left: 12px; }
  .header-card:has(.nav-list.is-open) .logo-tile { top: 28px; }
  .nav-list { padding-left: 6px; padding-right: 6px; }

  .call-bar { transform: translateY(110%); transition: transform .3s ease; }
  .call-bar.is-shown { transform: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .call-bar { transition: none; } }
/* round 14b: GASTEK wordmark next to the mark in the phone header */
@media (max-width: 760px) {
  .site-header .logo-tile { flex-direction: row; align-items: center; gap: 8px; }
  .site-header .logo-tile img { height: 36px; }
  .site-header .brand-name { display: block; margin: 0; color: #fff; font-size: 16px; letter-spacing: .2em; text-indent: 0; }
  .site-header .brand-sub { display: none; }
}
@media (max-width: 359px) { .site-header .brand-name { font-size: 14px; letter-spacing: .12em; } }
/* round 15: contact form choices as an even grid of equal buttons */
.c3-form .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c3-form .c3-set:nth-of-type(2) .chips { grid-template-columns: repeat(4, 1fr); }
.c3-form .chip { display: block; }
.c3-form .chip span { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; padding: 10px 8px; line-height: 1.2; }
@media (max-width: 1100px) { .c3-form .c3-set:nth-of-type(2) .chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .c3-form .chips { grid-template-columns: repeat(2, 1fr); }
  .c3-form .chip span { font-size: 14px; }
}