/* ------------------------------------------------------------------------
   Plug-in Solar London

   The design source is a London elevation: a mansion block seen from the
   pavement, storey on storey, with an enamel street plate screwed to the
   corner of it. Three decisions carry the site and nothing else competes.

   1. THE NAMEPLATE is the signature device. A white enamel plate with a red
      keyline, borough line in red above the subject in ink, exactly the way a
      London street plate is set. It is the wordmark, it is the caption on
      every photograph, and it is the marker on each row of the consent run.
      It is a whole object with a border on all four sides, never an edge
      treatment stuck to something else.

   2. THE BAY GRID is the layout. Every section is laid on twelve bays with a
      20px gap, and objects span whole bays, so card rows, the hero, the
      ledger and the footer all line up on the same piers. A London block is
      a repeated bay; the page is built the same way.

   3. THE COURSE is the seam device, and the only one. A 10px full bleed band
      of kerb grey sits at every join between sections, the way a concrete
      course sits between storeys. There is no second separator anywhere: no
      hairline under a heading, no rule inside a component. If two sections
      meet, they meet on a course.

   THE PASS is the one ambient motion: a wide soft light travelling sideways
   across the dark plane of the balcony section, the way a taller building's
   shadow crosses a wall through the afternoon. Transform only, travel equal
   to exactly one gradient period so the loop is seamless, and it stops for
   anyone who has asked for less movement.

   Radius is 0 on every object, so the glyphs are Lucide geometry rendered
   with square caps and mitred joins to match the corners.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. ink: text and the dark plane. cast: the page, a pale poured
     concrete. pour: the alternate ground, measured at 1.30 against cast,
     which is where two grounds separate for the eye without banding.
     red: ACTION ONLY. eng: information, the blue of engineering brick under
     a railway arch. brass: the highlight, one headline phrase and the
     figures. kerb: the course and component hairlines, never text. */
  --ink: #15191D;
  --cast: #F2F1ED;
  --pour: #D8D5CD;
  --red: #C22026;
  --eng: #2D4C5E;
  --brass: #7E5814;
  --kerb: #A29E96;

  /* Derived, not new colours. red-text is the action colour at a weight that
     passes AA as body-sized text on both grounds; red is kept for fills.
     brass-lit is the same highlight lifted for the ink plane. */
  --red-text: #A81A20;
  --red-press: #86151A;
  --brass-lit: #E2AC42;
  --muted: #4F565E;
  --ink-lift: #1C2228;
  --hair: #C4BFB5;

  /* One face, at four weights. London sets its street plates, its notices and
     its building names in a single humanist grotesque and separates the voices
     by weight rather than by family, so this site does the same: Commissioner
     at 800 for the headings and the plates, 700 for furniture, 500 and 400 for
     reading. It also means no other site in this network opens with the same
     display face. */
  --display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --body: "Commissioner", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1300px;
  --gut: 28px;
  --bay-gap: 20px;
}

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

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

/* height:auto is load bearing: every photograph carries width and height
   attributes so the box is reserved before it arrives, and without this the
   attribute height wins and the frame comes out stretched. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: 800; }
h3 { font-size: 1.32rem; line-height: 1.16; letter-spacing: -0.01em; }
h4 { font-size: 1rem; line-height: 1.25; letter-spacing: 0; }

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(--red-text); font-weight: 600; text-decoration: none; }
a:hover { color: var(--red-press); }
a, a:hover, a:focus { text-decoration: none; }

b, strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.on-ink :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; z-index: 80;
  background: var(--red); color: #fff; padding: 14px 20px;
  font-family: var(--display); font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

.ico { flex: none; }

/* --- the course: the one seam device -------------------------------------
   A 10px band of kerb grey, full bleed, at every join between two sections.
   It is a band of its own ground rather than a border belonging to either
   neighbour, which is why it can sit between two light panels and between
   ink and light without ever reading as a one sided edge. Do not add a
   second separator at a seam and do not use this inside a component. */
.course { height: 10px; background: var(--kerb); }

/* --- the nameplate: the signature device ---------------------------------
   White enamel, red keyline on all four sides, borough line in red over the
   subject in ink. Wordmark, photograph caption and consent marker are all
   the same object at three sizes. */
