/* =============================================================================
   LITTLE MOO HOSTING — inner pages
   Product, support, editorial and policy compositions, built from the same
   system as the homepage.
   ============================================================================= */

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.crumbs { margin-bottom: 1.1rem; }
/* ── Family hero ───────────────────────────────────────────────────────── */
.fhero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 62%, var(--ink-2) 100%); color: var(--on-ink); }
/* ── Page hero ─────────────────────────────────────────────────────────── */
/* ── Plan tiers ────────────────────────────────────────────────────────── */
.tiers { padding: var(--section) 0; background: var(--warm); }
/* VPS comparison table */
.vps__table { background: var(--warm-lift); border: 1px solid var(--warm-line); border-radius: var(--r-md); overflow: hidden; }
/* ── Who it suits ──────────────────────────────────────────────────────── */
.suits { padding: var(--section) 0; }
/* ── Column blocks ─────────────────────────────────────────────────────── */
.cols { padding: var(--section) 0; background: var(--warm); }
.cols__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.cols__head { margin-bottom: var(--s6); max-width: 62ch; }
.cols__title { font-size: var(--t-h2); margin-bottom: .7rem; }
.cols__lede { font-size: var(--t-small); color: var(--on-warm-2); }
.cols__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
/* Six items do not divide by four. A six-item grid takes three columns so the
   last row is full rather than half empty. */
.cols__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { padding: 1.4rem; background: var(--warm-lift); border: 1px solid var(--warm-line); border-radius: var(--r-md); }
.col h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; margin-bottom: .45rem; }
.col p { font-size: var(--t-mini); color: var(--on-warm-2); }
.col__no { display: block; margin-bottom: .5rem; font-family: var(--serif); font-size: var(--t-mini); font-weight: 600; color: var(--purple); }
/* ── WordPress workflow ────────────────────────────────────────────────── */
.flow { padding: var(--section) 0; background: var(--lilac); }
.flow__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.flow__head { margin-bottom: var(--s6); max-width: 60ch; }
.flow__title { font-size: var(--t-h2); margin-bottom: .7rem; }
.flow__lede { font-size: var(--t-small); color: var(--on-warm-2); }
.flow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.flow__steps li { padding-top: 1rem; border-top: 2px solid var(--purple); }
.flow__no { display: block; margin-bottom: .5rem; font-family: var(--serif); font-size: var(--t-mini); font-weight: 600; color: var(--purple); }
.flow__steps h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; margin-bottom: .35rem; }
.flow__steps p { font-size: var(--t-mini); color: var(--on-warm-2); }
/* ── Terminal (VPS) ────────────────────────────────────────────────────── */
.terminal { padding: var(--section) 0; background: linear-gradient(160deg, var(--ink) 0%, var(--black) 100%); color: var(--on-ink); }
/* ── Quotation (Ripley) ────────────────────────────────────────────────── */
/* No rules: on the only page that uses it the bands above and below both sit
   on different grounds, so the tonal steps are already the boundaries. */
.quote { padding: var(--section) 0; background: var(--warm-lift); }
.quote__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.quote__lead { margin-bottom: var(--s6); max-width: 60ch; }
.quote__title { font-size: var(--t-h2); margin-bottom: .7rem; }
.quote__lede { font-size: var(--t-small); color: var(--on-warm-2); }
.quote__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.quote__steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; }
.quote__steps span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lilac); color: var(--purple); font-size: var(--t-mini); font-weight: 700; }
.quote__steps h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; margin-bottom: .3rem; }
.quote__steps p { font-size: var(--t-mini); color: var(--on-warm-2); }
.quote__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s6); }
.quote__note { font-size: var(--t-mini); color: var(--on-warm-3); }
/* ── Two-route blocks ──────────────────────────────────────────────────── */
.routes2 { padding: var(--section) 0; background: var(--warm); }
.routes2__wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.route2 { padding: 1.75rem; background: var(--warm-lift); border: 1px solid var(--warm-line); border-radius: var(--r-md); }
.route2--alt { background: var(--lilac); border-color: var(--lilac-line); }
.route2 h2 { font-size: var(--t-h3); margin-bottom: .7rem; }
.route2 p { font-size: var(--t-small); color: var(--on-warm-2); }
.paths__list { display: grid; gap: .5rem; margin: 1.1rem 0 1.4rem; }
.paths__list li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-mini); color: var(--on-warm-2); }
.paths__list .tick { color: var(--purple); margin-top: 2px; }
/* ── TLD grid ──────────────────────────────────────────────────────────── */
.tlds { padding: var(--section) 0; background: var(--lilac); }
.tlds__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.tlds__head { margin-bottom: var(--s6); max-width: 62ch; }
.tlds__title { font-size: var(--t-h2); margin-bottom: .7rem; }
.tlds__note { font-size: var(--t-small); color: var(--on-warm-2); }
/* Nine extensions do not divide by five, which left four empty cells on the
   last row. Three columns divides nine exactly. */
