/* =============================================================================
   LITTLE MOO HOSTING — DESIGN SYSTEM
   Quiet British editorial technology.

   One grid, one type scale, one spacing rhythm, one set of section
   treatments. Pages differ through subject matter, photography and
   composition, not through separate design languages.
   ============================================================================= */

/* ── Foundations ────────────────────────────────────────────────────────── */

:root {
  /* Measure. Every full-width section aligns its content to this shell. */
  --shell:  1240px;
  --shell-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Vertical rhythm. Sections step through three sizes and nothing else. */
  --band:     clamp(3.5rem, 6vw, 6.5rem);
  --band-lg:  clamp(4.5rem, 8vw, 8.5rem);
  --band-sm:  clamp(2.5rem, 4vw, 4rem);

  /* Shape. One radius family, used sparingly. */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;

  /* Rules. Fine, never heavy. */
  --rule:      1px solid var(--warm-line);
  --rule-ink:  1px solid rgba(201, 190, 255, .16);
  --rule-lav:  1px solid var(--lilac-line);
}

/* ── Type scale ─────────────────────────────────────────────────────────
   Newsreader for display, Inter for everything operational. One scale, and
   headings balance rather than wrap into orphans. */

:root {
  --d0: clamp(3.5rem, 2.1rem + 6.2vw, 7.5rem);     /* the one statement per page */
  --d1: clamp(3rem, 2.0rem + 4.6vw, 6rem);         /* homepage h1 */
  --d2: clamp(2.5rem, 1.9rem + 2.9vw, 4.25rem);    /* page h1 */
  --d3: clamp(2rem, 1.5rem + 2.3vw, 3.5rem);       /* section h2 */
  --d4: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);   /* h3 */

  --t-eyebrow: 0.75rem;
  --t-micro:   0.8125rem;
  --t-small:   0.9375rem;
  --t-body:    1.0625rem;
  --t-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.display,
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

/* The house accent. One phrase per heading set in italic, which is how an
   editorial page carries a voice without adding a second typeface. */
.say { font-style: italic; letter-spacing: -0.01em; padding-right: .06em; }
.say--brand { color: var(--brand); }

h3 { line-height: 1.2; letter-spacing: -0.012em; }

p { text-wrap: pretty; }

.eyebrow {
  display: block;
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}

.eyebrow--on-ink { color: var(--accent); }

.lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--on-warm-2);
  max-width: 46ch;
}

.lede--on-ink { color: var(--on-ink-2); }

/* ── Section primitives ─────────────────────────────────────────────────
   Four grounds and nothing else: warm, white, lavender, ink. */

.sec       { padding-block: var(--band); }
.sec--lg   { padding-block: var(--band-lg); }
.sec--sm   { padding-block: var(--band-sm); }

.sec--warm { background: var(--warm); }
.sec--lift { background: var(--warm-lift); }
.sec--lav  { background: var(--lilac); }
.sec--ink  { background: var(--ink); color: var(--on-ink); }

.sec--ink h1, .sec--ink h2, .sec--ink h3 { color: var(--on-ink); }
.sec--ink p { color: var(--on-ink-2); }

/* The header is sticky, so an anchor that scrolls to the top of the viewport
   puts its own heading behind it. Every element that can be a scroll target
   keeps clear of it. Stated once here rather than per component. */
