/* ------------------------------------------------------------------------
   Plug-in Solar GB

   This is the flagship calculator: the tool is the hero, and the company
   that supplies and fits the device stands around it. The design source is
   taken literally from what the product actually is: a metered reading. A
   household generation meter is a dark blue-black case with an amber lit
   readout, a graduated face, and a needle that settles on a figure. Orange
   and deep blue are not decoration here; they are the case and the digits.

   1. THE DIAL is the signature device. Every object that holds content on
      this site (the calculator card, the enquiry form, every photograph,
      every card, the FAQ rows, the closing tile) is a fully bordered plate,
      and every plate carries the same small instrument mark fixed to its
      top right corner: a quarter turn of five graduated ticks, drawn as one
      small object rather than an edge treatment. The plate still closes on
      all four sides; the dial mark sits on top of the corner the way a
      calibration mark is stamped into the corner of a meter's glass, never
      alone on one edge. It is fixed and quiet on every plate, the casing's
      own stamp repeated on each object, which is what makes the one thing
      that actually moves, the needle under the calculator's own figure,
      read as the instrument rather than more casing.

   2. THE INDEX LINE is the seam device, and the only one. Where two light
      grounds meet, a 6px full-bleed band in the case ink carries one short
      pale notch fixed at its centre, exactly the zero mark a needle is read
      against. Dark planes (the hero, the finding band, the footer) separate
      at their own colour edge and take no added band, so the device is
      never doubled. Nothing else on this site is a rule, a step or a jog.

   3. THE SWEEP is the one ambient motion. Under the calculator's own big
      figure, a slim amber needle on a shallow arc glides slowly from one
      side to the other and back, the way a meter needle drifts while it
      settles on a reading rather than snapping straight to it. Transform
      only, a slow 24 second cycle so it reads as ambient rather than as a
      ticking clock, and it stops dead for anyone who has asked for less
      movement. Nothing else on the page moves on its own.

   Radius is 0 everywhere, so the glyphs are Lucide geometry rendered with
   square caps and mitred joins. Texture is used once only: a fine dust
   grain on the dial hero plane, never behind body copy.
   ------------------------------------------------------------------------ */

:root {
  /* 8 roles. dial: the case, every dark plane. ink: all text on light
     grounds. page: the page ground. panel: the alternate ground, measured
     at about 1.22 against page, which is where two grounds separate for the
     eye without reading as banding. amp: ACTION ONLY, the orange of the
     device itself, never decoration. gold: the highlight for light grounds
     (headings, attributions, small figures). gold-lit: the same highlight
     lifted for dark grounds, the amber of a lit meter digit. muted:
     secondary text. hair: a border tint used inside components, never at a
     seam. */
  --dial: #0E1B33;
  --dial-2: #16294A;
  --ink: #16233D;
  --page: #F5F6FA;
  --panel: #E3E9F2;
  --amp: #A8460C;
  --amp-press: #8A3A09;
  --gold: #A66A12;
  --gold-lit: #F0A23E;
  --muted: #59647C;
  --hair: #D2D8E4;
  --white: #FFFFFF;

  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

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

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

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

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
h3 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: 1rem; line-height: 1.25; }

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

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

:focus-visible { outline: 3px solid var(--amp); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--gold-lit); }

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

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

/* --- the dial: the signature device ------------------------------------ */
/* A fully bordered plate. The corner mark sits ON the border, never alone
   on one edge, and the plate closes on all four sides with or without it. */