.tlds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.tld { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: var(--warm-lift); border: 1px solid var(--lilac-line); border-radius: var(--r-sm); }
.tld__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.tld__price { font-size: var(--t-micro); color: var(--on-warm-3); }
.tld--quiet { background: transparent; }
.tld--more { background: var(--brand-fill); border-color: var(--purple); }
.tld--more .tld__name, .tld--more .tld__price { color: #fff; }
/* ── Paired feature blocks ─────────────────────────────────────────────── */
.pair { padding: var(--section) 0; background: var(--warm-lift); border-block: 1px solid var(--warm-line); }
/* ── Note blocks ───────────────────────────────────────────────────────── */
.note { padding: var(--section) 0; background: var(--warm); }
/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { padding: var(--section) 0; background: var(--warm); }
.qa { background: var(--warm-lift); border: 1px solid var(--warm-line); border-radius: var(--r-md); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .9rem 1.15rem; cursor: pointer; list-style: none;
  font-size: var(--t-small); font-weight: 600;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__mark { position: relative; flex: none; width: 16px; height: 16px; }
.qa__mark::before, .qa__mark::after { content: ""; position: absolute; background: var(--brand-fill); border-radius: 2px; }
.qa__mark::before { inset: 7px 0; height: 2px; }
.qa__mark::after { inset: 0 7px; width: 2px; transition: transform var(--base) var(--ease); }
.qa[open] .qa__mark::after { transform: scaleY(0); }
.qa__body { padding: 0 1.15rem 1.1rem; }
.qa__body p { font-size: var(--t-small); color: var(--on-warm-2); max-width: 72ch; }
/* ── Other families ────────────────────────────────────────────────────── */
/* No top rule: the onward-range block always follows the FAQ band, which sits
   on a different ground, so the tonal step is already the boundary. */
.others { padding: var(--section) 0; background: var(--warm-lift); }
/* ── Support routes ────────────────────────────────────────────────────── */
.routes { padding: var(--section) 0; background: var(--warm); }
.routes__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.route { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s4); padding: 1.35rem; background: var(--warm-lift); border: 1px solid var(--warm-line); border-radius: var(--r-md); align-items: start; }
.route--lead { background: var(--lilac); border-color: var(--lilac-line); }
.route__art { width: 78px; }
.route__body h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; margin-bottom: .35rem; }
.route__body p { font-size: var(--t-mini); color: var(--on-warm-2); }
.arrow--light { color: var(--purple); }
/* ── Chooser ───────────────────────────────────────────────────────────── */
.chooser { padding: var(--section) 0; background: var(--warm); }
.chooser__wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: var(--s7); width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); align-items: start; }
.qset { margin: 0 0 1.6rem; padding: 1.4rem; border: 1px solid var(--warm-line); border-radius: var(--r-md); background: var(--warm-lift); }
.qset legend { padding: 0 .4rem; }
.qset__no { display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); }
.qset__q { display: block; margin-top: .2rem; font-family: var(--serif); font-size: var(--t-h3); }
.qset__opts { display: grid; gap: .5rem; margin-top: 1rem; }
.opt { position: relative; display: block; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt__box { display: flex; align-items: center; gap: .7rem; min-height: var(--tap); padding: .6rem .9rem; border: 1.5px solid var(--warm-line); border-radius: var(--r-sm); font-size: var(--t-small); transition: border-color var(--base) var(--ease), background var(--base) var(--ease); }
.opt__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--on-warm-3); position: relative; }
.opt input:checked + .opt__box { border-color: var(--purple); background: var(--lilac); }
.opt input:checked + .opt__box .opt__dot { border-color: var(--purple); }
.opt input:checked + .opt__box .opt__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-fill); }
.opt input:focus-visible + .opt__box { outline: 3px solid var(--purple); outline-offset: 3px; }
.chooser__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.chooser__privacy { margin-top: 1rem; font-size: var(--t-mini); color: var(--on-warm-3); }
.result { position: sticky; top: 6rem; }
.result__card, .result__empty { padding: 1.6rem; background: var(--lilac); border: 1px solid var(--lilac-line); border-radius: var(--r-md); }
.result__eyebrow { font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.result__art { width: 108px; margin: .8rem 0; }
.result__art--quiet { opacity: .6; }
.result__name { font-size: var(--t-h2); margin-top: .5rem; }
.result__cat { font-size: var(--t-small); font-weight: 600; color: var(--purple); margin-bottom: .7rem; }
.result__why { font-size: var(--t-small); color: var(--on-warm-2); margin-bottom: 1.2rem; }
.result__also { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--lilac-line); }
.result__also h3 { font-family: var(--sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-warm-3); margin-bottom: .5rem; }
.result__also a { font-size: var(--t-small); color: var(--on-warm-2); }
.result__caveat { margin-top: 1rem; font-size: var(--t-mini); color: var(--on-warm-3); }
.result__empty h2 { font-size: var(--t-h3); margin-bottom: .5rem; }
.result__empty p { font-size: var(--t-small); color: var(--on-warm-2); }
.result__hint { display: grid; gap: .4rem; margin-top: 1rem; }
.result__hint li { display: flex; gap: .5rem; align-items: center; font-size: var(--t-mini); color: var(--on-warm-2); }
.result__hint .tick { color: var(--purple); }
/* ── Contact ───────────────────────────────────────────────────────────── */
.contact { padding: var(--section) 0; background: var(--warm); }
.contact__wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s7); width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); align-items: start; }
.contact__h2 { font-size: var(--t-h3); margin-bottom: 1rem; }
.croutes { display: grid; gap: .5rem; }
.croute a { display: block; padding: .9rem 1.05rem; background: var(--warm-lift); border: 1px solid var(--warm-line); border-radius: var(--r-sm); text-decoration: none; }
.croute a:hover { border-color: var(--purple); }
.croute.is-on a { background: var(--lilac); border-color: var(--purple); }
.croute strong { display: block; font-size: var(--t-small); font-weight: 700; }
.croute span { display: block; margin-top: .2rem; font-size: var(--t-mini); color: var(--on-warm-2); }
.contact__direct { margin-top: var(--s5); padding: 1.35rem; background: var(--lilac); border-radius: var(--r-md); }
.contact__direct h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; margin-bottom: .4rem; }
.contact__direct p { font-size: var(--t-mini); color: var(--on-warm-2); margin-bottom: .9rem; }
/* The form is the section's two-column wrapper now, so it cannot also be a
   bordered panel: that put one box around the six bordered topic cards and
   drew the same line twice. It carries the shell instead, and the cards are
   the only outlined things on the page. */
