/* ------------------------------------------------------------------------
   Plug-in Solar West Midlands

   The design source is what this region actually makes. Birmingham and the
   Black Country press, cast and machine metal parts, and a finished part is
   one you can tell has been through a machine. Three decisions carry the
   whole site and nothing else is allowed to compete with them.

   1. THE CHAMFER is the signature device. Every object on this site has its
      top right corner cut off at 45 degrees: the hero photograph, every card,
      the form, each figure plate, the nav panel, the aside, the buttons, the
      closing tile. A chamfer is a property of the whole object, cut through
      all of it, so it can never be mistaken for a border on one edge. It is
      the mark a machine leaves on a pressed or milled part, which is the one
      thing this region is known for making. Small objects take 22px, large
      ones 44px, and nothing on the site has a rounded corner.

   2. THE SHUT LINE IS THE SEAM AND THE ONLY SEAM. Where two light grounds
      meet, they meet through a 5px full bleed band of foundry black, the gap
      you see between two pressed panels on a car body. Where a dark plane
      meets a light ground the plane's own edge is the shut line, so the
      device is never doubled. There is no hairline under a heading anywhere
      on this site and no component carries a horizontal black band.

   3. THE HEAT is the one ambient motion, and unlike a travelling band it does
      not move across the page at all: a wide soft glow low on the foundry
      plane swells and falls on a long cycle, the way the mouth of a furnace
      brightens and dims. Opacity only, nothing translates, and it stops dead
      for anyone who has asked for less movement.

   Radius is 0 everywhere, so the glyph set is Lucide geometry rendered with
   square caps and mitred joins. Texture is used twice and no more: a fine
   non-directional grit on the foundry planes, and a coarse grain on the one
   brick ground that carries the placement figures. A periodic directional tile
   was tried first on the hero and read as diagonal pinstripes at 1440, which is
   why the grit replaced it. Never a textured object on a textured plane.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. foundry: the deep plane, the masthead and every dark band.
     ink: all body text on a light ground. page: the page ground, warmed
     towards brick. brick: the alternate ground, measured at 1.24 against
     page, which is where two grounds separate for the eye without reading as
     banding. brass: ACTION ONLY, never decoration. rust: the highlight, the
     one phrase in the headline and every figure. muted: secondary text. */
  --foundry: #14171B;
  --ink:     #262D34;
  --page:    #FBF8F5;
  --brick:   #EADFD4;
  --brass:   #7E5A0E;
  --rust:    #9C3B27;
  --muted:   #5C646D;

  /* Derived, not new colours: the two lit versions used only on the foundry
     plane where the light-ground values fall below AA, one pressed state, and
     one hairline tint used inside components and never at a seam. */
  --rust-lit:  #D4674A;
  --brass-lit: #D69B2E;
  --brass-press: #5F440A;
  --chalk:  #F2EDE7;
  --hair:   #D2C4B6;
  --hair-d: #333A42;

  --display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gut: 26px;
  --ch: 22px;   /* the chamfer on a small object */
  --chl: 44px;  /* the chamfer on a large one */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.62 var(--body);
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}

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

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

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

p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }

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

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

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

/* The chamfer. One class, two sizes, applied to every object on the site. */
.cham  { clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%); }
.chaml { clip-path: polygon(0 0, calc(100% - var(--chl)) 0, 100% var(--chl), 100% 100%, 0 100%); }

/* The shut line. The only seam on this site. It is written into the page as
   its own element between two light grounds, never as a border on a section,
   so it cannot accidentally double with a ground change. */
.shut { height: 5px; background: var(--foundry); }

/* --------------------------------------------------------------- masthead */

.mast { background: var(--foundry); color: var(--chalk); position: relative; z-index: 40; }
/* Direct child only: .mobile also sits inside .mast and has its own nested
   .wrap for the open panel, which must not inherit the masthead's row flex
   (it stacks the link list above the CTA instead). */
.mast > .wrap { display: flex; align-items: center; gap: 28px; min-height: 92px; }

.brand {
  font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.05;
  color: var(--chalk); letter-spacing: -.01em; display: block; padding: 8px 0;
}
.brand b { display: block; color: var(--brass-lit); font-weight: 700; font-size: 27px; }
.brand:hover { color: #fff; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav > a, .nav button {
  font: 600 16px/1 var(--body); color: var(--chalk); background: none; border: 0;
  padding: 15px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px;
}
.nav > a:hover, .nav button:hover { color: var(--brass-lit); }