.plate {
  position: relative;
  background: var(--white);
  border: 2px solid var(--hair);
}
.plate.on-dial { background: var(--dial-2); border-color: #2A3B5C; color: var(--white); }

.dial-mark {
  position: absolute; top: -2px; right: -2px;
  width: 38px; height: 38px;
  pointer-events: none;
  color: #B7C0D6;
}
.dial-mark svg { width: 100%; height: 100%; display: block; }
.plate.on-dial .dial-mark { color: rgba(255,255,255,0.3); }
.q .dial-mark, .credit .dial-mark { color: var(--hair); }

/* --- masthead ------------------------------------------------------------ */
.mast { background: var(--page); position: sticky; top: 0; z-index: 50; }
.mast > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.28rem; color: var(--ink); letter-spacing: -0.02em; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand b { color: var(--amp); font-weight: 800; }
.brand .dot {
  width: 30px; height: 30px; flex: none; background: var(--dial); position: relative;
}
.brand .dot svg { position: absolute; inset: 0; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav button {
  font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 13px 14px; min-height: 44px; display: inline-flex; align-items: center;
}
.nav a:hover { color: var(--amp); }
.nav .cta-top { background: var(--amp); color: var(--white); font-weight: 700; padding: 12px 20px; }
.nav .cta-top:hover { background: var(--amp-press); color: var(--white); }
.nav .burger { display: none; }
.mobile { display: none; }

/* --- hero and the calculator -------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--dial);
  background-image: linear-gradient(165deg, #16264A 0%, #0E1B33 55%, #0A1428 100%), url("/assets/tex/dust.png");
  background-blend-mode: normal, overlay;
  color: var(--white);
  padding: 56px 0 78px;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: var(--white); max-width: 21ch; text-wrap: pretty; }
.hero h1 em { font-style: normal; color: var(--gold-lit); }
.hero .lede { font-size: 1.18rem; line-height: 1.5; color: #D2D9E6; max-width: 62ch; margin: 20px 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; list-style: none; padding: 0; }
.chips li {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  color: #E7ECF3; padding: 10px 15px; font-size: 0.9rem; font-weight: 500;
}
.chips .ico { color: var(--gold-lit); flex: none; }

.calc-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 30px; align-items: stretch; margin-top: 40px;
}

/* The calculator card: the hero object. At least 470px tall at 1440. */
.calc-card { padding: 34px 36px 36px; min-height: 486px; display: flex; flex-direction: column; }
.calc-card h2 { color: var(--white); font-size: 1.5rem; margin-bottom: 22px; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 22px; }
.calc-field label { display: block; font-weight: 600; font-size: 0.88rem; color: #C3CBDA; margin-bottom: 8px; }
.calc-field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--white);
  background: rgba(255,255,255,0.06); border: 2px solid #33456A;
  padding: 12px 14px; min-height: 48px; appearance: none;
}
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  font: inherit; font-weight: 600; font-size: 0.92rem; color: #C9D1DE;
  background: rgba(255,255,255,0.05); border: 2px solid #33456A;
  padding: 10px 14px; min-height: 44px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--amp); border-color: var(--amp); color: var(--white); }
.seg button:hover { border-color: var(--gold-lit); }