.enquiry { background: none; border: 0; border-radius: 0; }
.enquiry__h2 { font-size: var(--t-h3); margin-bottom: 1.2rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .35rem; font-size: var(--t-small); font-weight: 600; }
.field label span { font-weight: 400; color: var(--on-warm-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: .6rem .8rem;
  background: var(--warm); border: 1.5px solid var(--warm-line); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--t-small); color: var(--on-warm);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(109,76,219,.15); }
.field__hint { margin-top: .35rem; font-size: var(--t-mini); color: var(--on-warm-3); }
.enquiry__honest { margin-top: 1rem; padding: .9rem 1rem; background: var(--lilac); border-radius: var(--r-sm); font-size: var(--t-mini); color: var(--on-warm-2); }
.enquiry__out { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--warm-line); }
.enquiry__out h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; margin-bottom: .35rem; }
.enquiry__out p { font-size: var(--t-mini); color: var(--on-warm-2); }
.enquiry__copy { margin: .8rem 0; padding: .9rem 1rem; background: var(--warm); border: 1px solid var(--warm-line); border-radius: var(--r-sm); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--t-mini); white-space: pre-wrap; }
.enquiry__buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
/* ── About ─────────────────────────────────────────────────────────────── */
/* No bottom rule: the next band changes ground, so the tonal step is the
   boundary and a line as well reads as a box. */
.story { padding: var(--section) 0; background: var(--warm-lift); }
.story__wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--s7); width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.story__title { font-size: var(--t-h2); }
.story__body p { font-size: var(--t-small); color: var(--on-warm-2); max-width: 68ch; }
.story__body p + p { margin-top: 1rem; }
.story__drop { font-size: var(--t-lead) !important; color: var(--on-warm) !important; }
.values { padding: var(--section) 0; background: var(--warm); }
.values__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.values__head { margin-bottom: var(--s6); }
.values__title { font-size: var(--t-h2); }
.values__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
.values__list li { padding-top: 1rem; border-top: 2px solid var(--purple); }
.values__no { display: block; margin-bottom: .5rem; font-family: var(--serif); font-size: var(--t-mini); font-weight: 600; color: var(--purple); }
.values__list h3 { font-family: var(--sans); font-size: var(--t-h4); font-weight: 700; margin-bottom: .4rem; }
.values__list p { font-size: var(--t-small); color: var(--on-warm-2); }
/* ── Sustainability page ───────────────────────────────────────────────── */
.ghero { background: var(--warm); }
.ghero__wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s7); align-items: center;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: clamp(2rem, 3.6vw, 3.25rem) var(--gutter) var(--section);
}
.ghero__title { font-size: var(--t-h2); margin-bottom: .9rem; }
.ghero__lede { font-size: var(--t-lead); color: var(--on-warm-2); max-width: 52ch; }
.ghero__art { position: relative; }
.ghero__pic { display: block; }
.ghero__pic img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 60%;
  border-radius: var(--r-lg); display: block; box-shadow: var(--lift-2);
}
.claims { padding: var(--section) 0; background: var(--lilac); }
.claims__wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.claim { padding-top: 1rem; border-top: 2px solid var(--purple); }
.claim__no { display: block; margin-bottom: .5rem; font-family: var(--serif); font-size: var(--t-mini); font-weight: 600; color: var(--purple); }
.claim h2 { font-size: var(--t-h3); margin-bottom: .5rem; }
.claim p { font-size: var(--t-small); color: var(--on-warm-2); }
/* ── Migration page ────────────────────────────────────────────────────── */
.journey { padding: var(--section) 0; background: var(--warm); }
.journey__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.journey__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.journey__steps li { padding-top: 1.1rem; border-top: 2px solid var(--purple); }
.journey__no { display: block; margin-bottom: .6rem; font-family: var(--serif); font-size: var(--t-mini); font-weight: 600; color: var(--purple); }
.journey__steps h2 { font-size: var(--t-h3); margin-bottom: .5rem; }
.journey__steps p { font-size: var(--t-small); color: var(--on-warm-2); }
/* ── Policy documents ──────────────────────────────────────────────────── */
.doc { padding: var(--section) 0; background: var(--warm); }
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fhero__wrap, .terminal__wrap, .faq__wrap, .chooser__wrap,
  .contact__wrap, .story__wrap, .doc__wrap, .ghero__wrap { grid-template-columns: minmax(0, 1fr); }
  .routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claims__wrap, .journey__steps, .quote__steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .routes2__wrap, .cols__grid, .suits__list, .flow__steps,
  .routes__grid, .tlds__grid, .others__grid { grid-template-columns: minmax(0, 1fr); }
  /* The comparison table becomes readable stacked records rather than a
     microscopic grid. */
  .vps__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* =============================================================================
   OFFER PANELS
   Replaces the unstyled .explain component that left four pages rendering as
   plain flowing text. Used for the service range, migration requirements and
   support checklists.
   ============================================================================= */

