/* ------------------------------------------------------------------------
   Plug-in Solar West Mids

   The design source is Cradley Heath, not the socket in an electrician's
   bag: this corner of the Black Country forged chain for a living, by hand,
   one link at a time, right up to the anchor chain ocean liners carried.
   Three decisions carry the whole site and nothing else is allowed to
   compete with them.

   1. THE LINK is the signature device. Every object that stands on the
      page (the hero dock, every card, the form, the closing tile, the
      credit) is caught at a single top corner by one drawn iron ring, half
      on the object and half off it, the way a chainmaker closed one link
      through the last before it went cold. One point, never two, never a
      frame: nothing here is bordered on every side, and a full-bleed
      photograph that IS the ground carries no link, because there is
      nothing for the ring to catch.

   2. THE COUPLING IS THE SEAM AND THE ONLY SEAM. Every join between two
      sections, whatever the two grounds are, is a run of linked rings
      crossing the full width, iron on the dark plate. Nothing here is ever
      parted by a rule sitting on one side of a box; the coupling is the one
      and only device for that job, drawn the same way at every join.

   3. THE DRAW is the one ambient motion. A soft band of warm light moves
      sideways once across the hero photograph, the way hot iron is drawn
      through a die to make wire before it is bent into a link. Nothing
      else on the site moves by itself.

   Radius is 0 everywhere, so the glyph set is drawn with square caps and
   mitred joins (Lucide geometry, ISC, rendered sharp) to match the corners.
   ------------------------------------------------------------------------ */

:root {
  /* 6 roles. plate: the dark plane. ink: all text. chalk: the page. board:
     the alternate ground, a cool steel-blue grey next to warm chalk, which
     is where two grounds part without reading as a stripe. action: THE
     single accent, forge-iron orange, spent on links, buttons, the
     headline phrase and every figure. muted: secondary text. */
  --plate: #14181D;
  --ink: #23282E;
  --chalk: #F4F2EC;
  --board: #E1E4E6;
  --action: #AC360A;
  --muted: #5B6570;

  /* derived, not new colours. action-lit is the action colour raised for a
     dark ground (headline phrase, chip icons, the warning label): AA
     against --plate, exactly as --action is AA against --chalk and
     --board. action-press is a pressed/hover state, darker again.
     action-fill is the same hue at full saturation, spent only where the
     colour never carries text of its own (the bar fill, list bullets):
     those are read as shape, not read as type, so WCAG's text ratio does
     not apply to them. one hairline tint used inside components only
     (never at a seam, which is always the coupling). */
  --action-lit: #FF9257;
  --action-press: #8A2B08;
  --action-fill: #DB5A1E;
  --hair: #CBD0D2;

  --display: "Lora", "Georgia", serif;
  --body: "Commissioner", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gut: 26px;
  --fx: 8px; /* the link: half the ring, so an object needs only --fx clear
                of its neighbour for the ring to sit fully inside the gutter */
}

* { 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;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); font-weight: 700; }
h2 { font-size: clamp(2.1rem, 3.2vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.004em; }
h4 { font-size: 1.02rem; line-height: 1.25; font-family: var(--body); font-weight: 700; }

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

a { color: var(--action); font-weight: 600; text-decoration: none; }
a:hover { color: var(--action-press); }
a, a:hover, a:focus { text-decoration: none; }

:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.on-dark :focus-visible, .mast-strip :focus-visible { outline-color: var(--action-lit); }

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

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

/* --- the link -------------------------------------------------------------
   One drawn iron ring at an object's top-left corner, half on and half off
   the edge, exactly like a chain link closed through the eyelet of the
   thing it holds. A single point, never a matched pair, never a frame. */
.link { position: relative; }
.link::after {
  content: "";
  position: absolute;
  top: -13px; left: 22px;
  width: 34px; height: 22px;
  border: 6px solid #767D83;
  border-radius: 50%;
  transform: rotate(-34deg);
  background: transparent;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.18);
  z-index: 4;
}

/* --- the coupling: the seam and the only seam ------------------------------
   A run of linked rings, full width, between every two sections regardless
   of which grounds meet. Always iron on the dark plate, never the
   section's own colour. */
.coupling {
  height: 17px;
  background-color: var(--plate);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'%3E%3Cellipse cx='11' cy='9' rx='9' ry='5.4' fill='none' stroke='%235B6570' stroke-width='3'/%3E%3Cellipse cx='33' cy='9' rx='9' ry='5.4' fill='none' stroke='%235B6570' stroke-width='3' transform='rotate(90 33 9)'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.55);
}

