/* ------------------------------------------------------------------------
   Plug-in Solar South East

   The design source is the fact that makes this region different from every
   other one in England: it is not one network area, it is two. South Eastern
   Power Networks and Southern Electric Power Distribution divide it between
   them, and nothing on the ground tells you where the line runs. Your
   postcode does. So the site is built around a line.

   1. THE MEETING EDGE is the signature device. Two planes of different ground
      touch on a hard vertical edge at 58 per cent of the viewport, with no
      gutter, no rule and no shadow, and an object straddles that edge. It is
      used four times and only four times: the masthead, the hero, the closing
      tile and the interior page head. The one place the edge sits at 50 per
      cent instead is the pair of operator panels, because that is the one
      place where we genuinely cannot tell a reader which side they are on.

   2. THE STEPPED SEAM is the seam device. Where two sections meet, the
      horizontal boundary between their grounds jogs at that same 58 per cent
      line: a 56px block of the outgoing ground on the left, the incoming
      ground on the right. It is the only separator on the site. There is not
      one hairline rule at one seam anywhere, and the step never appears
      inside a component.

   3. THE CROSSING is the one ambient motion. A wide, very soft brass light
      travels left to right across the navy hero plane and over the meeting
      edge, transform only, travel equal to exactly one gradient period so the
      loop is seamless. Nothing else on the site moves by itself.

   Radius is 0 everywhere, so the glyphs are Lucide geometry rendered with
   square caps and mitred joins. Texture is used twice and no more: fine grain
   on the navy hero plane, and gravel on the flint ground of the mountings
   section. Never a textured object on a textured plane.
   ------------------------------------------------------------------------ */

:root {
  /* 7 roles. navy: the deep plane and the first operator. ink: all text on
     light grounds. chalk: the page, the colour of the cliff behind Brighton.
     flint: the alternate ground, 1.235 against chalk, which separates for the
     eye without reading as banding. brass: ACTION ONLY. steel: information,
     and the second operator. muted: secondary text. */
  --navy: #0F1B2D;
  --ink: #22303F;
  --chalk: #FCFBF7;
  --flint: #E2E5E6;
  --brass: #8C6212;
  --steel: #3F6E8C;
  --muted: #566575;

  /* derived, not new colours: navy lifted one step for a panel inside a navy
     plane, brass lifted for dark grounds and darkened for a pressed state,
     and one hairline tint used inside components only, never at a seam. */
  --navy-2: #17283E;
  --brass-lit: #E2AE55;
  --brass-press: #6E4C0D;
  --hair: #C9D0D4;

  --display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gut: 26px;
  --edge: 58%;     /* the line. every meeting edge and every seam step. */
  --step: 56px;    /* how far the seam jogs at that line */
}

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

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

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

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

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