/* Was border-block. On both pages that use it the neighbours above and below
   sit on different grounds, so both rules were redundant. */
.offer { padding: var(--section) 0; background: var(--warm-lift); }
.offer--lilac { background: var(--lilac); }
.offer__wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.offer__head { margin-bottom: var(--s6); max-width: 64ch; }
.offer__title { font-size: var(--t-h2); margin-bottom: .8rem; }
.offer__lede { font-size: var(--t-lead); color: var(--on-warm-2); }
.offer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.offer__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel-card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem; background: var(--warm); border: 1px solid var(--warm-line);
  border-radius: var(--r-md);
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.offer--lilac .panel-card { background: var(--warm-lift); border-color: var(--lilac-line); }
.panel-card--link:hover { border-color: var(--purple); transform: translateY(-2px); box-shadow: var(--lift-2); }
.panel-card__link { position: absolute; inset: 0; z-index: 2; border-radius: var(--r-md); text-decoration: none; }
.panel-card__no {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-bottom: .9rem;
  border-radius: 50%; background: var(--lilac); color: var(--purple);
  font-size: var(--t-mini); font-weight: 700;
}
.offer--lilac .panel-card__no { background: var(--lilac-deep); }
.panel-card__name { font-size: 1.3125rem; margin-bottom: .15rem; }
.panel-card__name a { text-decoration: none; }
.panel-card__cat {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--purple); margin-bottom: .6rem;
}
.panel-card__body { font-size: var(--t-small); color: var(--on-warm-2); }
.panel-card__go {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: 1.1rem;
  font-size: var(--t-small); font-weight: 600; color: var(--purple);
}
.panel-card__tick { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.panel-card__tick .tick { color: var(--purple); }
.panel-card__tick strong { font-size: var(--t-h4); font-weight: 700; }
.offer__note {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: var(--s6); padding: 1.15rem 1.3rem;
  background: var(--lilac); border-radius: var(--r-md);
  font-size: var(--t-small); color: var(--on-warm-2); max-width: 78ch;
}
.offer--lilac .offer__note { background: var(--warm-lift); }
.offer__note .tick { color: var(--purple); margin-top: 4px; }
.offer__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--s5); }
/* Badge sharing block on the sustainability page */
.share { padding: var(--section) 0; background: var(--warm); }
/* Small gaps left by the earlier component set */
.story__lead { align-self: start; }
@media (max-width: 1024px) {
  .offer__grid, .offer__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .offer__grid, .offer__grid--2, .offer__grid--4 { grid-template-columns: minmax(0, 1fr); }
}
/* The renewable badge is white artwork supplied for dark grounds, so every
   placement gives it one. */
.share__panel { padding: 0; border: 0; background: none; box-shadow: none; }
/* =============================================================================
   HORIZONTAL STEPPER JOURNEY  (Domains)
   Ported from "Stepper" by @sean0205
   https://21st.dev/@sean0205/components/stepper
   ============================================================================= */

.jst { padding: var(--section) 0; background: var(--warm-lift); }
.jst__head { max-width: 64ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.jst__head h2 { margin: .35rem 0 0; }
.jst__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }

.jst__nav { display: flex; width: 100%; align-items: center; }
.jst__item { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.jst__item:last-child { flex: 0 0 auto; }
.jst__trigger {
  display: inline-flex; align-items: center; gap: .6rem; flex: none;
  background: none; border: 0; padding: .4rem .2rem; cursor: pointer; font: inherit;
  color: var(--on-warm-2); border-radius: 999px;
}
.jst__trigger:hover { color: var(--on-warm); }
.jst__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* The source's round indicator: completed and active both take the accent. */
.jst__ind {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--warm-line); color: var(--on-warm);
  font-size: var(--t-micro); font-variant-numeric: tabular-nums;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.jst__item.is-active .jst__ind,
.jst__item.is-done .jst__ind { background: var(--purple); color: #fff; }
.jst__label { font-size: var(--t-small); white-space: nowrap; }
.jst__item.is-active .jst__label { color: var(--on-warm); font-weight: 600; }

/* The source's separator, accented once the step behind it is complete. */
.jst__sep {
  flex: 1 1 auto; height: 2px; margin: 0 .75rem; border-radius: 2px;
  background: var(--warm-line); transition: background var(--base) var(--ease);
}
.jst__item.is-done .jst__sep { background: var(--purple); }

.jst__panels { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.jst__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.jst__block h3 { margin: 0 0 .6rem; font-size: var(--t-h3, 1.3rem); }
.jst__text { margin: 0 0 .8rem; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); max-width: 54ch; }
.jst__points { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.jst__points li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-warm-2); }
.jst__points svg { color: var(--purple); margin-top: .15rem; }

html.js .jst__panel { display: none; }
html.js .jst__panel.is-on { display: block; animation: jst-in var(--base) var(--ease) both; }
@keyframes jst-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Without scripting the nav is pointless and every panel is present, so the
   journey reads as three stacked sections instead. */
html:not(.js) .jst__nav { display: none; }
html:not(.js) .jst__panel + .jst__panel { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 860px) {
  .jst__nav { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .jst__item { width: 100%; }
  .jst__sep { display: none; }
  .jst__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .jst__ind, .jst__sep { transition: none; }
  html.js .jst__panel.is-on { animation: none; }
}

/* =============================================================================
   PROTECTION INDEX  (Security)
   Ported from "Feature 197" by @shadcnblockscom
   https://21st.dev/@shadcnblockscom/components/accordion-feature-section
   ============================================================================= */

.lay { padding: var(--section) 0; background: var(--warm); }
.lay__head { max-width: 64ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.lay__head h2 { margin: .35rem 0 0; }
.lay__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }

/* The source's half-and-half split. */
.lay__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.lay__item { border-bottom: 1px solid var(--warm-line); }
.lay__item:first-child { border-top: 1px solid var(--warm-line); }
.lay__h { margin: 0; }
.lay__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--on-warm-2);
  transition: color var(--fast) var(--ease);
}
.lay__trigger:hover { color: var(--on-warm); }
.lay__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 6px; }
.lay__title { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; }
/* The source shows the open title at full strength and the rest muted. */
.lay__item.is-open .lay__trigger { color: var(--on-warm); }

/* The source's chevron rotates 180 degrees when the item opens. */
.lay__chev { flex: none; color: var(--on-warm-3, var(--on-warm-2)); transition: transform var(--base) var(--ease); }
.lay__item.is-open .lay__chev { transform: rotate(180deg); }

.lay__panel { overflow: hidden; }
.lay__panel p { margin: 0; padding: 0 0 1.15rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 52ch; }
html.js .lay__panel { display: none; }
html.js .lay__item.is-open .lay__panel { display: block; }

/* The media panel. The source swaps it per item; there is one verified
   photograph for this page rather than six, so it is static. */
.lay__fig { margin: 0; position: sticky; top: calc(var(--head-h, 86px) + 1.5rem); }
.lay__fig .ph, .lay__fig img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.lay__fig figcaption { margin-top: .7rem; font-size: var(--t-micro); color: var(--on-warm-3, var(--on-warm-2)); }

@media (max-width: 900px) {
  .lay__grid { grid-template-columns: minmax(0, 1fr); }
  .lay__fig { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .lay__chev, .lay__trigger { transition: none; }
  .lay__fig { position: static; }
}
/* The accordion and the exclusions beneath it share a ground, so the caveat
   needs a boundary of its own rather than reading as more of the list. */
.lay + .note { border-top: 1px solid var(--warm-line); }

/* =============================================================================
   PROCESS TIMELINE  (Migrations)
   Ported from "Process Timeline" by @youcefbnm
   https://21st.dev/@youcefbnm/components/process-timeline
   ============================================================================= */

.ptl { padding: var(--section) 0; background: var(--section-lavender, var(--warm-lift)); overflow: clip; }
.ptl__head { max-width: 60ch; }
.ptl__head h2 { margin: .35rem 0 0; }
.ptl__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 54ch; }

/* The six stages read as a sequence, one after another, in the reading
   shell.

   They used to travel along a pinned horizontal runway driven by scroll
   position. It worked, but it cost 3,375px of scrolling -- nearly four
   screens -- to read six short paragraphs, and for most of that the viewport
   held one small card floating on an empty field with the section heading
   already scrolled away. The stacked layout that no-JS and reduced-motion
   visitors already received is clearer, so it is now what everyone gets.
   Nothing was removed from the page: every stage was always in the document.

   The old container also padded itself with half the leftover viewport,
   which is the centred-cap measurement corrected everywhere else. */
