/* ------------------------------------------------------------------------
   Plug-in Solar Britain

   The flagship. It is the one firm in the network with no region, so its
   design source is not a building fabric: it is the product itself. A plug-in
   solar device is a thing you LAY OVER a house you already have. It is not
   built in, not cut in, not wired in. It laps onto the wall, the rail or the
   grass, and it unplugs again. Three decisions carry the site and nothing
   else is allowed to compete with them.

   1. THE LAP is the signature device. Every object on this site is two filled
      planes, one laid across the other, overlapping by exactly --lap: a wide
      under-plane (a photograph, a brick field, a gauge field) and a narrower
      plate laid over its foot, hanging below it. The hero, every card, the
      form, the check, the spec band, the questions, the nav panel, the aside,
      the closing tile and the credits are all built this way. Both parts are
      whole filled objects, so the lap can never read as a border stuck on one
      edge of something, and nothing on this site is a single flat rectangle.

   2. THE LEDGE is the seam device, and the only one. A section does not butt
      into the one above it: its ground arrives first as a 64px block at
      exactly the content width, then goes full bleed, so every join reads as
      a step up onto a ledge. It is the incoming section's OWN colour, never a
      third one, it is symmetric about the page so it is never a jog to one
      side, and it appears at every seam including the masthead, the footer
      and the head of every interior page. There is no rule, no hairline, no
      band and no gap at a seam anywhere on this site, and the ledge never
      appears inside a component.

   3. THE LEAN is the one ambient motion. Not a drift, not a breath and not a
      rotation: a very wide, very soft warm light on the ink hero plane SHEARS
      slowly, one way and back, so what changes is its angle. The whole
      argument of this site is that the angle a panel is set at matters more
      than the place it is set in (897 kWh on a roof pitch, 424 on an east
      wall, at the same address), so the site's own movement is a change of
      angle. Transform only, symmetric so the loop cannot jump, and it stops
      dead for anyone who has asked for less movement.

   Radius is 0 on every object, so the glyphs are Lucide geometry (ISC) drawn
   with square caps and mitred joins. Texture is used twice and no more: a
   fine non-directional grain on the ink hero plane and on the footer. Neither
   carries body copy, and no object standing on those planes is textured.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. ink: the deep plane, the masthead type, all body text on a
     light ground. page: white, the page ground. stone: the alternate ground,
     measured at 1.23 against white, which is where two grounds separate for
     the eye without reading as crude banding. brick: ACTION ONLY, plus the
     two places the firm speaks in its own voice (the wordmark plate and the
     field the enquiry form is laid over). clay: the highlight, and it is a
     DARK GROUND COLOUR ONLY: it reads 5.59 against ink and only 3.08 against
     white, so it never appears on a light plane. gauge: information, the
     balancing accent that stops a red site reading as all red, used for the
     verdict block, the measure bars and the specification plane. muted:
     secondary text. */
  --ink: #1A1B1E;
  --page: #FFFFFF;
  --stone: #ECE7E3;
  --brick: #A82D18;
  --clay: #E4724F;
  --gauge: #2C4557;
  --muted: #5B6068;

  /* Derived, not new colours: the brick pressed, the ink lifted for the hero
     gradient, one hairline tint for furniture INSIDE components (never at a
     seam), and the two text tones used on dark planes. */
  --brick-press: #8A2412;
  --clay-lit: #F3A085;   /* links on a dark plane: 8.35 on ink, 4.86 on gauge */
  --ink-lift: #26282D;
  --gauge-lift: #365467;
  --hair: #D8D1CB;
  --on-dark: #F4F2F0;
  --on-dark-2: #B9BDC3;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1300px;
  --gut: 28px;
  --lap: 48px;     /* the overlap of every lapped plate, held everywhere */
  --ledge: 64px;   /* the height of the seam step */
}

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

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

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  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.34rem; line-height: 1.18; letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: 1.02rem; line-height: 1.25; font-weight: 700; }

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