.plate {
  background: #fff;
  border: 3px solid var(--red);
  padding: 9px 15px 11px;
  display: inline-block;
  max-width: min(92%, 420px);
  min-width: 0;
}
.plate b {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 0.68rem;
  line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red-text);
}
.plate span {
  display: block; margin-top: 6px;
  font-family: var(--display); font-weight: 800; font-size: 0.95rem;
  line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink);
}
.plate--sm { padding: 7px 12px 9px; border-width: 2px; }
.plate--sm b { font-size: 0.6rem; letter-spacing: 0.13em; }
.plate--sm span { font-size: 0.8rem; margin-top: 4px; }

/* --- masthead ------------------------------------------------------------
   The masthead is the ink plane the hero stands in, so the two read as one
   elevation rather than a bar sitting on a page. */
.mast { background: var(--ink); color: var(--cast); }
.mast .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; min-height: 96px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: inline-block; }
.brand .plate { max-width: none; }

.nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav a, .nav button {
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  color: var(--cast); background: none; border: 0; cursor: pointer;
  padding: 12px 14px; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; letter-spacing: -0.01em;
}
.nav a:hover, .nav button:hover { color: var(--brass-lit); }
.nav .cta-top {
  background: var(--red); color: #fff; padding: 13px 20px;
}
.nav .cta-top:hover { background: var(--red-press); color: #fff; }
.nav [aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav .ico { transition: transform 180ms ease; }

.drop { position: relative; }
.drop .panel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  width: 430px; background: #fff; border: 3px solid var(--red);
  padding: 22px 24px 18px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.drop[data-open="true"] .panel { opacity: 1; visibility: visible; transform: none; }
.panel .strap { color: var(--muted); font-size: 0.94rem; margin: 0 0 16px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { margin-top: 4px; }
.panel li a {
  display: block; padding: 11px 12px; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
}
.panel li a span {
  display: block; font-family: var(--body); font-weight: 400;
  font-size: 0.9rem; color: var(--muted); margin-top: 3px; letter-spacing: 0;
}
.panel li a:hover { background: var(--pour); color: var(--ink); }
.panel .all {
  display: block; margin-top: 14px; padding: 12px;
  background: var(--ink); color: #fff; font-family: var(--display);
  font-weight: 700; font-size: 0.95rem;
}
.panel .all:hover { background: var(--red); color: #fff; }

/* The burger has to out-specify `.nav button`, which sets inline-flex. */
.nav .burger { display: none; }
.mobile { display: none; }

/* --- hero ----------------------------------------------------------------
   Ink plane, twelve bays. Seven bays of type on the left, five bays of form
   on the right, then the elevation: a full bleed photograph 520px tall with
   its nameplate hung on the bottom left. The gradient is a wide tonal ramp
   inside the ink itself, lifting towards the top right where the light in
   the photograph comes from. */
.hero {
  background-color: var(--ink);
  background-image: radial-gradient(120% 90% at 82% 0%, rgba(226, 172, 66, 0.10) 0%, rgba(226, 172, 66, 0.035) 38%, rgba(21, 25, 29, 0) 72%);
  color: var(--cast);
  padding: 74px 0 0;
}
.hero-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--bay-gap);
  align-items: start;
}
.hero-type { grid-column: span 7; min-width: 0; }
.hero-form { grid-column: span 5; min-width: 0; }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--brass-lit); }
.lede {
  font-size: 1.24rem; line-height: 1.5; color: #D9DDE1; max-width: 33em;
  margin-bottom: 30px;
}
.chips { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 12px; }
.chips li {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  font-size: 1rem; color: #E6E9EC; font-weight: 500;
}
.chips .ico { color: var(--brass-lit); margin-top: 2px; }

.elevation { margin-top: 58px; position: relative; }
.elevation img { width: 100%; height: 520px; object-fit: cover; object-position: 50% 42%; }
.elevation .plate { position: absolute; left: var(--gut); bottom: -22px; }