.ptl__track { margin-top: clamp(2rem, 4vw, 3rem); }
.ptl__sticky {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
}
.ptl__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem); list-style: none; margin: 0; padding: 0;
}
.ptl__card {
  display: flex; min-width: 0;
  border: 1px solid var(--warm-line); border-radius: var(--r-lg);
  background: var(--surface-raised, var(--warm-lift));
  box-shadow: var(--lift-2, none);
}
.ptl__no {
  flex: none; margin: 0; padding: 1.5rem 1.15rem;
  border-right: 1px solid var(--warm-line);
  font-size: var(--t-small); font-variant-numeric: tabular-nums;
  color: var(--purple);
}
.ptl__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.ptl__body h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.25; }
.ptl__body p { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); }

@media (max-width: 860px) {
  .ptl__body { padding: 1.25rem; }
}

/* =============================================================================
   WHAT WE NEED  (Migrations)
   ============================================================================= */

/* The four things we ask for were numbered cards sitting directly beneath six
   numbered stages, so the page counted twice and neither count meant more for
   it. These are requirements, not an order of events, and read as a list. */
.needs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); }
.needs__item { padding: 1.15rem 0; border-top: 1px solid var(--warm-line); }
.needs__item h3 { margin: 0 0 .4rem; font-size: 1.0625rem; }
.needs__item p { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }
@media (max-width: 720px) { .needs__grid { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   BENTO GRID  (Sustainability)
   Ported from "Feature Section with Bento Grid" by @tommyjepsen
   https://21st.dev/@tommyjepsen/components/feature-section-with-bento-grid
   ============================================================================= */

.bento { padding: var(--section) 0; background: var(--warm-lift); }
.bento__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.bento__head h2 { margin: .35rem 0 0; }
.bento__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); }

/* The source's rhythm: three columns, four tiles, 2+1 then 1+2. */
.bento__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.bento__tile {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 2.5rem; padding: 1.5rem;
  aspect-ratio: 1 / 1; max-height: 20rem;
  background: var(--surface-raised, var(--warm)); border: 1px solid var(--warm-line);
  border-radius: var(--r-lg);
}
.bento__tile--wide { grid-column: span 2; aspect-ratio: auto; }
/* The source's icon: 32px on a thin stroke, alone at the top of the tile. */
.bento__ico { display: block; color: var(--purple); }
.bento__ico svg { width: var(--ico-lg); height: var(--ico-lg); }
.bento__text h3 { margin: 0 0 .5rem; font-size: 1.1875rem; }
.bento__text p { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 42ch; }

.bento__fig { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 46rem; }
.bento__fig .ph, .bento__fig img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.bento__fig figcaption { margin-top: .7rem; font-size: var(--t-micro); color: var(--on-warm-3, var(--on-warm-2)); max-width: 68ch; }

@media (max-width: 900px) {
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__tile--wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento__grid { grid-template-columns: minmax(0, 1fr); }
  .bento__tile, .bento__tile--wide { grid-column: auto; aspect-ratio: auto; gap: 1.5rem; }
}

/* =============================================================================
   GATHERING CHECKLIST  (Support)
   Ported from "Sprint Task Checklist" by @cnippet.dev
   https://21st.dev/@cnippet.dev/components/sprint-task-checklist
   ============================================================================= */

.gather { padding: var(--section) 0; background: var(--section-lavender, var(--warm-lift)); }
.gather__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gather__lead h2 { margin: .35rem 0 0; }
.gather__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); max-width: 48ch; }
.gather__cta { margin-top: 1.5rem; }

.gather__list { border: 1px solid var(--warm-line); border-radius: var(--r-lg); background: var(--surface-raised, var(--warm)); padding: 1.25rem; }

/* The source's header row: the list's name left, what is left right. */
.gather__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .5rem .75rem; }
.gather__name { margin: 0; font-size: var(--t-small); font-weight: 600; }
.gather__count { margin: 0; font-size: var(--t-micro); color: var(--on-warm-3, var(--on-warm-2)); font-variant-numeric: tabular-nums; }
html:not(.js) .gather__count { display: none; }