/* Links carry colour and weight. Nothing on this site is underlined. */
a { color: var(--brick); font-weight: 600; text-decoration: none; }
a:hover { color: var(--brick-press); }
/* On a dark plane brick is unreadable and clay measures only 3.25 against the
   gauge ground, so a link on any dark plane takes the lifted clay, which is
   8.35 against ink and 4.86 against gauge. */
.hero a, .sec--ink a, .sec--gauge a, .page-head a { color: var(--clay-lit); }
.hero a:hover, .sec--ink a:hover, .sec--gauge a:hover, .page-head a:hover { color: var(--on-dark); }
a, a:hover, a:focus { text-decoration: none; }

:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
.on-dark :focus-visible, .hero :focus-visible, .foot :focus-visible,
.sec--ink :focus-visible, .sec--gauge :focus-visible { outline-color: var(--clay); }

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

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

/* --- THE LAP ----------------------------------------------------------- */
/* One geometry, used for every object on the site. The under-plane is always
   the wider one and always a filled field (a photograph, brick, gauge or
   ink). The plate is always narrower, always carries the words, and is always
   pulled up by exactly --lap so it crosses the under-plane's foot and hangs
   below it. Flow, not absolute positioning, so the object's own height is
   always the sum of the two minus the overlap and nothing can escape the
   viewport. Never use a lap at a seam: seams are ledges. */
