/* ------------------------------------------------------------------------
   Plug-in Solar North East

   The design source is the Tyneside flat: two homes in one two storey
   terraced house, each with its own front door at street level, side by
   side under one painted stone head. Nowhere else in the country builds
   them. Three decisions carry the site and nothing else is allowed to
   compete with them.

   1. THE DOORHEAD is the signature device. Every object that carries a
      heading wears a solid coal block across its full width, with the
      heading set in magpie white inside it: the form, each service door,
      the nav panel, the page aside, the questions block, the closing
      plate. It is the painted stone head over a Tyneside doorway. It is
      never a hairline and never sits on one edge of a card: it is a block
      with content in it, the full width of the thing it heads.

   2. THE SILL IS THE ONE SEAM. Between two light grounds a seam is a 10px
      full bleed band of coal, the painted sandstone sill that runs under
      the windows of every terrace up here. Where a coal band meets a light
      ground, the band's own edge IS the sill, so the device is never
      doubled. There is no other rule anywhere on this site, and the
      doorhead never appears at a seam.

   3. THE HAAR is the one ambient motion. The sea fret that comes up the
      Tyne from the North Sea, drawn as one very wide, very soft pale band
      drifting sideways across the coal hero plane. Transform only, travel
      equal to exactly one band period so the loop never jumps, and it
      stops dead for prefers-reduced-motion. Nothing else moves by itself.

   Everything is paired: the masthead is two rows, the hero is two panels
   meeting on a hard vertical edge, the ask row is two panels, the closer
   is two panels. Radius is 0 everywhere, so the glyphs are Lucide geometry
   rendered with square caps and mitred joins.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. coal: the deep plane, every dark band, every doorhead.
     ink: all body text on a light ground. magpie: the page.
     ash: the alternate ground, 1.22 against magpie, which is where two
     light grounds separate for the eye without reading as banding.
     cold: ACTION ONLY, the colour of the North Sea in February, never
     used for decoration. sand: the highlight, the headline phrase and the
     figures, and it only ever appears on coal. muted: secondary text. */
  --coal: #12171A;
  --ink: #232B30;
  --magpie: #F8F9F8;
  --ash: #E0E4E1;
  --cold: #1450C8;
  --sand: #C9A96A;
  --muted: #59636A;

  /* derived, not new colours: the action pressed, the highlight lifted so
     it can carry a link on coal, and one hairline tint used inside
     components only, never at a seam. */
  --cold-press: #0E3B95;
  --sand-lit: #DCC089;
  --hair: #C7CDCA;

  /* Merriweather is here for a reason that is on the page: the painted
     signwriting on a Victorian gable end and the painted names over the
     doors of a terrace are serif letters, cut heavy. A newspaper weight
     serif on coal is the North East's own lettering. Mulish stays out of
     its way and carries the figures. */
  --display: "Merriweather", Georgia, "Times New Roman", serif;
  --body: "Mulish", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;   /* three service doors land at about 392px across at
                       1440, so their photographs fill the fleet's card */
  --gut: 26px;
  --sill: 10px;     /* the seam band, and the only seam on the site */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--magpie);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.09;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