.drop { position: relative; }
.drop .panel {
  position: absolute; top: 100%; left: 0; width: 460px; max-width: 92vw;
  background: var(--page); color: var(--ink); border: 2px solid var(--foundry);
  padding: 22px 24px 18px; opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.drop[data-open="true"] .panel { opacity: 1; visibility: visible; transform: none; }
.drop .strap { font-size: 15px; color: var(--muted); margin: 0 0 14px; }
.drop ul { list-style: none; margin: 0; padding: 0; }
.drop li + li { margin-top: 4px; }
.drop li a {
  display: block; padding: 11px 12px; color: var(--ink); font-weight: 700; font-size: 17px;
  font-family: var(--display);
}
.drop li a span { display: block; font: 400 15px/1.45 var(--body); color: var(--muted); margin-top: 3px; }
.drop li a:hover { background: var(--brick); color: var(--ink); }
.drop .all {
  display: block; margin-top: 14px; padding: 12px; background: var(--brick);
  font-size: 15px; font-weight: 700;
}

/* The top CTA is a filled action, so it overrides the plain nav link reset that
   strips backgrounds off every other item in the bar. */
.nav > a.cta-top { background: var(--brass); color: #fff; font-weight: 700; padding: 15px 20px; }
.nav > a.cta-top:hover { background: var(--brass-press); color: #fff; }

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

/* ------------------------------------------------------------------- hero */

.hero { position: relative; background: var(--foundry); color: var(--chalk); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("/assets/tex/asfalt-dark.png");
  opacity: .85;
}
/* THE HEAT. A wide soft glow low on the plane. It does not travel: it swells
   and falls in place, which is the one motion this site has. The ramp is wide
   enough that no edge forms, and it sits low and right of the headline so it
   is never behind body copy. */
.heat {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(115% 85% at 78% 105%, rgba(212,103,74,.30) 0%,
    rgba(160,74,40,.17) 34%, rgba(126,90,14,.08) 60%, rgba(20,23,27,0) 82%);
  opacity: .58;
  animation: heat 19s ease-in-out infinite alternate;
}
@keyframes heat { from { opacity: .48; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .heat { animation: none; opacity: .7; } }

.hero .wrap { position: relative; z-index: 2; padding-top: 62px; padding-bottom: 0; }
.areas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; align-items: start; }

.hero h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  color: #fff; margin: 0 0 22px; max-width: 17ch;
}
.hero h1 em { font-style: normal; color: var(--rust-lit); }

.hero .lede { font-size: 20px; line-height: 1.55; color: var(--chalk); max-width: 46ch; margin-bottom: 26px; }

.chips { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 9px; }
.chips li {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  font-size: 16px; font-weight: 600; color: var(--chalk);
  background: rgba(255,255,255,.07); padding: 13px 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.chips .ico { color: var(--brass-lit); flex: none; margin-top: 2px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 54px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--brass); color: #fff; font: 700 17px/1 var(--body);
  padding: 17px 26px; border: 0; cursor: pointer; min-height: 52px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--brass-press); color: #fff; transform: translateY(-2px); }
.btn-2 {
  background: transparent; color: var(--chalk); border: 2px solid var(--chalk);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.btn-2:hover { background: var(--chalk); color: var(--foundry); }

/* The hero photograph sits full bleed at the foot of the foundry plane, cut
   at the top right like everything else, 500px tall at 1440. */
.hero-shot { position: relative; z-index: 2; padding-bottom: 58px; }
.hero-shot figure { margin: 0; }
.hero-shot img { width: 100%; height: 500px; object-fit: cover; object-position: 50% 62%; }
.hero-shot figcaption { color: var(--chalk); font-size: 14.5px; padding-top: 13px; opacity: .9; }

/* ------------------------------------------------------------------- form */

.form-card { background: var(--page); color: var(--ink); padding: 30px 30px 26px; }
.form-card h2, .form-card h3 { font-size: clamp(1.6rem, 2.1vw, 2rem); margin: 0 0 10px; }
.form-card .said { font-size: 15.5px; color: var(--muted); margin-bottom: 20px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label.f { display: block; margin-bottom: 14px; min-width: 0; }
label.f span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
label.f input, label.f select, label.f textarea {
  width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink);
  background: #fff; border: 2px solid var(--hair); padding: 12px 13px; min-height: 48px;
}
label.f textarea { min-height: 84px; resize: vertical; }
label.f input:focus, label.f select:focus, label.f textarea:focus { border-color: var(--brass); outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 4px; }
.form-card .after { font-size: 14px; color: var(--muted); margin: 16px 0 0; }

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

.sec { padding: 78px 0; }
.sec--brick { background-color: var(--brick); }
.sec--grain {
  background-color: var(--brick);
  background-image: url("/assets/tex/concrete-wall-2.png");
}
.sec--dark { background: var(--foundry); color: var(--chalk); }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark a { color: var(--brass-lit); }
.sec--dark a:hover { color: #fff; }
/* The action colour is a fill on a button, so on a dark ground the button keeps
   its white label rather than inheriting the dark-ground link colour. */
.sec--dark a.btn, .sec--dark a.btn:hover, .page-head a.btn { color: #fff; }
.sec--dark a.btn-2 { color: var(--chalk); }
.sec--dark a.btn-2:hover { color: var(--foundry); }

.sec h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); max-width: 22ch; }
.sec-lede { font-size: 19px; color: var(--muted); max-width: 62ch; margin-bottom: 36px; }
.sec--dark .sec-lede { color: var(--chalk); opacity: .88; }

.head-wide { max-width: 30ch; }

/* Placement figures. Four plates, each a machined part with its corner cut,
   the figure set in the display face with tabular numerals. */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fig {
  background: var(--page); padding: 26px 22px 24px; min-width: 0;
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.fig .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 3.6vw, 3.1rem);
  color: var(--rust); line-height: 1; font-variant-numeric: tabular-nums; display: block;
}
.fig .u { font-size: 14px; font-weight: 700; color: var(--muted); display: block; margin: 6px 0 12px; }
.fig h3 { font-size: 19px; margin: 0 0 6px; }
.fig p { font-size: 15px; color: var(--muted); margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: start; }
.split--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
/* Where one column of a split runs much longer than the other, the photograph
   grows to the full height of the row rather than leaving a hole under it. */
.split--fill { align-items: stretch; }
.split--fill > div { min-width: 0; }
.split--fill figure.shot { display: flex; flex-direction: column; height: 100%; }
.split--fill figure.shot img { flex: 1 1 auto; height: auto; min-height: 320px; }

figure.shot { margin: 0; }
figure.shot img { width: 100%; height: 400px; object-fit: cover; }
figure.shot figcaption { font-size: 14.5px; color: var(--muted); padding-top: 12px; }
.sec--dark figure.shot figcaption { color: var(--chalk); opacity: .85; }
figure.shot--tall img { height: 520px; }

/* Service cards. Every card in this row carries a photograph. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
/* A card is an object standing on a ground, so it always takes the ground it is
   not standing on. On the page it is brick, on a brick course it is page. */
.card { background: var(--brick); min-width: 0; display: flex; }
.sec--brick .card, .sec--grain .card { background: var(--page); }
.card > a { display: flex; flex-direction: column; width: 100%; color: var(--ink); font-weight: 400; }
.card > a:hover { color: var(--ink); }
.card-img { overflow: hidden; }
.card-img img { width: 100%; height: 300px; object-fit: cover; transition: transform .4s ease; }
.card > a:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 22px; margin: 0 0 8px; }
.card-body p { font-size: 15.5px; color: var(--muted); margin: 0 0 18px; }
.card .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--brass); font-weight: 700; font-size: 16px;
}
.card > a:hover .go { color: var(--brass-press); }