.gather__items { list-style: none; margin: 0; padding: 0; }
.gather__label {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .7rem .5rem; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.gather__label:hover { background: var(--warm-lift); }
.gather__box { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; accent-color: var(--purple); cursor: pointer; }
.gather__box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gather__text { display: block; }
.gather__t { display: block; font-size: var(--t-small); font-weight: 600; }
.gather__b { display: block; margin-top: .15rem; font-size: var(--t-small); color: var(--on-warm-2); }

/* The source dims a completed row and strikes its label through. Real
   checkboxes carry that with no script. */
.gather__label:has(.gather__box:checked) { opacity: .5; }
.gather__label:has(.gather__box:checked) .gather__t { text-decoration: line-through; }

.gather__done {
  margin: .75rem 0 0; padding: .7rem 1rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
  font-size: var(--t-small); text-align: center;
}
.gather__done[hidden] { display: none; }

.gather__reset {
  display: block; width: 100%; margin-top: .75rem; padding: .55rem 1rem;
  background: none; border: 1px solid var(--warm-line); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-small); color: var(--on-warm-2); cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.gather__reset:hover { color: var(--on-warm); border-color: var(--on-warm-3, var(--warm-line)); }
.gather__reset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 900px) { .gather__wrap { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gather__label, .gather__reset { transition: none; } }

/* =============================================================================
   QUESTION WIZARD  (Find your fit)
   Ported from "Wizard Steps" by @ddoemonn
   https://21st.dev/@ddoemonn/components/wizard-steps
   ============================================================================= */

/* The source's rail: numbered tiles with a bar between them that fills once
   the step behind it is done. */
.wiz__rail { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.wiz__step { display: flex; flex: 1 1 auto; align-items: center; gap: .35rem; min-width: 0; }
.wiz__step:last-child { flex: 0 0 auto; }

.wiz__tile {
  position: relative; display: grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 1px solid var(--warm-line); border-radius: 8px;
  background: var(--surface-raised, var(--warm-lift));
  font: inherit; font-size: var(--t-micro); font-variant-numeric: tabular-nums;
  color: var(--on-warm-3, var(--on-warm-2)); cursor: default;
  transform: scale(.92);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.wiz__tile[data-reached] { cursor: pointer; }
.wiz__tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wiz__num, .wiz__done { grid-column: 1; grid-row: 1; display: grid; place-items: center; }
.wiz__done { opacity: 0; }

/* Current: full size, readable. Done: filled, with the source's check. */
.wiz__step.is-here .wiz__tile { transform: scale(1); color: var(--on-warm); border-color: var(--on-warm-3, var(--warm-line)); }
.wiz__step.is-done .wiz__tile { background: var(--purple); border-color: var(--purple); color: #fff; }
.wiz__step.is-done .wiz__num { opacity: 0; }
.wiz__step.is-done .wiz__done { opacity: 1; }

.wiz__bar { position: relative; flex: 1 1 auto; height: 3px; border-radius: 2px; background: var(--warm-line); overflow: hidden; }
.wiz__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--purple);
  transform: scaleX(0); transform-origin: left; transition: transform var(--base) var(--ease); }
.wiz__step.is-done .wiz__fill { transform: scaleX(1); }

/* The source's viewport: one panel at a time, focusable so Back and Next can
   put the reader inside the question they just moved to. */
.wiz__view:focus { outline: none; }
.wiz__view:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-md); }
html.js .wiz__view .qset { display: none; }
html.js .wiz__view .qset.is-on { display: block; animation: wiz-in var(--base) var(--ease) both; }
html.js .wiz__view .qset.is-on.is-back { animation-name: wiz-in-back; }

/* A brief mark on the question when Next is pressed with nothing chosen.
   The live region carries the message; this is only the visual echo. */
.qset.is-asking .qset__opts { outline: 2px solid var(--focus); outline-offset: .6rem; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .qset.is-asking .qset__opts { outline-width: 2px; } }
@keyframes wiz-in      { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes wiz-in-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* Without scripting there is no position to be in, so the rail is not shown
   and every question is asked at once, exactly as before. */
html:not(.js) .wiz__rail { display: none; }
html:not(.js) .wiz__back { display: none; }

.wiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.wiz__back[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wiz__tile, .wiz__fill { transition: none; }
  html.js .wiz__view .qset.is-on { animation: none; }
}

/* =============================================================================
   SERVICES INDEX  (About)
   Ported from "Impact Experience" by @uilayout.contact
   https://21st.dev/@uilayout.contact/components/impact-experience
   ============================================================================= */

.rindex { padding: var(--section) 0; background: var(--warm-lift); }

/* The source's heading sits in its own panel above the rows, joined to them. */
.rindex__head {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--warm-line); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-raised, var(--warm));
}
.rindex__title { margin: .35rem 0 0; }
.rindex__lede { margin: .9rem 0 0; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); max-width: 62ch; }

.rindex__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--warm-line); border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }

/* The source's generous three-way row: 3 / 4 / 5 of twelve. */
.rindex__row {
  position: relative;
  display: grid; grid-template-columns: 3fr 4fr 5fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--surface-raised, var(--warm));
  transition: background var(--fast) var(--ease);
}
.rindex__row + .rindex__row { border-top: 1px solid var(--warm-line); }

/* The source reveals a photograph behind the row on hover. There are no
   photographs of these six that are not already the homepage's, so the row
   lifts on its own ground instead. */
.rindex__row:hover { background: var(--warm-lift); }
.rindex__row:has(.rindex__hit:focus-visible) { background: var(--warm-lift); }
.rindex__hit { position: absolute; inset: 0; z-index: 1; }
.rindex__hit:focus { outline: none; }
.rindex__row:has(.rindex__hit:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }

.rindex__name { position: relative; }
.rindex__name h3 { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.05; }
.rindex__cat { margin: .5rem 0 0; font-size: var(--t-small); color: var(--on-warm-2); }

