/* Rock Solid Financing - public website.
 * Direction: "The product performs" (see .taste-skill/notes.md), set in the office's own look:
 * white panels with 8px corners, 6px controls, near-black actions, on a paper ground.
 * One face, General Sans, at two weights. Gold only where money is charged or a page closes.
 * Five type steps: small, body, lead, head, display. --fit is the display step capped to a column.
 */

@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --paper: #f3f2ef;
  --tone: #e9e7e2;
  --ink: #111111;
  --soft: #5f6368;
  --char-1: #161616;
  --char-2: #1f1f1f;
  --char-3: #2e2e2e;
  --gold: #b8913f;
  --gold-hi: #c8a352;
  --gold-deep: #8a6a26;
  --silver: #c9c8c3;
  --white: #ffffff;
  --line: #e6e6e6;      /* a panel's edge inside an interface fragment */
  --control: #d4d4d4;   /* a field's edge */
  --act: #141414;       /* actions */
  --act-hi: #2e2e2e;

  --display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --text: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  --step-display: clamp(2.5rem, 0.6rem + 5vw, 5rem);
  /* Display step fitted to a column: "Equipment" and "Solid terms," measure under 5.4em. */
  --fit: min(var(--step-display), calc((100vw - 2 * var(--m)) / 5.4));

  --m: 20px;           /* page margin */
  --pm: var(--m);      /* the page margin, kept where a tile resets --m for its own grid */
  --g: 16px;           /* gutter */
  --b: 6px;            /* tile margin and gap */
  --tp: 14px;          /* tile padding; --b + --tp = --m */
  --axis: 42%;
  --r: 8px;            /* panels, tiles, photographs */
  --r-btn: 6px;        /* buttons and fields */
  --top-h: 64px;
  --btn-h: 48px;
  --space: clamp(72px, 9vw + 40px, 176px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
}

@media (min-width: 768px) {
  :root {
    --m: 32px;
    --g: 24px;
    --b: 8px;
    --tp: 24px;
    --top-h: 68px;
    --btn-h: 52px;
    --fit: min(var(--step-display), calc((58vw - var(--m)) / 5.4));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.5;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
strong, b { font-weight: 500; }
:target { scroll-margin-top: 24px; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

::selection { background: var(--ink); color: var(--paper); }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- Type --------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 500; }
.d-display, .d-head, .d-fit, .name {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}
.d-display { font-size: var(--step-display); }
.d-fit { font-size: var(--fit); }
.d-head { font-size: var(--step-head); line-height: 1.04; }
.lead { font-size: var(--step-lead); line-height: 1.38; letter-spacing: -0.01em; text-wrap: pretty; }
.small { font-size: var(--step-small); line-height: 1.45; }
.soft { color: var(--soft); }
.say { font-size: var(--step-lead); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }
.num, .money { font-variant-numeric: tabular-nums lining-nums; }
.measure { max-width: 40ch; }
p + p { margin-top: 1em; }
p, dd, figcaption { text-wrap: pretty; }

/* ---- Buttons: the office's own (6px corners, near-black, one size) ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--act);
  color: var(--white);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-gold { background: var(--act); color: var(--white); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-tone { background: var(--tone); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--act-hi); }
  .btn-paper:hover, .btn-tone:hover { background: #dedcd6; }
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn .arrow { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .arrow { transform: translateX(4px); } }
/* On an ink tile the action turns to paper. */
:is(.nl, .stages, .show-echo, .cta-talk) .btn { background: var(--paper); color: var(--ink); }
:is(.nl, .stages, .show-echo, .cta-talk) :focus-visible { outline-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { :is(.nl, .stages, .show-echo, .cta-talk) .btn:hover { background: var(--white); } }

/* Text link with an arrow, used for "Read more", "All questions" etc. */
.go { font-weight: 500; text-decoration: none; display: inline-flex; gap: 0.45em; align-items: baseline; }
.go::after { content: "\2192"; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .go:hover::after { transform: translateX(4px); } .go:hover { text-decoration: underline; text-underline-offset: 0.22em; } }

/* ---- Top bar (every page): the mark, a few plain links, one action -------------------- */
.top { display: flex; align-items: center; gap: 4px; min-height: var(--top-h); padding: 8px var(--m); position: relative; z-index: 20; }
.t-mark { display: flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: var(--r-btn); }
.t-mark img { height: 30px; width: auto; max-width: none; }
@media (min-width: 400px) { .t-mark img { height: 34px; } }
@media (min-width: 1080px) { .t-mark img { height: 38px; } }
.t-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-links { display: none; gap: 2px; align-items: center; list-style: none; margin: 0 8px 0 0; padding: 0; }
.nav-links a, .t-login, .menu-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn);
  font-size: 1rem; font-weight: 500; text-decoration: none; white-space: nowrap; color: inherit;
  transition: background-color var(--t-hover) var(--ease-out);
}
.nav-links a[aria-current="page"] { background: var(--white); }
.t-login { display: none; }
.menu-btn { appearance: none; background: none; border: 0; margin: 0; gap: 10px; cursor: pointer; font-family: inherit; }
.menu-btn .bars { display: inline-grid; gap: 4px; width: 18px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.t-act { margin-left: 6px; padding: 0 16px; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover, .t-login:hover, .menu-btn:hover { background: var(--tone); }
  .nav-links a[aria-current="page"]:hover { background: var(--white); }
  .top .menu-btn:hover .bars::after { transform: scaleX(0.6); transform-origin: left; }
}
@media (min-width: 600px) { .t-login { display: inline-flex; } .t-act { padding: 0 22px; } }
@media (min-width: 1080px) { .nav-links { display: flex; } }

/* ---- Menu sheet: :target without script, .is-open with it --------------------------- */
.menu { display: none; position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.menu:target, .menu.is-open { display: block; }
html.menu-open { overflow: hidden; }
.menu-top { display: flex; align-items: center; gap: 4px; min-height: var(--top-h); padding: 8px var(--m); }
.menu .menu-btn .bars::before { transform: translateY(3px) rotate(45deg); }
.menu .menu-btn .bars::after { transform: translateY(-3px) rotate(-45deg); }
.menu-body { display: grid; gap: var(--b); padding: 8px var(--b) var(--b); }
.menu-main { list-style: none; margin: 0; background: var(--white); border-radius: var(--r); padding: clamp(16px, 2vw, 28px) var(--tp); display: grid; align-content: start; }
.menu-main a { display: inline-block; padding-block: 6px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-decoration: none; transition: color var(--t-hover) var(--ease-out); }
.menu-main a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.14em; }
.menu-side { display: grid; gap: var(--b); align-content: start; }
.menu-tile { background: var(--tone); border-radius: var(--r); padding: 24px var(--tp); }
.menu-tile h2 { font-size: var(--step-body); font-weight: 500; margin-bottom: 8px; }
.menu-tile ul { list-style: none; margin: 0; padding: 0; }
.menu-tile a { display: inline-block; padding-block: 6px; text-decoration: none; }
.menu-tile .places a { font-size: var(--step-body); font-weight: 500; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .menu-main a:hover { color: var(--soft); } .menu-tile a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }
@media (min-width: 900px) { .menu-body { grid-template-columns: 7fr 5fr; } }

/* ---- The axis grid ------------------------------------------------------------------- */
/* side: margin to the axis (notes, figures, the left half of a split); main: axis to margin. */
.ax {
  display: grid;
  grid-template-columns: [full-start] var(--m) [side-start axis-start] minmax(0, 1fr) [side-end main-end] var(--m) [full-end];
  align-content: start;
}
@media (min-width: 768px) {
  .ax { grid-template-columns: [full-start] var(--m) [side-start] minmax(0, calc(var(--axis) - var(--m) - var(--g))) [side-end] var(--g) [axis-start] minmax(0, 1fr) [main-end] var(--m) [full-end]; }
}
.ax > * { grid-column: side-start / main-end; min-width: 0; }
.ax > .side { grid-column: side; }
.ax > .main { grid-column: axis-start / main-end; }
.ax > .full { grid-column: full; }
.sec { padding-block: var(--space); }
.sec + .sec { padding-top: 0; }  /* every .sec is on paper: two in a row share one gap */

/* ---- Home: the title, then the office's estimate screen on a shaped stage of shop photographs ---- */
/* The stage is an ink tile holding photographs that cross-fade; a paper notch cut into its top-left
   corner carries the sentence and the action, so the paper of the title runs on into it. The card is
   the live thing: the estimate, worked by the office's own engine. */
.hero-copy { padding: clamp(24px, 4vw, 56px) var(--m) clamp(24px, 3vw, 40px); }
.hero-h { font-size: min(10vw, calc((100vw - 2 * var(--m)) / 9.2)); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; }
.hero-h .line, .hero-h [data-line] { display: block; }
@media (min-width: 768px) { .hero-h { font-size: min(8.4vw, calc((100vw - 2 * var(--m)) / 9.6), 140px); } }
/* The photographs clip themselves; the stage does not, so the notch can lap 2px past its edges and no
   edge of a photograph is ever left half-covered under the paper. Below the wide layout the photographs
   fill the band above the card, and the card sits on the ink. */
.hero-stage { --ch: 72px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 200px auto; margin: 0 var(--b); border-radius: var(--r); background: var(--char-1); }
.hero-photos { position: relative; grid-column: 1 / -1; grid-row: 1 / 3; overflow: clip; border-radius: var(--r) var(--r) 0 0; }
.hero-photos > * { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-in-out); }
.hero-photos > .is-on { opacity: 1; }
.hero-photos img { width: 100%; height: 100%; object-fit: cover; }
.hero-photos::after { content: ""; position: absolute; inset: 0; background: rgb(17 17 17 / 0.28); }
.hero-notch { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: grid; gap: 24px; justify-items: start; align-content: start; margin: -2px -2px 0 -2px; padding: 2px 42px 40px calc(var(--tp) + 2px); background: var(--paper); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%); }
.hero-say { max-width: 30ch; }
.hero-card { position: relative; z-index: 1; grid-column: 1; grid-row: 3; margin: 0 8px 8px; }
@media (min-width: 768px) {
  .hero-stage { --ch: 88px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 220px auto; }
  .hero-notch { grid-column: 1 / span 9; margin-right: 0; padding-right: 56px; }
  .hero-card { grid-column: 1 / -1; margin: 0 var(--tp) var(--tp); }
}
@media (min-width: 1280px) {
  .hero-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; }
  .hero-photos { grid-row: 1 / -1; border-radius: var(--r); }
  .hero-notch { grid-column: 1; }
  .hero-card { grid-column: 2; grid-row: 1 / span 2; margin: 56px var(--tp) 64px 48px; }
}