/* --- masthead ------------------------------------------------------------ */
.mast-strip { background: var(--plate); color: #A9B0B5; font-size: 0.815rem; letter-spacing: 0.005em; }
.mast-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between;
  min-height: 40px; padding-top: 8px; padding-bottom: 8px;
}
.mast-strip ol { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.mast-strip li + li::before { content: "\00B7"; margin-right: 14px; color: #5E676D; }
.mast-strip b { color: var(--action-lit); font-weight: 600; }

.mast { background: var(--chalk); position: sticky; top: 0; z-index: 50; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; }
.brand {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  letter-spacing: -0.01em; color: var(--ink); line-height: 1.08;
  padding: 4px 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center;
}
.brand:hover { color: var(--ink); }
.brand b { color: var(--action); font-weight: 700; display: block; }

.nav { display: flex; align-items: center; gap: 6px; }
.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(--action); }
.nav .ico { flex: none; }
.nav [aria-expanded="true"] { color: var(--action); }
.nav [aria-expanded="true"] .ico { transform: rotate(180deg); }

.nav .cta-top { background: var(--action); color: var(--chalk); padding: 13px 20px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.nav .cta-top:hover { background: var(--action-press); color: var(--chalk); }

.drop { position: relative; }
.panel {
  position: absolute; top: calc(100% + 12px); left: 0; width: 392px; max-width: calc(100vw - 40px);
  background: var(--chalk); border: 2px solid var(--ink); padding: 22px 24px 24px; display: none;
}
.drop[data-open="true"] .panel { display: block; }
.panel p.strap { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { margin-top: 2px; }
.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(--action); }
.panel li a:hover span { color: var(--muted); }
.panel .all { display: block; margin-top: 16px; font-weight: 700; color: var(--action); }

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

/* --- hero: photo led, the form docked on its lower edge -------------------
   Structurally different from a two column hero: one full-bleed photograph
   carries the whole top of the page, the headline and the chip strip sit
   over it, and the form is a single card pulled up by negative margin so
   its own top edge rests on the photograph's bottom edge, the rest of it
   standing on the ink ground below. Nothing here is a left/right split. */
.hero { position: relative; background: var(--plate); padding-bottom: 64px; }
/* the photo is pinned behind everything else in .hero rather than wrapping
   the headline, so a tall headline or chip strip is never clipped by the
   photo's own fixed-height overflow box; only the photo itself clips */
.hero-photo { position: absolute; top: 0; left: 0; right: 0; height: 720px; overflow: hidden; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(15, 18, 22, 0.86) 0%, rgba(15, 18, 22, 0.52) 34%, rgba(15, 18, 22, 0.28) 56%, rgba(15, 18, 22, 0.82) 100%);
}
.draw {
  position: absolute; top: 0; bottom: 0; left: -700px; width: calc(100% + 1400px);
  background-image: repeating-linear-gradient(
    90deg, rgba(255, 146, 87, 0) 0px, rgba(255, 146, 87, 0.16) 340px, rgba(255, 146, 87, 0) 700px
  );
  mix-blend-mode: screen;
  pointer-events: none; animation: draw 24s linear infinite;
}
@keyframes draw { from { transform: translateX(0); } to { transform: translateX(700px); } }

.hero-copy { position: relative; z-index: 2; padding-top: 74px; }
/* kept clear of the right-hand column the dock will claim below, so the
   chip strip can never run under the docked form at any content length */
.hero-copy .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.hero-copy .wrap > * { max-width: 760px; }
.hero h1 { color: var(--chalk); max-width: 18ch; text-wrap: pretty; }
.hero h1 em { font-style: italic; color: var(--action-lit); }
.hero .lede { font-size: 1.2rem; line-height: 1.52; color: #E3E6E7; max-width: 46ch; margin: 22px 0 0; }

.chips-strip {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; list-style: none; padding: 0; max-width: 46ch;
}
.chips-strip li {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24);
  color: #F2F4F4; padding: 10px 16px; font-size: 0.9rem; font-weight: 500; line-height: 1.2;
}
.chips-strip .ico { color: var(--action-lit); flex: none; }

/* .hero-dock and its .wrap are both full width even though the card inside
   is right aligned, and the raised z-index lifts that whole empty span
   above the chip strip for hit-testing even though nothing is painted
   there; pointer-events removes the empty span from hit-testing entirely
   and restores it only on the card itself, so nothing on screen moves */
.hero-dock { position: relative; z-index: 3; margin-top: -64px; pointer-events: none; }
.hero-dock-inner { max-width: 500px; margin-left: auto; pointer-events: auto; }
.hero .form-card { background: var(--chalk); }

/* --- the light band -------------------------------------------------------- */
.light-band { position: relative; background: var(--plate); }
.light-band > img { width: 100%; height: 480px; object-fit: cover; object-position: 50% 46%; }
.light-band .wrap { position: relative; }
.figure-plate {
  position: absolute; left: var(--gut); bottom: 0; transform: translateY(-72px);
  background: var(--chalk); color: var(--ink); padding: 34px 38px 36px; max-width: 560px;
}
.figure-plate .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 4.6vw, 3.8rem);
  line-height: 0.98; color: var(--action); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.figure-plate .n small { font-size: 0.32em; font-weight: 700; color: var(--ink); letter-spacing: 0; font-family: var(--body); }