:where([id]) { scroll-margin-top: calc(var(--head-h, 86px) + 1.25rem); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── The page gutter ──────────────────────────────────────────────────────
   The site chrome is a fluid frame, not a capped one.

   It used to be capped: the header, the heroes and the footer were set in a
   1460px frame and centred, so --edge was computed as half the leftover
   viewport plus a gutter. That reads correctly up to about 1500px and then
   fails badly. At 1920 it put the logo 286px from the edge; at 2560 it would
   have been 606px. Aligning the logo, the headline and the footer to each
   other did not make that right -- it just moved all three of them inboard
   together, which is exactly the empty strip down each side.

   --page-gutter is now simply the distance from the viewport edge to the
   chrome, and it stops growing rather than the frame stopping growing:

     390px    20px    (the 1.25rem floor)
     834px    33px    (4vw)
     1440px   58px    (4vw)
     1600px   64px    (4vw)
     1920px   72px    (the 4.5rem ceiling)
     2560px   72px    (the ceiling holds)

   So the chrome fills the viewport at any width and keeps a deliberate
   margin. What keeps text readable is the text's own measure -- the hero
   headline is capped in ch, the lede in ch, the footer statement in ch --
   not a box drawn around the whole page.

   Reading content is deliberately not on this frame. .shell below keeps its
   1240px cap and its centring, because a paragraph, a plan table or a legal
   document needs a comfortable maximum width rather than the full width of
   a 27-inch monitor. */
:root {
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --edge: var(--page-gutter);
}

/* A narrow measure is a deliberate column inside the shell, not a box
   floating in the middle of the page. The shell keeps its own width and
   alignment; the content inside it takes the shorter line. */
.shell--narrow { max-width: var(--shell); }
.shell--narrow > * { max-width: calc(var(--shell-narrow) - var(--gutter) * 2); }

/* A section head: eyebrow, heading, optional standfirst. */
.head { margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.head h2 { font-size: var(--d3); }
.head .lede { margin-top: 1rem; }

.head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

@media (max-width: 860px) {
  .head--split { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ── Buttons ────────────────────────────────────────────────────────────
   Three levels of emphasis. Controlled softness, never a pill. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.btn--primary { background: var(--brand-fill); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }

.btn--secondary { background: var(--warm-lift); color: var(--on-warm); border-color: var(--warm-line); }
.btn--secondary:hover { border-color: var(--purple); color: var(--purple); }

.btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, .3); }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); }

.btn--lg { min-height: 52px; padding: .85rem 1.7rem; font-size: var(--t-body); }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: var(--t-micro); }

.btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* A text link that reads as an onward route. */
.go {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
}

.go svg { transition: transform var(--fast) var(--ease); }
.go:hover svg { transform: translateX(3px); }
.go--on-ink { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .go:hover svg { transform: none; }
}

/* ── Header ─────────────────────────────────────────────────────────────
   Transparent over the homepage's deep-ink hero, and a light bar with a
   fine rule everywhere else. Same geometry in both states. */

.top {
  position: relative;
  z-index: 60;
  background: var(--warm);
  border-bottom: var(--rule);
}

.home .top {
  background: transparent;
  border-bottom: 0;
  margin-bottom: calc(var(--head-h) * -1);
}

:root { --head-h: 86px; }

.top__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  width: 100%;
  max-width: none;
  min-height: var(--head-h);
  padding-inline: var(--edge);
}

.mark { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.mark img { display: block; width: auto; height: 46px; }

@media (max-width: 560px) { .mark img { height: 38px; } }

/* ── Grids and dividers ─────────────────────────────────────────────────
   A ruled list is the site's default way of presenting a set of facts.
   It replaces icon-card grids entirely. */

.ruled { list-style: none; margin: 0; padding: 0; }

.ruled > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding: 1.05rem 0;
  border-top: var(--rule);
}

.ruled > li:last-child { border-bottom: var(--rule); }

.ruled__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--purple);
}

.ruled__icon svg { width: 22px; height: 22px; }

.ruled h3 {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--on-warm);
}

.ruled p { margin: .2rem 0 0; font-size: var(--t-small); color: var(--on-warm-2); }

.sec--ink .ruled > li,
.sec--ink .ruled > li:last-child { border-color: var(--ink-line); }
.sec--ink .ruled h3 { color: var(--on-ink); }
.sec--ink .ruled p  { color: var(--on-ink-2); }
.sec--ink .ruled__icon { color: var(--accent); }

/* ── Editorial split ────────────────────────────────────────────────────
   A photograph and a column of live content. The only two-column
   photographic treatment on the site. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--reverse .split__fig  { order: 2; }
.split--reverse .split__body { order: 1; }

.split__fig { margin: 0; overflow: hidden; border-radius: var(--r-2); background: var(--warm-sub); }
.split__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { font-size: var(--d3); margin-bottom: 1rem; }
.split__body > p { margin: 0 0 1rem; color: var(--on-warm-2); max-width: 52ch; }
.split__body .ruled { margin-top: 1.75rem; }
.split__body .btns,
.split__body .go { margin-top: 1.75rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split--reverse .split__fig,
  .split--reverse .split__body { order: initial; }
}

/* ── Bleed band ─────────────────────────────────────────────────────────
   A photograph that runs off one edge of the page, with copy in the
   opposite solid field. Used sparingly, for a major transition. */

.bleed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }

.bleed__copy {
  padding: var(--band) var(--gutter) var(--band)
           max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.bleed__copy h2 { font-size: var(--d3); margin-bottom: 1rem; }
.bleed__copy p  { color: var(--on-warm-2); max-width: 40ch; }

.bleed__fig { margin: 0; align-self: stretch; min-height: clamp(18rem, 30vw, 26rem); }
.bleed__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .bleed { grid-template-columns: minmax(0, 1fr); }
  .bleed__copy { padding-inline: var(--gutter); padding-bottom: var(--band-sm); }
  .bleed__fig { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ── Focus, motion and utility ──────────────────────────────────────────── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.sec--ink :where(a, button):focus-visible { outline-color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Footer ──────────────────────────────────────────────────────
   Deep ink, full bleed, one shell inside it: the brand statement and the
   link groups, a fine rule, then the legal row.

   Three deliberate layouts rather than one squeezed at every width.

     wide    the brand column beside the groups, three groups across and
             two rows deep. Six across in a 1240px shell leaves 130px a
             column, which wraps half the labels and strands the brand
             paragraph one word wide; three across gives every label its
             own line and matches the two blocks in height.
     tablet  the brand takes its own full-width row above the groups,
             which stay three across.
     narrow  the same, two groups across.

   The brand column is sized to what it holds — a 46px mark, a paragraph at
   its natural measure and a 230px badge — so it can never be compressed
   below them. It used to be a fraction of a grid track, which is how it
   ended up 56px wide on a phone with the mark overflowing its own box. */

.foot { background: var(--ink); color: var(--on-ink); }

/* The footer belongs to the masthead frame, not the reading shell: held in the
   narrower one it read as an unexplained margin down each side. */
.foot > .shell { max-width: none; padding-inline: var(--edge); }

/* ── One band, three zones ───────────────────────────────────────────────
   Identity, navigation, contact. The company statement lives with the brand
   it describes rather than in a block of its own underneath, which is the
   single change that stops this reading as two footers stacked up.

   Mobile first: everything stacks, identity leading. The three-zone grid
   only appears once there is width to hold it without squeezing the link
   columns to breaking point. */

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 2.75rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

/* ── Left: identity ──────────────────────────────────────────────────── */

.foot__id { min-width: 0; }
.foot__mark img { display: block; width: auto; height: 42px; }

.foot__say {
  margin: .95rem 0 0;
  font-size: var(--t-small); line-height: 1.55;
  color: var(--on-ink-2); max-width: 38ch;
}

/* The two highest-intent destinations, promoted out of what used to be a
   seventh column nobody reached. */
.foot__acts {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  margin: 1rem 0 0;
}
.foot__acts a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 .85rem;
  border: 1px solid var(--on-ink-line, rgba(255, 255, 255, .22));
  border-radius: 999px;
  font-size: var(--t-micro); font-weight: 600;
  color: var(--on-ink); text-decoration: none;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.foot__acts a:hover,
.foot__acts a:focus-visible {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.foot__badge { margin-top: 1.25rem; max-width: 200px; }
.foot__badge img { display: block; width: 100%; height: auto; }

/* Fine print, full width, inside the same band. No rule above it: a divider
   here is exactly what made the old layout read as a second footer. */
.foot__fine { grid-column: 1 / -1; }
.foot__fine p {
  margin: 0;
  font-size: var(--t-micro); line-height: 1.6;
  color: var(--on-ink-3); max-width: 110ch;
}

/* ── Centre: five groups ─────────────────────────────────────────────── */

/* One column while the groups are collapsible. Two of them side by side means
   opening one shoves its neighbour down the page, which is a poor way to read
   an accordion; a single list keeps the thing you just opened where you left
   it. Hairlines between the rows, so it reads as one list rather than five
   floating headings. */
.foot__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
}
.foot__group + .foot__group { border-top: 1px solid rgba(255, 255, 255, .1); }
/* A <details> so small screens can fold it away. Everything below strips the
   widget back to a plain heading wherever there is room to show the list. */
.foot__group { min-width: 0; }
.foot__group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 44px;
}
.foot__group > summary::-webkit-details-marker { display: none; }
.foot__group > summary::after {
  content: ''; flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--on-ink-3);
  border-bottom: 1.5px solid var(--on-ink-3);
  transform: rotate(45deg); margin-bottom: .2rem;
  transition: transform var(--fast) var(--ease);
}
.foot__group[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.2rem; }
.foot__group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.foot__group h2 {
  margin: 0 0 .3rem;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.foot__group ul { list-style: none; margin: 0; padding: 0; }

/* 44px rows on touch, where a thumb needs them. Tightened on a pointer
   device further down, which is where the height was going. */
.foot__group a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: var(--t-small); line-height: 1.3;
  color: var(--on-ink-2); text-decoration: none;
}
.foot__group a:hover,
.foot__group a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Right: contact ──────────────────────────────────────────────────── */

.foot__contact { min-width: 0; }
.foot__contact h2 {
  margin: 0 0 .45rem;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.foot__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
/* Label beside the address while there is room for both, which is most
   widths. The desktop column is narrower than that and gets the stacked
   treatment below - an address broken as "support@littlemoohosti / ng.com"
   is worse than a label on its own line. */
.foot__contact li {
  display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .5rem;
  font-size: var(--t-micro); line-height: 1.5;
}
.foot__contact span { color: var(--on-ink-3); }
.foot__contact a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--on-ink-2); text-decoration: none; overflow-wrap: anywhere;
}
.foot__contact a:hover,
.foot__contact a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── The slim bar ────────────────────────────────────────────────────── */