/* ---- The estimate card (home hero, estimate page, financing, the embed) ------------------- */
.est-card { --pad: clamp(20px, 2.4vw, 32px); background: var(--white); color: var(--ink); border-radius: var(--r); padding: var(--pad); container-type: inline-size; }
.est-grid { display: grid; gap: 24px; }
.est-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.est-top :is(h2, h3) { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.est-card .calc-fig { font-size: min(17cqw, 4.75rem); }
.est-card .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.est-card .seg span { min-width: 0; padding: 0 4px; }
.est-card .seg-wide span { padding: 0 16px; }
.est-card .money-field, .est-card .range { max-width: none; }
.est-card .calc-facts dd { font-size: 1.125rem; }
@container (min-width: 620px) {
  .est-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 40px; grid-template-areas: "top top" "form sum" "form more" "st act" "note note"; }
  .est-grid > .est-top { grid-area: top; }
  .est-grid > .calc-sum { grid-area: sum; }
  .est-grid > .calc-form { grid-area: form; }
  .est-grid > .calc-more { grid-area: more; }
  .est-grid > .calc-act { grid-area: act; }
  .est-grid > .calc-st { grid-area: st; }
  .est-grid > .calc-note { grid-area: note; }
}
@container (max-width: 619.98px) {
  /* On a phone the figure rides along over the controls while they are worked. */
  .est-grid > .calc-sum { position: sticky; top: 0; z-index: 3; margin-inline: calc(-1 * var(--pad)); padding: 12px var(--pad); background: var(--white); }
}
/* The section form of the card (estimate page, financing): the heading in the side zone. */
.est { row-gap: 32px; }
.est-head { display: grid; gap: 16px; align-content: start; }
.est-head .lead { max-width: 32ch; }
@media (min-width: 1100px) {
  .est-head { grid-column: side; grid-row: 1; }
  .est > .est-card { grid-column: axis-start / main-end; grid-row: 1; }
}

/* ---- Calculator parts shared by the card and the loan calculator ------------------------- */
.calc-head { display: grid; gap: 20px; align-content: start; }
.calc-lead { font-size: var(--step-lead); line-height: 1.38; max-width: 30ch; text-wrap: pretty; }
.calc-sum { container-type: inline-size; display: grid; gap: 8px; align-content: start; }
.calc-fig { font-family: var(--display); font-weight: 500; font-size: min(4.5rem, calc(160cqw / var(--n, 9))); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.calc-per { font-size: var(--step-body); line-height: 1.45; text-wrap: pretty; }
.calc-print { display: none; }
.calc-form { display: grid; gap: 24px; align-content: start; }
.calc-form .ctl { margin-top: 0; }
.calc-form .btn { justify-self: start; }
.calc-more { container-type: inline-size; display: grid; gap: 18px; align-content: start; }
.calc-bar { height: 10px; border-radius: 5px; overflow: hidden; background: var(--gold); }
.calc-bar .p { display: block; width: 100%; height: 100%; background: var(--act); transform: scaleX(var(--w, 1)); transform-origin: left center; transition: transform 500ms var(--ease-out); }
.calc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--g); }
.calc-facts > div { display: grid; gap: 4px; align-content: start; }
.calc-facts dt { display: flex; align-items: center; gap: 8px; font-size: var(--step-small); color: var(--soft); }
.calc-facts .k-p dt::before, .calc-facts .k-c dt::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 2px; background: var(--act); }
.calc-facts .k-c dt::before { background: var(--gold); }
.calc-facts dd { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
@container (min-width: 780px) { .calc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.calc-st { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.calc-st .ctl { margin: 0; }
.calc-docs { flex: 1 1 24ch; max-width: 44ch; padding-bottom: 10px; }
.calc-note { max-width: 70ch; font-size: var(--step-small); line-height: 1.45; color: var(--soft); }

/* ---- Controls: the office's own fields (6px corners, an edge that darkens on focus) ------------- */
.ctl { margin-top: 24px; }
fieldset.ctl { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.ctl > legend { padding: 0; }
.ctl-label { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.money-field { display: flex; align-items: center; max-width: 340px; background: var(--white); border: 1px solid var(--control); border-radius: var(--r-btn); transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out); } /* taste-skill-ignore: form field or interface fragment */
.money-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } /* taste-skill-ignore: form field or interface fragment */
.money-field span { padding-left: 14px; font-size: var(--step-body); color: var(--soft); }
.money-field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px 0 6px; height: 46px; font-size: var(--step-body); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); outline: none; }
.field-note { margin-top: 8px; font-size: var(--step-small); color: var(--soft); min-height: 1.45em; }
.field-note.is-error { color: #a1271f; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; max-width: 100%; background: var(--paper); border-radius: var(--r-btn); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 40px; padding: 0 12px; border-radius: 4px; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); }
.seg input:checked + span { background: var(--act); color: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .seg label:hover input:not(:checked) + span { background: var(--tone); } }
.seg-wide span { min-width: 120px; }
/* The price slider: logarithmic, $1,000 to $5,000,000 in one sweep (site.js); script only. */
.range { margin-top: 14px; max-width: 340px; }
.range input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.range input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
.range input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--act); transition: transform var(--t-press) var(--ease-out); }
.range input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--act); transition: transform var(--t-press) var(--ease-out); }
.range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.range input:active::-moz-range-thumb { transform: scale(1.15); }
.range input:focus { outline: none; }
.range input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* ---- The loan calculator tile (/loan-calculator): a white panel on the axis grid ------------ */
.lc { --m: var(--tp); margin: 0 var(--b); padding-block: clamp(40px, 5vw, 72px); background: var(--white); color: var(--ink); border-radius: var(--r); row-gap: 40px; }
.lc .calc-form { gap: 28px; }
.lc .calc-sum { align-content: end; }
.lc .calc-act { margin-top: 32px; }
.lc .calc-note { margin-top: 24px; }
@media (max-width: 999px) { .lc { display: flex; flex-direction: column; padding-inline: var(--tp); } }
@media (max-width: 767px) {
  .lc .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .lc .seg span { min-width: 0; padding: 0 4px; }
}
@media (min-width: 1000px) {
  .lc { row-gap: 56px; align-items: start; }
  .lc .calc-head { grid-column: side; grid-row: 1; }
  .lc .calc-form { grid-column: side; grid-row: 2; align-self: start; }
}

/* ---- Work out a loan: the loan calculator tile (/loan-calculator) ------------------------------- */
/* The estimator's instrument worked three ways round. Controls in the side zone; the answer, what it
   is made of and the way on in the axis zone, held in view while the controls are worked (on screens
   tall enough to hold it). The figure being found has no box: the chosen mode hides it. Below 1000px
   one column, and only the figure rides along at the top of the screen (the sentence under it is
   too long to pin on a phone). The figure is sized by its own length (--n characters). */
.lc .calc-fig { font-size: min(5rem, calc(160cqw / var(--n, 9))); }
.lc-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 420px; }
.lc-pair > .money-field { flex: 1 1 150px; min-width: 0; max-width: none; }
.lc-pair > .lc-pct { flex: 0 0 116px; }
.lc-pair > .lc-rate { flex: 1 1 120px; }
/* A figure with its unit after it ("7.25 %", "5 years") reads from the right. */
.lc-unit input { text-align: right; padding: 0 6px 0 16px; }
.lc-unit span { padding: 0 16px 0 0; }
.lc .lc-basis { flex: 1 1 auto; width: auto; }
.lc .lc-basis label { flex: 1 1 auto; }
.lc .lc-basis span { height: 40px; } /* level with the 48px box beside it */
@supports selector(:has(*)) {
  .lc:has([name="mode"][value="payment"]:checked) [data-f="payment"],
  .lc:has([name="mode"][value="rate"]:checked) [data-f="rate"],
  .lc:has([name="mode"][value="deposit"]:checked) [data-f="deposit"] { display: none; }
}
@supports not selector(:has(*)) {
  .lc[data-mode="payment"] [data-f="payment"], .lc[data-mode="rate"] [data-f="rate"], .lc[data-mode="deposit"] [data-f="deposit"] { display: none; }
}