h3 { font-size: 1.24rem; line-height: 1.26; letter-spacing: -0.004em; }
h4 { font-size: 0.98rem; line-height: 1.35; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Underlines are out. A link carries the action colour and weight, and
   hover darkens it. */
a { color: var(--cold); font-weight: 600; text-decoration: none; }
a:hover { color: var(--cold-press); }
a, a:hover, a:focus { text-decoration: none; }

:focus-visible { outline: 3px solid var(--cold); outline-offset: 2px; }
.on-coal :focus-visible { outline-color: var(--sand-lit); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--coal); color: var(--magpie);
  padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

.ico { flex: none; }

/* --- the seam ----------------------------------------------------------
   One device. A 10px coal band between two light grounds. A coal band's
   own edge is the seam where it meets a light ground, so this element is
   never emitted next to one. Do not add a second rule anywhere. */
.sill { height: var(--sill); background: var(--coal); }

/* --- the doorhead ------------------------------------------------------
   The signature device. A coal block the full width of the object it
   heads, heading set in magpie white inside it. Never a border, never on
   one edge only, never at a seam. */
.doorhead {
  background: var(--coal);
  color: var(--magpie);
  padding: 15px 22px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.004em;
}
.doorhead.sm { font-size: 0.94rem; padding: 12px 18px; }

/* --- coal planes -------------------------------------------------------
   The one texture on the site, a gravel tile from transparenttextures,
   used on coal planes only and never behind body copy at 16px on a light
   ground. The gradient under it is tonal inside coal itself: a wide, soft
   ramp, no hotspot, no second hue. */
.on-coal {
  background-color: var(--coal);
  /* the gradient is laid OVER the tile at high alpha, which is what keeps the
     grain at the edge of visibility instead of reading as speckle. The ramp is
     wide and tonal inside coal itself: no second hue and no hotspot. */
  background-image:
    linear-gradient(178deg, rgba(26, 33, 38, 0.9) 0%, rgba(18, 23, 26, 0.93) 58%, rgba(13, 17, 20, 0.95) 100%),
    url("/assets/tex/gravel.png");
  color: var(--magpie);
}
.on-coal h1, .on-coal h2, .on-coal h3, .on-coal h4 { color: var(--magpie); }
.on-coal a { color: var(--sand-lit); }
.on-coal a:hover { color: var(--sand); }
.on-coal .muted, .on-coal .sec-lede { color: #BCC5C9; }

/* --- buttons -----------------------------------------------------------
   On a light ground the button is the action colour with magpie text. On
   coal the action colour cannot make its own edge (2.45 against the
   plane), so the button inverts: magpie fill, action colour text. The
   signal is still the one blue, and the object still has an edge. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cold); color: var(--magpie);
  font-family: var(--display); font-weight: 700; font-size: 0.96rem;
  padding: 15px 26px; border: 0; cursor: pointer;
  min-height: 48px; line-height: 1.1;
  transition: background-color 140ms ease, transform 140ms ease;
}
.btn:hover { background: var(--cold-press); color: var(--magpie); transform: translateY(-1px); }
.on-coal .btn { background: var(--magpie); color: var(--cold); }
.on-coal .btn:hover { background: #fff; color: var(--cold-press); }

/* --- masthead: two rows, like two storeys ------------------------------ */
.mast-top {
  background-color: var(--coal);
  background-image:
    linear-gradient(180deg, rgba(26, 33, 38, 0.92), rgba(18, 23, 26, 0.94)),
    url("/assets/tex/gravel.png");
}
.mast-top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 12px; padding-bottom: 12px;
}
.mast-top p { margin: 0; color: #BCC5C9; font-size: 0.94rem; }
.mast-top b { color: var(--magpie); font-weight: 700; }

.brand {
  display: inline-flex; align-items: stretch; gap: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: -0.01em; color: var(--magpie);
}
.brand span { display: inline-flex; align-items: center; padding-right: 10px; }
.brand b {
  display: inline-flex; align-items: center;
  background: var(--magpie); color: var(--coal);
  padding: 5px 10px; font-weight: 800;
}

/* no hairline under the nav row: a single sided border is out, and the
   coal edge of whatever follows is separation enough. */
.mast { background: var(--magpie); }
.mast .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .drop > button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: 0.94rem;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 17px 16px; min-height: 48px; letter-spacing: -0.004em;
}
.nav > a:hover, .drop > button:hover { color: var(--cold); }
.nav .cta-top { color: var(--cold); }

.drop { position: relative; display: inline-flex; }
.drop svg { transition: transform 160ms ease; }
.drop[data-open="true"] svg { transform: rotate(180deg); }
.drop .panel {
  position: absolute; top: 100%; left: 0; z-index: 40;   /* one anchor rule:
    every panel hangs from the left edge of its own trigger */
  width: 430px; background: var(--magpie);
  box-shadow: 0 22px 44px rgba(18, 23, 26, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.drop[data-open="true"] .panel { opacity: 1; visibility: visible; transform: translateY(0); }
.panel .strap { margin: 0; }
.panel ul { list-style: none; margin: 0; padding: 8px 0; }
.panel li a { display: block; padding: 12px 22px; color: var(--ink); font-weight: 700; }
.panel li a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); margin-top: 2px; }
.panel li a:hover { background: var(--ash); color: var(--cold); }
.panel .all {
  display: block; padding: 13px 22px; background: var(--ash);
  color: var(--cold); font-weight: 700; font-size: 0.96rem;
}
.panel .all:hover { background: var(--hair); }

.burger { display: none; }
.mobile { display: none; }

/* --- hero: two panels meeting on a hard vertical edge ------------------ */
.hero { position: relative; overflow: hidden; }
.hero-pair { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.hero-text {
  position: relative; z-index: 2;
  padding: 56px 56px 56px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  display: flex; flex-direction: column; justify-content: center;
}
.hero-text h1 em { font-style: normal; color: var(--sand); }
.hero-text .lede {
  font-size: 1.19rem; color: #C6CED2; max-width: 33em;
  margin: 20px 0 0;
}
.hero-photo { position: relative; min-height: 620px; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .hero-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 20px; font-size: 0.86rem;
  /* measured on the real composited pixels: this scrim over the darkest and
     the lightest parts of the photograph leaves the caption at 12.33:1 */
  color: #D6DDE0;
  background: rgba(10, 14, 16, 0.82);
}

.chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  display: flex; align-items: center; gap: 9px;
  background: rgba(248, 249, 248, 0.08);
  color: var(--magpie); font-size: 0.95rem; font-weight: 600;
  padding: 10px 15px; min-width: 0;
}
.chips svg { color: var(--sand); }
.hero .btn { align-self: flex-start; margin-top: 24px; }

/* the haar: one wide soft band drifting sideways across the coal plane.
   The band is 50% of the track and the track is twice the plane, so the
   travel below is exactly one band period and the loop is seamless. */
.haar {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(248, 249, 248, 0) 0%,
    rgba(248, 249, 248, 0) 18%,
    rgba(248, 249, 248, 0.055) 38%,
    rgba(248, 249, 248, 0.085) 50%,
    rgba(248, 249, 248, 0.055) 62%,
    rgba(248, 249, 248, 0) 82%,
    rgba(248, 249, 248, 0) 100%);
  width: 200%; left: -100%;
  animation: haar 26s linear infinite;
}
@keyframes haar { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* --- sections and grounds ---------------------------------------------- */
.sec { padding: 84px 0; }
.sec--ash { background: var(--ash); }
.sec--coal { padding: 88px 0; }
.sec-lede { font-size: 1.16rem; color: var(--muted); max-width: 40em; margin: 18px 0 0; }
.sec-head { max-width: 46em; }

/* --- the ask row: form beside what comes back --------------------------
   Its top padding is trimmed so the form's own doorhead sits inside the
   first 1000px at 1440: the enquiry is the only way to reach this firm and
   it should not be below the fold. */
#ask-band { padding-top: 52px; }
.ask-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 46px; align-items: start; }
.ask-side h2 { margin-bottom: 4px; }
.ask-list { list-style: none; margin: 26px 0 0; padding: 0; }
/* rows are separated by space, never by a line on one edge: there is not a
   single sided border anywhere on this site. */