.foot__bar {
  display: flex; flex-wrap: wrap;
  gap: .25rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: .9rem;
  border-top: var(--rule-ink);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 0 1.15rem; list-style: none; margin: 0; padding: 0; }
.foot__legal a,
.foot__co,
.foot__cookiebtn {
  display: inline-flex; align-items: center;
  min-height: 36px;
  font-size: var(--t-micro);
  color: var(--on-ink-3); text-decoration: none;
}
.foot__co { margin: 0; max-width: 62ch; }
.foot__legal a:hover,
.foot__legal a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.foot__cookiebtn {
  padding: 0; background: none; border: 0; font: inherit;
  font-size: var(--t-micro); cursor: pointer;
}
.foot__cookiebtn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__cookiebtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── Tablet: identity across the top, nav and contact beneath ────────── */

@media (min-width: 700px) {
  .foot__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
  }
  .foot__group + .foot__group { border-top: 0; }
}

@media (min-width: 900px) {
  /* Room for the lists, so the widget becomes a heading again. */
  .foot__group > summary { cursor: default; min-height: 0; display: block; pointer-events: none; }
  .foot__group > summary::after { content: none; }

  .foot__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .foot__id { grid-column: 1; }
  .foot__nav { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__contact { grid-column: 2; }
  /* A pointer does not need a 44px row, and 44px across five columns is
     where most of the old height went. 30px keeps well clear of the 24px
     minimum target size while removing roughly a third of the band. */
  .foot__group a { min-height: 30px; }
}

/* ── Desktop: the three zones, side by side, one row ─────────────────── */

@media (min-width: 1200px) {
  .foot__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1.02fr);
    column-gap: clamp(1.75rem, 3vw, 3rem);
    /* The zones are different heights by nature, so the row gap below them
       only needs to separate the fine print, not clear the tallest column. */
    row-gap: 1.75rem;
    align-items: start;
  }
  .foot__id      { grid-column: 1; grid-row: 1; }
  .foot__nav     { grid-column: 2; grid-row: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.25rem; }
  .foot__contact { grid-column: 3; grid-row: 1; }

  /* Stacked, so the address gets the full column and breaks at a sensible
     point instead of mid-domain. */
  .foot__contact li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot__contact span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
  .foot__contact a { min-height: 0; padding-bottom: .35rem; overflow-wrap: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .foot__acts a { transition: none; }
}


/* ── Header on the deep-ink hero ────────────────────────────────────────
   The homepage header sits inside the hero rather than above it. Only the
   colours change: geometry, spacing and behaviour stay identical to the
   light bar used on every other route. */

.top { position: sticky; top: 0; }

.home .top { position: absolute; inset: 0 0 auto; background: transparent; }
.home .top.is-stuck { background: var(--ink); border-bottom-color: var(--ink-line); }

.home .nav__link,
.home .nav__signin,
.home .uk,
.home .nav__toggle { color: var(--on-ink-2); }

