/* ------------------------------------------------------------------------
   Plug-in Solar East Mids

   This is the company that fits the socket, mounts the panel and does the
   operator's paperwork in Nottingham, Leicester and Derby. The design source
   is the electrician's own kit: a screwed faceplate, a marked cable run, a
   tester light. Three decisions carry the whole site and nothing else is
   allowed to compete with them.

   1. THE FACEPLATE is the signature device. Every object that holds content
      (the hero photograph, every card, the form, the nav panel, the page
      aside, the closing tile) is a fully bordered plate carrying two flush
      screw heads set into its own top corners, brushed steel on a slotted
      cross, exactly the way a socket faceplate is screwed to its pattress
      box. The screws belong to the object itself, never to an edge alone, so
      the plate still closes on all four sides and cannot be mistaken for a
      corner flourish. Corners are square throughout, so the glyph set stays
      square capped and mitred to match.

   2. THE RUN is the seam device, and it is the only one. Where two sections
      meet, a 6px full bleed strip crosses the join: safety yellow broken
      into short lengths by dark cable ties at a fixed interval, the way a
      cable run is marked and strapped along a wall. There is no other rule,
      band or hairline at a seam anywhere on this site, and the run never
      appears inside a component, only between sections.

   3. THE TESTER is the one ambient motion. A soft safety yellow glow behind
      the hero headline breathes once up to full and settles low, the way the
      indicator light on a socket tester confirms a circuit is live, then
      holds a slow, very shallow breath. Opacity only, nothing translates,
      and it stops dead for anyone who has asked for less movement.

   Radius is 0 everywhere. Glyphs are Lucide geometry (ISC), drawn square
   capped and mitred to match the square corners and the faceplate.
   ------------------------------------------------------------------------ */

:root {
  /* 7 roles. ink: the deep plane, hero, footer, dark bands. slate: all body
     text. paper: the page. steel: the alternate ground, a cool tint against
     paper's warm cream so two grounds separate without a line. action: READ
     as safety yellow but deep enough to carry text, links and buttons.
     yellow: the bright highlight, decoration only, never text under 24px.
     muted: secondary text. */
  --ink: #181E24;
  --slate: #333C44;
  --paper: #F6F4EF;
  --steel: #E6E9EA;
  --action: #7A5100;
  --yellow: #F4C10E;
  --muted: #5B6570;

  /* derived, not new colours: the action tone pressed for hover/active, a
     hairline tint used inside components only (never at a seam), and a
     lifted grey for secondary text on the ink plane. */
  --action-press: #5E3F00;
  --line: #D8DCDD;
  --ink-mute: #B9C1C6;

  --display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gut: 26px;
  --scr: 15px;   /* faceplate: screw diameter */
  --sci: 10px;   /* faceplate: screw inset from the plate's own edge */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  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.04;
  letter-spacing: -0.015em;
  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.3rem; line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: 1.02rem; line-height: 1.25; }

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

a { color: var(--action); font-weight: 700; 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(--yellow); }

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

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

/* --- the faceplate ------------------------------------------------------ */
/* A fully bordered object with two screw heads set into its own top
   corners. The screws are drawn on the object's pseudo-elements, so they
   travel with it: no plate exists without both of them, and no other
   element on the page carries a screw. */