/* Underlines are out. Links carry colour and weight; hover darkens. */
a { color: var(--brass); font-weight: 600; text-decoration: none; }
a:hover { color: var(--brass-press); }
a, a:hover, a:focus { text-decoration: none; }
.on-navy a { color: var(--brass-lit); }
.on-navy a:hover { color: #F0C47A; }

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

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

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

.ico { flex: none; }

/* --- the stepped seam --------------------------------------------------
   The only separator on this site. Two cells, no rule, full bleed. The left
   cell carries the ground the reader is leaving, the right cell the ground
   they are arriving at, so the boundary between the two sections steps up at
   the line. Never doubled with anything. ---------------------------------- */

.seam { display: grid; grid-template-columns: var(--edge) 1fr; height: var(--step); }
.seam i { display: block; }
.seam i:first-child { background: var(--from); }
.seam i:last-child { background: var(--to); }

/* --- masthead -----------------------------------------------------------
   The first use of the meeting edge: the wordmark stands on navy, the
   navigation on chalk, and they touch. ----------------------------------- */

.mast {
  position: relative;
  display: grid;
  grid-template-columns: var(--edge) 1fr;
  background: var(--chalk);
  align-items: stretch;
}
.mast-brand {
  background: var(--navy);
  display: flex; align-items: center;
  padding: 22px var(--gut) 22px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.brand {
  font-family: var(--display); font-weight: 800; color: var(--chalk);
  font-size: 1.42rem; line-height: 1.05; letter-spacing: -0.022em;
  display: block;
}
.brand b { display: block; color: var(--brass-lit); font-weight: 800; }
.brand:hover { color: var(--chalk); }

.mast-nav {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 0 max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 0 30px;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .drop > button {
  font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--ink);
  background: none; border: 0; padding: 14px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; min-height: 48px;
}
.nav > a:hover, .drop > button:hover { color: var(--brass); }
.drop { position: relative; }
.drop > button .ico { transition: transform .18s ease; }
.drop[data-open="true"] > button .ico { transform: rotate(180deg); }
.nav > a.cta-top {
  background: var(--brass); color: #fff; padding: 14px 22px;
  font-weight: 700; margin-left: 8px;
}
.nav > a.cta-top:hover { background: var(--brass-press); color: #fff; }

/* The dropdown panel is the meeting edge at component scale: a navy strip
   carrying the strapline meets the list on chalk. Every panel hangs from the
   left edge of its own trigger. */
.panel {
  position: absolute; top: 100%; left: 0; z-index: 50;
  width: 620px; max-width: 86vw;
  display: none; grid-template-columns: 34% 1fr;
  background: var(--chalk); box-shadow: 0 24px 60px rgba(15, 27, 45, .22);
}
.drop[data-open="true"] .panel { display: grid; }
.panel .strap {
  background: var(--navy); color: var(--chalk); margin: 0;
  padding: 24px 20px; font-size: .95rem; line-height: 1.45;
}
.panel ul { list-style: none; margin: 0; padding: 14px 0; }
.panel li a {
  display: block; padding: 12px 24px; color: var(--ink); font-weight: 700; font-size: 1.02rem;
}
.panel li a span { display: block; color: var(--muted); font-weight: 400; font-size: .92rem; line-height: 1.4; }
.panel li a:hover { background: var(--flint); color: var(--brass); }
.panel .all {
  display: block; padding: 14px 24px; background: var(--flint); color: var(--brass); font-weight: 700;
  grid-column: 2;
}

.burger {
  display: none; background: var(--navy); color: var(--chalk); border: 0;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  padding: 14px 20px; cursor: pointer; min-height: 48px;
}
.mobile { display: none; background: var(--navy); }
.mobile[data-open="true"] { display: block; }
.mobile ul { list-style: none; margin: 0; padding: 14px 0; }
.mobile li a { display: block; padding: 14px 0; color: var(--chalk); font-weight: 700; }
.mobile li a span { display: block; color: #A9B6C4; font-weight: 400; font-size: .92rem; }
.mobile .btn { margin: 10px 0 26px; }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--brass); color: #fff; font-family: var(--display);
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.005em;
  padding: 17px 28px; border: 0; cursor: pointer; min-height: 52px;
  transition: background .16s ease;
}
.btn:hover { background: var(--brass-press); color: #fff; }
/* a button is an object, not a link in running text, so it keeps its own
   colour on a navy plane rather than taking the on-navy link colour */
.on-navy a.btn { color: #fff; }
.on-navy a.btn:hover { color: #fff; }
.btn-ghost {
  background: none; color: var(--chalk); box-shadow: inset 0 0 0 2px rgba(252, 251, 247, .45);
}
.btn-ghost:hover { background: rgba(252, 251, 247, .12); color: var(--chalk); }
.on-navy a.btn-ghost { color: var(--chalk); }

/* --- hero ---------------------------------------------------------------
   The second use of the meeting edge, and the largest. Navy plane on the
   left, the photograph full bleed on the right, the enquiry card straddling
   the line so the one thing that decides everything, the address, sits on
   it. ---------------------------------------------------------------------*/

.hero { position: relative; background: var(--navy); color: var(--chalk); overflow: hidden; }
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; left: var(--edge); }
.hero-photo img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: 56% 42%; }

/* The navy plane carries the site's one texture and the site's one motion.
   Both are on the plane, never on an object standing on it. */
.hero-plane {
  position: absolute; top: 0; left: 0; bottom: 0; right: 42%;
  background-color: var(--navy);
  background-image:
    linear-gradient(178deg, rgba(63, 110, 140, .20) 0%, rgba(15, 27, 45, 0) 62%),
    linear-gradient(rgba(15, 27, 45, .68), rgba(15, 27, 45, .68)),
    url("/assets/tex/stardust.png");
}
.hero-plane::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 200%;
  background-image: linear-gradient(90deg,
    rgba(226, 174, 85, 0) 0%, rgba(226, 174, 85, .085) 25%,
    rgba(226, 174, 85, 0) 50%, rgba(226, 174, 85, .085) 75%,
    rgba(226, 174, 85, 0) 100%);
  animation: crossing 24s linear infinite;
  will-change: transform;
}
@keyframes crossing { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-plane::after { animation: none; } }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: var(--edge) 1fr; align-items: start;
}
/* the right padding keeps the headline, the lede and the chips clear of the
   enquiry card, which crosses the line from the other side */
.hero-say {
  padding: 76px 150px 84px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.hero-say h1 { color: var(--chalk); }
/* the accent phrase is a unit of meaning, so above phone width it never
   breaks across lines and balance wraps the rest of the headline around it.
   On a phone it wraps like anything else: at 320 the unbroken phrase is 307px
   wide and the hero's own clip would cut the last word off. */
.hero-say h1 em { font-style: normal; color: var(--brass-lit); }
@media (min-width: 560px) { .hero-say h1 em { white-space: nowrap; } }
.lede {
  font-size: 1.28rem; line-height: 1.5; color: #D3DBE3; max-width: 30em;
  margin: 26px 0 0;
}
.chips { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; }
.chips li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 1rem; line-height: 1.4; color: var(--chalk); font-weight: 600;
  background: var(--navy-2); padding: 14px 18px;
}
.chips .ico { color: var(--brass-lit); margin-top: 2px; }

.hero-take {
  padding: 112px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 84px 0;
  margin-left: -110px;
}
.hero-cap {
  position: absolute; z-index: 3; right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  bottom: 22px; margin: 0; max-width: 330px;
  background: var(--chalk); color: var(--muted); font-size: .82rem; line-height: 1.4;
  padding: 10px 14px;
}

/* --- the form. one component, used on the home page and at the foot of
   every interior page. ---------------------------------------------------- */

.form-card { background: var(--chalk); color: var(--ink); padding: 34px 34px 30px; }
.form-card h3 { font-size: 1.62rem; letter-spacing: -0.015em; font-weight: 800; }
.form-card .said { color: var(--muted); font-size: .98rem; margin: 12px 0 22px; }
.f { display: block; margin: 0 0 16px; }
.f span { display: block; font-size: .86rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.f input, .f select, .f textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--hair); padding: 13px 14px; min-height: 48px;
}
.f textarea { min-height: 84px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.f-row > * { min-width: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 6px; }
.form-card .after { font-size: .86rem; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }

/* --- generic sections --------------------------------------------------- */

.sec { padding: 84px 0 92px; }
.sec--chalk { background: var(--chalk); }
.sec--flint {
  /* the tile is real and it is held back by a wash of the ground's own colour,
     because gravel at full strength on a light plane reads as static */
  background-color: var(--flint);
  background-image:
    linear-gradient(rgba(226, 229, 230, .93), rgba(226, 229, 230, .93)),
    url("/assets/tex/gravel.png");
}
.sec--navy {
  background-color: var(--navy); color: var(--chalk);
  background-image: linear-gradient(184deg, rgba(63, 110, 140, .22) 0%, rgba(15, 27, 45, 0) 58%);
}
.sec--navy h2, .sec--navy h3 { color: var(--chalk); }
.sec-lede { font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 34em; margin: 20px 0 0; }
.sec--navy .sec-lede { color: #C6D0DA; }
.sec-head { max-width: 46rem; }
h2 em { font-style: normal; color: var(--brass); }
.sec--navy h2 em { color: var(--brass-lit); }

.attrib { font-size: .85rem; line-height: 1.5; color: var(--muted); margin: 22px 0 0; max-width: 54em; }
.attrib a { display: inline-block; padding: 12px 0; }
.sec--navy .attrib { color: #98A6B4; }

/* --- the operator pair --------------------------------------------------
   The one meeting edge on the site that sits at the middle rather than at 58
   per cent. That is deliberate: this is the single place where we cannot
   tell a reader which side of the line their house is on. ----------------- */

.pair { display: grid; grid-template-columns: 1fr 1fr; margin: 40px 0 0; }
.pair > div { padding: 36px 34px 34px; min-width: 0; }
.pair .op-a { background: var(--navy); color: var(--chalk); }
.pair .op-b { background: var(--steel); color: #fff; }
.pair h3 { color: #fff; font-size: 1.46rem; }
.pair .who { font-size: .92rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brass-lit); margin: 0 0 14px; }
.pair .op-b .who { color: #F2F8FC; }
.pair p { font-size: 1rem; line-height: 1.55; }
.pair .op-a p { color: #C6D0DA; }
.pair .op-b p { color: #EAF2F7; }

.decide { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; margin: 40px 0 0; }
.decide > * { min-width: 0; }
.decide .five {
  background: var(--navy); color: var(--chalk); padding: 30px 32px;
}
.decide .five p { color: #C6D0DA; font-size: 1rem; }
.decide .five .n {
  font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: var(--brass-lit); margin: 0 0 10px; font-variant-numeric: tabular-nums;
}

/* --- figures and captions ----------------------------------------------- */

figure { margin: 0; }
figcaption { font-size: .85rem; line-height: 1.5; color: var(--muted); margin: 12px 0 0; max-width: 46em; }
.sec--navy figcaption, .on-navy figcaption { color: #98A6B4; }

.fig-wide img { width: 100%; height: auto; }

/* --- the three cards ---------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 46px 0 0; }
.card { background: #fff; display: flex; }
.card > a { display: flex; flex-direction: column; color: var(--ink); font-weight: 400; width: 100%; }
.card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
/* the glyph sits inside the image corner in a square chip that fades into
   the photograph, never plonked outside it */
.card-chip {
  position: absolute; left: 0; bottom: 0; width: 84px; height: 84px;
  display: flex; align-items: flex-end; padding: 0 0 14px 14px; color: var(--chalk);
  /* a radial quarter circle anchored in the image corner, fading to nothing,
     so the chip has no hard edge anywhere. Measured on composited pixels:
     the glyph sits where the wash is still dense enough to hold 3:1. */
  background-image: radial-gradient(circle at 0 100%,
    rgba(15, 27, 45, .90) 0%, rgba(15, 27, 45, .78) 42%, rgba(15, 27, 45, 0) 100%);
}
.card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card-body p { color: var(--muted); font-size: .98rem; margin: 12px 0 0; }
.card .go {
  margin-top: auto; padding-top: 20px; color: var(--brass); font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px; font-size: 1rem;
}
.card:hover .go { color: var(--brass-press); }
.card:hover .card-img img { transform: scale(1.035); }
.card-img img { transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .card-img img { transition: none; } }

/* --- the photograph band ------------------------------------------------ */

.band { position: relative; }
.band > img { width: 100%; height: 520px; object-fit: cover; }
.band .wrap { position: absolute; inset: 0; display: flex; align-items: center; }
.band-plate {
  background: var(--navy); color: var(--chalk); padding: 38px 40px; max-width: 560px;
  background-image: linear-gradient(170deg, rgba(63, 110, 140, .26) 0%, rgba(15, 27, 45, 0) 70%);
}
.band-plate .n {
  font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: .94; color: var(--brass-lit); margin: 0 0 12px; font-variant-numeric: tabular-nums;
}
.band-plate .n small { display: block; font-size: 1.05rem; font-weight: 700; color: var(--chalk); letter-spacing: .01em; margin-top: 8px; }
.band-plate p { color: #D3DBE3; font-size: 1.02rem; }
.band-note { background: var(--navy-2); color: #A9B6C4; padding: 16px 0; font-size: .84rem; }

/* --- the mountings ------------------------------------------------------ */

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; margin: 46px 0 0; align-items: start; }
.split > * { min-width: 0; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { margin: 0 0 26px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 10px; }
.bar-head b { font-family: var(--display); font-weight: 700; font-size: 1.04rem; letter-spacing: -0.01em; }
.bar-head span {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bar-head span i { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--muted); }
.bar-track { height: 16px; background: #fff; }
.bar-fill { height: 100%; background: var(--navy); }
.bars li.low .bar-fill { background: var(--steel); }
.stack { display: grid; gap: 30px; }

/* --- questions ---------------------------------------------------------- */

.qs { margin: 40px 0 0; background: #fff; }
.q:nth-child(even) { background: var(--flint); }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -0.012em;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 56px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--brass); transition: transform .2s ease; }
.q[open] summary .ico { transform: rotate(45deg); }
.q summary:hover { color: var(--brass); }
.q .a { padding: 0 26px 24px; color: var(--muted); max-width: 62em; }
.q .a p { font-size: 1rem; }

/* --- the closing tile ---------------------------------------------------
   The fourth and last use of the meeting edge. It is built exactly like the
   photo cards, a photograph and a body, so it sits in the page as an object
   of the same family; only the navy body and the button mark it as the
   action. ---------------------------------------------------------------- */

.closer { display: grid; grid-template-columns: 1fr var(--edge); align-items: stretch; }
.closer > * { min-width: 0; }
.closer-img img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.closer-plate {
  background: var(--navy); color: var(--chalk);
  background-image: linear-gradient(200deg, rgba(63, 110, 140, .24) 0%, rgba(15, 27, 45, 0) 66%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 62px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 62px 58px;
}
.closer-plate h2 { color: var(--chalk); max-width: 16em; }
.closer-plate p { color: #C6D0DA; font-size: 1.12rem; margin: 20px 0 30px; max-width: 34em; }
.closer-plate .btn { align-self: flex-start; }

/* --- the ask band, at the foot of every interior ------------------------ */

.ask-band { background: var(--navy); color: var(--chalk); padding: 84px 0 92px;
  background-image: linear-gradient(186deg, rgba(63, 110, 140, .2) 0%, rgba(15, 27, 45, 0) 60%); }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ask-grid > * { min-width: 0; }
.ask-band h2 { color: var(--chalk); }
.ask-band .sec-lede { color: #C6D0DA; }
.counties { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.counties li {
  background: var(--navy-2); color: #D3DBE3; font-size: .9rem; font-weight: 600;
  padding: 8px 13px;
}

/* --- footer ------------------------------------------------------------- */

.foot { background: var(--navy); color: #C6D0DA; padding: 0; }
.foot-top { display: grid; grid-template-columns: var(--edge) 1fr; }
.foot-say {
  padding: 62px 58px 56px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.foot-say .mark { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--chalk); line-height: 1.05; margin: 0 0 18px; letter-spacing: -0.022em; }
.foot-say .mark b { color: var(--brass-lit); display: block; }
.foot-say p { font-size: 1rem; max-width: 34em; }
.foot-links {
  background: var(--navy-2);
  padding: 62px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 56px 40px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px;
}
.foot-links h4 { color: var(--chalk); margin: 0 0 14px; font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; }
.foot-links ul { list-style: none; margin: 0; padding: 0; }
/* touch targets: every footer row is at least 44px tall on a phone */
.foot-links li { margin: 0; font-size: .96rem; }
.foot-links li:not(:has(a)) { padding: 11px 0; }
.foot-links a { color: #C6D0DA; font-weight: 400; display: block; padding: 11px 0; }
.foot-links a:hover { color: var(--brass-lit); }
.foot-legal { background: var(--navy); padding: 26px 0 34px; }
.foot-legal .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: flex-start; }
.foot-legal p { font-size: .82rem; line-height: 1.55; color: #93A2B1; max-width: 62em; margin: 0; }
.foot-legal a { color: var(--brass-lit); font-weight: 600; display: inline-block; padding: 12px 0; }

/* --- interior pages ----------------------------------------------------- */

.page-head { display: grid; grid-template-columns: var(--edge) 1fr; background: var(--chalk); }
.page-head > * { min-width: 0; }
.page-head-say {
  background: var(--navy); color: var(--chalk);
  background-image: linear-gradient(182deg, rgba(63, 110, 140, .2) 0%, rgba(15, 27, 45, 0) 64%);
  padding: 68px 58px 74px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.page-head h1 { color: var(--chalk); font-size: clamp(2.5rem, 4.3vw, 3.7rem); }
.page-head h1 em { font-style: normal; color: var(--brass-lit); }
.crumb { font-size: .88rem; color: #A9B6C4; margin: 0 0 8px; font-weight: 600; }
.crumb a { color: var(--brass-lit); display: inline-block; padding: 12px 0; }
.page-head-pull {
  display: flex; align-items: center;
  padding: 68px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 74px 40px;
}
.pull { font-family: var(--display); font-weight: 700; font-size: 1.32rem; line-height: 1.4; letter-spacing: -0.012em; color: var(--ink); margin: 0; }

.article { padding: 76px 0 84px; background: var(--chalk); }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 60px; align-items: start; }
.prose { max-width: 42em; }
.prose h2 { font-size: clamp(1.9rem, 2.6vw, 2.3rem); margin: 52px 0 16px; scroll-margin-top: 30px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.08rem; line-height: 1.68; }
.prose ul { margin: 0 0 1.2em; padding: 0 0 0 22px; }
.prose li { margin: 0 0 10px; font-size: 1.06rem; line-height: 1.6; }
.prose figure { margin: 30px 0 34px; }
.prose figure img { width: 100%; height: auto; }
.said-note { background: var(--flint); padding: 26px 28px; margin: 30px 0 34px; }
.said-note b { font-family: var(--display); font-size: 1.1rem; display: block; margin: 0 0 10px; }
.said-note p { font-size: 1rem; margin: 0; color: var(--ink); }

.aside { position: sticky; top: 26px; }
.aside h4 { font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.aside ol { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: a; }
.aside ol li { margin: 0 0 4px; }
.aside ol a { display: block; padding: 12px 0; color: var(--ink); font-weight: 600; font-size: .98rem; }
.aside ol a:hover { color: var(--brass); }
.aside-card { background: var(--navy); color: var(--chalk); padding: 26px 26px 28px; }
.aside-card h4 { color: var(--brass-lit); }
.aside-card p { font-size: .96rem; color: #C6D0DA; margin: 0 0 20px; }
.aside-card .btn { width: 100%; }

.siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.after-sec { padding: 76px 0 84px; }

/* --- thank you and credits ---------------------------------------------- */

.thanks-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.thanks-grid > * { min-width: 0; }
.next-list { list-style: none; padding: 0; margin: 22px 0 0; }
.next-list li { margin: 0 0 6px; font-size: 1.04rem; }
.next-list a { display: inline-block; padding: 10px 0; }

.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 36px 0 0; }
.credit { background: #fff; padding: 24px 26px 26px; }
.credit h3 { font-size: 1.1rem; }
.credit p { font-size: .94rem; color: var(--muted); margin: 10px 0 0; }
/* credit lines carry two links each, so they get a tappable height of their own */
.credit a { display: inline-block; padding: 12px 0; }

/* --- motion: the scroll reveal ------------------------------------------ */

.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .1s; }
.rise.d2 { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

/* --- responsive ---------------------------------------------------------
   The line is a desktop idea. Below 1024 the region stops being two columns
   and the page runs as one, because a 390px screen cannot hold a boundary
   and still hold a sentence. --------------------------------------------- */

@media (max-width: 1180px) {
  .hero-take { margin-left: -70px; padding-top: 92px; }
  .hero-say { padding-right: 106px; }
  .split { gap: 36px; }
  .article .wrap { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
}

@media (max-width: 1024px) {
  :root { --step: 40px; }
  .mast { grid-template-columns: 1fr auto; }
  .mast-brand { padding-right: 20px; }
  .mast-nav { display: none; }
  .burger { display: block; }
  .mobile .wrap { padding-top: 4px; padding-bottom: 4px; }

  /* the hero keeps overflow hidden at every width: the crossing is a 200 per
     cent wide pseudo element and without the clip it adds a page wide
     horizontal scroll that an element level overflow probe cannot see,
     because a pseudo element is not in the document tree. */
  .hero-photo { position: relative; left: 0; height: 320px; }
  .hero-plane { right: 0; bottom: auto; height: 100%; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-say { padding: 56px var(--gut) 40px; }
  .hero-take { margin-left: 0; padding: 0 var(--gut) 56px; }
  /* stays a positioned element (relative, not static) so it keeps its stacking
     layer and paints above .hero-plane instead of falling behind it; the
     desktop rule's right/bottom offsets must be cleared or they push a
     relatively positioned box away from its in-flow spot */
  .hero-cap { position: relative; right: auto; bottom: auto; max-width: none; margin: 0; }

  .cards { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .decide { grid-template-columns: 1fr; gap: 30px; }
  .closer { grid-template-columns: 1fr; }
  .closer-img img { min-height: 300px; }
  .closer-plate { padding: 52px var(--gut) 56px; }
  .ask-grid { grid-template-columns: 1fr; gap: 40px; }

  .page-head { grid-template-columns: 1fr; }
  .page-head-say { padding: 56px var(--gut) 50px; }
  .page-head-pull { padding: 34px var(--gut) 40px; }
  .article .wrap { grid-template-columns: 1fr; gap: 48px; }
  .aside { position: static; }
  .thanks-grid { grid-template-columns: 1fr; gap: 36px; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-say { padding: 56px var(--gut) 44px; }
  .foot-links { padding: 46px var(--gut) 50px; }
}

@media (max-width: 760px) {
  .sec { padding: 62px 0 68px; }
  .ask-band { padding: 62px 0 68px; }
  .cards { grid-template-columns: 1fr; }
  .siblings { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .credits { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: 1fr 1fr; }
  .band > img { height: 380px; }
  .band .wrap { position: static; }
  .band { background: var(--navy); }
  .band-plate { max-width: none; padding: 30px var(--gut) 36px; }
  .band .wrap { padding: 0; }
}

@media (max-width: 460px) {
  :root { --gut: 18px; }
  .f-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px 22px 24px; }
  .hero-say { padding-top: 44px; }
  .foot-legal .wrap { flex-direction: column; }
}