/* The area list. The regional guide is the spine of this site, so its nine
   entries are set as full width rows rather than squeezed into cards. */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.area {
  background: var(--page); padding: 24px 24px 26px; min-width: 0;
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.sec--dark .area { background: #1D2229; }
.area h3 { font-size: 20px; margin: 0 0 7px; }
.area p { font-size: 15px; color: var(--muted); margin: 0; }
.sec--dark .area p { color: var(--chalk); opacity: .82; }

/* Questions */
.qs { max-width: 74ch; }
/* On the home page the questions block runs the full measure as a two column
   grid, because a single 74ch column leaves half the course empty at 1440. */
.qs--two { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-items: start; }
.q { background: var(--page); margin-bottom: 4px; padding: 0; }
.sec--brick .q, .sec--grain .q { background: var(--page); }
.q summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3;
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  min-height: 56px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { flex: none; margin-top: 3px; color: var(--brass); transition: transform .2s ease; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 22px 20px; }
.q .a p { font-size: 16px; color: var(--muted); margin: 0 0 .8em; }
.q .a p:last-child { margin-bottom: 0; }

/* The closing tile is built exactly like a card, with a photograph and a
   plate, so it belongs to the same grid. Only the plate colour and the button
   mark it as the action. */
.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(--foundry); color: var(--chalk); padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 { color: #fff; font-size: clamp(2rem, 2.9vw, 2.6rem); margin-bottom: 14px; }
.closer-plate p { color: var(--chalk); opacity: .9; max-width: 42ch; }
.closer-plate .btn { align-self: flex-start; margin-top: 10px; }

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

.page-head { background: var(--foundry); color: var(--chalk); padding: 54px 0 58px; position: relative; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("/assets/tex/asfalt-dark.png"); opacity: .8; pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 2; }
.crumb { font-size: 14.5px; color: var(--chalk); opacity: .8; margin-bottom: 20px; }
.crumb a { color: var(--brass-lit); }
.page-head h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); color: #fff; max-width: 20ch; }
.page-head h1 em { font-style: normal; color: var(--rust-lit); }
.pull { font-size: 21px; line-height: 1.5; color: var(--chalk); max-width: 58ch; margin: 18px 0 0; }

.article { padding: 70px 0 78px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose h2 { font-size: clamp(1.7rem, 2.5vw, 2.2rem); margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin-top: 1.6em; }
.prose p { font-size: 17.5px; }
.prose li { font-size: 17.5px; margin-bottom: .4em; }
.prose figure.shot { margin: 30px 0; }
.prose figure.shot img { height: 340px; }

.aside { position: sticky; top: 22px; min-width: 0; }
.aside h4 { font-size: 15px; font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.aside ol { list-style: none; margin: 0 0 26px; padding: 0; }
.aside ol li { margin-bottom: 2px; }
.aside ol a { display: block; padding: 9px 12px; background: var(--brick); color: var(--ink); font-size: 15.5px; font-weight: 600; }
.aside ol a:hover { background: var(--foundry); color: var(--chalk); }
.aside-card {
  background: var(--foundry); color: var(--chalk); padding: 24px 24px 26px;
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.aside-card h4 { color: #fff; font-family: var(--display); text-transform: none; letter-spacing: 0; font-size: 19px; }
.aside-card p { font-size: 15px; color: var(--chalk); opacity: .88; }
.aside-card .btn { width: 100%; }

.siblings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

/* Credits */
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.credit {
  background: var(--page); padding: 22px 22px 24px; min-width: 0;
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.credit h3 { font-size: 18px; margin-bottom: 8px; }
.credit p { font-size: 14.5px; color: var(--muted); margin: 0 0 .5em; }
.credit p:last-child { margin-bottom: 0; }
.attrib { font-size: 14.5px; color: var(--muted); margin-top: 28px; max-width: 78ch; }

/* Thank you */
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: start; }

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

.foot { background: var(--foundry); color: var(--chalk); padding: 64px 0 38px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 40px; }
.foot p { font-size: 15.5px; opacity: .88; }
.foot .mark { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.1; opacity: 1; margin-bottom: 14px; }
.foot .mark b { display: block; color: var(--brass-lit); font-size: 24px; }
.foot h4 { font-size: 14px; font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brass-lit); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { font-size: 15.5px; margin-bottom: 8px; opacity: .9; min-width: 0; overflow-wrap: anywhere; }
.foot li a { color: var(--chalk); font-weight: 500; }
.foot li a:hover { color: var(--brass-lit); }
.foot-legal { margin-top: 44px; padding-top: 26px; }
.foot-legal p { font-size: 14px; opacity: .78; max-width: 96ch; }
.foot-legal a { color: var(--brass-lit); }

/* ------------------------------------------------------------- reveal ---- */

.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; }
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero h1 { max-width: 18ch; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .aside { position: static; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cards, .siblings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs--two { grid-template-columns: minmax(0, 1fr); }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer-grid img { min-height: 300px; }
  .thanks-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .nav .lg { display: none; }
  .nav button.burger {
    display: inline-flex; align-items: center; gap: 9px; background: var(--brass);
    color: #fff; border: 0; font: 700 16px/1 var(--body); padding: 15px 20px;
    cursor: pointer; min-height: 48px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  }
  .mobile { display: block; max-height: 0; overflow: hidden; transition: max-height .25s ease; background: #1D2229; }
  .mobile[data-open="true"] { max-height: 620px; }
  .mobile .wrap { display: block; padding-top: 18px; padding-bottom: 22px; }
  .mobile ul { list-style: none; margin: 0 0 16px; padding: 0; }
  .mobile li a {
    display: block; padding: 14px 0; color: var(--chalk); font-family: var(--display);
    font-weight: 700; font-size: 18px; min-height: 48px;
  }
  .mobile li + li { margin-top: 4px; }
  .mobile li a span { display: block; font: 400 14.5px/1.4 var(--body); color: var(--chalk); opacity: .72; margin-top: 3px; }
  .mobile .btn { width: 100%; }
}

@media (max-width: 780px) {
  body { font-size: 16.5px; }
  .sec { padding: 58px 0; }
  .cards, .siblings, .figs, .areas, .credits { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { padding-top: 44px; }
  .hero-shot img { height: 330px; }
  figure.shot img, figure.shot--tall img { height: 280px; }
  .closer-plate { padding: 34px 26px; }
  .form-card { padding: 24px 22px 22px; }
  .prose figure.shot img { height: 240px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 520px) {
  :root { --gut: 18px; --ch: 16px; --chl: 28px; }
  .mast > .wrap { min-height: 78px; gap: 14px; }
  .brand { font-size: 19px; }
  .brand b { font-size: 22px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .lede { font-size: 18px; }
  .closer-grid img { min-height: 220px; }
  .hero-shot img { height: 260px; }
}