/* What the repayments are made of: the loan (paper) and the interest (gold), as a ring. */
.lc-split { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 40px; }
.lc-ring { --ring: clamp(112px, 9vw + 20px, 148px); flex: 0 0 auto; display: grid; grid-template-columns: var(--ring) minmax(0, 12ch); align-items: center; column-gap: 20px; }
.lc-ring svg { grid-area: 1 / 1; width: var(--ring); height: var(--ring); max-width: none; transform: rotate(-90deg); overflow: visible; }
.lc-ring circle { fill: none; stroke-width: 14; }
.lc-ring-c { stroke: var(--gold); transition: stroke var(--t-ui) var(--ease-out); }
.lc-ring.is-none .lc-ring-c { stroke: var(--line); } /* no answer: an empty ring, not a gold one */
.lc-ring-p { stroke: var(--act); transition: stroke-dasharray 600ms var(--ease-out), opacity var(--t-ui) var(--ease-out); }
.lc-ring-t { display: contents; }
.lc-ring-n { grid-area: 1 / 1; justify-self: center; position: relative; z-index: 1; /* above the turned ring */ font-family: var(--display); font-size: var(--step-lead); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.lc-ring-t > span + span { grid-area: 1 / 2; font-size: var(--step-small); line-height: 1.45; color: var(--soft); }
.lc-facts { flex: 1 1 320px; }
.lc-last { font-size: var(--step-small); line-height: 1.45; color: var(--soft); max-width: 52ch; }
/* A mistake in a box: the last good answer stays, dimmed, beside the note saying what to change. */
.lc :is(.calc-fig > .money, .calc-per, .lc-split > *, .lc-last) { transition: opacity var(--t-ui) var(--ease-out); }
.lc.is-stale :is(.calc-fig > .money, .calc-per, .lc-split > *, .lc-last) { opacity: 0.4; }
@media (max-width: 999px) {
  .lc { container-type: inline-size; row-gap: 0; }
  .lc-out, .lc .calc-sum { display: contents; }
  .lc .calc-head { order: -2; }
  .lc .calc-fig, .lc .calc-per { order: -1; }
  .lc .calc-fig { position: sticky; top: 0; z-index: 3; margin: 28px calc(-1 * var(--tp)) 0; padding: 12px var(--tp) 8px; background: var(--white); }
  .lc-form { margin-top: 40px; }
  .lc-split { margin-top: 56px; }
  .lc-last { margin-top: 24px; }
}
@media (min-width: 768px) and (max-width: 999px) {
  /* A tablet holds the four boxes two by two, so the controls fill the width and the answer stays near. */
  .lc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .lc-form > :is(.lc-mode, .nojs) { grid-column: 1 / -1; }
  .lc-sched .sec-head > :is(h2, .lead) { grid-column: side-start / main-end; }
}
@media (min-width: 1000px) {
  .lc { align-items: start; }
  .lc .calc-fig { font-size: min(6.5rem, calc(160cqw / var(--n, 9))); }
  .lc-out { grid-column: axis-start / main-end; grid-row: 1 / span 2; }
  .lc-split { margin-top: 48px; }
  .lc-last { margin-top: 24px; }
  .lc .calc-act { margin-top: 40px; }
}
@media (min-width: 1000px) and (min-height: 760px) {
  .lc-out { position: sticky; top: 24px; }
}

/* ---- Every payment, mapped: the chart to read and the schedule ------------------------------------ */
/* Balance (ink), paid so far (soft, dashed) and interest so far (deep gold) after each payment, on
   four bands of tone in place of grid lines. Read by hovering, dragging or the arrow keys
   (loancalc.js); the readout sits beside the chart on wide screens and above it on narrow ones. */
.lc-sched { row-gap: clamp(56px, 6vw, 96px); }
.lc-fig { display: grid; gap: 28px; align-items: start; }
.lc-read { display: grid; gap: 20px; align-content: start; }
.lc-at { font-size: var(--step-lead); line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.lc-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px var(--g); }
.lc-keys > div { display: grid; gap: 4px; align-content: start; }
.lc-keys dt { display: flex; align-items: center; gap: 10px; font-size: var(--step-small); color: var(--soft); }
.lc-keys dt::before { content: ""; flex: 0 0 22px; height: 3px; background: var(--ink); }
.lc-keys .s-paid dt::before { height: 0; background: none; border-top: 3px dashed var(--soft); } /* taste-skill-ignore: form field or interface fragment */
.lc-keys .s-int dt::before { background: var(--gold-deep); }
.lc-keys dd { font-size: var(--step-lead); line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.lc-hint { font-size: var(--step-small); color: var(--soft); max-width: 36ch; }
.lc-chart { container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px 14px; font-size: var(--step-small); line-height: 1.2; color: var(--soft); font-variant-numeric: tabular-nums lining-nums; }
/* The y labels share one cell, so the column is as wide as the widest of them. */
.lc-y { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: minmax(0, 1fr); }
.lc-y span { grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; bottom: calc(var(--v) * 100%); transform: translateY(50%); white-space: nowrap; }
.lc-plot { grid-column: 2; grid-row: 1; position: relative; height: clamp(240px, 26vw, 400px); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.lc-plot[role="slider"] { cursor: crosshair; touch-action: pan-y; }
.lc-plot:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.lc-bands { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.lc-bands i:nth-child(even) { background: var(--tone); }
.lc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.lc-plot path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.p-bal { stroke: var(--ink); stroke-width: 3; }
.p-paid { stroke: var(--soft); stroke-width: 2.5; stroke-dasharray: 8 6; }
.p-int { stroke: var(--gold-deep); stroke-width: 3; }
.lc-mark { position: absolute; inset: 0; pointer-events: none; }
.lc-mark i { position: absolute; left: calc(var(--x, 1) * 100%); bottom: calc(var(--y, 0) * 100%); width: 14px; height: 14px; border: 3px solid var(--paper); background: var(--ink); transform: translate(-50%, 50%); } /* taste-skill-ignore: form field or interface fragment */
.lc-mark .d-paid { background: var(--soft); }
.lc-mark .d-int { background: var(--gold-deep); }
.lc-empty { position: absolute; inset: 0; display: none; place-content: center; padding: 24px; text-align: center; font-size: var(--step-body); line-height: 1.5; color: var(--soft); text-wrap: balance; }
.lc-sched.is-empty .lc-empty { display: grid; }
.lc-sched.is-empty .lc-mark { display: none; }
.lc-x { grid-column: 2; grid-row: 2; position: relative; height: 1.2em; }
.lc-x span { position: absolute; top: 0; left: calc(var(--v) * 100%); transform: translateX(-50%); white-space: nowrap; }
.lc-x span.is-end { transform: translateX(-100%); }
/* A narrow chart keeps every other label along the bottom, counted back from the last. */
@container (max-width: 520px) { .lc-x span:nth-last-child(even) { display: none; } }

.lc-table { display: grid; gap: 24px; }
.lc-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.lc-table-h { font-size: var(--step-lead); line-height: 1.25; font-weight: 500; }
.lc-view { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lc-rows th.c-k { width: 5.5em; }
.lc-rows tfoot :is(th, td) { font-weight: 500; padding-top: 20px; }
.lc-rows tbody td[colspan] { color: var(--soft); }
.lc-sched :is(.lc-read, .lc-chart, .lc-rows) { transition: opacity var(--t-ui) var(--ease-out); }
.lc-sched.is-stale :is(.lc-read, .lc-chart, .lc-rows) { opacity: 0.4; }
@media (max-width: 639px) {
  /* The payment is the same each month; on a phone the four columns that change are kept. */
  .lc-rows .c-pay { display: none; }
  .rows.lc-rows :is(th, td) { padding-inline: 6px; }
  .lc-rows th.c-k { width: auto; }
}
@media (min-width: 1000px) {
  .lc-fig, .lc-table { grid-template-columns: subgrid; gap: 0; }
  .lc-read { grid-column: side; padding-right: var(--g); }
  .lc-keys { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lc-chart { grid-column: axis-start / main-end; }
  .lc-table { align-items: start; }
  .lc-table-head { grid-column: side; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: sticky; top: 24px; }
  .lc-table .rows-wrap { grid-column: axis-start / main-end; }
}

/* ---- Mosaic: "What we finance" (the board's tiles again: photographs, a clip, two colours) */
.mosaic { padding: var(--b) var(--b) 0; }
.mosaic.spaced { padding-top: var(--space); }
.sec + .mosaic.spaced { padding-top: 0; }
.m-grid { display: grid; gap: var(--b); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-tile { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; }
.m-tile img, .m-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--tone); }
/* The photographs are greyscale files; the clip is given the same treatment here. */
.m-tile video { filter: grayscale(1); }
.m-label {
  position: absolute; left: 0; bottom: 0; max-width: calc(100% - var(--tp));
  padding: 10px var(--tp); background: var(--ink); color: var(--paper);
  font-size: var(--step-small); font-weight: 500; line-height: 1.3;
}
.m-head, .m-gold { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: var(--tp); }
.m-head { background: var(--ink); color: var(--paper); }
.m-head h2 { max-width: 8ch; }
.m-gold { background: var(--gold); color: var(--ink); }
.m-gold p { font-size: var(--step-lead); line-height: 1.3; max-width: 18ch; text-wrap: pretty; }
@media (min-width: 1000px) { .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Proof: "Every term, priced" (a real table, no lines; stripes replace rules) ---------- */
.proof { container-type: inline-size; }
.proof-h { font-size: var(--fit); line-height: 0.92; }
.proof-h > span { display: block; }
@media (min-width: 768px) { .proof-h { font-size: var(--step-display); } }
.proof-sub { margin-top: 20px; max-width: 46ch; }
.terms-wrap { grid-column: full; margin-top: 56px; }
.terms { width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums lining-nums; }
.terms th, .terms td { padding: 14px 0; text-align: right; font-weight: 400; vertical-align: baseline; }
.terms thead th { padding: 0 0 12px; font-size: var(--step-small); font-weight: 500; color: var(--soft); }
.terms th:first-child, .terms td:first-child { padding-left: var(--m); text-align: left; }
.terms th:last-child, .terms td:last-child { padding-right: var(--m); }
.terms tbody tr { transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); }
.terms tbody tr:nth-child(odd) { background: var(--tone); }
.terms tbody tr.is-on { background: var(--ink); color: var(--paper); }
.terms .pick { font-weight: 500; text-decoration: none; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.terms .pick-mark { display: none; font-size: var(--step-small); font-weight: 400; color: var(--silver); }
.terms tr.is-on .pick-mark { display: inline; }
.terms .t-pay { font-weight: 500; }
.terms .t-pay-unit { display: none; }
@media (hover: hover) and (pointer: fine) {
  .terms tbody tr:not(.is-on) { cursor: pointer; }
  .terms tbody tr:not(.is-on):hover { background: var(--white); }
}
.terms-note { margin-top: 24px; max-width: 60ch; font-size: var(--step-small); color: var(--soft); }
@media (min-width: 768px) {
  /* 42cqw is the axis (--axis) measured on the full-width section. */
  .proof-h .l2 { margin-left: calc(42cqw - var(--m)); }
  .proof-sub, .terms-note { grid-column: axis-start / main-end; }
  .terms .c-term { width: calc(var(--m) + (42cqw - var(--m)) * 0.5); }
  .terms .c-pay { width: calc((42cqw - var(--m)) * 0.5); }
  .terms .c-total { width: calc((58cqw - var(--m)) * 0.5); }
}
@media (max-width: 767px) {
  /* Each row becomes a two-line block: term and payment, then total and charge in the softer ink. */
  .terms, .terms tbody { display: block; }
  .terms colgroup, .terms thead { display: none; }
  .terms tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px var(--m); }
  .terms th, .terms td, .terms th:first-child, .terms td:first-child, .terms th:last-child, .terms td:last-child { padding: 0; }
  .terms .t-term { text-align: left; }
  .terms .t-pay { text-align: right; }
  .terms .t-pay-unit { display: inline; font-weight: 400; color: var(--soft); }
  .terms .t-total, .terms .t-charge { font-size: var(--step-small); color: var(--soft); }
  .terms .t-total { text-align: left; }
  .terms .t-total::before, .terms .t-charge::before { content: attr(data-label) " "; }
  .terms tr.is-on .t-total, .terms tr.is-on .t-charge, .terms tr.is-on .t-pay-unit { color: var(--silver); }
}

/* Interface fragments shown in "How it goes" (data-ui keeps the office's own rules: 8/6 radius, 13-14px). */
.ui { background: var(--white); color: var(--ink); border-radius: 8px; padding: 18px 20px; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums lining-nums; }
.ui-title { font-weight: 500; }
.ui-muted { color: #6b6b6b; font-size: 13px; }
.ui-row { display: flex; align-items: center; gap: 10px; }
.ui-row .ui-muted { margin-left: auto; }
.ui-check { flex: 0 0 18px; height: 18px; border-radius: 50%; background: #2e7d32; position: relative; }
.ui-check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 14px 0 10px; }
.ui-steps i { height: 6px; border-radius: 3px; background: #eeeeee; }
.ui-steps i.on { background: var(--ink); }
.ui-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.ui-months li { padding: 10px 12px; border-radius: 6px; background: #f5f4f1; display: grid; gap: 2px; }
.ui-months b { font-weight: 500; }
.ui-months .is-in span { color: #2e7d32; }
.ui-months .is-later { background: #fff; box-shadow: inset 0 0 0 1px #e6e6e6; } /* taste-skill-ignore: form field or interface fragment */
.ui-months .is-later span { color: #92400e; }
.ui-offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ui-tag { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: #eeeeee; white-space: nowrap; }
.ui-tag.is-good { background: #e7f2e8; color: #1f5f23; }
.ui-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 16px 0; padding: 14px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } /* taste-skill-ignore: form field or interface fragment */
.ui-figs dt { color: #6b6b6b; font-size: 13px; }
.ui-figs dd { font-weight: 500; }
.ui-figs .is-key dd { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.ui-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ui-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 6px; background: var(--ink); color: #fff; font-weight: 500; }
.ui-figs .is-key { grid-column: 1 / -1; }
@container (min-width: 520px) { .ui-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ui-figs .is-key { grid-column: span 2; } }

/* ---- Inner pages: masthead band, title on the axis ---------------------------------------- */
.mast-band { position: relative; overflow: hidden; margin: 0 var(--b); height: 34svh; min-height: 220px; border-radius: var(--r); background: var(--char-1); }
.mast-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mast-text { padding-block: clamp(28px, 4vw, 56px) var(--space); row-gap: 24px; }
.mast-text h1 { font-size: var(--fit); }
.mast-text h1 > span { display: block; }
.mast-text .stand { max-width: 34ch; }
@media (min-width: 768px) {
  .mast-band { height: 45svh; min-height: 300px; }
  .mast-text h1 { grid-row: 1; }
  /* The standfirst's cap line sits level with the title's (cap tops at about 0.16em and 0.342em). */
  .mast-text .stand { grid-row: 1; align-self: start; padding-top: max(0px, calc(var(--fit) * 0.16 - var(--step-lead) * 0.342)); }
  .mast-text .mast-act { grid-column: axis-start / main-end; }
}
.mast-act { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.mast-plain { padding-block: clamp(56px, 7vw, 112px) clamp(48px, 6vw, 96px); row-gap: 20px; }
.mast-plain h1 { font-size: clamp(2rem, 0.6rem + 4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }

/* ---- One office, start to finish: six cells, each docked to a crop of the office's own screens ---- */
.feat-head { row-gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); }
.feat-head .lead { max-width: 40ch; }
@media (min-width: 768px) {
  .feat-head h2 { grid-column: side; grid-row: 1; }
  .feat-head .lead { grid-column: axis-start / main-end; grid-row: 1; }
}
.feat-grid { display: grid; gap: var(--b); margin: 0 var(--b); padding: 0; list-style: none; }
@media (min-width: 600px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feat-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px var(--tp) 0; overflow: hidden; background: var(--tone); border-radius: var(--r); }
.feat-text { display: grid; gap: 10px; align-content: start; }
.feat-text h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; }
.feat-text p { max-width: 34ch; }
.feat-text .go { margin-top: 4px; justify-self: start; }
.feat-cell > .ui { border-radius: 8px 8px 0 0; }
/* On a phone each screen is a short crop that runs on past the foot of its cell. */
@media (max-width: 599.98px) { .feat-cell > .ui { max-height: 168px; overflow: clip; } }
@media (min-width: 600px) { .feat-cell { min-height: 440px; gap: 28px; padding-top: 28px; } }
/* Two columns, then three: alternate screens dock at the top, so the grid reads as a checkerboard. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .feat-cell:is(:nth-child(4n+2), :nth-child(4n+3)) { flex-direction: column-reverse; padding: 0 var(--tp) 28px; }
  .feat-cell:is(:nth-child(4n+2), :nth-child(4n+3)) > .ui { border-radius: 0 0 8px 8px; }
}
@media (min-width: 900px) {
  .feat-cell:nth-child(even) { flex-direction: column-reverse; padding: 0 var(--tp) 28px; }
  .feat-cell:nth-child(even) > .ui { border-radius: 0 0 8px 8px; }
}
.feat-cell .ui-figs { margin-top: 4px; }

/* ---- Every term, priced: the estimate's answer on ink beside the table it comes from --------- */
/* Each cell paints its own ground and its own outer corners, so text always sits on its colour and no
   edge is painted twice; the words rise inside their cells while the tile stays put. */
.show { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 var(--b); color: var(--paper); }
.show-h { padding: clamp(40px, 5vw, 72px) var(--tp) 0; background: var(--ink); border-radius: var(--r) var(--r) 0 0; font-size: var(--step-display); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.show-h > span, .show-h [data-reveal] { display: block; }
.show-echo { padding: 32px var(--tp) clamp(40px, 5vw, 72px); background: var(--ink); }
.show-in { display: grid; gap: 16px; justify-items: start; }
.show-echo ::selection { background: var(--paper); color: var(--ink); }
.show-fig { font-size: var(--step-display); font-weight: 500; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.show-line { max-width: 34ch; font-size: var(--step-lead); line-height: 1.38; letter-spacing: -0.01em; }
.show-echo .go { color: var(--paper); }
.show-table { min-width: 0; padding: clamp(28px, 4vw, 56px) var(--tp); background: var(--white); color: var(--ink); border-radius: 0 0 var(--r) var(--r); }
.show-table .terms-say { margin-bottom: 20px; max-width: 46ch; }
@media (min-width: 1000px) {
  .show { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; }
  .show-h { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 0; background: none; border-radius: 0; }
  .show-h1 { padding: clamp(48px, 5vw, 80px) 0.14em 0 var(--tp); text-align: right; background: var(--ink); border-radius: var(--r) 0 0 0; }
  .show-h2 { padding: clamp(48px, 5vw, 80px) var(--tp) 0 0.14em; background: var(--white); color: var(--ink); border-radius: 0 var(--r) 0 0; }
  .show-echo { grid-column: 1; grid-row: 2; padding-top: 48px; border-radius: 0 0 0 var(--r); }
  .show-table { grid-column: 2; grid-row: 2; padding-top: 48px; border-radius: 0 0 var(--r) 0; }
}

/* ---- How it goes: the steps beside the screen each one shows (held in view on wide screens) ---- */
.how-head { margin-bottom: clamp(32px, 4vw, 56px); }
.how-body { display: grid; gap: var(--b); margin: 0 var(--b); }
.ax > .how-body { grid-column: full; }
.how-steps { display: grid; gap: 28px; margin: 0; padding: 0 var(--tp); list-style: none; }
.how-step { display: grid; gap: 12px; align-content: center; }
.how-step p:not(.say) { max-width: 44ch; }
.how-stage { position: relative; display: grid; gap: 20px; align-content: center; justify-items: center; min-height: 420px; padding: clamp(20px, 4vw, 56px); overflow: clip; background: var(--tone); border-radius: var(--r); }
.how-photo { position: absolute; inset: 0; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; }
.how-photo::after { content: ""; position: absolute; inset: 0; background: rgb(17 17 17 / 0.28); }
.how-frame { position: relative; z-index: 1; width: 100%; max-width: 520px; }
@media (max-width: 999.98px) { .how-frame:not([data-frame="3"]) { display: none; } }
.how-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1000px) {
  .how-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .how-steps { grid-column: 1; grid-row: 1; gap: 0; }
  .how-stage { grid-column: 2; grid-row: 1; position: sticky; top: 14vh; min-height: 72vh; }
  html.js .how-step { min-height: 70vh; transition: color var(--t-ui) var(--ease-out), opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  html.js .how-step:not(.is-on) { color: var(--soft); }
  html.js .how-stage { grid-template-areas: "f"; }
  html.js .how-frame { grid-area: f; opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  html.js .how-frame.is-on { opacity: 1; transform: none; }
}

/* ---- Fair questions: the heading held in the side zone, each question a panel that opens ------- */
.faq { row-gap: 32px; }
.faq-head { display: grid; gap: 20px; align-content: start; justify-items: start; }
.faq-list { display: grid; gap: var(--b); }
/* Closed questions are a list set in large type on the ground; the open one is the ink panel. */
.faq-item { border-radius: var(--r); transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 16px var(--tp); border-radius: var(--r); font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; list-style: none; cursor: pointer; transition: background-color var(--t-hover) var(--ease-out); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: 0 0 16px; height: 16px; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 6.5px; top: 0; width: 3px; height: 16px; border-radius: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.faq-item summary i::before { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(90deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq-item[open] { background: var(--act); color: var(--paper); }
.faq-item[open] ::selection { background: var(--paper); color: var(--ink); }
.faq-a { padding: 0 var(--tp) 26px; font-size: var(--step-body); line-height: 1.55; }
.faq-a > * { max-width: 52ch; }
.faq-a a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .faq-item:not([open]) summary:hover { background: var(--white); } }
@media (min-width: 768px) {
  .faq-head { grid-column: side; grid-row: 1; position: sticky; top: 32px; align-self: start; }
  .faq-list { grid-column: axis-start / main-end; grid-row: 1; }
}

/* ---- The close: a gold tile between a photograph and the office's number -------------------- */
.cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b); padding-top: var(--space); }
.cta-main { grid-column: 1 / -1; grid-row: 1; display: grid; align-content: space-between; justify-items: start; gap: 28px; min-height: 300px; margin: 0 var(--b); padding: clamp(28px, 4vw, 56px) var(--tp); background: var(--gold); color: var(--ink); border-radius: var(--r); }
.cta-h { font-size: var(--step-head); line-height: 1.04; letter-spacing: -0.03em; }
.cta-h > span { display: block; }
.cta-text { max-width: 40ch; margin-top: 16px; }
.cta-photo { grid-column: 1; grid-row: 2; position: relative; min-height: 120px; overflow: hidden; background: var(--char-1); border-radius: 0 var(--r) var(--r) 0; }
.cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-talk { grid-column: 2; grid-row: 2; display: grid; gap: 4px; align-content: center; min-height: 120px; padding: 20px var(--tp); background: var(--ink); color: var(--paper); border-radius: var(--r) 0 0 var(--r); }
.cta-talk h3 { font-size: var(--step-body); font-weight: 500; margin-bottom: 4px; }
.cta-talk a { text-decoration: none; overflow-wrap: anywhere; padding-block: 2px; }
/* Phones: the photo and the way to talk each take the full measure, so the address never breaks. */
@media (max-width: 599.98px) {
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta-photo, .cta-talk { grid-column: 1; margin: 0 var(--b); border-radius: var(--r); }
  .cta-photo { grid-row: 2; aspect-ratio: 3 / 2; min-height: 0; }
  .cta-talk { grid-row: 3; padding-block: 24px; }
}
@media (hover: hover) and (pointer: fine) { .cta-talk a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }
@media (min-width: 1100px) {
  .cta { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .cta-photo, .cta-main, .cta-talk { grid-row: 1; min-height: 360px; }
  .cta-photo { grid-column: 1; }
  .cta-main { grid-column: 2; margin: 0; }
  .cta-talk { grid-column: 3; align-content: end; padding-bottom: clamp(28px, 4vw, 56px); }
  .cta-talk a { font-size: var(--step-body); }
}

/* ---- What to have ready: the list in a white panel, a photograph of a shop beside it ---------- */
.ready { row-gap: 32px; }
.ready-body { display: grid; gap: var(--b); }
.ready-panel { padding: 8px var(--tp) 24px; background: var(--white); border-radius: var(--r); }
.ready-panel h3 { padding: 18px 0 6px; font-size: var(--step-body); font-weight: 500; color: var(--soft); }
.ready-dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 24px; padding: 9px 0; }
.ready-dl dt { font-weight: 500; }
.ready-dl dd { text-align: right; }
.ready-x { margin-top: 14px; font-size: var(--step-small); line-height: 1.45; color: var(--soft); max-width: 52ch; }
.ready-panel { display: flex; flex-direction: column; }
.ready-panel > .ready-x:first-of-type { margin-top: auto; padding-top: 14px; }
.fig.ready-fig { display: flex; flex-direction: column; gap: 10px; }
.fig.ready-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.ready-fig figcaption { font-size: var(--step-small); color: var(--soft); }
@media (min-width: 900px) {
  .ready-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--g); }
  .fig.ready-fig { min-height: 380px; }
  .fig.ready-fig img { flex: 1 1 0; height: 0; min-height: 0; aspect-ratio: auto; }
}

/* ---- Footer: a row of tiles; the name at full width, the way to apply beside it --------------- */
.foot { display: grid; gap: var(--b); padding: clamp(48px, 5vw, 80px) var(--b) var(--b); }
.foot-row { display: grid; gap: var(--b); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-up > * { display: grid; gap: 20px; align-content: space-between; min-width: 0; padding: 22px var(--tp); background: var(--white); border-radius: var(--r); }
.foot-up h2 { font-size: var(--step-body); font-weight: 500; margin-bottom: 6px; }
.foot-up ul { list-style: none; margin: 0; padding: 0; }
.foot-up a { text-decoration: none; display: inline-block; padding-block: 5px; }
@media (hover: hover) and (pointer: fine) { .foot-up a:hover, .foot-base a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }
.foot-say, .foot-reach, .foot-time { grid-column: 1 / -1; }
.foot-st { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; }
.foot-reach .big a { font-size: var(--step-body); font-weight: 500; overflow-wrap: anywhere; }
.foot-clock { font-size: var(--step-lead); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.foot-name { grid-column: 1 / -1; display: grid; place-items: center; min-height: 200px; padding: 32px var(--tp); background: var(--ink); border-radius: var(--r); }
.foot-name img { width: min(100%, calc(clamp(56px, 9vw, 140px) * 4.6)); height: auto; }
.foot-go { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 180px; padding: 22px var(--tp); background: var(--gold); color: var(--ink); border-radius: var(--r); font-size: var(--step-head); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; text-decoration: none; transition: background-color var(--t-hover) var(--ease-out); }
.foot-go svg { align-self: flex-end; width: 56px; height: 56px; transition: transform var(--t-ui) var(--ease-out); }
.foot-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .foot-go:hover { background: var(--gold-hi); } .foot-go:hover svg { transform: translateX(6px); } }
.foot-base { display: grid; gap: 10px; padding: 18px var(--tp) 10px; font-size: var(--step-small); line-height: 1.45; color: var(--soft); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.foot-base a { display: inline-block; padding-block: 6px; color: var(--ink); text-decoration: none; }
@media (max-width: 599.98px) {
  .foot-prod, .foot-co { align-content: start; }
}
@media (min-width: 600px) {
  .foot-reach, .foot-time { grid-column: auto; }
}
/* Tablet: the desktop's twelve columns with wider spans, in reading order, so no two rows repeat. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .foot-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .foot-say { grid-column: span 7; }
  .foot-prod { grid-column: span 5; }
  .foot-co, .foot-time { grid-column: span 3; }
  .foot-reach { grid-column: span 6; }
  .foot-name { grid-column: span 7; }
  .foot-go { grid-column: span 5; }
}
@media (min-width: 1100px) {
  .foot-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .foot-up > * { min-height: 220px; }
  .foot-say { grid-column: span 3; }
  .foot-prod, .foot-co { grid-column: span 2; }
  .foot-reach { grid-column: span 3; }
  .foot-time { grid-column: span 2; }
  .foot-name { grid-column: span 8; min-height: 320px; }
  .foot-go { grid-column: span 4; min-height: 320px; padding-block: 28px; }
  .foot-base { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .foot-legal { grid-column: 1 / -1; }
}

/* ---- Inner pages: text sections on the axis -------------------------------------------------- */
/* Heading and side notes from the margin, running text from the axis; first baselines level. */
.txt { row-gap: 28px; }
.txt-lead { display: grid; gap: 24px; align-content: start; }
.txt-lead h2 { max-width: 12ch; }
.txt-side { font-size: var(--step-small); color: var(--soft); max-width: 34ch; }
.txt-side strong { color: var(--ink); }
.txt-body > * { max-width: 62ch; }
.txt-body > * + * { margin-top: 1em; }
.txt-body > .lead + * { margin-top: 1.25em; }
.txt-body ul:not([class]) { display: grid; gap: 0.5em; }
.txt-body ul:not([class]) li { position: relative; padding-left: 1.25em; }
.txt-body ul:not([class]) li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 6px; height: 6px; background: currentColor; }
.txt-body .btn, .txt-body .go { margin-top: 1.75em; }
@media (min-width: 1100px) {
  .txt { align-items: baseline; }
  .txt-lead { grid-column: side; grid-row: 1; }
  .txt-body { grid-column: axis-start / main-end; grid-row: 1; }
  .txt-body.cols { columns: 2 30ch; column-gap: var(--g); }
  .txt-body.cols > * { break-inside: avoid; }
}

/* The estimate worked out: a two-column statement on the axis, subtotals in the heavier weight. */
.txt-body > .rows.sum { margin-top: 40px; }
.rows.sum td { white-space: nowrap; }
.rows.sum .sum-t :is(th, td) { font-weight: 500; }

/* Key figures: plain pairs, no boxes. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--g); margin-top: 40px; max-width: none; }
.facts > div { display: grid; gap: 2px; align-content: start; }
.facts dt { font-size: var(--step-small); color: var(--soft); }
.facts dd { font-size: var(--step-lead); line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A photograph in the side zone, or a full-width band between sections. */
.fig { margin: 0; }
.fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--char-1); }
.fig figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--soft); }
.band { position: relative; overflow: hidden; margin: 0 var(--b); height: clamp(260px, 56svh, 640px); background: var(--char-1); }
.band img, .band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* One quiet callout (a rule, a caveat), on the tone ground. */
.note { background: var(--tone); padding: 22px var(--tp); max-width: 62ch; }
.note > * + * { margin-top: 0.6em; }
.note-h { font-weight: 500; }
.txt-body > .note { margin-top: 1.75em; }

/* Ways to reach the office (contact page side zone). */
.reach { display: grid; gap: 22px; align-content: start; font-style: normal; }
.reach dt { font-size: var(--step-small); color: var(--soft); }
.reach dd { font-size: var(--step-lead); line-height: 1.3; }
.reach a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .reach a:hover { text-decoration: underline; } }

/* ---- Legal pages: contents in the side zone, the text on the axis --------------------------- */
.legal { row-gap: 40px; }
.toc h2 { font-size: var(--step-small); font-weight: 500; color: var(--soft); margin-bottom: 10px; }
.toc ol { display: grid; gap: 2px; }
.toc a { display: inline-block; padding-block: 4px; text-decoration: none; font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { text-decoration: underline; } }
@media (min-width: 1100px) {
  .legal .toc { grid-column: side; grid-row: 1; position: sticky; top: 24px; align-self: start; }
  .legal .prose { grid-column: axis-start / main-end; grid-row: 1; }
}
.draft-mark { display: inline-block; background: var(--gold); color: var(--ink); padding: 6px 12px; font-size: var(--step-small); font-weight: 500; }

.prose { max-width: 68ch; }
.prose > :first-child, .prose > .lg-sec:first-child > h2 { margin-top: 0; }
.prose h2 { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; margin: 2em 0 0.55em; scroll-margin-top: 24px; }
.prose h3 { font-size: var(--step-body); font-weight: 500; margin: 1.6em 0 0.4em; }
.prose p + p { margin-top: 0.9em; }
.prose ul, .prose ol { margin: 0.8em 0 1em; display: grid; gap: 0.45em; }
.prose ul li { position: relative; padding-left: 1.25em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 6px; height: 6px; background: currentColor; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ol li::marker { font-variant-numeric: tabular-nums; }
.prose a { text-decoration-color: currentColor; }
.prose strong { font-weight: 500; }

/* ---- Plain data tables (credits, schedules): stripes, no lines ------------------------------ */
.rows { width: 100%; font-variant-numeric: tabular-nums lining-nums; }
.rows th, .rows td { padding: 12px 14px; text-align: left; vertical-align: baseline; font-weight: 400; }
.rows thead th { padding-top: 0; font-size: var(--step-small); font-weight: 500; color: var(--soft); }
.rows tbody tr:nth-child(odd) { background: var(--tone); }
.rows .r { text-align: right; }
.rows-wrap { overflow-x: auto; }
@media (max-width: 767px) {
  .rows.stack thead { display: none; }
  .rows.stack, .rows.stack tbody, .rows.stack tr, .rows.stack td { display: block; }
  .rows.stack tr { padding: 12px 14px; }
  .rows.stack td { padding: 2px 0; }
  .rows.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--soft); }
}

/* ---- Public forms (contact, call-back, the no-script estimate) ------------------------------ */
.form { display: grid; gap: 22px; max-width: 640px; }
.form-row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field > .label, .fieldset > legend { font-size: var(--step-small); font-weight: 500; }
.field .hint { font-size: 1rem; line-height: 1.45; color: var(--soft); max-width: 62ch; }
.field .opt { font-weight: 400; color: var(--soft); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; margin: 0;
  background: var(--white); border: 1px solid var(--silver); border-radius: 0;
  font-size: var(--step-body); line-height: 1.4; appearance: none;
  transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* taste-skill-ignore: form field or interface fragment */
.field ::placeholder { color: #8a8780; opacity: 1; }
.select { position: relative; display: block; }
.select select { padding-right: 44px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 6px; margin-top: -3px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.fieldset > legend { padding: 0; margin-bottom: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input {
  appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0;
  background: var(--white); border: 1px solid var(--soft); display: grid; place-content: center; cursor: pointer;
  transition: background-color var(--t-press) var(--ease-out), border-color var(--t-press) var(--ease-out);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::before { content: ""; width: 12px; height: 12px; background: var(--paper); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); opacity: 0; transform: scale(0.6); transition: opacity var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out); }
.check input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; clip-path: none; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::before { opacity: 1; transform: none; }
.check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.check span { font-size: var(--step-body); line-height: 1.45; }
.check .small { display: block; margin-top: 6px; max-width: 62ch; font-size: 1rem; line-height: 1.5; color: inherit; }
.field-err, .field .err, .fieldset .err { font-size: var(--step-small); color: #a1271f; }
.field.has-error input:not([type="checkbox"]):not([type="radio"]), .field.has-error select, .field.has-error textarea { border-color: #a1271f; box-shadow: inset 0 0 0 1px #a1271f; } /* taste-skill-ignore: form field or interface fragment */
.form-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.form-note { font-size: 1rem; line-height: 1.5; color: inherit; max-width: 62ch; }
/* Honeypot: off screen for people, present for bots. */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: form field or interface fragment */

/* Messages after a submit: one strip at the top of the column. */
.msg { padding: 18px var(--tp); background: var(--tone); max-width: 640px; }
.msg > * + * { margin-top: 0.4em; }
.msg-h { font-weight: 500; }
.msg.is-ok { background: var(--ink); color: var(--paper); }
.msg.is-error { background: #f6e3e1; color: #6e1a14; }
.msg.is-error a { color: inherit; }
.msg ul { display: grid; gap: 4px; }
.msg[tabindex="-1"]:focus { outline: none; }

/* ---- Inner pages: shared parts ---------------------------------------------------------------- */
/* The masthead's bottom space is the gap: the first section after it starts at once. */
.mast-text + .sec, .mast-plain + .sec { padding-top: 0; }
/* A tile ends where the mosaic starts: the board's gap between them, not a section's. */
.sheet + .mosaic.spaced, .stages + .mosaic.spaced, .nl + .mosaic.spaced { padding-top: 0; }
/* The clip in a masthead gets the photographs' treatment (they are greyscale files). */
.mast-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* A section's heading in the side zone and its sentence on the axis, first baselines level. */
.sec-head { display: grid; row-gap: 20px; align-content: start; }
.sec-head .lead { max-width: 40ch; }
@media (min-width: 768px) {
  .sec-head { grid-template-columns: subgrid; align-items: baseline; }
  .sec-head > h2 { grid-column: side; }
  .sec-head > .lead { grid-column: axis-start / main-end; }
}

/* A heading inside running text, and the pictures that sit in the side zone of a text section. */
.txt-body > .txt-h { margin-top: 1.75em; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.txt-body > .txt-h + * { margin-top: 0.75em; }
.txt-fig { max-width: 640px; }
@media (max-width: 1099px) { .txt-fig img { aspect-ratio: 3 / 2; } }
.txt-ui { container-type: inline-size; max-width: 520px; }

/* ---- Sheets: a tone tile (a comparison, a worked example, the call-back) ------------------------ */
/* Tiles keep the board's language: inset by --b, text on the page margin (--b + --tp = --m). */
.sheet { --m: var(--tp); container-type: inline-size; margin: var(--b) var(--b) 0; padding-block: clamp(56px, 6vw, 96px); background: var(--tone); row-gap: clamp(36px, 4vw, 56px); }
.sheet .rows tbody tr:nth-child(odd) { background: var(--paper); }
.sheet-note { max-width: 60ch; font-size: var(--step-small); color: var(--soft); }
@media (min-width: 768px) { .sheet-note { grid-column: axis-start / main-end; } }

/* Tables across the tile's full width: the question in the side zone, the answers from the axis
   (42cqw is the axis measured on the tile). Stripes on paper; no lines. */
.compare-wrap, .matrix-wrap { grid-column: full; }
.rows.compare-t tbody th, .rows.matrix tbody th { font-weight: 500; }
@media (max-width: 767px) {
  .rows.stack th[scope="row"] { display: block; padding: 0 0 4px; font-weight: 500; }
}
@media (min-width: 768px) {
  .rows.compare-t { table-layout: fixed; }
  .rows.compare-t .c-k { width: 42cqw; }
  .rows.compare-t th, .rows.compare-t td { padding: 16px var(--g) 16px 0; }
  .rows.compare-t :is(th, td):first-child { padding-left: var(--m); }
  .rows.compare-t :is(th, td):last-child { padding-right: var(--m); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* Four columns do not fit: each stage becomes a row of three labelled answers. */
  .rows.matrix thead { display: none; }
  .rows.matrix, .rows.matrix tbody { display: block; }
  .rows.matrix tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px var(--g); padding: 18px var(--m); }
  .rows.matrix th, .rows.matrix td { display: block; padding: 0; }
  .rows.matrix tbody th { grid-column: 1 / -1; font-size: var(--step-lead); line-height: 1.25; }
  .rows.matrix td::before { content: attr(data-label); display: block; font-size: var(--step-small); color: var(--soft); }
}
@media (min-width: 1100px) {
  .rows.matrix { table-layout: fixed; }
  .rows.matrix .c-k { width: 42cqw; }
  .rows.matrix th, .rows.matrix td { padding: 18px var(--g) 18px 0; }
  .rows.matrix :is(th, td):first-child { padding-left: var(--m); }
  .rows.matrix :is(th, td):last-child { padding-right: var(--m); }
  .rows.matrix tbody th { font-size: var(--step-lead); line-height: 1.25; }
}

/* Terms set as a short list: the term at the lead size, what it means under it. */
.sheet-list, .ready-list { display: grid; gap: 22px; align-content: start; }
.sheet-list li, .ready-list li { display: grid; gap: 4px; }
.sheet-list b, .ready-list b { font-size: var(--step-lead); line-height: 1.25; font-weight: 400; }
.sheet-list span, .ready-list span { max-width: 44ch; text-wrap: pretty; }
.sheet-fig { container-type: inline-size; }
@media (min-width: 768px) {
  .sheet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--g); }
}
@media (min-width: 1100px) {
  /* The worked example in the side zone, the rules beside it on the axis. */
  .sheet-fig { grid-column: side; grid-row: 2; align-self: start; }
  .sheet-list { grid-column: axis-start / main-end; grid-row: 2; }
}

/* What we finance: one machine in the side zone, the list of machines on the axis beside it.
   Between the phone and the desktop the picture runs as a wide strip above the list. */
.kit-fig img { aspect-ratio: 3 / 2; }
@media (min-width: 768px) and (max-width: 1099px) { .kit-fig img { aspect-ratio: 21 / 9; } }
@media (min-width: 1100px) {
  .kit-fig { grid-column: side; grid-row: 2 / 4; align-self: start; }
  .kit-fig img { aspect-ratio: 4 / 3; }
  .kit-list, .kit-foot { grid-column: axis-start / main-end; }
  .kit-foot { grid-row: 3; }
}

/* ---- Duo: the words in the side zone, the thing they describe on the axis ---------------------- */
.duo { row-gap: 48px; }
.duo-text { display: grid; gap: 24px; align-content: start; }
.duo-text > p { max-width: 44ch; }
.duo-text .facts { margin-top: 16px; }
.duo-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 12px; }
.duo-fig { container-type: inline-size; }
@media (min-width: 1100px) {
  .duo { align-items: start; }
  .duo-text { grid-column: side; grid-row: 1; }
  .duo-fig { grid-column: axis-start / main-end; grid-row: 1; }
  .duo .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Interface fragments on the inner pages (data-ui: the office's own rules, as above). */
.cal-ms { display: grid; gap: 18px 28px; margin-top: 18px; }
@container (min-width: 520px) { .cal-ms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cal-m .ui-title { margin-bottom: 8px; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; font-size: 13px; }
.cal-g b { font-size: 12px; font-weight: 500; line-height: 28px; color: #6b6b6b; }
.cal-g span { display: grid; place-items: center; height: 34px; border-radius: 6px; }
.cal-g .is-run { background: #efede8; }
.cal-g .is-inv { background: var(--ink); color: #ffffff; font-weight: 500; }
.cal-g .is-due { background: var(--gold); color: var(--ink); font-weight: 500; }
.cal-key { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6e6e6; } /* taste-skill-ignore: form field or interface fragment */
.cal-key > div { display: grid; grid-template-columns: 12px auto; column-gap: 10px; }
.cal-key > div::before { content: ""; grid-row: 1 / 3; width: 12px; height: 12px; margin-top: 4px; border-radius: 3px; background: var(--ink); }
.cal-key .k-due::before { background: var(--gold); }
.cal-key dt, .cal-key dd { grid-column: 2; }
.cal-key dt { font-size: 13px; color: #6b6b6b; }
.cal-key dd { font-weight: 500; }

.line-bar { height: 8px; margin: 0 0 8px; border-radius: 4px; background: #eeeeee; overflow: hidden; }
.line-bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(var(--w, 0)); transform-origin: left center; }
.line-t { width: 100%; margin-top: 6px; }
.line-t th, .line-t td { padding: 9px 8px; text-align: left; font-weight: 400; vertical-align: baseline; border-top: 1px solid #eeeeee; } /* taste-skill-ignore: form field or interface fragment */
.line-t thead th { padding-top: 0; border-top: 0; font-size: 13px; font-weight: 500; color: #6b6b6b; }
.line-t :is(th, td):first-child { padding-left: 0; }
.line-t :is(th, td):last-child { padding-right: 0; }
.line-t tbody th { font-weight: 500; }
.line-t .r { text-align: right; }
@container (max-width: 439px) { .line-t .c-date { display: none; } }
.ui-tag.is-wait { background: #fdf0d5; color: #7a4a06; }

.ui-track { display: grid; margin: 14px 0 12px; }
.ui-track li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 7px 0; }
.ui-track li:not(.is-done):not(.is-now) { color: #6b6b6b; }
.ui-track li.is-now > span:nth-child(2) { font-weight: 500; }
.ui-dot, .ui-ring { position: relative; width: 18px; height: 18px; border-radius: 50%; }
.ui-dot { border: 2px solid var(--ink); } /* taste-skill-ignore: form field or interface fragment */
.ui-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.ui-ring { border: 2px solid #d4d4d4; } /* taste-skill-ignore: form field or interface fragment */

.up-list { margin: 12px 0 14px; }
.up-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 0; border-top: 1px solid #eeeeee; } /* taste-skill-ignore: form field or interface fragment */
.up-list li > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.up-list b { font-weight: 500; }
.up-drop { margin: 0 0 14px; padding: 14px; border: 1px dashed #d4d4d4; border-radius: 6px; text-align: center; font-size: 13px; color: #6b6b6b; } /* taste-skill-ignore: form field or interface fragment */

/* ---- Every stage: an ink tile; each stage in the side zone, what happens on the axis ---------- */
.stages { --m: var(--tp); margin: var(--b) var(--b) 0; padding-block: clamp(56px, 6vw, 96px); background: var(--ink); color: var(--paper); row-gap: clamp(48px, 5vw, 80px); }
.stages ::selection, .nl ::selection, .is-wont ::selection { background: var(--paper); color: var(--ink); }
.stages :focus-visible, .nl :focus-visible, .is-wont :focus-visible { outline-color: var(--paper); }
.stages-list { grid-column: full; display: grid; row-gap: clamp(40px, 4.5vw, 64px); }
.ax > .stages-list { grid-column: full; }
.stage { row-gap: 12px; }
.stage-t { font-family: var(--display); font-weight: 400; font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; }
.stage-b { max-width: 56ch; }
.stage-b .stage-p { margin-top: 0.75em; font-size: var(--step-small); color: var(--gold); }
/* On a phone the stages stack, so the portal status sits under its own stage's name, not above the next one */
@media (max-width: 767.98px) {
  .stage-b { display: flex; flex-direction: column; }
  .stage-b .stage-p { order: -1; margin: 0 0 0.75em; }
}
@media (min-width: 768px) {
  .stage { align-items: baseline; }
  .stage-t { grid-column: side; grid-row: 1; }
  .stage-b { grid-column: axis-start / main-end; grid-row: 1; }
}

/* ---- All questions: the topics, then each topic's heading held in the side zone --------------- */
.faqp-toc { row-gap: 24px; }
.faqp-toc-b { display: grid; gap: 24px; align-content: start; }
.faqp-links { display: grid; gap: 2px var(--g); }
.faqp-links a { display: inline-block; padding-block: 6px; font-size: var(--step-lead); line-height: 1.3; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .faqp-links a:hover { text-decoration: underline; text-decoration-color: currentColor; } }
.faqp { row-gap: clamp(88px, 8vw, 144px); }
.ax > .faqp-g { grid-column: full; }
.faqp-g { row-gap: 32px; }
.faqp-items { display: grid; row-gap: 44px; }
.faqp-i { display: grid; gap: 12px; scroll-margin-top: 24px; }
.faqp-q { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; max-width: 34ch; text-wrap: balance; }
.faqp-a { max-width: 62ch; }
.faqp-a p + p { margin-top: 0.75em; }
@media (min-width: 768px) { .faqp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Below 1100 the side zone is too narrow for a topic heading; it sits above its questions. */
@media (min-width: 1100px) {
  .faqp-toc { align-items: baseline; }
  .faqp-toc > h2 { grid-column: side; grid-row: 1; }
  .faqp-toc-b { grid-column: axis-start / main-end; grid-row: 1; }
  .faqp-g { align-items: baseline; }
  .faqp-h { grid-column: side; grid-row: 1; position: sticky; top: 24px; }
  .faqp-items { grid-column: axis-start / main-end; grid-row: 1; }
}

/* ---- We will / We won't: two tiles, a promise each -------------------------------------------- */
.pair { display: grid; gap: var(--b); margin: var(--b) var(--b) 0; }
.pair-t { container-type: inline-size; display: grid; gap: clamp(28px, 4vw, 48px); align-content: start; padding: clamp(40px, 5vw, 72px) var(--tp) clamp(48px, 6vw, 88px); }
.pair-t.is-will { background: var(--tone); }
.pair-t.is-wont { background: var(--char-1); color: var(--paper); }
/* "We won't" measures about 3.7em: 22cqw keeps it to four fifths of the tile. */
.pair-t h2 { font-size: min(var(--step-display), 22cqw); line-height: 0.92; }
.pair-list { display: grid; gap: 18px; }
.pair-list li { position: relative; max-width: 36ch; padding-left: 1.1em; font-size: var(--step-lead); line-height: 1.3; text-wrap: pretty; }
.pair-list li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 0.28em; height: 0.28em; background: currentColor; }
@media (min-width: 900px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Where we are: the map in the side zone, the ways to reach us on the axis ------------------ */
.where { row-gap: 32px; }
.where-head { display: grid; gap: 20px; align-content: start; }
.where-head .lead { max-width: 40ch; }
.where-fig img { aspect-ratio: 1; }
@media (min-width: 768px) {
  .where { grid-template-rows: auto 1fr; }
  .where-fig { grid-column: side; grid-row: 1 / 3; }
  .where-head { grid-column: axis-start / main-end; grid-row: 1; }
  .where-reach { grid-column: axis-start / main-end; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); margin-top: 16px; }
}

/* ---- Next Level customers: an ink tile, the heading in the side zone, the way in on the axis --- */
.nl { --m: var(--tp); margin: var(--b) var(--b) 0; padding-block: clamp(56px, 6vw, 96px); background: var(--ink); color: var(--paper); row-gap: 24px; }
.nl-b > p { max-width: 46ch; }
.nl-act { margin-top: 32px; }
@media (min-width: 768px) {
  .nl { align-items: baseline; }
  .nl-h { grid-column: side; grid-row: 1; }
  .nl-b { grid-column: axis-start / main-end; grid-row: 1; }
}

/* ---- Forms on a page: what it is for in the side zone, the form on the axis ------------------- */
.pform, .cform { row-gap: 40px; }
.pform-head, .cform-side { display: grid; gap: 20px; align-content: start; }
.pform-head .lead, .cform-side .lead { max-width: 34ch; }
.cform-side .reach { margin-top: 12px; }
.pform-body > .msg, .cform-body > .msg, .cb-body > .msg { margin-bottom: 28px; }
@media (min-width: 768px) and (max-width: 1099px) { .cform-side .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); } }
@media (min-width: 1100px) {
  .pform-head, .cform-side { grid-column: side; grid-row: 1; }
  .pform-body, .cform-body { grid-column: axis-start / main-end; grid-row: 1; }
}

/* The call-back: one row of fields across the tile (labels, fields and errors level by subgrid). */
.form.cb-form { max-width: none; }
.cb-row { display: grid; gap: 22px; }
.cb-sms { max-width: 66ch; }
@media (min-width: 640px) {
  .cb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
  .cb-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 900px) {
  .cb-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; grid-template-rows: auto auto auto; row-gap: 8px; }
  .cb-row > .field { grid-row: span 3; grid-template-rows: subgrid; }
  .cb-row .cb-btn { grid-column: auto; grid-row: 2; align-self: start; min-height: 52px; }
}

/* ---- Photo credits: one row per source, the pictures at thumbnail size ------------------------- */
.credits { row-gap: 32px; }
.credits-note { max-width: 60ch; }
.credits .rows-wrap { grid-column: full; }
.credits-thumbs { display: flex; flex-wrap: wrap; gap: var(--b); }
.credits-thumb { flex: none; }
.credits-thumb img { width: 160px; max-width: none; height: 120px; object-fit: cover; background: var(--char-1); }
.credits-t a { overflow-wrap: anywhere; }
.rows.credits-t .credits-title { font-weight: 500; }
@media (min-width: 1100px) {
  .rows.credits-t th, .rows.credits-t td { padding-block: 18px; vertical-align: top; }
  .rows.credits-t thead th { padding-top: 0; vertical-align: bottom; }
  .rows.credits-t :is(th, td):first-child { padding-left: var(--m); }
  .rows.credits-t :is(th, td):last-child { padding-right: var(--m); }
  .credits-pic { width: 1%; }
}
@media (max-width: 1099px) {
  .rows.credits-t thead { display: none; }
  .rows.credits-t, .rows.credits-t tbody, .rows.credits-t tr, .rows.credits-t td, .rows.credits-t th { display: block; }
  .rows.credits-t tr { padding: 20px var(--m); }
  .rows.credits-t td, .rows.credits-t th { padding: 2px 0; }
  .rows.credits-t .credits-pic { padding-bottom: 14px; }
  .rows.credits-t .credits-title { padding-bottom: 6px; }
  .rows.credits-t td[data-label]::before { content: attr(data-label) ": "; color: var(--soft); }
}

/* ---- Legal pages: the title in the side zone, what the page covers on the axis ---------------- */
.legal-date { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: var(--step-small); color: var(--soft); }
@media (min-width: 1100px) {
  .legal-head { row-gap: 20px; }
  .legal-head h1 { grid-column: side-start / main-end; grid-row: 1; margin-bottom: 20px; }
  .legal-head .lead { grid-column: axis-start / main-end; grid-row: 2; }
  .legal-head .legal-date { grid-column: axis-start / main-end; grid-row: 3; }
}

/* ---- Error pages: where to go instead ------------------------------------------------------------ */
.err-next { row-gap: 20px; }
.err-next-h { font-size: var(--step-small); font-weight: 500; color: var(--soft); }
.err-help { margin-top: 12px; max-width: 40ch; }
.err-links { display: grid; gap: 4px var(--g); }
.err-links .go { padding-block: 8px; font-size: var(--step-lead); line-height: 1.3; }
@media (min-width: 768px) {
  .err-next { align-items: baseline; }
  .err-side { grid-column: side; grid-row: 1; }
  .err-links { grid-column: axis-start / main-end; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* The clip settles like the photographs do; the limit bar fills once its panel arrives. */
  .js .shutter[data-open] video { transform: scale(1.12); animation: rs-settle 1500ms var(--ease-soft) forwards; animation-delay: var(--d, 120ms); }
  .js [data-reveal] .line-bar span { transform: scaleX(0); transition: transform 1400ms var(--ease-expo) 500ms; }
  .js [data-reveal].is-in .line-bar span { transform: scaleX(var(--w, 0)); }
}

/* ---- Small utilities ------------------------------------------------------------------------- */
.only-phone { display: initial; }
.only-wide { display: none; }
@media (min-width: 768px) { .only-phone { display: none; } .only-wide { display: initial; } }
.mt-0 { margin-top: 0 !important; }
.js .nojs { display: none !important; }
html:not(.js) .js-only { display: none !important; }
.nowrap { white-space: nowrap; }

/* ---- Motion ---------------------------------------------------------------------------------- */
/* Lines that rise out of their own mask (the name on the board, the close). Breaks are authored. */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }
.shutter { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* Load, settled by about 1.2s: the name rises, the photograph opens down the board,
     the two statements arrive. Nothing waits for the load event. */
  .js .lines[data-load-lines] [data-line] { transform: translateY(105%); animation: rs-line 820ms var(--ease-expo) forwards; animation-delay: calc(90ms + var(--i, 0) * 110ms); }
  .js [data-load] { opacity: 0; transform: translateY(12px); animation: rs-rise 520ms var(--ease-out) forwards; animation-delay: var(--d, 420ms); }
  .js .shutter[data-open] { clip-path: inset(0 0 100% 0); animation: rs-open 1100ms var(--ease-in-out) forwards; animation-delay: var(--d, 120ms); }
  .js .shutter[data-open] img { transform: scale(1.12); animation: rs-settle 1500ms var(--ease-soft) forwards; animation-delay: var(--d, 120ms); }

  /* Scroll: each part arrives once (site.js adds .is-in; never replays). */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .lines[data-reveal] { opacity: 1; transform: none; }
  .js .lines[data-reveal] [data-line] { transform: translateY(105%); transition: transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .lines[data-reveal].is-in [data-line] { transform: none; }
  /* Tiles of the mosaic open like the board's photograph, a step apart. The tile itself is never
     clipped (the observer must see it); its picture opens inside it, then the label arrives. */
  .js .m-tile[data-reveal] { opacity: 1; transform: none; }
  .js .m-tile[data-reveal] img, .js .m-tile[data-reveal] video { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 900ms var(--ease-in-out), transform 1300ms var(--ease-soft); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .m-tile[data-reveal].is-in img, .js .m-tile[data-reveal].is-in video { clip-path: inset(0); transform: none; }
  .js .m-tile[data-reveal] .m-label { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 600ms); }
  .js .m-tile[data-reveal].is-in .m-label { opacity: 1; transform: none; }

  .menu.is-open .menu-main li { animation: rs-rise 420ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 40ms); }
}
@keyframes rs-line { to { transform: none; } }
@keyframes rs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rs-open { to { clip-path: inset(0); } }
@keyframes rs-settle { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .menu.is-open { animation: none; }
  .calc-bar .p { transition: none; }
  .lc-ring-p, .lc-ring-c { transition: none; }
}

/* ---- Print: the estimate and the text, nothing else ------------------------------------------ */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; }
  .top, .menu, .skip, .t-photo, .t-pair, .ways, .mosaic, .how, .close, .foot-links, .calc-form, .calc-st .ctl, .calc-act, .calc-bar, .range, .menu-btn, video, .toc, .band, .mast-band, .form, .faqp-toc, .err-next { display: none !important; }
  .sheet, .stages, .nl, .pair, .pair-t, .ready-set { background: none !important; color: #000 !important; margin: 0 !important; }
  .ax { display: block !important; }
  .board, .calc, .calc-sum { display: block !important; position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; color: #000 !important; }
  .calc { margin-top: 18pt !important; }
  .calc-sum { margin: 12pt 0 !important; }
  .calc-fig { font-size: 40pt !important; color: #000 !important; }
  .calc-print { display: block; margin-top: 4pt; }
  .calc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .calc-facts dt, .calc-note { color: #333 !important; }
  .calc-facts dt::before { display: none !important; }
  .sec { padding-block: 12pt !important; }
  .d-fit, .d-display, .close-h, .mast-text h1 { font-size: 32pt !important; }
  .foot { background: none; color: #000; padding: 12pt 0 0; }
  .foot-name picture { display: none; }
  .foot-name::after { content: "Rock Solid Financing"; font-size: 18pt; }
  .foot-places a, .foot-places span { color: #000; font-size: 11pt; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .js [data-reveal], .js [data-load], .js [data-line], .js .shutter { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .lc-view, .lc-hint, .lc-empty, .lc-mark { display: none !important; }
  .lc-out, .lc .calc-fig, .lc-table-head { position: static !important; }
  .lc .calc-fig { margin: 0 !important; padding: 0 !important; background: none !important; }
  .lc-ring-c { stroke: #b3b3b3 !important; }
  .lc-ring-p { stroke: #000 !important; }
  .lc-ring-n { color: #000 !important; }
  .lc-ring-t > span + span, .lc-last { color: #333 !important; }
  .lc.is-stale *, .lc-sched.is-stale * { opacity: 1 !important; }
  .lc-sched { break-before: page; }
  .lc-fig { break-inside: avoid; }
}

/* ---- The office's corners on the inner pages' tiles, fields and pictures ------------------------ */
.note, .msg, .band, .sheet, .stages, .nl, .pair-t, .fig img, .credits-thumbs img, .m-tile { border-radius: var(--r); }
.band, .m-tile { overflow: hidden; }
.field { border-color: var(--control); border-radius: var(--r-btn); }
.stage-t { font-weight: 500; }
.lc-ring-n { font-weight: 500; }

/* ---- The terms table: a white tile on the inner pages, edge to edge in the showcase's light half -- */
.proof .terms-wrap { margin-inline: var(--b); padding: 16px 0 8px; background: var(--white); border-radius: var(--r); overflow: clip; }
.proof .terms th:first-child, .proof .terms td:first-child, .show-table .terms th:first-child, .show-table .terms td:first-child { padding-left: var(--tp); }
.proof .terms th:last-child, .proof .terms td:last-child, .show-table .terms th:last-child, .show-table .terms td:last-child { padding-right: var(--tp); }
.show-table .terms-wrap { margin: 0 calc(-1 * var(--tp)); }
@media (hover: hover) and (pointer: fine) {
  .proof .terms tbody tr:not(.is-on):hover, .show-table .terms tbody tr:not(.is-on):hover { background: var(--paper); }
}
@media (min-width: 768px) {
  /* The tile sits --b in from the section, so the first column gives that back to keep the axis. */
  .proof .terms .c-term { width: calc(var(--m) + (42cqw - var(--m)) * 0.5 - var(--b)); }
  .show-table .terms .c-term, .show-table .terms .c-pay, .show-table .terms .c-total { width: auto; }
}
@media (max-width: 767px) {
  .proof .terms tr, .show-table .terms tr { padding: 14px var(--tp); }
}

/* ---- Rhythm: a section on paper already ends with the gap the closing tiles would add ---------- */
.sec + .cta { padding-top: 0; }

/* ---- What to have ready: the panel and photograph run as full tiles, text on the margin ---------- */
.ax > .ready-body { grid-column: full; margin: 0 var(--b); }
.ready-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
address { font-style: normal; }

/* ---- Fragments of the application form and the portal's messages (data-ui: the office's rules) -- */
.ui-field { display: grid; gap: 4px; margin-top: 12px; }
.ui-field > span { font-size: 13px; color: #6b6b6b; }
.ui-field > b { display: block; padding: 8px 12px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; font-weight: 400; } /* taste-skill-ignore: form field or interface fragment */
.ui-field + .ui-act { margin-top: 16px; }
.ui-thread { display: grid; gap: 8px; margin: 14px 0 4px; }
.ui-msg { max-width: 90%; padding: 10px 12px; border-radius: 8px; background: #f5f4f1; }
.ui-msg.is-me { justify-self: end; background: var(--ink); color: #fff; }
.ui-msg .ui-muted { display: block; margin-bottom: 2px; }
.ui-msg.is-me .ui-muted { color: #c9c9c9; }
.feat-cell .line-t, .feat-cell .ui-track, .feat-cell .up-list { margin-bottom: 4px; }

/* ---- Motion for the new parts ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* The stage's photograph settles while it is the one shown. */
  .js .hero-photos > .is-on img, .js .hero-photos > .is-off img { animation: rs-drift 9s var(--ease-out) both; }
  .menu.is-open { animation: rs-fade var(--t-ui) var(--ease-out); }
  .js .feat-cell[data-reveal] > .ui { transform: translateY(18px); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
  /* The mosaic opens briskly: every tile is in place within about a second of the section arriving. */
  .js .m-tile[data-reveal] img, .js .m-tile[data-reveal] video { transition: clip-path 620ms var(--ease-in-out), transform 1000ms var(--ease-soft); transition-delay: calc(var(--i, 0) * 45ms); }
  .js .m-tile[data-reveal] .m-label { transition-delay: calc(var(--i, 0) * 45ms + 380ms); }
}
/* A screen docked at the top of its cell comes down into place instead of up. */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) and (max-width: 899.98px) {
  .js .feat-cell:is(:nth-child(4n+2), :nth-child(4n+3))[data-reveal] > .ui { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .feat-cell:nth-child(even)[data-reveal] > .ui { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .feat-cell[data-reveal].is-in > .ui { transform: none; }
}
@keyframes rs-drift { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rs-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-photos > * { transition: none; }
  .how-frame, .how-step, .faq-item, .faq-item summary i::before, .faq-item summary i::after { transition: none !important; }
}

/* ---- Print: the new parts ------------------------------------------------------------------------ */
@media print {
  .hero-photos, .hero-notch .btn, .feat, .cta, .foot-up, .foot-low, .how-stage, .t-nav, .t-act, .show-echo .go { display: none !important; }
  .hero-stage, .hero-card, .hero-notch, .est-card, .show, .show-echo, .show-table, .ready-panel { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: none !important; color: #000 !important; border-radius: 0 !important; clip-path: none !important; }
  .hero-h, .show-h { font-size: 28pt !important; color: #000 !important; padding: 0 !important; display: block !important; }
  .show-h span { display: inline !important; padding: 0 !important; color: #000 !important; background: none !important; }
  .show-fig { font-size: 32pt !important; }
  .foot { padding: 12pt 0 0 !important; }
  .foot-base, .foot-base a { color: #000 !important; }
}