/* ------------------------------------------------------------------------
   Plug-in Solar Scotland

   The design source is the Scottish tenement elevation: storey on storey,
   flats mirrored either side of one common stair, cut in blond and grey
   sandstone with harled render above. Three decisions carry the site and
   nothing else is allowed to compete with them.

   1. THE STOREY is the signature device. Nothing on this site is a card in a
      grid. Every group of related things is built as a stack of full bleed
      storeys that touch edge to edge with no gutter at all: a photograph
      filling half the width, its copy on a mist plate filling the other half,
      and the sides swapping on every storey the way flats mirror across a
      tenement stair. The services, the two operators, the closing tile, the
      sibling links and the image credits are all storeys. A storey is a whole
      row, never an edge treatment, and it never appears at a seam.

   2. THE WALLHEAD is the seam device, and the only one. Where two light
      sections meet, they meet through an 8px full bleed band in the outgoing
      ground's OWN darker tone, the way the weathered head course of a Scottish
      wall is the same stone gone darker. Because the band is derived from the
      section above it, it is never one fixed stripe laid over the page. Where
      a deep loch plane meets a light ground, that plane's own edge is the
      wallhead and no band is added, so the device is never doubled. There is
      no other rule anywhere on this site.

   3. THE TURN is the one ambient motion. A very wide, very soft wedge of light
      rotates behind the deep loch hero plane, because the sun sits low here and
      swings a long way round the sky between midsummer and midwinter. It is a
      rotation, not a drift, so the loop closes on itself with no arithmetic and
      no jump. Transform only, and it stops 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
   harl grain on the deep loch hero plane and granite on the footer. Neither
   carries body copy.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. deep: the loch plane, the masthead strip, the footer and
     every dark band. ink: all text on light grounds. mist: the page ground.
     stone: the alternate ground, measured at 1.218 against mist, which is
     where two grounds separate for the eye without reading as banding.
     rust: ACTION ONLY, nothing decorative is ever this colour. loch:
     information, links and measure bars. gorse: the highlight, one phrase in
     the headline and every figure. */
  --deep:  #0F2433;
  --ink:   #263540;
  --mist:  #F6F8F9;
  --stone: #DCE3E7;
  --rust:  #A4501F;
  --loch:  #12657C;
  --gorse: #D9A03C;

  /* derived, not new colours: secondary text, the two wallhead tones taken
     from their own grounds, the pressed action, the gorse held back on light
     grounds so it never fails contrast, and one hairline used inside
     components only. */
  --muted:      #5A6670;
  --head-mist:  #C7D1D7;
  --head-stone: #B2BEC6;
  --rust-press: #83400F;
  --loch-press: #0D4D5F;
  --gorse-ink:  #8A6008;
  --hair:       #C3CDD3;
  --on-deep:    #D3DBE1;
  --on-deep-2:  #A4B0B9;

  /* The Scotch Roman was cut in Edinburgh in the 1810s and is the ancestor of
     every transitional serif since. Source Serif 4 is its nearest licence
     clean descendant, and it gives a firm whose job is telling you what the
     rules say the right amount of weight. Public Sans is a plain public
     information grotesque with squared terminals, which suits a page with no
     rounded corners on it. */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1300px;
  --gut: 28px;
}

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

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.012em;
  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.36rem; line-height: 1.2; }
h4 { font-size: 1.02rem; line-height: 1.26; }

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

/* Underlines are out on this site. A link carries colour and weight and
   darkens on hover. */
a { color: var(--loch); font-weight: 600; text-decoration: none; }
a:hover { color: var(--loch-press); }
a, a:hover, a:focus { text-decoration: none; }

:focus-visible { outline: 3px solid var(--loch); outline-offset: 2px; }
.strip :focus-visible,
.hero :focus-visible,
.deep :focus-visible,
.foot :focus-visible { outline-color: var(--gorse); }

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

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

/* --- the wallhead ------------------------------------------------------ */
/* The one seam on this site. Its colour is always the ground above it, gone
   darker. Do not add a ground change AND a wallhead AND a shadow: the band is
   the whole separation, and a deep loch plane needs no band at all. */
.seam { height: 8px; }
.seam--mist  { background: var(--head-mist); }
.seam--stone { background: var(--head-stone); }

/* --- masthead ---------------------------------------------------------- */
/* The strip carries the fact this site is built on: two network operators,
   not one. Every other regional firm in this country has one to name. */
.strip { background: var(--deep); color: var(--on-deep-2); font-size: 0.825rem; }
.strip .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center;
  justify-content: space-between; min-height: 42px; padding-top: 9px; padding-bottom: 9px;
}
.strip p { margin: 0; min-width: 0; }
.strip b { color: var(--mist); font-weight: 600; }

