/* The area pages' own stylesheet -- /air-conditioning-ossett/ and its thirteen
   siblings, plus the /areas/ index that lists them.
 *
 * Third of three, and the smallest. assets/chrome.css brings the tokens, the base
 * type and the header; assets/theme.css brings the seasonal treatment, the
 * time-of-day palette and the hero badge the sun crosses; this file is only what is
 * left -- the breadcrumb trail, the facts-and-prose layout and the area grid, none of
 * which the homepage has.
 *
 * These pages used to carry their own copy of the first two, which is exactly why
 * they were reported as not matching: a header whose burger appeared at a different
 * width, and no seasonal or time-of-day treatment at all, because a reimplementation
 * of eight hundred lines of solar astronomy was never going to happen. They share the
 * real thing now.
 *
 * Load order matters and is fixed: chrome, theme, then this. */

/* ---------- BREADCRUMB ---------- */
/* Printed as well as marked up in JSON-LD: the trail is how somebody who landed
   here from a search for one village finds out there is a whole patch behind it.
 *
 * padding-top, not padding. The trail's element is class="wrap crumbs", and .wrap is
 * what holds every row on the page 28px in from the edge; a `padding` shorthand here
 * set that to zero, so this one row -- and only this one -- started hard against the
 * side of the screen while the logo above it and the headline below it did not. On a
 * phone the first crumb was clipped by the bezel. The longhand cannot do that. */
.crumbs{
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--stone);padding-top:18px;
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
.crumbs li::after{content:"/";margin-left:8px;color:var(--line);}
.crumbs li:last-child::after{content:"";}
.crumbs a{color:var(--sky-deep);text-decoration:none;font-weight:600;}
.crumbs a:hover{text-decoration:underline;}

/* ---------- HERO ---------- */
/* No background here on purpose: the wash is assets/theme.css's, so it changes with
   the season and again with the hour, and a flat ice-to-white gradient declared after
   it would have quietly won. Clipped, because the season emoji behind the headline is
   deliberately larger than the column it sits in. */
.hero{position:relative;overflow:hidden;padding:30px 0 52px;}
.hero h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;}
.hero h1 .accent{color:var(--sky-deep);}
/* The plain-words line under the headline, the homepage's .h1-sub: the headline is
   written for a reader, this is the phrase a search was actually for. */
.hero h1 .h1-sub{display:block;margin-top:14px;font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;line-height:1.3;color:var(--ink-soft);}
.hero .lede{color:var(--ink-soft);font-size:1.12rem;margin:18px 0 0;max-width:52ch;}
.hero .lede strong{color:var(--ink);}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
/* The homepage's proportions, because the right-hand column now holds the same thing
   the homepage's does -- the badge with the sun crossing it, rather than the panel of
   postcodes that used to sit here. Centred for the same reason: the badge is artwork
   and wants to sit against the middle of the copy, not the top of it. */
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--navy);color:var(--trust-ink);padding:16px 0;}
.trust .wrap{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:0.82rem;letter-spacing:0.03em;
}
.trust .item{display:flex;align-items:center;gap:8px;}
.trust a{color:inherit;text-decoration:underline;}

/* ---------- SECTIONS ---------- */
section{padding:72px 0;}
.section-head{max-width:720px;margin-bottom:40px;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.section-head p{color:var(--ink-soft);margin-top:12px;font-size:1.05rem;}
.tinted{background:var(--ice-soft);}
.prose p{color:var(--ink-soft);font-size:1.03rem;margin:0 0 18px;max-width:72ch;}
.prose p strong{color:var(--ink);}
.prose h3{font-size:1.15rem;margin:28px 0 12px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;
}
.card h3{font-size:1.12rem;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:0.96rem;margin:0;}
.card .tag{
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--sky-deep);display:block;margin-bottom:10px;
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}

/* ---------- CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
/* The nearby-towns line that follows the chips. It used to sit in a section of its
   own further down the page; the gap is here because a paragraph hard against a row
   of chips reads as a caption for them rather than as the next sentence. */