/* The source's label-and-value table, two columns, quiet labels. */
.rindex__facts { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; align-content: start; }
.rindex__facts dt { margin: 0; font-size: var(--t-micro); color: var(--on-warm-3, var(--on-warm-2)); }
.rindex__facts dd { margin: 0; font-size: var(--t-small); font-weight: 600; }

.rindex__body { position: relative; }
.rindex__body p { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); }
.rindex__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: var(--t-small); color: var(--purple); }
.rindex__go svg { transition: transform var(--fast) var(--ease); }
.rindex__row:hover .rindex__go svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .rindex__row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .rindex__facts { grid-template-columns: auto 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rindex__row, .rindex__go svg { transition: none; }
  .rindex__row:hover .rindex__go svg { transform: none; }
}

/* =============================================================================
   CONTACT TOPICS  (Contact)
   Ported from the card demo of "Radio Group" by @originui
   https://21st.dev/@originui/components/radio-group
   ============================================================================= */

.topics { margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); }
.topics .contact__h2 { margin: 0 0 1rem; }
.topics__list { display: grid; gap: .5rem; }

/* The source's card: bordered, rounded, padded, with the control last in the
   row and the description under the label. */
.topic {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: .35rem 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--warm-line); border-radius: var(--r-md);
  background: var(--surface-raised, var(--warm-lift));
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.topic__radio {
  grid-column: 2; grid-row: 1;
  width: 1rem; height: 1rem; margin: .2rem 0 0;
  accent-color: var(--purple); cursor: pointer;
}
/* The source's overlay: the control's hit area is the whole card. */
.topic__radio::after { content: ""; position: absolute; inset: 0; }
.topic__label { grid-column: 1; grid-row: 1; font-size: var(--t-small); font-weight: 600; cursor: pointer; }
.topic__body { grid-column: 1; grid-row: 2; margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--on-warm-2); }

.topic:hover { border-color: var(--on-warm-3, var(--warm-line)); }
/* The source brightens the card's border when its option is checked. */
.topic:has(.topic__radio:checked) { border-color: var(--purple); background: var(--warm-lift); }
.topic:has(.topic__radio:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .topic { transition: none; } }
.enquiry__route { margin: .85rem 0 0; font-size: var(--t-micro); color: var(--on-warm-2); }


/* ── Contact: no-JS fallback and direct routes ──────────────────────────── */

/* The prepare button assembles the enquiry in the browser. Without scripting
   it has nothing to do, so it is replaced by the routes that still work. */
html.js .enquiry__nojs      { display: none; }
html:not(.js) .enquiry__prepare { display: none; }
.enquiry__nojs p { margin: 0 0 .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }
.enquiry__nojsacts { display: flex; flex-wrap: wrap; gap: .75rem; }

.droutes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem); margin: 0;
}
.droute dt {
  margin: 0 0 .3rem; font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2));
}
.droute dd { margin: 0; }
.droute dd a { font-size: var(--t-small); font-weight: 600; color: var(--purple); text-decoration: none; overflow-wrap: break-word; }
.droute dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.droute dd a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.droute dd span { display: block; margin-top: .25rem; font-size: var(--t-micro); line-height: 1.55; color: var(--on-warm-2); }

/* ── Service status ──────────────────────────────────────────────────────
   One platform reading, shown once. The tone classes carry the colour so the
   state is never conveyed by text alone. */
.status-now { border: 1px solid var(--lilac-line); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.75rem; }
.status-now__state { display: flex; align-items: center; gap: .55rem; font-family: var(--sans); font-size: var(--t-micro);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-warm-3); margin: 0 0 .6rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-warm-3); flex: none; }
.status-now--ok      { border-color: rgba(46, 160, 92, .45); }
.status-now--ok      .status-dot { background: #2ea05c; }
.status-now--warn    { border-color: rgba(200, 140, 40, .5); }
.status-now--warn    .status-dot { background: #c88c28; }
.status-now--bad     { border-color: rgba(190, 60, 60, .55); }
.status-now--bad     .status-dot { background: #be3c3c; }
.status-now--neutral .status-dot { background: var(--on-warm-3); }
.status-now__headline { font-size: var(--t-h3); margin: 0 0 .5rem; }
.status-now__detail { color: var(--on-warm-2); margin: 0; }
.status-now__note { margin: .8rem 0 0; color: var(--on-warm-2); font-size: var(--t-small); }
.status-list { margin: 0 0 1.75rem; }
.status-list h3 { font-family: var(--sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-warm-3); margin: 0 0 .6rem; }
.status-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.status-list li { border-left: 2px solid var(--lilac-line); padding-left: .9rem; }
.status-list__when { display: block; font-size: var(--t-small); color: var(--on-warm-3); }
.status-list li p { margin: .35rem 0 0; color: var(--on-warm-2); font-size: var(--t-small); }
.status-none { color: var(--on-warm-2); margin: 0 0 1.5rem; }
.status-foot { color: var(--on-warm-2); font-size: var(--t-small); border-top: 1px solid var(--lilac-line); padding-top: 1.1rem; margin: 0; }