.home .nav__link:hover,
.home .nav__item:hover .nav__link,
.home .nav__signin:hover { color: #fff; }

.home .nav__link[aria-current] { color: #fff; }

.home .top__menu {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

/* The submenu keeps its light panel in both states: a dark flyout on a dark
   header reads as a hole rather than a menu. */

.top__bar { max-width: none; min-height: var(--head-h); padding-block: 0; }
.mark { margin-right: auto; }
.mark img { width: auto; height: 46px; }

@media (max-width: 560px) { .mark img { height: 38px; } }

/* The photograph in an editorial split matches the height of the column it
   sits beside rather than floating in the middle of it. */

.split { align-items: stretch; }
.split__fig { align-self: stretch; min-height: clamp(20rem, 34vw, 30rem); }
.split__fig .ph { display: block; height: 100%; }
.split__fig .ph img { width: 100%; height: 100%; object-fit: cover; }
.split__body { align-self: center; }

@media (max-width: 900px) {
  .split__fig { min-height: 0; aspect-ratio: 16 / 10; }
}

/* The brand track and the link-column count are set once, in the footer
   block above, at each of its three breakpoints. The override that used to
   sit here re-applied two columns at every width, so the footer never
   stacked: on a phone the brand column was 56px wide, its paragraph ran one
   word to a line and the mark overflowed its own box. */

/* A closing statement is two paragraphs, not one block of running text. */
.close p + p { margin-top: 1rem; }
.close p { margin: 0; }

/* The homepage header is transparent over the hero, so its mobile panel
   takes the ink ground rather than dropping a white sheet onto the photo. */
@media (max-width: 1060px) {
  .home .nav { background: var(--ink); border-bottom-color: var(--ink-line); }
  .home .nav__item { border-bottom-color: var(--ink-line); }
  .home .nav__sub a { color: var(--on-ink-2); }
  .home .nav__sub a:hover { background: rgba(201, 190, 255, .1); color: #fff; }
}

/* ── The mark ───────────────────────────────────────────────────────────
   Two genuine variants from the supplied brand archive rather than one
   variant pushed through a CSS filter. Exactly one is visible at a time;
   the other is hidden from layout and from assistive technology. */

.mark img,
.foot__mark img { width: auto; height: 46px; filter: none; }

.mark .mark__light { display: block; }
.mark .mark__dark  { display: none; }

.home .mark .mark__light,
[data-theme="dark"] .mark .mark__light { display: none; }

.home .mark .mark__dark,
[data-theme="dark"] .mark .mark__dark { display: block; }

.foot__mark img { display: block; }

@media (max-width: 560px) { .mark img { height: 38px; } }


/* ── Renewable badge ────────────────────────────────────────────────────
   The artwork carries its own outlined border, so it never gets a card, a
   plate, a glow or padding of its own. It sits directly on a deep-ink
   section band, at its original proportions, and appears once per page.

   Placements: the footer of every page, the About renewable band, and the
   sustainability page's share band. */

.foot__badge,
.greenband__badge,
.share__badge { margin: 0; max-width: 240px; }

.foot__badge { margin-top: 1.5rem; }

.foot__badge img,
.greenband__badge img,
.share__badge img { display: block; width: 100%; height: auto; }

/* A full-width ink band that owns the badge. */
.greenband__wrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}


.share__panel { display: flex; align-items: center; }

@media (max-width: 760px) {
  .greenband__wrap { grid-template-columns: minmax(0, 1fr); }
  .foot__badge, .greenband__badge, .share__badge { max-width: 220px; }
}

/* ── Renewable badge ────────────────────────────────────────────────────
   One variant per placement, chosen for the ground it actually renders on.
   No card, no plate, no glow, no border, no recolouring, and the supplied
   proportions are never altered. Clear space comes from the surrounding
   layout rather than from padding inside a container. */

.rbadge { margin: 0; }
.rbadge img { display: block; width: 100%; height: auto; }

/* Compact placements: footer, supporting bands. */
.rbadge--rect { max-width: 230px; }

/* Large feature placements, sized so the wording stays readable. */
.rbadge--circle { max-width: 200px; }

@media (max-width: 520px) {
  .rbadge--rect { max-width: 200px; }
  .rbadge--circle { max-width: 168px; }
}

/* Placement spacing. Clear space comes from the layout around the badge. */
.foot__badge  { margin-top: 1.5rem; }
.green__badge { margin-top: 1.75rem; }
.green__link  { margin: 1.25rem 0 0; }
.ghero__badge { margin-top: 1.75rem; }

.greenband { background: var(--lilac); }
.greenband__wrap {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.greenband__body h2 { font-size: var(--d3); margin-bottom: 1rem; }
.greenband__body p  { margin: 0 0 1rem; color: var(--text-on-lavender); max-width: 60ch; }

@media (max-width: 760px) {
  .greenband__wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ── Theme control ──────────────────────────────────────────────────────
   A compact button in the utility group that opens a three-state radio
   menu. Icon plus text, never icon alone, so the control is understandable
   without relying on the sun and moon. */

.tsw { position: relative; }

.tsw__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  padding: .4rem .6rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.tsw__btn:hover { color: var(--brand); border-color: var(--border); }

.tsw__ico { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.tsw__ico svg { grid-area: 1 / 1; width: 17px; height: 17px; }

/* The sun and moon cross-fade with a quarter turn. Restrained, and it stops
   entirely when motion is reduced. */
.tsw__sun,
.tsw__moon {
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}

.tsw__moon { opacity: 0; transform: rotate(-45deg) scale(.7); }
[data-theme="dark"] .tsw__sun  { opacity: 0; transform: rotate(45deg) scale(.7); }
[data-theme="dark"] .tsw__moon { opacity: 1; transform: none; }

.tsw__chev { transition: transform var(--base) var(--ease); }
.tsw__btn[aria-expanded="true"] .tsw__chev { transform: rotate(180deg); }

.tsw__menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 70;
  min-width: 14rem;
  padding: .35rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}

.tsw__menu[hidden] { display: none; }

.tsw__opt {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: .6rem;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: .45rem .55rem;
  background: none;
  border: 0;
  border-radius: var(--r-1);
  font-family: var(--sans);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.tsw__opt:hover { background: var(--brand-soft); }

.tsw__tick { display: grid; place-items: center; width: 18px; height: 18px; color: var(--brand); opacity: 0; }
.tsw__tick svg { width: 15px; height: 15px; }
.tsw__opt[aria-checked="true"] .tsw__tick { opacity: 1; }
.tsw__opt[aria-checked="true"] .tsw__text { font-weight: 600; }

.tsw__text { display: grid; font-size: var(--t-small); line-height: 1.3; }
.tsw__text span { font-size: var(--t-micro); font-weight: 400; color: var(--text-muted); margin-top: .1rem; }

/* On the dark homepage hero the control follows the header's own colours. */
.home .tsw__btn { color: var(--text-on-ink-2); }
.home .tsw__btn:hover { color: #fff; border-color: rgba(255, 255, 255, .28); }

/* In the mobile panel the control sits in the utility row and its menu
   opens in flow rather than floating over the navigation. */
@media (max-width: 1060px) {
  .tsw { width: 100%; }
  .tsw__btn { width: 100%; justify-content: flex-start; border-color: var(--border); }
  .tsw__menu { position: static; margin-top: .4rem; min-width: 0; box-shadow: none; }
  .home .tsw__btn { border-color: var(--border-ink); }
  .home .tsw__menu { background: var(--surface-raised); }
}


/* ── The shared arrival ─────────────────────────────────────────────────
   Sections settle into place once, the first time they are seen. The class
   is only added by script, so content is never hidden waiting for it, and
   the whole thing is skipped when motion is reduced. */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* Items inside a revealed group arrive just behind it, which reads as one
   movement rather than a queue. */
.has-reveal [data-reveal] > * { transition-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Migration stepper ──────────────────────────────────────────────────
   Numbered stages connected by a fine line. On desktop it runs across; on
   a narrow screen the same markup becomes a vertical timeline. The line is
   drawn once, when the section is first seen, which is the site's
   "quietly working in the background" character in its clearest form. */

.step { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.step--lav  { background: var(--section-lavender); }
.step--warm { background: var(--page); }
.step--lift { background: var(--surface); }

.step__wrap {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.step__lead h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem); }
.step__lede { margin: 1rem 0 0; font-size: var(--t-small); color: var(--text-on-lavender); max-width: 32ch; }
.step--warm .step__lede, .step--lift .step__lede { color: var(--text-soft); }
.step__cta { margin: 1.25rem 0 0; }

.step__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The connecting line sits behind the numbers and is drawn from the left. */
.step__list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: .62rem;
  height: 1px;
  background: var(--border-lavender);
  transform-origin: left center;
}

.step--warm .step__list::before,
.step--lift .step__list::before { background: var(--border); }

.has-reveal .step__list::before { transform: scaleX(0); transition: transform var(--slow) var(--ease) 120ms; }
.has-reveal [data-reveal].is-in .step__list::before { transform: scaleX(1); }

.step__item { position: relative; padding-top: 1.6rem; }

.step__no {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  padding-right: .6rem;
  background: var(--section-lavender);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--brand);
}

.step--warm .step__no { background: var(--page); }
.step--lift .step__no { background: var(--surface); }

.step__item h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; letter-spacing: 0; margin-bottom: .35rem; }
.step__item p { margin: 0; font-size: var(--t-micro); line-height: 1.6; color: var(--text-on-lavender); }
.step--warm .step__item p, .step--lift .step__item p { color: var(--text-soft); }

/* Four or more stages wrap to two rows rather than shrinking. */
.step__list:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }

@media (max-width: 900px) {
  .step__wrap { grid-template-columns: minmax(0, 1fr); }

  /* Vertical timeline: the line runs down the left of the numbers. */
  .step__list { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 1.9rem; }
  .step__list::before {
    left: .34rem; right: auto; top: .6rem; bottom: .6rem;
    width: 1px; height: auto;
    transform-origin: center top;
  }
  .has-reveal .step__list::before { transform: scaleY(0); }
  .has-reveal [data-reveal].is-in .step__list::before { transform: scaleY(1); }

  .step__item { padding: 1rem 0 1rem 0; }
  .step__item:first-child { padding-top: 0; }
  .step__no {
    left: -1.9rem; top: .1rem;
    padding: 0 .35rem;
    background: inherit;
  }
  .step--lav .step__no  { background: var(--section-lavender); }
  .step--warm .step__no { background: var(--page); }
  .step--lift .step__no { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .has-reveal .step__list::before { transform: none !important; transition: none; }
}

/* Full targets in the mobile panel, where these are tapped rather than
   glanced at along a header row. */
@media (max-width: 1060px) {
  .nav__util { flex-direction: column; align-items: stretch; gap: .5rem; }
  .nav__util .btn,
  .nav__signin {
    width: 100%;
    min-height: var(--tap);
    justify-content: center;
  }
  .nav__util .btn--sm { font-size: var(--t-small); padding-block: .7rem; }
  .nav__util .btn { margin-left: 0; }
  .uk { min-height: var(--tap); }
}

/* Which renewable variant is visible follows the ground it renders on. On a
   deep-ink section that never changes. On the page ground it follows the
   theme, and exactly one is visible and announced in either. */
.rbadge--on-light .rbadge__white { display: none; }
[data-theme="dark"] .rbadge--on-light .rbadge__green { display: none; }
[data-theme="dark"] .rbadge--on-light .rbadge__white { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rbadge--on-light .rbadge__green { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rbadge--on-light .rbadge__white { display: block; }
}


/* =============================================================================
   ICON SYSTEM

   One scale, one stroke, one colour system, applied everywhere. Before this
   existed the trust strip had no rules at all, so its four SVGs expanded to
   fill their container and rendered at 1440px square on twenty placements
   across the site. That is the visual noise this section removes.

   Scale
     --ico-sm   16px  inline marks inside running text: ticks, arrows
     --ico      22px  standard interface icons
     --ico-lg   32px  feature icons, the largest permitted
   Anything larger is media, not an icon, and must be a deliberate focal
   element of a component rather than decoration.

   Stroke is a single weight everywhere. The site previously mixed 1px, 1.6px
   and 1.8px, which read as three different icon families.
   ============================================================================= */

:root {
  --ico-sm: 16px;
  --ico:    22px;
  --ico-lg: 32px;
  --ico-stroke: 1.6;
}

/* Safety net. No decorative SVG may exceed the feature size unless it opts
   out by being real media. This is what stops a missing rule becoming a
   1440px icon again. */
main svg:not([data-media]) { max-width: var(--ico-lg); max-height: var(--ico-lg); }
main svg[stroke] { stroke-width: var(--ico-stroke); }

/* Media that happens to be SVG: the migration frame, badges, logos. */
main svg[data-media],
main svg.lm-stage__svg,
main .rbadge svg,
main .vfilm svg,
main figure svg { max-width: none; max-height: none; }

/* Inline marks inside running text. */
.ruled li > svg, .go svg, .arrow svg, .lm-link svg, .btn svg, .lm-btn svg,
.dir__go svg, .panel-card__go svg, .router__cta svg, .finder__tag svg,
.offer__note svg, .panel-card__tick svg, li > svg {
  width: var(--ico-sm); height: var(--ico-sm); flex: none;
}

/* Standard interface icons sit in a quiet square, never a heavy chip. */
.ruled__icon, .router__ico, .lm-ref__icon, .trust__icon, .cap__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; color: var(--purple, var(--brand));
}
.ruled__icon svg, .router__ico svg, .lm-ref__icon svg, .trust__icon svg,
.cap__icon svg { width: var(--ico); height: var(--ico); }


/* =============================================================================
   TRUST STRIP

   Four verified inclusions under the page hero. It had no rules at all.
   A single quiet band, four columns, icon beside term, no cards and no
   panels: it is a factual footnote to the hero, not a feature grid.
   ============================================================================= */

.trust {
  background: var(--warm-lift);
  border-bottom: 1px solid var(--warm-line);
}
.trust__row {
  width: 100%; max-width: var(--shell, 1240px); margin-inline: auto;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) var(--gutter, 1.5rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.trust__item { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.trust__term {
  margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--on-warm);
  line-height: 1.35;
}
.trust__def {
  margin: .15rem 0 0; font-size: var(--t-micro); line-height: 1.45;
  color: var(--on-warm-3, var(--on-warm-2));
}

@media (max-width: 900px) {
  .trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .trust__row { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
}

/* ── Cookie consent ──────────────────────────────────────────────────────
   Proportionate to what the site does: one optional technology, no analytics
   and no marketing. A bar at the foot of the window, and a sheet for the
   categories. Accept and reject sit together with equal weight, as the
   Cookie Policy requires. */

.cookie[hidden] { display: none; }

.cookie__bar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--ink); color: var(--on-ink);
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -12px 32px rgba(0,0,0,.35);
}
.cookie__inner {
  width: 100%;
  padding: clamp(1rem, 2.2vw, 1.5rem) var(--edge);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}
.cookie__text h2 { margin: 0 0 .3rem; font-size: 1rem; color: #fff; }
.cookie__text p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--on-ink-2); max-width: 78ch; }
.cookie__text a { color: #fff; text-underline-offset: 3px; }
.cookie__acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie__acts .btn { white-space: nowrap; }

.cookie__panel {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(6, 5, 12, .6);
}
.cookie__panel[hidden] { display: none; }
.cookie__sheet {
  width: 100%; max-width: 38rem; max-height: 86vh; overflow-y: auto;
  background: var(--surface); color: var(--on-warm);
  border: 1px solid var(--warm-line); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.cookie__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cookie__head h2 { margin: 0; font-size: 1.25rem; }
.cookie__close {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: none; border: 1px solid var(--warm-line); border-radius: var(--r-sm);
  color: var(--on-warm-2); cursor: pointer;
}
.cookie__close:hover { color: var(--on-warm); }
.cookie__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.cookie__cats { display: grid; gap: 1rem; }
.cookie__cat { padding-bottom: 1rem; border-bottom: 1px solid var(--warm-line); }
.cookie__cat:last-child { border-bottom: 0; padding-bottom: 0; }
.cookie__catrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.cookie__catrow h3 { margin: 0; font-size: 1rem; }
.cookie__cat p { margin: 0 0 .35rem; font-size: var(--t-small); line-height: 1.55; color: var(--on-warm-2); }
.cookie__used { font-size: var(--t-micro) !important; color: var(--on-warm-3, var(--on-warm-2)) !important; }
.cookie__used strong { color: var(--on-warm-2); }
.cookie__always { font-size: var(--t-micro); color: var(--on-warm-3, var(--on-warm-2)); white-space: nowrap; }

.cookie__toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cookie__toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cookie__switch {
  display: block; width: 2.75rem; height: 1.5rem; border-radius: 999px;
  background: var(--warm-line); transition: background var(--fast) var(--ease);
}
.cookie__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff;
  transition: transform var(--fast) var(--ease);
}
.cookie__toggle input:checked + .cookie__switch { background: var(--purple); }
.cookie__toggle input:checked + .cookie__switch::after { transform: translateX(1.25rem); }
.cookie__toggle input:focus-visible + .cookie__switch { outline: 2px solid var(--focus); outline-offset: 2px; }

.cookie__panelacts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.cookie__foot { margin: 1rem 0 0; font-size: var(--t-micro); line-height: 1.55; color: var(--on-warm-2); }

body.has-cookie-panel { overflow: hidden; }

@media (max-width: 780px) {
  .cookie__inner { grid-template-columns: minmax(0, 1fr); }
  .cookie__acts .btn { flex: 1 1 8rem; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie__switch, .cookie__switch::after { transition: none; }
}