.figure-plate p { margin: 14px 0 0; font-size: 1.06rem; }
.band-note { background: var(--plate); color: #9BA3A8; font-size: 0.83rem; padding: 0 0 22px; }
.band-note .wrap { padding-top: 58px; }

/* --- sections --------------------------------------------------------------- */
.sec { padding: 92px 0; }
.sec--board { background: var(--board); }
.sec--chalk { background: var(--chalk); }
.sec--plate { background: var(--plate); color: var(--chalk); }

.sec > .wrap > h2 { max-width: 20ch; }
.sec-lede { font-size: 1.18rem; color: var(--muted); max-width: 58ch; margin-top: 20px; }
.sec--plate .sec-lede { color: #C4CBCE; }

.attrib { font-size: 0.83rem; color: var(--muted); margin-top: 26px; max-width: 76ch; }
.sec--plate .attrib { color: #98A1A5; }

/* --- service cards ------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 62px; }
.card { display: flex; flex-direction: column; }
.card > a { display: flex; flex-direction: column; flex: 1; color: inherit; }
.card > a:hover { color: inherit; }
.card-img { position: relative; overflow: hidden; background: var(--plate); }
.card-img img { width: 100%; height: 296px; object-fit: cover; transition: transform 480ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.card > a:hover .card-img img { transform: scale(1.035); }
.card-body { background: var(--chalk); padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.sec--board .card-body { background: var(--chalk); }
.sec--chalk .card-body { background: var(--board); }
.card-body h3 { margin-bottom: 10px; }
.card-body p { color: var(--muted); font-size: 1rem; }
.card-body .go { margin-top: auto; padding-top: 18px; font-weight: 700; color: var(--action); }
.card > a:hover .go { color: var(--action-press); }

.card-glyph {
  background: var(--plate); color: var(--action-lit); height: 296px;
  display: flex; align-items: center; justify-content: center;
}
.card-glyph svg { width: 96px; height: 96px; }

/* --- the kit section: two plates, side by side --------------------------- */
.kit-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 58px; }
.kit-plate { background: var(--chalk); padding: 34px 32px 36px; }
.sec--board .kit-plate { background: var(--chalk); }
.kit-plate .ico { color: var(--action); }
.kit-plate h3 { margin: 16px 0 10px; font-size: 1.4rem; }
.kit-plate p { color: var(--muted); }
.kit-plate ul { list-style: none; margin: 16px 0 0; padding: 0; }
.kit-plate li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 0.98rem; color: var(--ink); }
.kit-plate li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 9px; height: 9px; background: var(--action-fill); }