.chips + p{margin-top:20px;}
.town-chip{
  background:var(--ice-soft);border:1px solid var(--line);color:var(--ink-soft);
  font-size:0.88rem;font-weight:600;padding:8px 14px;border-radius:999px;
  text-decoration:none;display:inline-block;
}
a.town-chip:hover{background:var(--ice);color:var(--ink);border-color:var(--sky);}

/* ---------- AREA INDEX GRID ---------- */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.area-card{
  display:block;text-decoration:none;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;
  /* the hover tween, plus the six-second palette tween assets/theme.css asks for on
     .card -- declared together because the shorthand is one property and the later
     sheet would otherwise drop whichever half it did not mention */
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease,
             background-color 6s ease, color 6s ease;
}
.area-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,42,74,0.08);border-color:var(--sky);}
.area-card .place{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);}
.area-card .pc{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.1em;
  color:var(--stone);margin-left:8px;
}
.area-card p{color:var(--ink-soft);font-size:0.93rem;margin:10px 0 0;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);
}
.faq-q .plus{color:var(--sky-deep);font-size:1.3rem;transition:transform .2s ease;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{display:none;padding:0 0 22px;}
.faq-item.open .faq-a{display:block;}
.faq-a p{color:var(--ink-soft);margin:0;font-size:1rem;}

/* ---------- QUOTE ---------- */
.cta-band{
  background:var(--navy);color:var(--white);border-radius:calc(var(--radius) + 6px);
  padding:48px 44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
}
.cta-band h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.15rem);}
.cta-band p{color:var(--trust-ink);margin:14px 0 0;}
.cta-band .eyebrow{color:var(--gold);}
.wa-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:24px;
  background:#25D366;color:#06281a;text-decoration:none;font-weight:700;
  padding:12px 20px;border-radius:999px;
}
.wa-cta em{display:block;font-style:normal;font-weight:600;font-size:0.82rem;opacity:0.85;}
.form-card{background:var(--white);border-radius:var(--radius);padding:26px;}
.field{margin-bottom:14px;}
.field-row{display:grid;grid-template-columns:3fr 2fr;gap:12px;}
.field label .opt{font-weight:400;color:var(--stone);}
.field label{display:block;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-family:'Inter',sans-serif;font-size:0.95rem;color:var(--ink);background:var(--white);
}
.field textarea{min-height:90px;resize:vertical;}
.form-msg{display:none;margin-top:14px;color:var(--sky-deep);font-weight:600;font-size:0.92rem;}

/* ---------- FOOTER ---------- */
footer{padding:48px 0 36px;border-top:1px solid var(--line);}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
.footer-brand img{width:auto;height:74px;display:block;}
.footer-note{color:var(--stone);font-size:0.85rem;max-width:420px;}
.footer-note a{color:var(--sky-deep);font-weight:700;text-decoration:none;font-size:0.95rem;}
.footer-areas{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}
.footer-areas h2{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--stone);font-weight:600;margin-bottom:12px;
}
.footer-areas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;}
.footer-areas a{color:var(--ink-soft);font-size:0.88rem;font-weight:600;text-decoration:none;}
.footer-areas a:hover{color:var(--sky-deep);text-decoration:underline;}
/* The manufacturer strip. Four marks of wildly different proportion -- two wide
   wordmarks, a stacked shield and a round badge -- so a single height would make
   the wordmarks tower over the badge. Each gets its own height instead, chosen so
   the four read as the same optical weight, and the widths land in the same
   ballpark. Muted slightly so a row of other people's brand colours sits behind
   our own rather than in front of it; full strength on hover. */