.ask-list li { display: flex; gap: 13px; padding: 11px 0; }
.ask-list svg { color: var(--cold); margin-top: 3px; }
.ask-list b { font-family: var(--display); font-weight: 700; }
.counties { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.counties li {
  background: var(--ash); color: var(--ink); font-size: 0.9rem; font-weight: 600;
  padding: 7px 12px;
}
.sec--ash .counties li { background: var(--magpie); }

/* --- the form: one component, doorheaded -------------------------------- */
.form-card { background: var(--ash); }
.sec--ash .form-card, .on-coal .form-card { background: var(--magpie); }
.form-body { padding: 26px 26px 28px; }
.form-card .said { color: var(--muted); margin: 0 0 20px; font-size: 1rem; }
.form-card .after { margin: 16px 0 0; font-size: 0.88rem; color: var(--muted); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { display: block; margin-bottom: 14px; min-width: 0; }
.f span { display: block; font-weight: 700; font-size: 0.93rem; margin-bottom: 6px; }
.f input, .f select, .f textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--magpie); border: 1px solid var(--hair); padding: 12px 13px;
  min-height: 48px;
}
.sec--ash .f input, .sec--ash .f select, .sec--ash .f textarea,
.on-coal .f input, .on-coal .f select, .on-coal .f textarea { background: #fff; }
.f textarea { min-height: 86px; resize: vertical; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { border-color: var(--cold); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- the finding band --------------------------------------------------- */
.finding-pair { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.finding-pair h2 em { font-style: normal; color: var(--sand); }
.finding-pair p { font-size: 1.14rem; color: #C6CED2; }
.finding-pair .said { margin-top: 22px; }
.plainline { margin: 26px 0 0; font-size: 0.9rem; color: #9FAAAF; }
.on-coal figcaption { font-size: 0.86rem; color: #9FAAAF; padding-top: 10px; }

/* --- the ladder: four places it can go ---------------------------------- */
.ladder { margin-top: 44px; }
.rung {
  display: grid; grid-template-columns: 380px minmax(0, 1fr) auto;
  gap: 34px; align-items: center;
  padding: 18px 0;
}
.rung:first-child { padding-top: 0; }
.rung:last-child { padding-bottom: 0; }
.rung img { width: 100%; height: 250px; object-fit: cover; }
.rung h3 { margin-bottom: 7px; }
.rung p { color: var(--muted); margin: 0; }
.rung figcaption { font-size: 0.82rem; color: var(--muted); padding-top: 8px; }
.kwh { text-align: right; min-width: 156px; }
.kwh b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.8rem; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.kwh span { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 6px; }
.attrib { margin: 30px 0 0; font-size: 0.9rem; color: var(--muted); }
.sec--coal .attrib { color: #9FAAAF; }

/* --- the doors: three service panels standing side by side -------------- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: 44px; }
.door { background: var(--magpie); display: flex; flex-direction: column; }
.sec--ash .door { background: var(--magpie); }
.door > a { display: flex; flex-direction: column; flex: 1; color: inherit; font-weight: 400; }
.door img { width: 100%; height: 280px; object-fit: cover; }
.door-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.door-body p { color: var(--muted); margin: 0 0 18px; }
.door .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--cold); font-family: var(--display); font-weight: 700;
}
.door > a:hover .go { color: var(--cold-press); }
.door > a:hover img { opacity: 0.93; }

/* --- the pair: a photograph and a piece of writing ---------------------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 48px; align-items: center; }
.pair--flip > figure { order: 2; }
.pair img { width: 100%; height: 460px; object-fit: cover; }
.pair figcaption { font-size: 0.84rem; color: var(--muted); padding-top: 10px; }
.pair-body h2 { margin-bottom: 18px; }
.pair-body p { max-width: 38em; }
.pair-body .prose-list { margin: 20px 0 0; padding: 0; list-style: none; }
.pair-body .prose-list li { display: flex; gap: 12px; padding: 10px 0; }
.pair-body .prose-list svg { color: var(--cold); margin-top: 3px; }
.on-coal .pair-body .prose-list svg { color: var(--sand); }

/* --- questions ---------------------------------------------------------- */
.qs { max-width: 900px; margin-top: 36px; }
/* each question is a plate standing on the section ground, inverted on the
   ash ground exactly as the form card is, so nothing needs a rule. */
.q { background: var(--ash); margin-bottom: 3px; }
.sec--ash .q { background: var(--magpie); }
.q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.q summary::-webkit-details-marker { display: none; }
.q summary { padding: 18px 22px; }
.q summary:hover { color: var(--cold); }
.q summary svg { color: var(--cold); transition: transform 160ms ease; }
.q[open] summary svg { transform: rotate(45deg); }
.q .a { padding: 0 22px 22px; color: var(--muted); max-width: 62em; }
.q .a p { margin-bottom: 0.8em; }

/* --- the closer --------------------------------------------------------- */
.closer-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.closer-pair img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.closer-plate { background: var(--coal); padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 em { font-style: normal; color: var(--sand); }
.closer-plate p { color: #C6CED2; margin-top: 18px; }
.closer-plate .btn { align-self: flex-start; margin-top: 28px; }

/* --- interiors ---------------------------------------------------------- */
.page-head { padding: 62px 0 66px; }
.crumb { font-size: 0.92rem; color: #9FAAAF; margin: 0 0 22px; }
.crumb a { color: var(--sand-lit); }
.page-head h1 { max-width: 17em; }
.pull {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem); color: #C6CED2;
  max-width: 30em; margin: 26px 0 0; line-height: 1.45;
}

.article { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 56px; align-items: start; padding: 74px 0 84px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.7rem, 2.4vw, 2.15rem); margin: 52px 0 16px; scroll-margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; }
.prose p { margin-bottom: 1.1em; }
.prose ul { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.prose ul li { display: flex; gap: 12px; padding: 8px 0; }
.prose ul li svg { color: var(--cold); margin-top: 4px; }
.prose .lead { font-size: 1.18rem; color: var(--ink); }

/* Show, do not only tell: an example plate inside the prose, a photograph
   with a caption saying what to look at. */
.plate { margin: 30px 0 34px; background: var(--ash); }
.plate img { width: 100%; height: 330px; object-fit: cover; }
.plate figcaption { padding: 16px 20px 18px; font-size: 0.95rem; color: var(--ink); }
.plate figcaption b { font-family: var(--display); font-weight: 700; display: block; margin-bottom: 4px; }

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 28px 0 32px; }
.figures div { background: var(--ash); padding: 18px 16px; }
.figures b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 1.75rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05;
}
.figures span { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 7px; }

.aside { position: sticky; top: 20px; }
.aside ol { list-style: none; margin: 0; padding: 14px 22px 18px; background: var(--ash); counter-reset: n; }
.aside ol li { padding: 7px 0; }
.aside ol a { color: var(--ink); font-weight: 600; font-size: 0.97rem; }
.aside ol a:hover { color: var(--cold); }
.aside-card { margin-top: 26px; background: var(--ash); }
.aside-card .inner { padding: 18px 22px 22px; }
.aside-card .inner p { font-size: 0.96rem; color: var(--muted); margin-bottom: 16px; }
.aside-card .btn { width: 100%; justify-content: center; font-size: 0.96rem; }

.siblings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); margin-top: 40px; }

/* --- thank you ---------------------------------------------------------- */
.thanks-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 48px; align-items: center; }
.thanks-list { list-style: none; margin: 24px 0 0; padding: 0; }
.thanks-list li { padding: 10px 0; }

/* --- credits ------------------------------------------------------------ */
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: 36px; }
.credit { background: var(--magpie); padding: 22px; }
.credit h3 { font-size: 1.04rem; margin-bottom: 8px; }
.credit p { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.5em; }

/* --- footer ------------------------------------------------------------- */
.foot {
  background-color: var(--coal);
  background-image:
    linear-gradient(180deg, rgba(26, 33, 38, 0.92), rgba(15, 20, 23, 0.95)),
    url("/assets/tex/gravel.png");
  color: #BCC5C9; padding: 66px 0 34px;
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.foot h4 { color: var(--magpie); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 5px 0; font-size: 0.96rem; }
.foot a { color: #D6DDE0; font-weight: 400; }
.foot a:hover { color: var(--sand-lit); }
.foot .mark { margin-bottom: 14px; }
.foot p { font-size: 0.96rem; }
.foot-legal { margin-top: 52px; display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; }
.foot-legal p { font-size: 0.85rem; color: #8E999E; max-width: 78ch; margin: 0; }
.foot-legal a { color: #D6DDE0; }

/* --- motion ------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 620ms ease, transform 620ms ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: 90ms; }
.rise.d2 { transition-delay: 180ms; }
.rise.d3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .haar { animation: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  .btn, .drop svg, .q summary svg { transition: none; }
  .btn:hover { transform: none; }
}

/* --- responsive ---------------------------------------------------------
   Designed at 1440, 1101, 1024, 768, 414, 390 and 320. Every flex child
   that holds text carries min-width: 0 so an email address cannot force
   the page sideways. */
@media (max-width: 1180px) {
  .rung { grid-template-columns: 300px minmax(0, 1fr) auto; gap: 26px; }
  .rung img { height: 210px; }
  .kwh b { font-size: 2.5rem; }
  .article { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 1080px) {
  /* the desktop nav stops fitting well before it stops fitting at all */
  .nav > a.lg, .drop.lg { display: none; }
  .burger {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--display); font-weight: 700; font-size: 1rem;
    background: var(--cold); color: var(--magpie); border: 0; cursor: pointer;
    padding: 13px 20px; min-height: 48px;
  }
  .mobile { display: block; background: var(--ash); }
  .mobile[data-open="false"] { display: none; }
  .mobile ul { list-style: none; margin: 0; padding: 12px 0; }
  .mobile li a { display: block; padding: 13px 0; color: var(--ink); font-weight: 700; min-height: 48px; }
  .mobile li a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
  .mobile .btn { width: 100%; justify-content: center; margin: 10px 0 18px; }
  .mast .wrap { padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 980px) {
  .hero-pair { grid-template-columns: minmax(0, 1fr); }
  .hero-text { padding: 56px var(--gut) 48px; }
  .hero-photo { min-height: 330px; }
  .ask-pair, .finding-pair, .pair, .thanks-pair { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pair--flip > figure { order: 0; }
  .pair img { height: 320px; }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .door img { height: 230px; }
  .closer-pair { grid-template-columns: minmax(0, 1fr); }
  .closer-pair img { min-height: 280px; }
  .closer-plate { padding: 44px var(--gut); }
  .article { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 52px 0 62px; }
  .aside { position: static; }
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding: 62px 0; }
}

@media (max-width: 720px) {
  .rung { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
  .rung img { height: 220px; }
  .kwh { text-align: left; min-width: 0; }
  .kwh b { font-size: 2.7rem; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .siblings, .credits { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .foot-legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mast-top .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mast-top p { font-size: 0.88rem; }
}

@media (max-width: 520px) {
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form-body { padding: 20px 18px 22px; }
  .doorhead { padding: 13px 18px; font-size: 1.08rem; }
  .hero-text { padding: 44px var(--gut) 40px; }
  .chips li { width: 100%; }
  .sec { padding: 52px 0; }
  .page-head { padding: 46px 0 50px; }
  .closer-plate { padding: 38px var(--gut); }
}