/* --- the finding band (dark, no photo needed) ----------------------------- */
.finding { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 62px; align-items: center; }
.finding h2 { color: var(--chalk); max-width: 18ch; }
.finding p { color: #D0D6D8; font-size: 1.08rem; max-width: 58ch; margin-top: 22px; }
.finding .warn { display: inline-flex; align-items: center; gap: 10px; color: var(--action-lit); font-weight: 700; font-size: 1.02rem; margin-bottom: 18px; }
.finding-glyph {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 40px; display: flex; align-items: center; justify-content: center;
}
.finding-glyph svg { width: 100%; height: auto; max-width: 320px; }

/* --- measure bars ---------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 62px; align-items: start; margin-top: 58px; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li + li { margin-top: 30px; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bar-head b { font-weight: 600; font-size: 1.04rem; }
.bar-head span { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bar-head span i { font-style: normal; font-size: 0.52em; font-weight: 700; color: var(--muted); }
.bar-track { height: 16px; background: var(--hair); margin-top: 11px; }
.bar-fill { height: 100%; background: var(--action-fill); }
.stack { display: grid; gap: 34px; }
.stack figure { margin: 0; }
.stack figure img { width: 100%; height: 264px; object-fit: cover; }
.stack figcaption { font-size: 0.85rem; color: var(--muted); margin-top: calc(var(--fx) + 14px); }

/* --- areas ------------------------------------------------------------------ */
.region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 62px; align-items: center; }
.region figure { margin: 0; }
.region figure img { width: 100%; height: 392px; object-fit: cover; }
.region figcaption { font-size: 0.85rem; color: var(--muted); margin-top: calc(var(--fx) + 15px); }
.counties { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 28px 0 0; padding: 0; }
.counties li { background: var(--board); color: var(--ink); padding: 9px 14px; font-size: 0.92rem; font-weight: 600; }
.sec--board .counties li { background: var(--chalk); }

/* --- area photo grid (areas page) ------------------------------------------ */
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; margin: 34px 0 46px; }
.area-grid figure { margin: 0; }
.area-grid img { width: 100%; height: 240px; object-fit: cover; }
.area-grid figcaption { font-size: 0.85rem; color: var(--muted); margin-top: calc(var(--fx) + 14px); }

/* --- questions --------------------------------------------------------------- */
.qs { margin-top: 52px; max-width: 900px; }
.qgrid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 58px; align-items: start; }
.qgrid > h2 { margin-top: 6px; }
.qgrid .qs { margin-top: 0; max-width: none; }
.q { border: 2px solid var(--hair); background: var(--chalk); }
.q + .q { margin-top: 14px; }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 24px;
  font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1.28;
  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(--action); margin-top: 2px; transition: transform 200ms ease; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 24px 24px; color: var(--muted); max-width: 70ch; }