.mast { background: var(--mist); position: sticky; top: 0; z-index: 60; }
.mast .wrap {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 20px; min-height: 88px;
}
.brand {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.22rem, 1.6vw, 1.56rem);
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.04;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 6px 0; min-height: 44px;
}
.brand:hover { color: var(--ink); }
.brand b { display: block; color: var(--loch); font-weight: 700; }

.nav { display: flex; align-items: stretch; gap: 2px; }
.nav a, .nav button {
  font: inherit; font-family: var(--body); font-weight: 600; color: var(--ink);
  background: none; border: 0; cursor: pointer; padding: 0 15px; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
}
.nav a:hover, .nav button:hover { color: var(--loch); }
.nav [aria-expanded="true"] { color: var(--loch); }
.nav [aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav .ico { flex: none; }

/* The action block runs the full height of the masthead and is flush to the
   right end of it, so the head of every page finishes on a solid colour. */
.nav .cta-top {
  background: var(--rust); color: #FFFFFF; font-weight: 700; padding: 0 24px;
  align-self: stretch; display: inline-flex; align-items: center;
}
.nav .cta-top:hover { background: var(--rust-press); color: #FFFFFF; }

/* The dropdown is a deep loch plate, the colour of the plane the hero stands
   on, hung from the left edge of its own trigger. Every panel on this site
   uses that one anchor rule. */
.drop { position: relative; display: flex; }
.panel {
  position: absolute; top: 100%; left: 0;
  width: 420px; max-width: calc(100vw - 44px);
  background: var(--deep); color: var(--on-deep);
  padding: 24px 26px 26px; display: none; z-index: 61;
}
.drop[data-open="true"] .panel { display: block; }
.panel .strap { color: var(--on-deep-2); font-size: 0.92rem; margin: 0 0 16px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li a {
  display: block; padding: 11px 0; color: var(--mist); font-weight: 700; font-size: 1.03rem;
}
.panel li a span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--on-deep-2); }
.panel li a:hover { color: var(--gorse); }
.panel li a:hover span { color: var(--on-deep-2); }
.panel .all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--gorse); font-weight: 700; }
.panel .all:hover { color: #EFC272; }

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

/* --- hero -------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--deep);
  /* A dark plane takes a gradient. Tonal inside its own hue, wide ramp, no
     hotspot behind the copy. */
  background-image: linear-gradient(163deg, #18354A 0%, #0F2433 56%, #091924 100%);
  color: var(--mist);
  padding: 60px 0 68px;
}
/* The harl grain. A transparenttextures tile is drawn in light ink, so on a
   deep ground it has to be held back hard or it reads as poured concrete
   instead of render. 0.14 is the point where it is grain and not a surface.
   Inset to the plane, so it can never add to the document width. */
.hero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("/assets/tex/sandpaper.png");
  opacity: 0.14;
}
/* THE TURN. One very wide soft wedge of light rotating behind the plane. A
   rotation closes its own loop, so there is no band period to match. */
.turn {
  position: absolute; z-index: 1; top: 50%; left: 62%;
  width: 2200px; height: 2200px; margin: -1100px 0 0 -1100px;
  background-image: linear-gradient(90deg,
    rgba(217, 160, 60, 0) 0%,
    rgba(217, 160, 60, 0.07) 38%,
    rgba(217, 160, 60, 0.10) 50%,
    rgba(217, 160, 60, 0.07) 62%,
    rgba(217, 160, 60, 0) 100%);
  pointer-events: none;
  animation: turn 96s linear infinite;
}
@keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 54px; align-items: start;
}
.hero h1 { color: var(--mist); max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--gorse); }
.hero .lede {
  font-size: 1.22rem; line-height: 1.5; color: var(--on-deep);
  max-width: 46ch; margin: 22px 0 0;
}
.chips { display: grid; gap: 8px; margin: 28px 0 0; list-style: none; padding: 0; }
.chips li {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.17);
  color: #E9EDF0; padding: 12px 15px; font-size: 0.93rem; font-weight: 500;
  line-height: 1.32; min-width: 0;
}
.chips .ico { color: var(--gorse); flex: none; margin-top: 2px; }

/* --- the form ---------------------------------------------------------- */
/* The one form stands beside the headline on the deep loch plane, so its first
   row is on the first screen at 1440 without the hero having to carry a
   photograph as well. The photograph comes straight after it, full bleed. */