/* --- sections and grounds ------------------------------------------------ */
.sec { padding: 92px 0; }
.sec--cast { background: var(--cast); }
.sec--pour { background: var(--pour); }
.sec--ink { background: var(--ink); color: var(--cast); }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec--ink p { color: #D9DDE1; }
.sec--ink a { color: var(--brass-lit); }
.sec--ink a:hover { color: #fff; }

.sec-head { max-width: 46ch; margin-bottom: 46px; }
.sec-head h2 em { font-style: normal; color: var(--brass); }
.sec--ink .sec-head h2 em { color: var(--brass-lit); }
.sec-lede { font-size: 1.16rem; line-height: 1.5; color: var(--muted); margin-top: 18px; }
.sec--ink .sec-lede { color: #C3C9CE; }
.sec--pour .sec-lede { color: #3F464D; }

/* A read on link is not a footnote, so it is set as a link at reading size and
   never in the small grey attribution style. Attribution lines under figures
   and numbers stay plain text with no link in them. */
.more {
  margin-top: 30px; display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  color: var(--red-text);
}
.more a { color: inherit; }
.more .ico { color: inherit; }

.attrib { font-size: 0.88rem; line-height: 1.5; color: var(--muted); margin-top: 26px; }
.sec--ink .attrib { color: #9BA3AA; }
.sec--pour .attrib { color: #3F464D; }

/* --- figures -------------------------------------------------------------
   Every photograph is the same object: the frame, the nameplate hung over
   its bottom left corner, and a plain caption below saying what to look at.
   The caption never claims the work in the frame is ours. */
figure { margin: 0; }
.frame { position: relative; }
.frame img { width: 100%; }
.frame .plate { position: absolute; left: 16px; bottom: -16px; }
figcaption {
  margin-top: 34px; font-size: 0.93rem; line-height: 1.5; color: var(--muted);
  max-width: 46ch;
}
.sec--ink figcaption { color: #A9B0B6; }
.sec--pour figcaption { color: #3F464D; }

/* --- the ledger: four mountings, four full width rows --------------------
   Rows rather than a chart beside a picture, because the argument is a
   ranking and a ranking reads down the page. */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid; grid-template-columns: minmax(0, 20rem) 1fr minmax(0, 9rem);
  gap: 26px; align-items: center; padding: 22px 0;
}
.ledger .what { font-family: var(--display); font-weight: 700; font-size: 1.08rem; min-width: 0; }
.ledger .track { display: block; height: 16px; background: #E7E5DF; min-width: 0; }
.sec--pour .ledger .track { background: #C6C2B8; }
.ledger .fill { display: block; height: 100%; background: var(--ink); }
.ledger li:first-child .fill { background: var(--brass); }
.ledger .num {
  font-family: var(--display); font-weight: 800; font-size: 1.9rem;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink);
  letter-spacing: -0.02em; min-width: 0;
}
.ledger .num i { font-style: normal; font-size: 0.86rem; font-weight: 700; color: var(--muted); display: block; letter-spacing: 0.04em; }

/* A portrait frame in a five bay column would otherwise stand 1300px tall and
   leave a hole beside the heading, so every photograph inside a split or a
   prose column is capped and cropped rather than left at its own proportion. */
.split .frame img, .prose .frame img, .thanks-grid .frame img { max-height: 560px; object-fit: cover; }

/* --- the split: type in seven bays, a photograph in five ----------------- */
.split {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 44px var(--bay-gap);
  align-items: start;
}
.split > .col-7 { grid-column: span 7; min-width: 0; }
.split > .col-5 { grid-column: span 5; min-width: 0; }
.split > .col-6 { grid-column: span 6; min-width: 0; }

/* --- bays: the card row --------------------------------------------------
   Three cards of four bays each. Every card carries a photograph, the body
   sits on the lighter ground so it reads against the deeper section, and the
   action label is pinned to the foot. */
.bays { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--bay-gap); }
.bay { grid-column: span 4; min-width: 0; }
/* Flex column so the action label really is pinned to the foot of every card
   in the row, not just to the foot of its own text. */
.card { display: flex; flex-direction: column; height: 100%; background: var(--cast); color: var(--ink); }
.sec--cast .card { background: #fff; }
/* The nameplate goes on card photographs too, sitting inside the frame at the
   foot so the device is on every photograph on the site rather than only on
   the large ones. It stays put while the photograph scales on hover. */
.card-img { overflow: hidden; position: relative; }
.card-img .plate { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.card-img img { width: 100%; height: 300px; object-fit: cover; transition: transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.card:hover .card-img img { transform: scale(1.035); }
.card-body { padding: 30px 28px 28px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 232px; }
.card-body h3 { margin-bottom: 12px; }
.card-body p { color: var(--muted); font-size: 1rem; }
.card .go {
  margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 0.97rem; color: var(--red-text);
}
.card:hover .go { color: var(--red-press); }

/* --- the consent run -----------------------------------------------------
   Four full width rows, each one naming who decides. Not numbered: the point
   is the decider, not the count. */
.run { display: grid; gap: 0; }
.run-row {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 34px;
  padding: 30px 0; align-items: start;
}
.run-row h3 { margin-bottom: 10px; }
.run-row p { color: var(--muted); margin-bottom: 0; max-width: 62ch; }
.run-row .who { min-width: 0; }

/* --- notes: the one boxed aside inside prose ----------------------------- */
.note {
  border: 2px solid var(--eng); background: #fff; padding: 24px 26px;
  margin: 34px 0;
}
.note b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.05rem; color: var(--eng); margin-bottom: 9px;
}
.note p { color: var(--ink); margin-bottom: 0; }
.sec--pour .note { background: var(--cast); }

/* --- boroughs ------------------------------------------------------------ */
.boroughs {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 2px solid var(--hair);
}
.boroughs li {
  padding: 12px 14px; font-size: 0.94rem; font-weight: 500; min-width: 0;
  box-shadow: inset 0 0 0 1px #E4E1D9;
}
.sec--ink .boroughs { border-color: #38414A; }
.sec--ink .boroughs li { box-shadow: inset 0 0 0 1px #262D34; color: #D9DDE1; }

/* --- the form ------------------------------------------------------------
   One component. High on the home page beside the first fold, and at the
   foot of every interior page except the thank you. Real POST, honeypot and
   a time trap stamped at load. */
.form-card { background: #fff; color: var(--ink); padding: 30px 30px 32px; }
.form-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.form-card .said { color: var(--muted); font-size: 0.98rem; margin-bottom: 22px; }
.f { display: block; margin-bottom: 15px; min-width: 0; }
.f > span {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 0.85rem; margin-bottom: 6px; letter-spacing: 0.01em;
}
.f input, .f select, .f textarea {
  width: 100%; padding: 12px 13px; font-family: var(--body); font-size: 1rem;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  border-radius: 0; min-height: 46px;
}
.f textarea { min-height: 84px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--red); color: #fff; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  padding: 16px 26px; min-height: 52px; width: 100%;
  letter-spacing: -0.01em;
}
.btn:hover { background: var(--red-press); color: #fff; }
.btn--inline { width: auto; }
.form-card .after { margin-top: 18px; font-size: 0.88rem; color: var(--muted); }

/* --- the ask band, used at the foot of every interior -------------------- */
.ask { background: var(--ink); color: var(--cast); padding: 86px 0; }
.ask h2 { color: #fff; }
.ask h2 em { font-style: normal; color: var(--brass-lit); }
.ask .sec-lede { color: #C3C9CE; }
.ask-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px var(--bay-gap); align-items: start; }
.ask-grid > div:first-child { grid-column: span 6; min-width: 0; }
.ask-grid > div:last-child { grid-column: span 6; min-width: 0; }

/* --- the closer ---------------------------------------------------------- */
.closer { background: var(--ink); color: var(--cast); }
.closer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--bay-gap); align-items: stretch; }
.closer-pic { grid-column: span 6; min-width: 0; }
.closer-pic img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.closer-say { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 56px 0 56px 34px; }
.closer-say h2 { color: #fff; margin-bottom: 18px; }
.closer-say p { color: #C3C9CE; margin-bottom: 26px; max-width: 42ch; }

/* --- questions ----------------------------------------------------------- */
.qs { display: grid; gap: 0; }
.q { border: 2px solid var(--hair); background: #fff; }
.sec--pour .q { background: var(--cast); }
.q + .q { margin-top: 12px; }
.q summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; min-height: 44px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--red); margin-top: 3px; transition: transform 200ms ease; }
.q[open] summary .ico { transform: rotate(180deg); }
.q .a { padding: 0 22px 22px; color: var(--muted); max-width: 68ch; }

/* --- interiors: the magazine layout --------------------------------------
   The page head is the same ink plane as the home hero and it is laid on the
   same twelve bays: the title takes seven, the standfirst takes five and sits
   on the baseline of the block, so the head fills its width instead of leaving
   half the plane empty. */
.page-head { background: var(--ink); color: var(--cast); padding: 62px 0 72px; }
.crumb { font-size: 0.92rem; color: #A9B0B6; margin-bottom: 26px; font-weight: 500; }
.crumb a { color: #D9DDE1; }
.crumb a:hover { color: #fff; }
.head-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 34px var(--bay-gap); align-items: end; }
.head-grid > h1 { grid-column: span 7; min-width: 0; }
.head-grid > .pull { grid-column: span 5; min-width: 0; }
.page-head h1 { color: #fff; }
.page-head h1 em { font-style: normal; color: var(--brass-lit); }
.pull {
  font-size: 1.28rem; line-height: 1.46; color: #DDE1E5;
  max-width: 42ch; font-weight: 500; margin: 0;
}

.article { padding: 84px 0 92px; }
.article .wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px var(--bay-gap); align-items: start; }
.prose { grid-column: span 8; max-width: 70ch; min-width: 0; }
.prose h2 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); margin: 54px 0 18px; scroll-margin-top: 26px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.15em; }
.prose li { margin-bottom: 0.5em; }
.prose figure { margin: 38px 0 34px; }
.prose .qs { margin-top: 26px; }

.aside { grid-column: span 4; position: sticky; top: 26px; min-width: 0; }
.aside h4 { font-size: 0.95rem; margin-bottom: 14px; }
.aside ol { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: a; }
.aside ol li { margin-bottom: 2px; }
.aside ol a {
  display: block; padding: 9px 12px; font-size: 0.95rem; font-weight: 500;
  color: var(--ink); background: #fff;
}
.sec--pour .aside ol a { background: var(--cast); }
.aside ol a:hover { background: var(--ink); color: #fff; }
.aside-card { background: var(--ink); color: var(--cast); padding: 26px 24px 28px; }
.aside-card h4 { color: #fff; margin-bottom: 10px; font-size: 1.1rem; }
.aside-card p { color: #C3C9CE; font-size: 0.95rem; margin-bottom: 20px; }

.siblings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bay-gap); margin-top: 26px; }

/* --- credits ------------------------------------------------------------- */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bay-gap); }
.credit { background: #fff; border: 2px solid var(--hair); padding: 24px 26px; min-width: 0; }
.credit h3 { font-size: 1.1rem; margin-bottom: 10px; }
.credit p { font-size: 0.93rem; color: var(--muted); margin-bottom: 0.5em; }

/* --- thank you ----------------------------------------------------------- */
.thanks-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 52px var(--bay-gap); align-items: start; }
.thanks-grid > div:first-child { grid-column: span 7; min-width: 0; }
.thanks-grid > div:last-child { grid-column: span 5; min-width: 0; }
.next { list-style: none; margin: 24px 0 0; padding: 0; }
.next li { margin-bottom: 14px; }

/* --- footer -------------------------------------------------------------- */
.foot { background: var(--ink); color: #C3C9CE; padding: 74px 0 40px; }
.foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px var(--bay-gap); }
.foot-grid > div:nth-child(1) { grid-column: span 4; min-width: 0; }
.foot-grid > div:nth-child(2) { grid-column: span 3; min-width: 0; }
.foot-grid > div:nth-child(3) { grid-column: span 2; min-width: 0; }
.foot-grid > div:nth-child(4) { grid-column: span 3; min-width: 0; }
.foot h4 { color: #fff; margin-bottom: 16px; font-size: 0.95rem; letter-spacing: 0.02em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: 0.95rem; min-width: 0; overflow-wrap: anywhere; }
.foot a { color: #D9DDE1; font-weight: 500; }
.foot a:hover { color: var(--brass-lit); }
.foot p { font-size: 0.95rem; }
.foot .brand { margin-bottom: 20px; }
.foot-legal { margin-top: 56px; padding-top: 26px; }
.foot-legal p { font-size: 0.86rem; color: #9BA3AA; max-width: 96ch; }

/* --- texture -------------------------------------------------------------
   One deliberate use. A 400px concrete grain on the ink plane of the balcony
   section only, layered over the ink token rather than replacing it, and
   nowhere near body copy at a size where it could interfere. */
.sec--grain {
  /* The tile is a pale concrete grain, so it is laid UNDER a near opaque wash
     of the ink token. At full strength it turned the band mid grey and the page
     lost its dark plane. 10 per cent of the tile is enough to feel. */
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(21, 25, 29, 0.9), rgba(21, 25, 29, 0.9)),
    url('/assets/tex/concrete-wall-3.png');
}

/* --- THE PASS: the one ambient motion ------------------------------------
   A wide soft light crossing the dark plane sideways, the way a taller
   building's shadow crosses a wall through the afternoon. The layer is
   1440px of gradient repeated, and it travels exactly 1440px, so the loop
   closes with no jump. Transform only. */
.pass { position: relative; overflow: hidden; }
.pass > .wrap { position: relative; z-index: 2; }
.pass::before {
  content: ""; position: absolute; inset: -10% -100% -10% 0; z-index: 1;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0.055) 360px,
    rgba(255, 255, 255, 0.055) 460px,
    rgba(255, 255, 255, 0) 820px,
    rgba(255, 255, 255, 0) 1440px);
  animation: pass 26s linear infinite;
  pointer-events: none;
}
@keyframes pass { from { transform: translateX(0); } to { transform: translateX(1440px); } }

/* --- scroll reveal ------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(20px); }
.rise.in { opacity: 1; transform: none; transition: opacity 600ms ease, transform 600ms 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) {
  * { animation: none !important; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  .pass::before { animation: none; }
  .card:hover .card-img img { transform: none; }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-type, .hero-form { grid-column: span 12; }
  .hero-form { margin-top: 34px; }
  .hero h1 { max-width: 16ch; }
  .head-grid > h1, .head-grid > .pull { grid-column: span 12; }
  .prose { grid-column: span 12; }
  .aside { grid-column: span 12; position: static; }
  .aside ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .split > .col-7, .split > .col-5, .split > .col-6 { grid-column: span 12; }
  .ask-grid > div:first-child, .ask-grid > div:last-child { grid-column: span 12; }
  .thanks-grid > div:first-child, .thanks-grid > div:last-child { grid-column: span 12; }
  .foot-grid > div:nth-child(1) { grid-column: span 12; }
  .foot-grid > div:nth-child(2), .foot-grid > div:nth-child(3), .foot-grid > div:nth-child(4) { grid-column: span 4; }
}

@media (max-width: 1024px) {
  .nav .lg { display: none; }
  .nav .burger {
    display: inline-flex; align-items: center; gap: 9px; background: var(--red);
    color: #fff; border: 0; font-family: var(--display); font-weight: 800;
    font-size: 0.95rem; padding: 13px 20px; min-height: 48px; cursor: pointer;
  }
  .mobile { display: block; background: #fff; color: var(--ink); }
  .mobile[data-open="false"] { display: none; }
  .mobile .wrap { padding-top: 20px; padding-bottom: 26px; }
  .mobile ul { list-style: none; margin: 0 0 18px; padding: 0; }
  .mobile li a {
    display: block; padding: 15px 4px; color: var(--ink);
    font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  }
  .mobile li a span { display: block; font-family: var(--body); font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-top: 3px; }
  .bay { grid-column: span 6; }
  .closer-pic, .closer-say { grid-column: span 12; }
  .closer-say { padding: 44px 0 52px; }
  .closer-pic img { min-height: 300px; }
  .credits { grid-template-columns: 1fr; }
  .boroughs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sec { padding: 64px 0; }
  .hero { padding-top: 52px; }
  .elevation { margin-top: 40px; }
  .elevation img { height: 340px; }
  .bay { grid-column: span 12; }
  .siblings { grid-template-columns: 1fr; }
  .ledger li { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .ledger .num { text-align: left; }
  .ledger .num i { display: inline; margin-left: 6px; }
  .run-row { grid-template-columns: 1fr; gap: 14px; }
  .boroughs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { padding: 56px 0 64px; }
  .page-head { padding: 46px 0 54px; }
  .pull { font-size: 1.14rem; }
  .foot-grid > div { grid-column: span 12 !important; }
  .aside ol { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  :root { --gut: 18px; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 24px 20px 26px; }
  .card-body { padding: 24px 20px 24px; }
  .plate { max-width: calc(100% - 24px); }
  .elevation img { height: 280px; }
  .mast .wrap { min-height: 84px; gap: 14px; }
}