.sec--board .q { border-color: #C7CCCE; }
.sec--chalk .q { background: var(--board); border-color: #CBD0D2; }

/* --- form ---------------------------------------------------------------------- */
.form-card { background: var(--chalk); color: var(--ink); padding: 34px 34px 36px; }
.form-card h2, .form-card h3 { margin-bottom: 8px; }
.form-card h3 { font-size: 1.5rem; font-weight: 700; }
.form-card .said { color: var(--muted); font-size: 0.99rem; margin-bottom: 22px; max-width: 46ch; }
.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(--action); 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(--action); color: var(--chalk); 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(--action-press); }
.btn--ink { background: var(--ink); }
.btn--ink:hover { background: #171B20; }
.form-card .after { font-size: 0.86rem; color: var(--muted); margin-top: 16px; max-width: 52ch; }

.ask-band { background: var(--board); padding: 92px 0; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 62px; align-items: start; }
.ask-grid h2 { max-width: 15ch; }
.ask-grid .sec-lede { margin-top: 22px; }
.ask-grid .form-card { background: var(--chalk); }

/* --- closing tile ----------------------------------------------------------- */
.closer { background-color: var(--plate); padding: 84px 0; }
.closer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.closer-grid img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.closer-plate { background: var(--chalk); color: var(--ink); padding: 52px 50px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 { max-width: 15ch; }
.closer-plate p { margin-top: 18px; color: var(--muted); font-size: 1.06rem; max-width: 42ch; }
.closer-plate .btn { width: auto; align-self: flex-start; margin-top: 28px; padding-inline: 34px; }

/* --- interiors ---------------------------------------------------------------- */
.page-head { background: var(--plate); color: var(--chalk); padding: 68px 0 76px; position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: var(--chalk); max-width: 17ch; font-size: clamp(2.4rem, 4.2vw, 3.7rem); }
.page-head h1 em { font-style: italic; color: var(--action-lit); }
.crumb { font-size: 0.86rem; color: #98A1A5; margin-bottom: 22px; }
.crumb a { color: #C0C7CA; font-weight: 600; }
.crumb a:hover { color: var(--chalk); }
.pull { font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: 1.45; color: #D8DDDF; max-width: 50ch; margin-top: 26px; font-weight: 500; }

.article { padding: 82px 0 96px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 74px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 { font-size: clamp(1.65rem, 2.3vw, 2.05rem); margin-top: 56px; margin-bottom: 16px; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 34px; margin-bottom: 10px; }
.prose p { font-size: 1.08rem; }
.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.05rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 10px; background: var(--action-fill); }
.prose figure { margin: 40px 0 46px; }
.prose figure img { width: 100%; height: 336px; object-fit: cover; }
.prose figcaption { font-size: 0.87rem; color: var(--muted); margin-top: calc(var(--fx) + 15px); max-width: 60ch; }
.prose .said-note { background: var(--board); padding: 26px 28px; margin: 34px 0; font-size: 1.03rem; }
.prose .said-note b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }

.aside { position: sticky; top: 110px; 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 li + li { margin-top: 2px; }
.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(--action); }
.aside-card { background: var(--ink); color: var(--chalk); padding: 26px 24px 28px; }
.aside-card h4 { color: var(--chalk); font-family: var(--display); font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.aside-card p { font-size: 0.94rem; color: #C0C7CA; margin-bottom: 18px; }
.aside-card .btn { font-size: 0.98rem; padding: 13px 18px; min-height: 46px; }

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

/* --- credits and thanks -------------------------------------------------------- */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 54px; }
.credit { background: var(--chalk); padding: 22px 24px 24px; border: 2px solid var(--hair); min-width: 0; }
.credit h3 { font-size: 1.06rem; margin-bottom: 8px; }
.credit p { font-size: 0.93rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.credit p + p { margin-top: 6px; }

.thanks { padding: 106px 0 118px; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 66px; align-items: center; }
.thanks-grid img { width: 100%; height: 452px; object-fit: cover; }

/* --- footer -------------------------------------------------------------------- */
.foot { background-color: var(--plate); color: #A9B0B5; padding: 74px 0 40px; font-size: 0.95rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.foot .mark { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--chalk); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 14px; }
.foot .mark b { display: block; color: var(--action-lit); }
.foot p { max-width: 34ch; font-size: 0.93rem; }
.foot h4 { color: var(--chalk); 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: #C4CBCE; font-weight: 500; }
.foot a:hover { color: var(--chalk); }
.foot-legal { margin-top: 64px; padding-top: 0; font-size: 0.84rem; color: #838C90; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.foot-legal p { max-width: 74ch; 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) {
  .draw { animation: none; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  .card-img img { transition: none; }
  * { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 116px; }

/* --- responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .aside { position: static; }
  .aside-card { max-width: 460px; }
  .finding, .split, .region, .ask-grid, .thanks-grid, .qgrid, .kit-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer-grid img { min-height: 300px; }
  .hero-dock-inner { max-width: 460px; }
}

@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(--chalk); padding: 8px 0 30px; }
  .mobile ul { list-style: none; margin: 0; padding: 0; }
  .mobile a { display: block; padding: 15px 0; font-weight: 700; font-size: 1.1rem; 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; }
  .light-band > img { height: 380px; }
  .figure-plate { position: relative; inset: auto; transform: none; max-width: none; margin-top: 0; }
  .light-band .wrap { padding-bottom: 0; }
  .band-note .wrap { padding-top: 26px; }
  .hero-photo { height: 560px; }
  /* narrower than desktop, and the chip strip can wrap to three rows here,
     so the dock no longer tries to overlap a precise pixel of the photo:
     it follows in normal flow with a plain gap, never risking covering
     wrapped chip text underneath it */
  .hero-dock { margin-top: 28px; }
  .hero-dock-inner { max-width: none; margin-left: 0; }
  .area-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --gut: 22px; --fx: 7px; }
  .sec, .ask-band { padding: 62px 0; }
  .closer { padding: 56px 0; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .siblings, .credits { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero-photo { height: 480px; }
  .hero-copy { padding-top: 56px; }
  .hero-dock { margin-top: 24px; }
  .finding figure img, .region figure img, .thanks-grid img { height: 300px; }
  .stack figure img { height: 224px; }
  .prose figure img { height: 246px; }
  .article { padding: 54px 0 64px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .form-card, .closer-plate { padding: 26px 24px 28px; }
  .closer-plate { padding: 34px 26px 38px; }
  .figure-plate { padding: 28px 26px 30px; }
  .kit-split { gap: 30px; }
}

@media (max-width: 480px) {
  :root { --gut: 20px; --fx: 6px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mast .wrap { min-height: 74px; }
  .light-band > img { height: 300px; }
  .q summary { padding: 18px 18px; font-size: 1.04rem; }
  .q .a { padding: 0 18px 20px; }
  .hero-photo { height: 420px; }
  .hero-dock { margin-top: 20px; }
}