/* ------------------------------------------------------------------------
   Plug-in Solar North West

   The design source is the one fact that makes this region different from
   every other: it is covered by TWO network operators, so two households on
   the same evening notify two different companies. Everything below is built
   from that, in rain-slate and red brick because that is what the region is
   made of.

   1. THE TWO PIECE HEAD is the signature device. Every panel on this site
      (a card, the form, an operator block, a figure row, the nav panel, the
      aside) opens with a head row split by ONE vertical rule into a wide cell
      carrying the title and a narrow cell carrying a single fact. Nothing on
      this site is one piece. The rule sits between two filled cells inside a
      fully bordered panel, so it is a division, never an edge treatment.

   2. THE SEAM IS A 3PX INK RULE, full bleed, and only where two LIGHT grounds
      meet. A dark band separates itself at its own colour edge and never gets
      a rule on top. That is the whole seam logic: one device, one weight, one
      colour, no exceptions and never doubled with a ground change plus a rule
      plus a shadow. The 1px hairlines inside panels are component furniture at
      a different weight and colour and are never used at a seam.

   3. THE DRIFT is the one ambient motion: a single wide soft band of lighter
      slate crossing the dark plane on a long diagonal, like rain light moving
      over a wet street. Transform only, travel equal to one band period so the
      loop has no jump, and it does not run at all under prefers-reduced-motion.

   Radius is 0 everywhere, so the glyphs are Lucide geometry drawn with square
   caps and mitred joins to match the corners.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. rain: the dark plane and the masthead. ink: all text.
     page: the page ground. wash: the alternate ground, 1.24 against page,
     which is where the eye actually separates two grounds. mint: ACTION
     only, never decoration. brick: the highlight, the headline phrase and
     every figure. muted: secondary text. */
  --rain:  #121A20;
  --ink:   #22303A;
  --page:  #F4F7F8;
  --wash:  #D6E1E6;
  --mint:  #0B6E57;
  --brick: #B04A31;
  --muted: #4F5E68;

  /* Derived, not new colours: the two accents lifted so they carry on the
     dark plane, the action darkened for a pressed state, one hairline. */
  --mint-lit:  #58D8AE;
  --clay:      #E28C6E;
  --mint-deep: #085040;
  --hair:      #C3CFD6;
  --hair-dark: #35434D;

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

  --wrap: 1280px;
  --gut: 26px;
}

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

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

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

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

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

a { color: var(--mint); font-weight: 600; text-decoration: none; }
a:hover { color: var(--mint-deep); }
/* Underlines are out. Links carry colour and weight, hover darkens. */
a, a:hover, a:focus { text-decoration: none; }

b, strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.on-dark :focus-visible, .mast :focus-visible, .top-strip :focus-visible,
.foot :focus-visible { outline-color: var(--mint-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(--ink); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

.ico { flex: none; }

/* figures line up in the tables and the figure rows */
.num { font-variant-numeric: tabular-nums; font-family: var(--display); }

/* --- the seam --------------------------------------------------------------
   One device. Extra breathing room above the section, no rule: two light
   grounds are told apart by the pause, not a line drawn between them. */
.seam { margin-top: 22px; }

/* --- the two piece head --------------------------------------------------
   The signature. A panel is fully bordered; its head is two cells divided by
   a ground-colour change, not a rule. The narrow cell carries one fact and
   nothing else, set on the wash tint the site already uses for a fact/tag. */
.panel { border: 1px solid var(--hair); background: #fff; }
.panel-head {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
}
.panel-head > :first-child { padding: 16px 20px; min-width: 0; }
.panel-head > :last-child {
  padding: 16px 20px; background: var(--wash);
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 0.9rem;
  color: var(--muted); white-space: nowrap;
}
.panel-head h3 { font-size: 1.18rem; }
.panel-body { padding: 20px; }
.panel-body > p { color: var(--ink); }

/* --- masthead ------------------------------------------------------------
   Its own pattern: a brick rule of a strip over a rain-dark bar, and the bar
   runs straight into the hero plane so the top of the page is one dark mass
   with a red line across the top of it. */
.top-strip {
  background: var(--brick); color: #fff;
  font-size: 0.83rem; letter-spacing: 0.01em;
}
.top-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  align-items: center; justify-content: space-between;
  padding-top: 9px; padding-bottom: 9px;
}
.top-strip ol { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
.top-strip li { font-weight: 600; }
.top-strip p { margin: 0; }

.mast { background: var(--rain); color: #fff; position: relative; z-index: 30; }
.mast > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 18px; padding-bottom: 18px;
}
.brand {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--display); font-weight: 800; color: #fff;
  font-size: 1.16rem; line-height: 1.05; letter-spacing: -0.02em;
}
.brand:hover { color: #fff; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand span { display: block; }
.brand span b { display: block; font-weight: 700; color: var(--mint-lit); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .drop > button {
  font-family: var(--display); font-weight: 700; font-size: 0.97rem;
  color: #fff; background: none; border: 0; padding: 11px 14px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: 44px;
}
.nav > a:hover, .drop > button:hover { color: var(--mint-lit); }
.nav .cta-top {
  background: var(--mint); color: #fff; padding: 12px 20px; margin-left: 10px;
}
.nav .cta-top:hover { background: var(--mint-lit); color: var(--rain); }

.drop { position: relative; display: inline-block; }
.drop .ico { transition: transform .18s ease; }
.drop[data-open="true"] .ico { transform: rotate(180deg); }
.drop .panel {
  position: absolute; top: calc(100% + 10px); left: 0; width: 460px;
  border-color: var(--hair); box-shadow: 0 22px 44px rgba(18, 26, 32, .22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.drop[data-open="true"] .panel { opacity: 1; visibility: visible; transform: none; }
.drop .panel ul { list-style: none; margin: 0; padding: 0; }
.drop .panel li a {
  display: block; padding: 14px 20px; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.drop .panel li a span {
  display: block; font-family: var(--body); font-weight: 400;
  font-size: 0.92rem; color: var(--muted); margin-top: 3px; letter-spacing: 0;
}
.drop .panel li a:hover { background: var(--wash); color: var(--ink); }
.drop .panel .all {
  display: block; padding: 13px 20px; background: var(--wash);
  color: var(--mint-deep); font-weight: 700; font-size: 0.95rem;
}

.burger {
  display: none; background: none; border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-family: var(--display); font-weight: 700;
  padding: 11px 16px; min-height: 44px; cursor: pointer;
}
.mobile { display: none; background: var(--rain); }
.mobile[data-open="true"] { display: block; }
.mobile ul { list-style: none; margin: 0; padding: 0 0 6px; }
.mobile li a {
  display: block; padding: 15px 0; color: #fff;
  font-family: var(--display); font-weight: 700;
}
.mobile li a span { display: block; font-family: var(--body); font-weight: 400; font-size: 0.92rem; color: #A9B8C1; }
.mobile .btn { width: 100%; margin: 8px 0 22px; justify-content: center; }

/* --- buttons -------------------------------------------------------------
   The action colour is for action. Nothing else on this site is mint. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--mint); color: #fff; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  padding: 15px 26px; min-height: 48px; letter-spacing: -0.01em;
  transition: background .15s ease;
}
.btn:hover { background: var(--mint-deep); color: #fff; }
.btn-ghost {
  background: none; color: var(--mint-lit); border: 1px solid var(--mint-lit);
}
.btn-ghost:hover { background: var(--mint-lit); color: var(--rain); }

/* --- hero ----------------------------------------------------------------
   Photo and form stand side by side on one dark rain plane. The gradient is
   tonal inside the site's own hue over the untouched token, the texture is a
   real tile, and the drift crosses both. */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--rain);
  background-image:
    url("/assets/tex/dark-wall.png"),
    linear-gradient(168deg, #1B252D 0%, #121A20 46%, #0D141A 100%);
  padding: 54px 0 66px;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { max-width: 1060px; margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--clay); }
.hero .lede { font-size: 1.2rem; color: #D4DEE4; max-width: 46ch; margin-bottom: 26px; }

.drift {
  position: absolute; inset: -40% -70%; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(104deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 330px,
    rgba(173,201,214,.10) 640px,
    rgba(255,255,255,0) 950px, rgba(255,255,255,0) 1280px);
  animation: drift 26s linear infinite;
  will-change: transform;
}
/* One continuous repeating gradient rather than a tiled background, because a
   tiled angled gradient shows its tile edge as a vertical streak. The band
   period along the gradient line is 1280px and the gradient sits at 104deg, so
   the period measured along X is 1280 / sin(104deg) = 1319px. Travelling
   exactly that far returns the identical pattern and the loop has no jump. */
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(1319px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .drift { animation: none; }
}

.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 34px; align-items: start; }
.hero-left { min-width: 0; }
.hero-fig { margin: 0; }
.hero-fig img { width: 100%; height: clamp(280px, 34vw, 490px); object-fit: cover; }
.hero-fig figcaption, .fig figcaption {
  font-size: 0.88rem; color: var(--muted); margin-top: 10px; max-width: 52ch;
}
/* On a dark plane the caption lifts; on a light one it stays muted ink. */
.hero-fig figcaption, .sec--rain .fig figcaption { color: #A9B8C1; }

.chips { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.chips li {
  display: flex; gap: 11px; align-items: flex-start; min-width: 0;
  font-weight: 600; font-size: 1rem; color: #E4ECF0;
}
.chips .ico { color: var(--mint-lit); margin-top: 2px; }

/* --- the form. One component, one conversion moment per page ------------- */
.form-card { background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.hero .form-card { border-color: transparent; }
.form-card .panel-head > :last-child { color: var(--brick); background: #fff; }
.form-card form { padding: 20px; display: grid; gap: 14px; }
.f { display: grid; gap: 6px; min-width: 0; }
.f > span { font-family: var(--display); font-weight: 700; font-size: 0.89rem; }
.f input, .f select, .f textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--page); border: 1px solid var(--hair); padding: 12px 13px;
  min-height: 46px; width: 100%; min-width: 0;
}
.f textarea { min-height: 82px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { background: #fff; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .after {
  margin: 0; padding: 0 20px 20px; font-size: 0.88rem; color: var(--muted);
}

/* --- sections ------------------------------------------------------------ */
.sec { padding: 70px 0; }
.sec--wash { background: var(--wash); }
.sec--rain {
  background-color: var(--rain); color: #fff;
  background-image:
    url("/assets/tex/dark-wall.png"),
    linear-gradient(172deg, #1A242C 0%, #121A20 60%, #0E161B 100%);
}
.sec--rain h2, .sec--rain h3 { color: #fff; }
.sec--rain p { color: #CBD7DD; }
/* A white panel standing on the dark plane is still a white panel: it keeps
   the page's ink and its own muted grey, or the heading disappears into it. */
.sec--rain .panel h3, .sec--rain .form-card h3 { color: var(--ink); }
.sec--rain .panel p, .sec--rain .form-card p { color: var(--muted); }
.sec--rain .panel a, .sec--rain .form-card a { color: var(--mint); }
.sec--rain a { color: var(--mint-lit); }
.sec--rain a:hover { color: #fff; }

.sec-head { max-width: 62ch; margin-bottom: 38px; }
.sec-head h2 em { font-style: normal; color: var(--brick); }
.sec--rain .sec-head h2 em { color: var(--clay); }
.sec-lede { font-size: 1.13rem; color: var(--muted); margin-top: 16px; }
.sec--rain .sec-lede { color: #B8C6CE; }

/* --- the operator split. The site's whole reason to exist --------------- */
.ops { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.op { display: flex; flex-direction: column; min-width: 0; }
.op .op-img { height: 236px; }
.op .op-img img { width: 100%; height: 100%; object-fit: cover; }
.op .panel-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.op .op-where {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.op .op-where li {
  font-family: var(--display); font-weight: 700; font-size: 0.84rem;
  background: var(--wash); color: var(--ink); padding: 6px 10px;
}
.op .op-note { margin-top: auto; padding-top: 14px; font-size: 0.92rem; color: var(--muted); }
.ops-after {
  margin-top: 26px; padding: 22px 24px; background: var(--ink); color: #E3EAEE;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
}
.ops-after .ico { color: var(--mint-lit); }
.ops-after p { margin: 0; }
.ops-after b { color: #fff; }

/* --- the placement figures ---------------------------------------------- */
.place { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 36px; align-items: start; }
.rows { display: grid; }
.row {
  display: grid; grid-template-columns: 148px 1fr; align-items: center;
  border: 1px solid var(--hair-dark); background: rgba(255,255,255,.03);
}
.row + .row { border-top: 0; }
.row .row-n {
  padding: 18px 16px;
  font-family: var(--display); font-weight: 800; font-size: 1.9rem;
  color: var(--clay); font-variant-numeric: tabular-nums; line-height: 1;
}
.row .row-n small { display: block; font-size: 0.62rem; letter-spacing: .06em; color: #9FB0B9; margin-top: 6px; font-weight: 700; }
.row .row-t { padding: 16px 20px; min-width: 0; }
.row .row-t b { display: block; font-family: var(--display); font-size: 1.02rem; color: #fff; }
.row .row-t span { font-size: 0.94rem; color: #B8C6CE; }
.place-notes { margin-top: 22px; font-size: 0.94rem; color: #B8C6CE; }
.fig { margin: 0; }
.fig img { width: 100%; height: 330px; object-fit: cover; }
/* The one portrait frame in the set: crop from the top so the roof and the
   panels survive the crop instead of the wall below them. */
.fig--top img { height: 400px; object-position: 50% 14%; }
/* The socket sits high in its own frame, so a wide figure box holds it near
   the top of the crop rather than centring on bare plaster. */
.fig--socket img { height: 400px; object-position: 50% 6%; }

/* --- cards. Every card in a photo row gets a photograph ------------------ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.card a { color: inherit; display: flex; flex-direction: column; height: 100%; }
.card .card-img { height: 300px; }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.card .panel-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.card .panel-body p { color: var(--muted); font-size: 0.98rem; }
.card .go {
  margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center;
  gap: 8px; color: var(--mint); font-family: var(--display); font-weight: 700;
}
.card a:hover .go { color: var(--mint-deep); }
.card a:hover .panel-head { background: var(--wash); }

/* --- the spec strip --------------------------------------------------------
   A full grid: the container supplies the line colour, gap draws the lines,
   each cell supplies its own fill, so nothing is a single-sided rule. */
.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--hair); background: var(--hair); }
.spec div { padding: 22px 24px; background: #fff; min-width: 0; }
.spec dt, .spec b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; color: var(--brick); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.spec p { margin: 6px 0 0; font-size: 0.97rem; color: var(--muted); }
.spec-note { margin-top: 20px; font-size: 0.94rem; color: var(--muted); }

/* --- questions ----------------------------------------------------------- */
.qs { max-width: 860px; }
.q { border: 1px solid var(--hair); background: #fff; }
.q + .q { border-top: 0; }
.q summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--mint); transition: transform .18s ease; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 22px 20px; color: var(--muted); }
.q .a p { max-width: 70ch; }

/* --- closer. Built like the cards, differing only by the action ---------- */
.closer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.closer-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.closer-plate {
  background: #fff; border: 1px solid var(--hair);
  padding: 40px; display: flex; flex-direction: column; justify-content: center;
}
.closer-plate h2 { margin-bottom: 16px; }
.closer-plate p { color: var(--muted); margin-bottom: 26px; max-width: 44ch; }
.closer-plate .btn { align-self: flex-start; }

/* --- the ask band, at the foot of every interior ------------------------- */
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ask-grid .counties { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-grid .counties li {
  font-family: var(--display); font-weight: 700; font-size: 0.86rem;
  border: 1px solid var(--hair-dark); color: #CBD7DD; padding: 7px 11px;
}

/* --- interiors, magazine ------------------------------------------------- */
.page-head { background: var(--wash); padding: 44px 0 46px; }
.crumb { font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.crumb a { color: var(--mint); }
.page-head h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); max-width: 20ch; }
.page-head h1 em { font-style: normal; color: var(--brick); }
.pull {
  margin-top: 22px; font-size: 1.24rem; line-height: 1.5;
  max-width: 60ch; color: var(--ink); font-weight: 600;
}

.article { padding: 60px 0 20px; }
.article > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: start; }
.prose { min-width: 0; max-width: 70ch; }
.prose h2 { font-size: clamp(1.9rem, 2.6vw, 2.3rem); margin: 46px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; }
.prose ul { padding-left: 20px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 8px; }
.prose .fig { margin: 28px 0; }
.prose .fig img { height: 320px; }
.prose .fig figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 10px; }
.prose .note {
  border: 1px solid var(--hair); background: #fff; padding: 22px 24px; margin: 28px 0;
}
.prose .note p { margin: 0; }
.prose .note b { color: var(--brick); }

.aside { position: sticky; top: 24px; display: grid; gap: 20px; }
.aside .panel-body ol { margin: 0; padding-left: 20px; }
.aside .panel-body li { margin-bottom: 8px; font-weight: 600; }
.aside-card { background: var(--ink); color: #fff; padding: 24px; }
.aside-card h4 { color: #fff; margin-bottom: 10px; font-size: 1.08rem; }
.aside-card p { color: #B8C6CE; font-size: 0.95rem; margin-bottom: 18px; }
.aside-card .btn { width: 100%; }

.siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* --- credits ------------------------------------------------------------- */
.credits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.credit { border: 1px solid var(--hair); background: #fff; padding: 22px 24px; min-width: 0; }
.credit h3 { font-size: 1.08rem; margin-bottom: 10px; }
.credit p { font-size: 0.94rem; color: var(--muted); margin-bottom: 6px; word-break: break-word; }
.attrib { margin-top: 26px; font-size: 0.92rem; color: var(--muted); max-width: 80ch; }

/* --- thank you ----------------------------------------------------------- */
.thanks-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: start; }
.thanks-list { list-style: none; padding: 0; margin: 22px 0 0; }
.thanks-list li { margin-bottom: 14px; }

/* --- footer -------------------------------------------------------------- */
.foot {
  background-color: var(--rain); color: #B8C6CE; padding: 60px 0 34px;
  background-image: url("/assets/tex/dark-wall.png");
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.foot h4 { color: #fff; margin-bottom: 14px; font-size: 0.95rem; letter-spacing: .04em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: 0.95rem; }
.foot a { color: #CBD7DD; font-weight: 400; }
.foot a:hover { color: var(--mint-lit); }
.foot .mark-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot .mark-row svg { width: 34px; height: 34px; }
.foot .mark-row span { font-family: var(--display); font-weight: 800; color: #fff; font-size: 1.1rem; line-height: 1.05; }
.foot .mark-row span b { display: block; font-weight: 700; color: var(--mint-lit); }
.foot p { font-size: 0.95rem; }
.foot-legal {
  margin-top: 40px; padding-top: 22px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start;
}
.foot-legal p { font-size: 0.86rem; color: #93A4AE; margin: 0; max-width: 92ch; }

/* --- the reveal. Transform and opacity only ----------------------------- */
.rise { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s; }
.rise.d2 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

/* --- widths -------------------------------------------------------------- */
/* In a row of cards the heads have to sit on one line with each other, or the
   bodies start at three different heights and the grid stops looking built. */
@media (min-width: 701px) {
  .cards .panel-head, .siblings .panel-head { min-height: 86px; }
}

@media (max-width: 1100px) {
  .hero-grid, .place, .ops, .ask-grid, .closer-grid, .thanks-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .article > .wrap { grid-template-columns: 1fr; gap: 36px; }
  .aside { position: static; grid-template-columns: 1fr 1fr; }
  .drop .panel { width: 420px; }
  .closer-img img { min-height: 260px; }
}
@media (max-width: 900px) {
  .nav > a.lg, .drop.lg { display: none; }
  .nav .cta-top { display: none; }
  .burger { display: inline-flex; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .siblings { grid-template-columns: 1fr; }
  .credits { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sec { padding: 52px 0; }
  .hero { padding: 38px 0 48px; }
  .cards { grid-template-columns: 1fr; }
  .aside { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-legal { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .row { grid-template-columns: 110px 1fr; }
  .row .row-n { font-size: 1.5rem; }
  .ops-after { grid-template-columns: 1fr; }
  .closer-plate { padding: 28px 24px; }
}
@media (max-width: 420px) {
  :root { --gut: 18px; }
  .top-strip .wrap { padding-top: 8px; padding-bottom: 8px; }
  .top-strip ol { gap: 3px 11px; }
  .panel-head { grid-template-columns: 1fr; }
  .row { grid-template-columns: 96px 1fr; }
  .prose .fig img, .fig img { height: 240px; }
}