.readout { margin-top: auto; padding-top: 30px; }
.readout-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.readout .big {
  font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(3.2rem, 5.4vw, 4.6rem); line-height: 0.92; color: var(--gold-lit);
  letter-spacing: -0.02em;
}
.readout .big small { display: block; font-size: 0.24em; font-weight: 700; color: #C3CBDA; letter-spacing: 0; margin-top: 6px; }
.sweep-track { position: relative; height: 10px; margin: 20px 0 4px; background: #1C2C4C; overflow: visible; }
.sweep-needle {
  position: absolute; top: -5px; left: 50%; width: 3px; height: 20px; background: var(--gold-lit);
  transform: translateX(-50%) translateX(0);
  animation: sweep 24s ease-in-out infinite alternate;
}
.sweep-needle::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--gold-lit); transform: translateX(-50%) rotate(45deg); }
@keyframes sweep {
  0% { transform: translateX(-50%) translateX(-128px); }
  100% { transform: translateX(-50%) translateX(128px); }
}
.readout .attrib { font-size: 0.83rem; color: #A9B2C4; margin-top: 14px; max-width: 60ch; }
.readout .caveat { font-size: 0.85rem; color: #E7ECF3; margin-top: 10px; max-width: 60ch; }
.readout .caveat b { color: var(--gold-lit); }

/* the enquiry form, beside the calculator, the one form component */
.form-card { padding: 30px 32px 32px; }
.form-card h3 { color: var(--white); font-size: 1.34rem; margin-bottom: 8px; }
.form-card .said { color: #C3CBDA; font-size: 0.95rem; margin-bottom: 20px; max-width: 44ch; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.f { display: block; margin-bottom: 14px; min-width: 0; }
.f > span { display: block; font-weight: 600; font-size: 0.86rem; color: #C3CBDA; margin-bottom: 6px; }
.f input, .f select, .f textarea {
  width: 100%; font: inherit; font-size: 0.98rem; color: var(--white);
  background: rgba(255,255,255,0.06); border: 2px solid #33456A; border-radius: 0;
  padding: 12px 13px; min-height: 46px;
}
.f textarea { min-height: 88px; resize: vertical; }
.f select { appearance: none; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--gold-lit); outline-offset: 1px; border-color: var(--gold-lit); }
.f input::placeholder { color: #8792A6; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn {
  font: inherit; font-family: var(--body); font-weight: 700; font-size: 1.02rem;
  background: var(--amp); color: var(--white); border: 0; border-radius: 0;
  padding: 15px 24px; min-height: 50px; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:hover { background: var(--amp-press); }
.form-card .after { font-size: 0.82rem; color: #A9B2C4; margin-top: 14px; }

/* --- sections ------------------------------------------------------------ */
.sec { padding: 92px 0; }
.sec--page { background: var(--page); }
.sec--panel { background: var(--panel); }
.sec--dial { background: var(--dial); color: var(--white); }

.sec > .wrap > h2 { max-width: 20ch; }
.sec-lede { font-size: 1.18rem; color: var(--muted); max-width: 60ch; margin-top: 18px; }
.sec--dial .sec-lede { color: #C3CBDA; }
.attrib { font-size: 0.83rem; color: var(--muted); margin-top: 24px; max-width: 78ch; }
.sec--dial .attrib { color: #9AA5BC; }

/* --- the index line: the seam device, and the only one ------------------- */
.seam { height: 6px; background: var(--dial); position: relative; }
.seam::after { content: ""; position: absolute; left: 50%; top: 2px; width: 16px; height: 2px; background: var(--page); transform: translateX(-50%); }

/* --- services cards -------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-top: 56px; }
.card { display: flex; flex-direction: column; }
.card > a, .card > div { display: flex; flex-direction: column; flex: 1; color: inherit; }
.card > a:hover { color: inherit; }
.card-img { position: relative; overflow: hidden; height: 240px; background: var(--dial); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 460ms cubic-bezier(0.2,0.7,0.3,1); }
.card > a:hover .card-img img { transform: scale(1.035); }
.card-body { background: var(--white); padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.sec--panel .card-body, .sec--page .card-body { background: var(--white); }
.card-body h3 { margin-bottom: 9px; }
.card-body p { color: var(--muted); font-size: 0.98rem; }
.card-body .go { margin-top: auto; padding-top: 16px; font-weight: 700; color: var(--amp); }
.card > a:hover .go { color: var(--amp-press); }

/* --- the finding band ----------------------------------------------------- */
.finding { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 58px; align-items: center; }
.finding h2 { color: var(--white); max-width: 18ch; }
.finding p { color: #D2D9E6; font-size: 1.08rem; max-width: 56ch; margin-top: 20px; }
.finding .warn { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-lit); font-weight: 700; font-size: 1rem; margin-bottom: 16px; }
.finding figure { margin: 0; }
.finding figure img { width: 100%; height: 420px; object-fit: cover; }
.finding figcaption { font-size: 0.85rem; color: #9AA5BC; margin-top: 14px; }

/* --- read-across bars ------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 58px; align-items: start; margin-top: 54px; }
.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: 14px; }
.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(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bar-head span i { font-style: normal; font-size: 0.52em; font-weight: 700; color: var(--muted); }
.bar-track { height: 14px; background: var(--panel); margin-top: 10px; }
.bar-fill { height: 100%; background: var(--amp); }
.stack figure { margin: 0; }
.stack figure img { width: 100%; height: 300px; object-fit: cover; }
.stack figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }

/* --- caveats --------------------------------------------------------------- */
.caveat-list { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.caveat-list li { background: var(--white); border: 2px solid var(--hair); padding: 22px 24px; position: relative; }
.caveat-list h3 { font-size: 1.05rem; margin-bottom: 8px; }
.caveat-list p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* --- questions ------------------------------------------------------------- */
.qs { margin-top: 48px; max-width: 900px; }
.qgrid { display: grid; grid-template-columns: minmax(0, 300px) 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(--hair); background: var(--white); }
.q + .q { margin-top: 12px; }
.q summary { list-style: none; cursor: pointer; padding: 20px 22px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 44px; }
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { flex: none; color: var(--amp); margin-top: 2px; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 22px 22px; color: var(--muted); max-width: 70ch; }
.sec--panel .q { border-color: #C9D1E0; }

/* --- ask band and closer --------------------------------------------------- */
.ask-band { background: var(--panel); padding: 92px 0; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 58px; align-items: start; }
.ask-grid h2 { max-width: 16ch; color: var(--ink); }
.ask-grid .sec-lede { margin-top: 20px; }
.ask-grid .form-card { background: var(--dial); }

.closer { background: var(--dial); padding: 84px 0; position: relative; }
.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(--white); padding: 50px 48px; display: flex; flex-direction: column; justify-content: center; border: none; }
.closer-plate h2 { max-width: 15ch; }
.closer-plate p { margin-top: 16px; color: var(--muted); font-size: 1.05rem; max-width: 42ch; }
.closer-plate .btn { width: auto; align-self: flex-start; margin-top: 26px; padding-inline: 32px; }

/* --- interiors --------------------------------------------------------------- */
.page-head { background: var(--dial); color: var(--white); padding: 66px 0 74px; }
.page-head h1 { color: var(--white); max-width: 18ch; font-size: clamp(2.4rem, 4.2vw, 3.7rem); }
.page-head h1 em { font-style: normal; color: var(--gold-lit); }
.crumb { font-size: 0.85rem; color: #9AA5BC; margin-bottom: 20px; }
.crumb a { color: #C3CBDA; font-weight: 600; }
.crumb a:hover { color: var(--white); }
.pull { font-size: clamp(1.18rem, 1.6vw, 1.38rem); line-height: 1.45; color: #D2D9E6; max-width: 52ch; margin-top: 24px; font-weight: 500; }

.article { padding: 80px 0 92px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 70px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 { font-size: clamp(1.7rem, 2.3vw, 2.1rem); margin-top: 54px; margin-bottom: 14px; }
.prose > h2:first-child { margin-top: 0; }
.prose p { font-size: 1.07rem; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.1em; }
.prose ul li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 1.04rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; background: var(--amp); }
.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: 14px; max-width: 60ch; }
.table-wrap { overflow-x: auto; margin: 26px 0; }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-size: 0.97rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; }
.prose thead th { background: var(--dial); color: var(--white); font-family: var(--display); font-weight: 700; }
.prose tbody tr:nth-child(odd) { background: var(--panel); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose .said-note { background: var(--panel); padding: 24px 26px; margin: 32px 0; font-size: 1.02rem; }
.prose .said-note b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.08rem; margin-bottom: 8px; }

.aside { position: sticky; top: 100px; min-width: 0; }
.aside h4 { font-size: 0.88rem; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 12px; }
.aside ol { list-style: none; margin: 0 0 28px; padding: 0; }
.aside ol li + li { margin-top: 2px; }
.aside ol a { display: flex; align-items: center; min-height: 44px; padding: 9px 0; color: var(--ink); font-weight: 600; font-size: 0.96rem; }
.aside ol a:hover { color: var(--amp); }
.aside-card { background: var(--dial); color: var(--white); padding: 24px 22px 26px; border: none; }
.aside-card h4 { color: var(--white); font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.aside-card p { font-size: 0.92rem; color: #C3CBDA; margin-bottom: 16px; }
.aside-card .btn { font-size: 0.96rem; padding: 12px 16px; min-height: 44px; }

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

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

/* --- footer ----------------------------------------------------------------- */
.foot { background: var(--dial); color: #AEB7CB; padding: 72px 0 38px; font-size: 0.94rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 46px; }
.foot .mark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--white); letter-spacing: -0.02em; margin-bottom: 14px; }
.foot .mark b { color: var(--gold-lit); }
.foot p { max-width: 34ch; font-size: 0.92rem; }
.foot h4 { color: var(--white); font-size: 0.86rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 15px; }
.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: #B9C1D2; font-weight: 500; }
.foot a:hover { color: var(--white); }
.foot-legal { margin-top: 62px; font-size: 0.83rem; color: #8590A8; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.foot-legal p { max-width: 76ch; margin: 0; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- motion -------------------------------------------------------------------- */
.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; }

@media (prefers-reduced-motion: reduce) {
  .sweep-needle { animation: none; left: 50%; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  .card-img img { transition: none; }
  * { scroll-behavior: auto; }
}

/* --- responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .aside { position: static; }
  .aside-card { max-width: 460px; }
  .finding, .split, .ask-grid, .thanks-grid, .qgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer-grid img { min-height: 280px; }
  .caveat-list { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  .nav .lg { display: none; }
  .nav .burger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 700; color: var(--ink); background: none; border: 2px solid var(--ink); padding: 10px 16px; min-height: 46px; cursor: pointer; }
  .mobile[data-open="true"] { display: block; background: var(--page); padding: 18px 0 26px; }
  .mobile ul { list-style: none; margin: 0; padding: 0; }
  .mobile a { display: block; padding: 14px 0; font-weight: 700; font-size: 1.06rem; color: var(--ink); min-height: 44px; }
  .mobile .btn { margin-top: 16px; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; }
  .sec, .ask-band { padding: 62px 0; }
  .closer { padding: 56px 0; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .credits { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero { padding: 44px 0 56px; }
  .finding figure img, .thanks-grid img { height: 280px; }
  .stack figure img { height: 220px; }
  .prose figure img { height: 240px; }
  .article { padding: 54px 0 64px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .form-card, .closer-plate, .calc-card { padding: 26px 22px 28px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .calc-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
  :root { --gut: 18px; }
  .mast > .wrap { min-height: 72px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .q summary { padding: 16px 16px; font-size: 1.02rem; }
  .q .a { padding: 0 16px 18px; }
  .readout .big { font-size: 2.9rem; }
}

/* Below this, the orientation table's natural width no longer fits inside its
   card: fix it to the container instead of letting columns run past the edge. */
@media (max-width: 620px) {
  .prose table { min-width: 0; width: 100%; table-layout: fixed; font-size: 0.82rem; }
  .prose th, .prose td { padding: 8px 6px; word-break: break-word; }
  .prose th:first-child, .prose td:first-child { width: 26%; }
}