.plate {
  position: relative;
  border: 2px solid var(--line);
  background: var(--paper);
}
.plate::before, .plate::after {
  content: "";
  position: absolute;
  top: var(--sci);
  width: var(--scr); height: var(--scr);
  border-radius: 50%;
  background-image:
    linear-gradient(112deg, transparent 42%, rgba(15, 18, 22, 0.55) 42% 58%, transparent 58%),
    radial-gradient(circle at 33% 28%, #F3F5F6, #A9B1B8 56%, #5B636B 100%);
  box-shadow: 0 1px 1px rgba(10, 12, 15, 0.35);
  z-index: 2;
}
.plate::before { left: var(--sci); }
.plate::after { right: var(--sci); }
/* On the ink plane the plate is paper still (it is a fixture, not a hole in
   the wall), but its border lifts so it reads against the dark ground. */
.on-dark .plate, .sec--ink .plate { border-color: rgba(255, 255, 255, 0.22); }

/* --- the run: seam device ------------------------------------------------ */
/* A 6px full bleed strip, safety yellow broken by dark ties at a fixed
   32px interval. It sits between two sections and belongs to neither. */
.run {
  height: 6px;
  background-image: repeating-linear-gradient(
    90deg, var(--yellow) 0 26px, var(--ink) 26px 32px
  );
}
.sec--steel + .run, .run + .sec--steel { }

/* --- masthead ------------------------------------------------------------ */
.mast-strip {
  background: var(--ink);
  color: var(--ink-mute);
  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: #4C5860; }
.mast-strip b { color: var(--paper); font-weight: 600; }

.mast { background: var(--paper); 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: 800; font-size: clamp(1.14rem, 1.5vw, 1.42rem);
  letter-spacing: -0.02em; color: var(--slate); line-height: 1.08;
  padding: 4px 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center;
}
.brand:hover { color: var(--slate); }
.brand b { color: var(--action); font-weight: 800; display: block; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a, .nav button {
  font: inherit; font-weight: 700; color: var(--slate); 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(--paper); 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(--paper); }

.drop { position: relative; }
.panel {
  position: absolute; top: calc(100% + 12px); left: 0;
  width: 392px; max-width: calc(100vw - 40px);
  background: var(--paper); border: 2px solid var(--slate); 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(--slate); 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 ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; background-color: var(--ink);
  background-image: linear-gradient(168deg, #212930 0%, #181E24 56%, #10151A 100%),
    url("/assets/tex/brushed-alu.png");
  background-blend-mode: normal, soft-light;
  color: var(--paper); padding: 74px 0 84px;
}
.tester {
  position: absolute; left: 50%; top: 10%; width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(244, 193, 14, 0.16) 0%, rgba(244, 193, 14, 0) 68%);
  pointer-events: none; opacity: 0.35;
  animation: tester 5.4s ease-in-out infinite;
}
@keyframes tester {
  0% { opacity: 0.12; }
  30% { opacity: 0.55; }
  55% { opacity: 0.3; }
  100% { opacity: 0.12; }
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: start; margin-top: 46px; }
.hero h1 { color: var(--paper); max-width: 21ch; text-wrap: pretty; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero .lede { font-size: 1.22rem; line-height: 1.52; color: #D8DDE0; max-width: 46ch; margin: 0; }

.chips { display: grid; gap: 8px; margin: 30px 0 0; list-style: none; padding: 0; }
.chips li {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
  color: #E9ECEE; padding: 11px 15px; font-size: 0.925rem; font-weight: 500; line-height: 1.3; max-width: 100%;
}
.chips .ico { color: var(--yellow); flex: none; margin-top: 1px; }

.hero-figure { margin: 42px 0 0; padding: 10px 10px 0; }
.hero-figure img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 32%; }
.hero-figure figcaption { font-size: 0.875rem; color: #AAB2B7; margin-top: 14px; max-width: 58ch; }
.hero .form-card { background: var(--paper); }

/* --- the finding band (dark, early) --------------------------------------- */
.finding-band { background: var(--ink); color: var(--paper); padding: 90px 0; position: relative; overflow: hidden; }
.finding-band::before {
  content: ""; position: absolute; inset: 0; background-image: url("/assets/tex/brushed-alu.png");
  opacity: 0.05; pointer-events: none;
}
.finding-band .wrap { position: relative; }
.finding { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 60px; align-items: center; }
.finding h2 { color: var(--paper); max-width: 17ch; }
.finding p { color: #D6DBDD; font-size: 1.1rem; max-width: 56ch; margin-top: 20px; }
.finding .warn { display: inline-flex; align-items: center; gap: 10px; color: var(--yellow); font-weight: 700; font-size: 1.02rem; margin-bottom: 16px; }
.finding figure { margin: 0; }
.finding figure img { width: 100%; height: 400px; object-fit: cover; }
.finding figcaption { font-size: 0.85rem; color: var(--ink-mute); margin-top: 16px; }

/* --- sections -------------------------------------------------------------- */
.sec { padding: 96px 0; }
.sec--paper { background: var(--paper); }
.sec--steel { background: var(--steel); }
.sec--ink { background: var(--ink); color: var(--paper); }

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

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

/* --- service cards ---------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; margin-top: 60px; }
.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(--ink); }
.card-img img { width: 100%; height: 264px; 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(--paper); padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.sec--steel .card-body { background: var(--paper); }
.card-body h3 { margin-bottom: 9px; }
.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); }

/* --- the kit / socket split -------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin-top: 54px; }
.split figure { margin: 0; }
.split figure img { width: 100%; height: 380px; object-fit: cover; }
.split figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 16px; }
.kit-list { list-style: none; margin: 0; padding: 0; }
.kit-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; }
.kit-list li + li { margin-top: 0; }
.kit-list .ico { color: var(--action); flex: none; margin-top: 2px; }
.kit-list b { display: block; font-size: 1.03rem; }
.kit-list span { display: block; color: var(--muted); font-size: 0.96rem; margin-top: 3px; }

/* --- measure bars ------------------------------------------------------------ */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li + li { margin-top: 28px; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bar-head b { font-weight: 600; font-size: 1.02rem; }
.bar-head span { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--slate); 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(--line); margin-top: 10px; }
.bar-fill { height: 100%; background: var(--yellow); }

/* --- areas ------------------------------------------------------------------- */
.region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 60px; 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: 16px; }
.sec--ink .region figcaption { color: var(--ink-mute); }
.counties { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 26px 0 0; padding: 0; }
.counties li { background: var(--steel); color: var(--slate); padding: 9px 14px; font-size: 0.92rem; font-weight: 600; }
.sec--steel .counties li { background: var(--paper); }
.sec--ink .counties li { background: rgba(255, 255, 255, 0.1); color: var(--paper); }

/* --- questions ---------------------------------------------------------------- */
.qs { margin-top: 50px; max-width: 900px; }
.qgrid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 56px; align-items: start; }
.qgrid > h2 { margin-top: 6px; }
.qgrid .qs { margin-top: 0; max-width: none; }
.q { border: 2px solid var(--line); background: var(--paper); }
.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.14rem; line-height: 1.26; 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; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 24px 24px; color: var(--muted); max-width: 70ch; }
.sec--steel .q { border-color: #CBD0D1; }

/* --- form ----------------------------------------------------------------------- */
.form-card { background: var(--paper); color: var(--slate); padding: 32px 32px 34px; }
.form-card h2, .form-card h3 { margin-bottom: 8px; }
.form-card h3 { font-size: 1.56rem; font-weight: 800; }
.form-card .said { color: var(--muted); font-size: 0.98rem; margin-bottom: 20px; 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(--slate);
  background: #FFFFFF; border: 2px solid var(--line); border-radius: 0; padding: 13px 14px; min-height: 48px;
}
.f textarea { min-height: 100px; 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(--slate); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  font: inherit; font-family: var(--body); font-weight: 700; font-size: 1.04rem;
  background: var(--yellow); color: var(--ink); 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: #DCAD0C; }
.btn--slate { background: var(--slate); color: var(--paper); }
.btn--slate:hover { background: #1F262D; }
.form-card .after { font-size: 0.86rem; color: var(--muted); margin-top: 16px; max-width: 52ch; }

.ask-band { background: var(--steel); padding: 96px 0; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 60px; align-items: start; }
.ask-grid h2 { max-width: 15ch; }
.ask-grid .sec-lede { margin-top: 20px; }
.ask-grid .form-card { background: var(--paper); }

/* --- closing tile ---------------------------------------------------------------- */
.closer { background-color: var(--ink); background-image: url("/assets/tex/brushed-alu.png"); background-blend-mode: soft-light; padding: 86px 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(--paper); color: var(--slate); padding: 50px 48px; 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.07rem; max-width: 42ch; }
.closer-plate .btn { width: auto; align-self: flex-start; margin-top: 26px; padding-inline: 34px; }

/* --- interiors ------------------------------------------------------------------- */
.page-head { background: var(--ink); color: var(--paper); padding: 68px 0 76px; position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: var(--paper); max-width: 17ch; font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
.page-head h1 em { font-style: normal; color: var(--yellow); }
.crumb { font-size: 0.86rem; color: var(--ink-mute); margin-bottom: 20px; }
.crumb a { color: #CBD1D4; font-weight: 600; }
.crumb a:hover { color: var(--paper); }
.pull { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.46; color: #DDE1E3; max-width: 50ch; margin-top: 24px; font-weight: 500; }

.article { padding: 82px 0 96px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 { font-size: clamp(1.72rem, 2.4vw, 2.1rem); 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(--yellow); }
.prose figure { margin: 38px 0; }
.prose figure img { width: 100%; height: 330px; object-fit: cover; }
.prose figcaption { font-size: 0.87rem; color: var(--muted); margin-top: 16px; max-width: 60ch; }
.prose .said-note { background: var(--steel); padding: 26px 28px; margin: 32px 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(--slate); font-weight: 600; font-size: 0.97rem; }
.aside ol a:hover { color: var(--action); }
.aside-card { background: var(--slate); color: var(--paper); padding: 26px 24px 28px; }
.aside-card h4 { color: var(--paper); font-family: var(--display); font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.aside-card p { font-size: 0.94rem; color: #C9CFD2; 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: 44px; margin-top: 54px; }

/* --- credits and thanks ------------------------------------------------------------ */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 52px; }
.credit { background: var(--paper); padding: 22px 24px 24px; border: 2px solid var(--line); 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: 108px 0 118px; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 64px; align-items: center; }
.thanks-grid img { width: 100%; height: 440px; object-fit: cover; }

/* --- footer ----------------------------------------------------------------------- */
.foot { background-color: var(--ink); color: var(--ink-mute); padding: 74px 0 40px; font-size: 0.95rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 46px; }
.foot .mark { font-family: var(--display); font-weight: 800; font-size: 1.42rem; color: var(--paper); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 14px; }
.foot .mark b { display: block; color: var(--yellow); }
.foot p { max-width: 34ch; font-size: 0.93rem; }
.foot h4 { color: var(--paper); 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: #C7CDD0; font-weight: 500; }
.foot a:hover { color: var(--paper); }
.foot-legal { margin-top: 64px; padding-top: 0; font-size: 0.84rem; color: #8C959B; 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) {
  .tester { animation: none; opacity: 0.28; }
  .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) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .hero-figure img { height: 300px; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .aside { position: static; }
  .aside-card { max-width: 460px; }
  .finding, .split, .region, .ask-grid, .thanks-grid, .qgrid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer-grid img { min-height: 300px; }
}

@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(--slate); background: none; border: 2px solid var(--slate); padding: 10px 16px; min-height: 46px; cursor: pointer;
  }
  .mobile[data-open="true"] { display: block; background: var(--paper); 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(--slate); min-height: 44px; }
  .mobile a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
  .mobile .btn { margin-top: 18px; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; --scr: 12px; --sci: 8px; }
  .sec, .ask-band { padding: 64px 0; }
  .finding-band { padding: 62px 0; }
  .closer { padding: 58px 0; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .siblings, .credits { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero { padding: 50px 0 60px; }
  .hero-figure img { height: 240px; }
  .finding figure img, .region figure img, .thanks-grid img, .split figure img { height: 260px; }
  .prose figure img { height: 230px; }
  .article { padding: 54px 0 64px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .form-card, .closer-plate { padding: 24px 22px 26px; }
  .closer-plate { padding: 34px 24px 38px; }
}

@media (max-width: 480px) {
  :root { --gut: 20px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mast .wrap { min-height: 74px; }
  .hero-figure img { height: 200px; }
  .q summary { padding: 18px 18px; font-size: 1.04rem; }
  .q .a { padding: 0 18px 20px; }
}