.lap { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.lap--left { align-items: flex-start; }
/* Descendant selectors, not child ones. A card wraps its two planes in an
   anchor set to display:contents, so the boxes lay out as children of the lap
   while the DOM still has the anchor in between, and a child combinator would
   silently miss them. */
.lap .under { width: 100%; min-width: 0; }
.lap .over {
  width: min(100%, var(--overw, 460px));
  margin-top: calc(var(--lap) * -1);
  position: relative; z-index: 2; min-width: 0;
}
.lap .under img { width: 100%; object-fit: cover; }

/* --- THE LEDGE --------------------------------------------------------- */
/* The seam. The incoming ground arrives at content width, then goes full
   bleed. --ground is set by each section's own class, so the step is always
   the section's own colour and never a third one. */
.sec, .hero, .foot, .page-head, .ask-band, .legal, .thanks, .article {
  position: relative;
}
.sec::before, .hero::before, .foot::before, .page-head::before,
.ask-band::before, .legal::before, .thanks::before, .article::before {
  content: "";
  position: absolute;
  top: calc(var(--ledge) * -1);
  height: var(--ledge);
  left: calc((100% - min(100%, var(--wrap))) / 2 + var(--gut));
  right: calc((100% - min(100%, var(--wrap))) / 2 + var(--gut));
  background: var(--ground, var(--page));
}

/* --- masthead ---------------------------------------------------------- */
.mast-strip {
  background: var(--ink); color: var(--on-dark-2);
  font-size: 0.83rem;
}
.mast-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 30px;
  align-items: center; justify-content: space-between;
  min-height: 42px; padding-top: 9px; padding-bottom: 9px;
}
.mast-strip ol { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.mast-strip li + li::before { content: "\00B7"; margin-right: 16px; color: #6E737A; }
.mast-strip b { color: var(--on-dark); font-weight: 600; }

.mast { background: var(--page); position: sticky; top: 0; z-index: 50; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 88px; }

/* The wordmark is itself a lap: the firm's name in ink with BRITAIN on a
   brick plate laid across its foot. */
.brand {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--display); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.98; color: var(--ink);
  min-height: 44px; justify-content: center; min-width: 0;
}
.brand:hover { color: var(--ink); }
.brand span { font-size: clamp(1.22rem, 1.6vw, 1.56rem); padding-left: 2px; }
.brand b {
  background: var(--brick); color: var(--page);
  font-size: clamp(1.02rem, 1.28vw, 1.26rem);
  padding: 3px 10px 4px; margin-top: -2px; letter-spacing: 0.01em;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav button {
  font: inherit; font-weight: 600; color: var(--ink);
  background: none; border: 0; cursor: pointer;
  padding: 13px 14px; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
}
.nav a:hover, .nav button:hover { color: var(--brick); }
.nav .ico { flex: none; }
.nav [aria-expanded="true"] { color: var(--brick); }
.nav [aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav .cta-top {
  background: var(--brick); color: var(--page); padding: 13px 20px; font-weight: 700;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav .cta-top:hover { background: var(--brick-press); color: var(--page); }

.drop { position: relative; }
/* One anchor rule: every panel hangs from the left edge of its own trigger. */
.panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 430px; max-width: calc(100vw - 40px);
  background: var(--page); border: 2px solid var(--ink);
  padding: 0; display: none;
}
.drop[data-open="true"] .panel { display: block; }
.panel .panel-head { background: var(--ink); color: var(--on-dark-2); padding: 16px 22px; font-size: 0.92rem; }
.panel ul { list-style: none; margin: 0; padding: 14px 22px 6px; }
.panel li a { display: block; padding: 11px 0; color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.panel li a span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.panel li a:hover { color: var(--brick); }
.panel li a:hover span { color: var(--muted); }
.panel .all { display: block; margin: 4px 22px 20px; font-weight: 700; color: var(--brick); }

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

/* --- hero -------------------------------------------------------------- */
/* 62px of top padding, not 78: the headline is three lines at 1440 and the
   form's first field has to stay inside the first 1000px of the page. */
.hero {
  --ground: var(--ink);
  background-color: var(--ink);
  background-image: url("/assets/tex/otis-redding.png"),
    linear-gradient(163deg, #26282D 0%, #1A1B1E 54%, #131418 100%);
  color: var(--on-dark);
  padding: 62px 0 92px;
  overflow: hidden;
}
/* THE LEAN. A wide soft warm light whose ANGLE changes, nothing else. */
.lean {
  position: absolute; left: -25%; right: -25%; top: -20%; bottom: -20%;
  background-image: linear-gradient(97deg,
    rgba(228, 114, 79, 0) 14%,
    rgba(228, 114, 79, 0.195) 47%,
    rgba(228, 114, 79, 0) 80%);
  transform-origin: 50% 100%;
  pointer-events: none;
  /* alternate, so the loop closes on itself with no arithmetic and no jump.
     Measured by frame diff rather than by eye: the max per-channel delta is 13
     over a 9 second window and 20 over 18 seconds, which is findable without
     being distracting. */
  animation: lean 18s ease-in-out infinite alternate;
}
@keyframes lean {
  from { transform: skewX(-6.8deg); }
  to   { transform: skewX(6.8deg); }
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 70px; align-items: start; margin-top: 40px;
}
/* The form takes the left column and the copy the right, which is the reverse
   of the usual reading order and is deliberate: the first thing on the page is
   the thing we want the visitor to do. Source order is unchanged, so a screen
   reader still hears the headline, the lede and the promises before the form. */
.hero-copy { grid-column: 2; grid-row: 1; }
.hero-lap { grid-column: 1; grid-row: 1; }
.hero h1 { color: var(--on-dark); max-width: 24ch; text-wrap: pretty; }
.hero h1 em { font-style: normal; color: var(--clay); }
.hero .lede { font-size: 1.22rem; line-height: 1.52; color: #DDE0E3; max-width: 54ch; margin: 0; }

/* The one figure that belongs in the first screen, because it is the argument
   the whole site rests on. It is stated once here and nowhere else in this
   form, so no number on the page contradicts another. */
.hero-span { margin: 34px 0 0; max-width: 46ch; }
.hero-span b {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 3vw, 2.7rem);
  color: var(--clay); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-span i { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--on-dark); }
.hero-span span { display: block; margin-top: 12px; font-size: 0.97rem; color: #C0C4C9; }

.chips { display: grid; gap: 9px; margin: 32px 0 0; list-style: none; padding: 0; }
.chips li {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #E9EBED; padding: 12px 16px; font-size: 0.94rem; font-weight: 500;
  line-height: 1.3; max-width: 100%; min-width: 0;
}
.chips .ico { color: var(--clay); flex: none; margin-top: 2px; }

/* The hero object: the enquiry form as a white plate laid across a brick
   field. It is the largest lap on the site and it is the first thing the
   page asks the visitor to do. */
.hero-lap { --overw: 100%; }
.hero-lap .under { background: var(--brick); height: 168px; }
.hero-lap .over { margin-top: calc(var(--lap) * -1); margin-left: var(--lap); width: calc(100% - var(--lap)); }

/* --- the legal band ---------------------------------------------------- */
.legal { --ground: var(--page); background: var(--page); padding: 0 0 96px; }
.legal .band-img { width: 100%; height: 620px; object-fit: cover; object-position: 50% 62%; }
.legal .wrap { position: relative; }
.legal-plate {
  background: var(--page); max-width: 760px;
  margin-top: calc(var(--lap) * -1 - 120px); position: relative; z-index: 2;
  padding: 44px 48px 46px;
}
.legal-plate h2 { max-width: 18ch; }
.legal-plate p { margin-top: 20px; font-size: 1.12rem; max-width: 56ch; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 46px; }
.fact { min-width: 0; }
.fact b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.1rem; letter-spacing: -0.03em; color: var(--gauge);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.fact span { display: block; margin-top: 10px; font-size: 0.97rem; color: var(--muted); }

/* --- sections ---------------------------------------------------------- */
.sec { padding: 100px 0; }
.sec--page  { --ground: var(--page);  background: var(--page); }
.sec--stone { --ground: var(--stone); background: var(--stone); }
.sec--ink   { --ground: var(--ink);   background: var(--ink); color: var(--on-dark); }
.sec--gauge { --ground: var(--gauge); background: var(--gauge); color: var(--on-dark); }
.sec--ink h2, .sec--gauge h2 { color: var(--on-dark); }
.sec > .wrap > h2 { max-width: 22ch; }
.sec-lede { font-size: 1.19rem; color: var(--muted); max-width: 62ch; margin-top: 20px; }
.sec--ink .sec-lede, .sec--gauge .sec-lede { color: #C9CDD1; }
.attrib { font-size: 0.85rem; color: var(--muted); margin-top: 28px; max-width: 80ch; }
.sec--ink .attrib, .sec--gauge .attrib { color: var(--on-dark-2); }

/* --- the four question check ------------------------------------------- */
.check-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 62px; align-items: start; margin-top: 54px;
}
.qset { margin-bottom: 34px; }
.qset > h3 { margin-bottom: 14px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  font: inherit; font-weight: 600; font-size: 0.98rem;
  background: var(--page); color: var(--ink);
  border: 2px solid var(--hair); border-radius: 0;
  padding: 11px 16px; min-height: 46px; cursor: pointer;
}
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); }

.verdict-lap { --overw: 100%; position: sticky; top: 118px; }
.verdict-lap .under { background: var(--gauge); height: 92px; padding: 22px 26px; color: var(--on-dark); }
.verdict-lap .under b { font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.verdict-lap .over { margin-left: var(--lap); width: calc(100% - var(--lap)); background: var(--page); padding: 30px 32px 32px; }
.verdict h4 { font-family: var(--display); font-size: 1.2rem; margin-bottom: 14px; }
.verdict .row { padding: 20px 0; }
.verdict .row p { font-size: 0.99rem; margin: 0; }
.verdict .row .src { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
.verdict .flag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.verdict .flag .ico { flex: none; color: var(--gauge); }

/* --- service cards ----------------------------------------------------- */
/* Two courses of two, so a card photograph is 600px across at 1440 rather
   than the 290 a four-up row would give it. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 44px; margin-top: 62px; }
.card { --overw: calc(100% - 56px); }
.card a { display: contents; color: inherit; }
.card .under { overflow: hidden; background: var(--ink); }
.card .under img { height: 340px; transition: transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.card:hover .under img { transform: scale(1.035); }
.card .over { background: var(--stone); padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.sec--stone .card .over { background: var(--page); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 1rem; }
.card .go { margin-top: auto; padding-top: 18px; font-weight: 700; color: var(--brick); display: inline-flex; align-items: center; gap: 8px; }
.card:hover .go { color: var(--brick-press); }

/* --- the finding ------------------------------------------------------- */
.finding { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 64px; align-items: center; }
.finding h2 { max-width: 19ch; }
.finding p { color: #D4D7DA; font-size: 1.1rem; max-width: 58ch; margin-top: 22px; }
.finding .warn { display: inline-flex; align-items: center; gap: 10px; color: var(--clay); font-weight: 700; font-size: 1.02rem; margin-bottom: 18px; }
.finding .warn .ico { flex: none; }
.find-lap { --overw: calc(100% - 64px); }
.find-lap .under img { height: 430px; object-position: 50% 40%; }
.find-lap .over { background: var(--page); color: var(--ink); padding: 26px 28px 28px; }
.find-lap .over b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.find-lap .over p { color: var(--muted); font-size: 0.97rem; margin: 0; max-width: none; }

/* --- placement: the ladder and the mountings --------------------------- */
.ladder-wrap { margin-top: 52px; overflow-x: auto; }
table.ladder { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 720px; }
.ladder caption { text-align: left; font-size: 0.85rem; color: var(--muted); padding-bottom: 14px; }
.ladder th, .ladder td { padding: 13px 14px; text-align: right; font-size: 1rem; }
.ladder th:first-child, .ladder td:first-child,
.ladder th:nth-child(2), .ladder td:nth-child(2) { text-align: left; }
.ladder thead th {
  font-family: var(--body); font-weight: 700; font-size: 0.86rem; color: var(--page);
  background: var(--gauge); vertical-align: bottom; line-height: 1.25;
}
.ladder tbody tr { background: var(--page); }
.ladder tbody tr:nth-child(even) { background: #F7F4F2; }
.ladder td:first-child { font-weight: 700; }
.ladder td:nth-child(2) { color: var(--muted); font-size: 0.94rem; }
.ladder .hi { color: var(--gauge); font-weight: 700; }

.mountings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 62px; align-items: start; margin-top: 72px; }
.bars { list-style: none; margin: 30px 0 0; padding: 0; }
.bars li + li { margin-top: 28px; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bar-head b { font-weight: 600; font-size: 1.03rem; }
.bar-head span {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--gauge);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.bar-head span i { font-style: normal; font-size: 0.5em; font-weight: 700; color: var(--muted); }
.bar-track { height: 18px; background: var(--hair); margin-top: 11px; }
.bar-fill { height: 100%; background: var(--gauge); }
.place-lap { --overw: calc(100% - 56px); }
.place-lap .under img { height: 320px; }
.place-lap .over { background: var(--page); padding: 24px 26px 26px; }
.place-lap .over p { margin: 0; font-size: 0.97rem; color: var(--muted); }
.place-lap + .place-lap { margin-top: 44px; }

/* --- the specification plane ------------------------------------------- */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 56px; background: rgba(255, 255, 255, 0.16); }
.spec { background: var(--gauge); padding: 30px 26px 32px; min-width: 0; }
.spec b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 2.15rem;
  letter-spacing: -0.03em; line-height: 1; color: var(--page); font-variant-numeric: tabular-nums;
}
.spec b small { font-size: 0.42em; font-weight: 700; letter-spacing: 0; margin-left: 6px; }
.spec h4 { color: var(--page); margin: 14px 0 8px; }
.spec p { font-size: 0.94rem; color: #C5CBD1; margin: 0; }

/* --- operator ---------------------------------------------------------- */
.region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); gap: 62px; align-items: center; }
.areas { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 30px 0 0; padding: 0; }
.areas li { background: var(--stone); color: var(--ink); padding: 9px 14px; font-size: 0.9rem; font-weight: 600; }
.sec--stone .areas li { background: var(--page); }
.op-lap { --overw: calc(100% - 56px); }
.op-lap .under img { height: 430px; }
.op-lap .over { background: var(--stone); padding: 24px 26px 26px; }
.sec--page .op-lap .over { background: var(--stone); }
.op-lap .over p { margin: 0; font-size: 0.97rem; color: var(--muted); }

/* --- questions --------------------------------------------------------- */
.qgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 60px; align-items: start; }
.qs { max-width: 920px; }
.qgrid .qs { max-width: none; }
.q { border: 2px solid var(--hair); background: var(--page); }
.q + .q { margin-top: 14px; }
.sec--page .q { background: var(--stone); border-color: #DCD5CF; }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 24px;
  font-family: var(--display); font-weight: 700; font-size: 1.14rem; line-height: 1.25;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 44px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { flex: none; color: var(--brick); margin-top: 2px; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 24px 24px; color: var(--muted); max-width: 70ch; }

/* --- form -------------------------------------------------------------- */
.form-card { background: var(--page); color: var(--ink); padding: 36px 36px 38px; }
.form-card h3 { font-size: 1.72rem; font-weight: 800; margin-bottom: 8px; }
.form-card .said { color: var(--muted); font-size: 0.99rem; margin-bottom: 24px; max-width: 48ch; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f { display: block; margin-bottom: 16px; min-width: 0; }
.f > span { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 7px; }
.f input, .f select, .f textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #FFFFFF; border: 2px solid var(--hair); border-radius: 0;
  padding: 13px 14px; min-height: 48px;
}
.f textarea { min-height: 104px; resize: vertical; }
.f select { appearance: none; background-image: none; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--brick); outline-offset: 1px; border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  font: inherit; font-family: var(--body); font-weight: 700; font-size: 1.05rem;
  background: var(--brick); color: var(--page); border: 0; border-radius: 0;
  padding: 16px 26px; min-height: 52px; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:hover { background: var(--brick-press); color: var(--page); }
.form-card .after { font-size: 0.86rem; color: var(--muted); margin-top: 16px; max-width: 54ch; }

.ask-band { --ground: var(--stone); background: var(--stone); padding: 100px 0; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 62px; align-items: start; }
.ask-grid h2 { max-width: 15ch; }
.ask-grid .sec-lede { margin-top: 22px; }
.ask-lap { --overw: 100%; }
.ask-lap .under { background: var(--brick); height: 86px; }
.ask-lap .over { margin-left: var(--lap); width: calc(100% - var(--lap)); }

/* --- closing tile ------------------------------------------------------ */
/* Built exactly like the cards above it: a photograph with a plate laid over
   its foot. Only the plate's ground and the button mark it as the action. */
.closer-lap { --overw: 620px; margin-top: 52px; }
.closer-lap .under img { height: 440px; object-position: 50% 58%; }
.closer-lap .over { background: var(--ink); color: var(--on-dark); padding: 42px 44px 44px; }
.closer-lap .over h2 { color: var(--on-dark); max-width: 14ch; }
.closer-lap .over p { margin-top: 16px; color: #C9CDD1; font-size: 1.06rem; max-width: 44ch; }
.closer-lap .over .btn { width: auto; align-self: flex-start; margin-top: 26px; padding-inline: 34px; }

/* --- interiors --------------------------------------------------------- */
.page-head { --ground: var(--ink); background-color: var(--ink); color: var(--on-dark); padding: 72px 0 82px; overflow: hidden; }
.page-head .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 66px; align-items: center;
}
/* The page head carries the same lap as everything else, so an interior opens
   with an object rather than with an empty half. */
.head-lap { --overw: 100%; }
.head-lap .under { background: var(--brick); height: 96px; }
.head-lap .over {
  background: var(--page); color: var(--ink);
  margin-left: var(--lap); width: calc(100% - var(--lap));
  padding: 28px 30px 30px;
}
.head-lap .over b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.16rem; margin-bottom: 10px; }
.head-lap .over p { margin: 0; font-size: 0.97rem; color: var(--muted); }
.page-head h1 { color: var(--on-dark); max-width: 17ch; font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
.page-head h1 em { font-style: normal; color: var(--clay); }
.crumb { font-size: 0.86rem; color: var(--on-dark-2); margin-bottom: 22px; }
.crumb a { color: #D2D6DA; font-weight: 600; }
.crumb a:hover { color: var(--on-dark); }
.pull { font-size: clamp(1.18rem, 1.7vw, 1.4rem); line-height: 1.45; color: #DCDFE2; max-width: 52ch; margin-top: 26px; font-weight: 500; }

.article { --ground: var(--page); background: var(--page); padding: 88px 0 98px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 76px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 { font-size: clamp(1.8rem, 2.4vw, 2.2rem); margin-top: 60px; margin-bottom: 16px; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 36px; margin-bottom: 10px; }
.prose p { font-size: 1.09rem; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.1em; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 1.06rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; background: var(--brick); }
.prose .said-note { background: var(--stone); padding: 26px 28px; margin: 34px 0; font-size: 1.04rem; }
.prose .said-note b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; }
.prose .fig { --overw: calc(100% - 56px); margin: 42px 0; }
.prose .fig .under img { height: 360px; }
.prose .fig .over { background: var(--stone); padding: 22px 24px 24px; }
.prose .fig .over p { margin: 0; font-size: 0.94rem; color: var(--muted); }

.aside { position: sticky; top: 118px; min-width: 0; }
.aside h4 { font-size: 0.9rem; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 14px; }
.aside ol { list-style: none; margin: 0 0 30px; padding: 0; }
.aside ol a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; color: var(--ink); font-weight: 600; font-size: 0.97rem; }
.aside ol a:hover { color: var(--brick); }
.aside-lap { --overw: calc(100% - 34px); }
.aside-lap { --lap: 34px; }
.aside-lap .under { background: var(--brick); height: 62px; }
.aside-lap .over { background: var(--ink); color: var(--on-dark); padding: 26px 24px 28px; margin-left: 34px; width: calc(100% - 34px); }
.aside-lap h4 { color: var(--on-dark); font-family: var(--display); font-size: 1.14rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.aside-lap p { font-size: 0.94rem; color: #C5C9CD; margin-bottom: 18px; }
.aside-lap .btn { font-size: 0.98rem; padding: 13px 18px; min-height: 46px; }

.siblings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; margin-top: 54px; }
.siblings .card .under img { height: 250px; }

/* --- sources and credits ----------------------------------------------- */
.src-list { list-style: none; margin: 48px 0 0; padding: 0; }
.src-list li { background: var(--page); padding: 26px 30px 28px; min-width: 0; }
.sec--page .src-list li { background: var(--stone); }
.src-list li + li { margin-top: 14px; }
.src-list h3 { font-size: 1.16rem; margin-bottom: 8px; }
.src-list p { font-size: 0.98rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.src-list p + p { margin-top: 8px; }
.src-list .when { font-size: 0.84rem; }

.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 50px; }
.credit { background: var(--page); padding: 22px 24px 24px; min-width: 0; }
.sec--page .credit { background: var(--stone); }
.credit h3 { font-size: 1.06rem; margin-bottom: 8px; }
.credit p { font-size: 0.92rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.credit p + p { margin-top: 6px; }

.thanks { --ground: var(--page); background: var(--page); padding: 112px 0 120px; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 66px; align-items: center; }
.thanks-lap { --overw: calc(100% - 56px); }
.thanks-lap .under img { height: 440px; }
.thanks-lap .over { background: var(--stone); padding: 24px 26px 26px; }
.thanks-lap .over p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.next-list { list-style: none; padding: 0; margin: 24px 0 0; }
.next-list li { margin-bottom: 14px; font-size: 1.05rem; }

/* --- footer ------------------------------------------------------------ */
.foot {
  --ground: var(--ink);
  background-color: var(--ink);
  background-image: url("/assets/tex/otis-redding.png");
  color: var(--on-dark-2); padding: 80px 0 40px; font-size: 0.95rem;
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.foot .mark { display: inline-flex; flex-direction: column; align-items: flex-start; margin-bottom: 16px; }
.foot .mark span { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--on-dark); letter-spacing: -0.03em; line-height: 0.98; }
.foot .mark b { background: var(--brick); color: var(--page); font-family: var(--display); font-weight: 800; font-size: 1.18rem; padding: 3px 10px 4px; margin-top: -2px; }
.foot p { max-width: 36ch; font-size: 0.93rem; }
.foot h4 { color: var(--on-dark); font-size: 0.87rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot ul li { min-height: 34px; display: flex; align-items: center; }
.foot li a { display: flex; align-items: center; min-height: 44px; }
.foot a { color: #CBD0D5; font-weight: 500; }
.foot a:hover { color: var(--on-dark); }
.foot-legal { margin-top: 64px; font-size: 0.84rem; color: #8E949A; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
/* No rule above the legal row. This site separates things with the ledge and
   with spacing, and one hairline here would be the single outlier. */
.foot-legal p { max-width: 78ch; margin: 0; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }

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

@media (prefers-reduced-motion: reduce) {
  .lean { animation: none; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  .card .under img { transition: none; }
  * { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 120px; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-copy, .hero-lap { grid-column: 1; grid-row: auto; }
  .hero h1 { max-width: 20ch; }
  .check-grid, .finding, .mountings, .region, .ask-grid, .thanks-grid, .qgrid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .verdict-lap { position: static; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .page-head .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .aside { position: static; }
  .aside-lap { max-width: 480px; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closer-lap { --overw: 100%; }
  .legal .band-img { height: 480px; }
  .legal-plate { margin-top: calc(var(--lap) * -1 - 60px); }
}

@media (max-width: 900px) {
  .nav .lg { display: none; }
  .nav .burger {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-weight: 700; color: var(--ink); background: none;
    border: 2px solid var(--ink); padding: 10px 16px; min-height: 46px; cursor: pointer;
  }
  .mobile[data-open="true"] { display: block; background: var(--page); padding: 6px 0 30px; }
  .mobile ul { list-style: none; margin: 0; padding: 0; }
  .mobile a { display: block; padding: 15px 0; font-weight: 700; font-size: 1.08rem; color: var(--ink); min-height: 44px; }
  .mobile a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
  .mobile .btn { margin-top: 18px; }
  .cards, .siblings, .credits { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gut: 22px; --lap: 26px; --ledge: 42px; }
  .sec, .ask-band { padding: 68px 0; }
  .legal { padding-bottom: 68px; }
  .legal .band-img { height: 340px; }
  .legal-plate { margin-top: calc(var(--lap) * -1 - 30px); padding: 30px 26px 32px; }
  .hero { padding: 54px 0 70px; }
  .hero-lap .over, .ask-lap .over, .verdict-lap .over { margin-left: var(--lap); width: calc(100% - var(--lap)); }
  .card .under img, .op-lap .under img, .find-lap .under img { height: 260px; }
  .place-lap .under img, .prose .fig .under img, .thanks-lap .under img, .closer-lap .under img { height: 250px; }
  .article { padding: 58px 0 68px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .form-card { padding: 26px 24px 28px; }
  .closer-lap .over { padding: 30px 26px 32px; }
  .specs { gap: 2px; }
}

@media (max-width: 480px) {
  :root { --gut: 20px; --lap: 20px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-grid, .facts, .specs { grid-template-columns: minmax(0, 1fr); }
  .mast .wrap { min-height: 76px; }
  .q summary { padding: 18px 18px; font-size: 1.05rem; }
  .q .a { padding: 0 18px 20px; }
  .legal .band-img { height: 280px; }
  /* the ladder table no longer forces a 720px min-width and a scroll the reader
     may never find: table-layout:fixed divides the six columns evenly across
     the screen and every heading and value wraps to fit, so the whole table
     stays on screen and nothing sits under the wrap */
  table.ladder { min-width: 0; table-layout: fixed; }
  .ladder th, .ladder td { padding: 8px 4px; font-size: .76rem; overflow-wrap: break-word; }
  .ladder thead th { font-size: .7rem; }
  /* the place and city names are the only cells holding one long unbroken
     word, so they get the extra share of the row; the four kWh columns only
     ever hold two or three digits and do not need it */
  .ladder th:nth-child(1), .ladder td:nth-child(1),
  .ladder th:nth-child(2), .ladder td:nth-child(2) { width: 21%; }
  .ladder th:nth-child(n+3), .ladder td:nth-child(n+3) { width: 14.5%; }
}