.formband-grid {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 52px; align-items: start;
}
.formband-grid h2 { max-width: 14ch; font-size: clamp(1.9rem, 2.6vw, 2.35rem); }
.formband-grid .said { color: var(--muted); font-size: 1.06rem; margin-top: 16px; max-width: 40ch; }
.areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.areas li { background: var(--mist); color: var(--ink); padding: 8px 13px; font-size: 0.9rem; font-weight: 600; }

/* --- the wide band ----------------------------------------------------- */
/* The hero object: one full bleed photograph with the mist plate touching its
   lower edge. Nothing overlaps and nothing floats, because on this site
   objects meet the way courses of stone meet. */
.wide { background: var(--deep); }
.wide > img { width: 100%; height: 520px; object-fit: cover; object-position: 50% 58%; }
.wide-plate { background: var(--mist); color: var(--ink); }
.wide-plate .wrap {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 46px; align-items: start; padding-top: 40px; padding-bottom: 42px;
}
.wide-plate .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 5vw, 4.1rem);
  line-height: 0.98; color: var(--gorse-ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em; margin: 0; min-width: 0;
}
.wide-plate .n small { display: block; font-size: 0.26em; font-weight: 700; color: var(--ink); letter-spacing: 0; margin-top: 8px; }
.wide-plate p { font-size: 1.06rem; }
.wide-plate .attrib { margin-top: 16px; }

/* --- sections ---------------------------------------------------------- */
.sec { padding: 88px 0; }
.sec--mist { background: var(--mist); }
.sec--stone { background: var(--stone); }
.sec--deep { background: var(--deep); color: var(--mist); }
.sec--deep h2, .sec--deep h3 { color: var(--mist); }