.footer-brands{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}
.footer-brands h2{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--stone);font-weight:600;margin-bottom:14px;
}
.footer-brands ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;}
.footer-brands img{width:auto;display:block;opacity:0.78;transition:opacity 0.2s ease;}
.footer-brands li:hover img{opacity:1;}
/* After civil twilight theme.js drops --paper to near-black, and two of these four
   marks are partly black ink: MHI's wordmark and Daikin's keyline. A filter cannot
   fix that -- inverting the black would take the red diamond and the blue with it --
   so at night they get the surface they were drawn for instead, and only then. */
body[data-daytime="night"] .footer-brands ul{gap:14px 20px;}
body[data-daytime="night"] .footer-brands li{background:rgba(255,255,255,0.93);border-radius:10px;padding:9px 14px;}
body[data-daytime="night"] .footer-brands img{opacity:1;}
.fb-daikin{height:28px;}
.fb-mhi{height:26px;}
.fb-mitsubishi-electric{height:28px;}
.fb-midea{height:26px;}
.fb-milwaukee{height:34px;}
.fb-testo{height:36px;}
.footer-cert{display:flex;align-items:center;gap:16px;margin-top:28px;color:var(--stone);font-size:0.85rem;}
.footer-cert img{height:72px;width:auto;}
.footer-fine{color:var(--stone);font-size:0.78rem;margin-top:22px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px){
  .hero-grid,.split,.cta-band{grid-template-columns:1fr;}
  .cards,.area-grid{grid-template-columns:1fr 1fr;}
  .cta-band{padding:36px 28px;gap:28px;}
}
@media (max-width: 720px){
  .cards,.area-grid{grid-template-columns:1fr;}
  section{padding:56px 0;}
  .hero{padding:20px 0 44px;}
  /* Four marks will not sit on one line on a phone, so they wrap two-and-two:
     tighter gaps and a step down in height keeps that pair of rows compact. */
  .footer-brands ul{gap:14px 24px;}
  .fb-daikin{height:24px;}
  .fb-mhi{height:22px;}
  .fb-mitsubishi-electric{height:24px;}
  .fb-midea{height:22px;}
  .fb-milwaukee{height:29px;}
  .fb-testo{height:31px;}
}

/* The /areas/ hub used to be one flat grid, which was fine for thirteen cards and
   unreadable at forty. It is now one of these per geographic cluster, so a reader
   scanning for their own town is scanning six or nine cards rather than the lot. */
.area-group { margin-bottom: 48px; }
.area-group:last-of-type { margin-bottom: 0; }
.area-group > h3 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.area-group > h3 span {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.area-group > p {
  margin: 0 0 20px;
  max-width: 60ch;
  opacity: 0.8;
}

/* The service cards on an area page are a line each and a way through to the
   homepage, so the copy about the town is what carries the page (see
   SERVICE_CARDS in tools/build-areas.mjs). */
.cards-brief .card h3{margin-bottom:6px;}
.cards-more{margin:22px 0 0;font-weight:600;}
.cards-more a,.faq-more a{color:var(--sky-deep);}
.faq-more{margin:24px 0 0;color:var(--ink-soft);font-size:0.98rem;}

/* Jobs finished in this town, put into the page by
   netlify/edge-functions/area-proof.ts. The cards are the homepage timeline's
   (.work-card in assets/work.css); one or two of them get a grid that fits them
   rather than three columns with holes, the way the reviews band does. */
.local-work .section-head p a{color:var(--sky-deep);font-weight:600;}
@media (min-width: 981px){
  .work-teaser[data-cards="1"]{grid-template-columns:minmax(0,380px);}
  .work-teaser[data-cards="2"]{grid-template-columns:repeat(2,minmax(0,380px));}
}

/* The Wakefield service pages (servicePage in tools/build-areas.mjs): four or six
   cards rather than the area pages' three, and prose sections that run the width of
   the column instead of sitting side by side. */
.cards-four{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){.cards-four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.cards-four{grid-template-columns:1fr;}}
.service-prose{max-width:820px;}
.service-prose + .service-prose{margin-top:44px;}
.service-prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:18px;}
.service-links{margin-top:18px;}