.sec-head { max-width: 58ch; }
.sec-head h2 { max-width: 20ch; }
.sec-lede { font-size: 1.18rem; color: var(--muted); margin-top: 18px; }
.sec--deep .sec-lede { color: var(--on-deep); }
.attrib { font-size: 0.84rem; color: var(--muted); margin-top: 26px; max-width: 84ch; }
.sec--deep .attrib { color: var(--on-deep-2); }
.wide-note a, .sec--deep a, .foot a { color: #9FD2E0; }
.sec--deep a:hover, .foot a:hover { color: var(--mist); }

/* --- THE STOREY -------------------------------------------------------- */
/* The signature device. Rows that touch, a photograph one side and its copy
   the other, swapping sides on every row. No gutters anywhere inside the
   stack: a tenement elevation has none either. */
.storeys { display: block; }
.storey {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
/* The picture half is a definite frame, not an image sitting in a cell. A
   portrait photograph dropped into a grid cell with height:100% resolves to
   its own intrinsic height and drags the whole storey to 960px, which leaves
   the copy floating in a pool of ground. Absolute inside a min-height frame
   is what keeps every storey the same depth whatever shape the photograph is. */
.storey-pic { min-width: 0; position: relative; background: var(--deep); overflow: hidden; min-height: 440px; }
.storey-pic img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.storey:hover .storey-pic img { transform: scale(1.03); }
.storey-body {
  background: var(--mist); color: var(--ink); min-width: 0;
  padding: 48px 54px 50px; display: flex; flex-direction: column; justify-content: center;
}
.storey--flip .storey-pic { order: 2; }
.storey-body h3 { font-size: clamp(1.5rem, 2vw, 1.86rem); margin-bottom: 14px; }
.storey-body p { color: var(--muted); font-size: 1.05rem; max-width: 46ch; }
.storey-body .go { margin-top: 22px; font-weight: 700; color: var(--rust); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.storey a.go:hover { color: var(--rust-press); }
.storey-cap { font-size: 0.82rem; color: var(--on-deep-2); background: var(--deep); padding: 10px 14px; margin: 0; }

/* A plate keeps its distance from the ground it stands on. Storeys always sit
   on a stone ground so the mist plate reads as a plate; put them on mist and
   the copy half disappears into the page and the row stops being a wall. */
.siblings-band { background: var(--stone); }

/* A storey that carries the whole row as one link. */
a.storey { color: inherit; font-weight: 400; }
a.storey:hover { color: inherit; }

/* --- the Scottish rules band ------------------------------------------- */
.rules-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px; align-items: start;
}
.rules-grid h2 { max-width: 16ch; }
.rules-grid p { color: var(--on-deep); font-size: 1.08rem; max-width: 54ch; margin-top: 20px; }
.flag { display: inline-flex; align-items: center; gap: 10px; color: var(--gorse); font-weight: 700; font-size: 1.02rem; margin-bottom: 16px; }
.rules-grid figure { margin: 0; min-width: 0; }
.rules-grid figure img { width: 100%; height: 470px; object-fit: cover; object-position: 50% 44%; }
.rules-grid figcaption { font-size: 0.85rem; color: var(--on-deep-2); margin-top: 14px; }

.specs { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.specs li {
  display: grid; grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  background: rgba(255, 255, 255, 0.06); padding: 14px 18px; min-width: 0;
}
.specs b {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--gorse);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.specs span { color: var(--on-deep); font-size: 0.98rem; line-height: 1.4; }

/* --- measure bars ------------------------------------------------------ */
.mounts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 58px; align-items: start; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li + li { margin-top: 26px; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bar-head b { font-weight: 600; font-size: 1.03rem; min-width: 0; }
.bar-head span {
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.bar-head span i { font-style: normal; font-size: 0.55em; font-weight: 600; color: var(--muted); }
.bar-track { height: 15px; background: var(--hair); margin-top: 10px; }
.bar-fill { height: 100%; background: var(--loch); }
.bar-fill--north { background: var(--gorse-ink); }
.two-key { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 0.93rem; font-weight: 600; }
.two-key li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.two-key i { width: 16px; height: 16px; display: block; flex: none; }
.two-key .k-south { background: var(--loch); }
.two-key .k-north { background: var(--gorse-ink); }
.mounts figure { margin: 0; min-width: 0; }
.mounts figure img { width: 100%; height: 420px; object-fit: cover; }
.mounts figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }

/* --- questions --------------------------------------------------------- */
.qs { margin-top: 44px; }
.qgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; align-items: start; }
.qgrid .qs { margin-top: 0; }
.q { border: 2px solid var(--hair); background: var(--mist); }
.q + .q { margin-top: 12px; }
.q summary {
  list-style: none; cursor: pointer; padding: 20px 24px;
  font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.28;
  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(--loch); margin-top: 3px; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 24px 22px; color: var(--muted); max-width: 70ch; }
.sec--mist .q { background: var(--stone); border-color: #BFCBD2; }
.sec--stone .q { background: var(--mist); border-color: var(--hair); }

/* --- form -------------------------------------------------------------- */
.form-card { background: var(--mist); color: var(--ink); padding: 32px 34px 34px; min-width: 0; }
.form-card h3 { font-size: 1.56rem; margin-bottom: 8px; }
.form-card .said { color: var(--muted); font-size: 0.99rem; margin: 0 0 20px; max-width: 48ch; }
.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-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #FFFFFF; border: 2px solid var(--hair); border-radius: 0;
  padding: 12px 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(--loch); outline-offset: 1px; border-color: var(--ink); }
.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(--rust); color: #FFFFFF; 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: var(--rust-press); color: #FFFFFF; }
.form-card .after { font-size: 0.86rem; color: var(--muted); margin-top: 14px; max-width: 54ch; }

.askband { background: var(--stone); padding: 84px 0; }
.askband .formband-grid { align-items: start; }

/* --- closing storey ---------------------------------------------------- */
/* The closing moment is a storey like every other storey, so it belongs to
   the row of objects above it. Only the rust button marks it as the action. */
.closer .storey-body { background: var(--deep); color: var(--mist); }
.closer .storey-body h2 { color: var(--mist); max-width: 16ch; font-size: clamp(2rem, 3vw, 2.7rem); }
.closer .storey-body p { color: var(--on-deep); margin-top: 16px; }
.closer .storey-body .btn { width: auto; align-self: flex-start; margin-top: 26px; padding-inline: 32px; }

/* --- interiors --------------------------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  background-color: var(--deep);
  background-image: linear-gradient(163deg, #18354A 0%, #0F2433 62%, #091924 100%);
  color: var(--mist); padding: 64px 0 72px;
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: var(--mist); max-width: 18ch; font-size: clamp(2.4rem, 4.3vw, 3.8rem); }
.page-head h1 em { font-style: normal; color: var(--gorse); }
.crumb { font-size: 0.86rem; color: var(--on-deep-2); margin-bottom: 20px; }
.crumb a { color: #C4CFD6; font-weight: 600; }
.crumb a:hover { color: var(--mist); }
.pull { font-size: clamp(1.18rem, 1.7vw, 1.4rem); line-height: 1.46; color: var(--on-deep); max-width: 52ch; margin-top: 24px; font-weight: 500; }

.article { padding: 78px 0 88px; background: var(--mist); }
.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.72rem, 2.4vw, 2.1rem); margin-top: 54px; margin-bottom: 14px; }
.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.66em; width: 10px; height: 10px; background: var(--loch); }
.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; height: 350px; object-fit: cover; }
.prose figcaption { font-size: 0.87rem; color: var(--muted); margin-top: 12px; max-width: 62ch; }
.note { background: var(--stone); padding: 24px 28px; margin: 32px 0; font-size: 1.03rem; }
.note b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; }

.aside { position: sticky; top: 112px; min-width: 0; }
.aside h4 { font-size: 0.9rem; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 12px; }
.aside ol { list-style: none; margin: 0 0 28px; padding: 0; }
.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(--loch); }
.aside-card { background: var(--deep); color: var(--mist); padding: 26px 24px 28px; }
.aside-card h4 { color: var(--mist); font-family: var(--display); font-size: 1.14rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.aside-card p { font-size: 0.94rem; color: var(--on-deep); margin-bottom: 18px; }
.aside-card .btn { font-size: 0.97rem; padding: 13px 18px; min-height: 46px; }

/* --- credits and thanks ------------------------------------------------ */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 46px; }
.credit { background: var(--mist); padding: 22px 24px 24px; border: 2px solid var(--hair); min-width: 0; }
.credit h3 { font-size: 1.06rem; 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: 96px 0 104px; }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 60px; align-items: center; }
.thanks-grid img { width: 100%; height: 440px; object-fit: cover; }
.next { list-style: none; padding: 0; margin: 22px 0 0; }
.next li { margin-bottom: 12px; font-size: 1.05rem; }

/* --- footer ------------------------------------------------------------ */
.foot {
  position: relative; overflow: hidden;
  background-color: var(--deep);
  color: var(--on-deep-2); padding: 72px 0 40px; font-size: 0.95rem;
}
/* Granite on the footer, held back the same way and for the same reason. */
.foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("/assets/tex/rocky-wall.png");
  opacity: 0.16;
}
.foot .wrap { position: relative; z-index: 2; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 46px; }
.foot .mark { font-family: var(--display); font-weight: 700; font-size: 1.44rem; color: var(--mist); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px; }
.foot .mark b { display: block; color: var(--gorse); }
.foot p { max-width: 36ch; font-size: 0.93rem; }
.foot h4 { color: var(--mist); font-size: 0.87rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 14px; }
.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:hover { color: var(--mist); }
.foot-legal { margin-top: 60px; font-size: 0.84rem; color: #93A0A9; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.foot-legal p { max-width: 78ch; 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; }
.rise.d3.in { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .turn { animation: none; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  .storey-pic img { transition: none; }
  * { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 118px; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wide-plate .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .formband-grid, .rules-grid, .mounts, .qgrid, .thanks-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .aside { position: static; }
  .aside-card { max-width: 460px; }
  .storey-body { padding: 40px 40px 42px; }
}

@media (max-width: 900px) {
  .nav .lg { display: none; }
  .nav .burger {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-family: var(--body); font-weight: 700; color: var(--ink);
    background: none; border: 2px solid var(--ink); padding: 10px 16px; min-height: 46px; cursor: pointer;
    align-self: center;
  }
  .mobile[data-open="true"] { display: block; background: var(--mist); padding: 6px 0 28px; }
  .mobile ul { list-style: none; margin: 0; padding: 0; }
  .mobile a { display: block; padding: 14px 0; font-weight: 700; font-size: 1.08rem; color: var(--ink); min-height: 44px; }
  .mobile a span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
  .mobile .btn { margin-top: 16px; }
  .storey { grid-template-columns: minmax(0, 1fr); }
  .storey--flip .storey-pic { order: 0; }
  .storey-pic { min-height: 320px; }
  .wide > img { height: 400px; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; }
  .sec, .askband { padding: 62px 0; }
  .formband { padding: 44px 0 48px; }
  .hero { padding: 48px 0 56px; }
  .rules-grid figure img { height: 300px; }
  .mounts figure img { height: 300px; }
  .prose figure img { height: 250px; }
  .article { padding: 54px 0 62px; }
  .credits { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .storey-body { padding: 32px 24px 34px; }
  .form-card { padding: 26px 22px 28px; }
  .wide-plate .wrap { padding-top: 30px; padding-bottom: 32px; }
  .thanks { padding: 62px 0 70px; }
  .thanks-grid img { height: 300px; }
}

@media (max-width: 480px) {
  :root { --gut: 18px; }
  .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; }
  .nav .cta-top { display: none; }
  .wide > img { height: 280px; }
  .q summary { padding: 17px 17px; font-size: 1.04rem; }
  .q .a { padding: 0 17px 18px; }
  .specs li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}