/*
 * Simply Business Valuations — site styles, laid out to the wireframes
 * ("SBV - Website Design and Wireframes") in the brand's palette and type
 * ("Daylight" brand guidelines).
 *
 *   colour     cream ground; bark text and dark sections; clay blocks;
 *              terracotta for the brand, terracotta deep for text, links and
 *              buttons; sage only for status (the start page's checklist)
 *   type       Outfit Medium for headings, labels and captions; Source Serif 4
 *              for body copy, as the wireframes set it; Source Serif 4 Italic
 *              for "Simply" in the wordmark
 *   grid       1280px content, 80px margins desktop / 24px mobile
 *   spacing    8 · 16 · 24 · 40 · 64 · 96
 *   edges      4px radius on buttons and inputs, square everywhere else, no
 *              drop shadows — separate with a clay rule or a change of ground
 *   gradient   the home hero panel only, terracotta 500 → 700, left to right
 *   motion     transform and opacity only, easing out, under a second; pages
 *              cross-fade, the first screen rises in, later sections rise as
 *              they are reached (assets/ui.js). Reduced motion stills it all.
 *
 * Buttons are terracotta deep, not the lighter terracotta drawn in the
 * wireframes: white on terracotta 500 is 3.6:1, which the brand guidelines
 * reserve for display type.
 */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  --terracotta: #D2603A;
  --terracotta-700: #A8431F;
  --terracotta-800: #8F3718;
  --terracotta-400: #E39A78;
  --terracotta-200: #F5D9CB;
  --terracotta-100: #FBEDE6;
  --bark: #3A2C22;
  --cream: #FBF6EF;
  --clay: #E8CDB4;
  --clay-deep: #D9B99C;
  --clay-soft: #F3E6D9;
  --sage: #6E7A57;
  --driftwood: #8A7C6E;
  /* Driftwood is for captions at size; this is its body-size equivalent. */
  --muted: #6B5E52;
  --white: #FFFFFF;

  --font-head: "Outfit", "Poppins", system-ui, sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type sizes: every size on the site is one of these, except the set
     pieces that keep their own — the wordmark, the drawn report (a picture
     at its own scale), the home hero's intro (24px so white on terracotta
     clears AA as large text), and an article's title (titles run long). */
  --t-xs: 0.8125rem;                                      /* captions, the footer's base line */
  --t-sm: 0.9375rem;                                      /* dates, crumbs, the footer, the FAQ index */
  --t-ui: 1rem;                                           /* buttons, navigation, column and card text */
  --t-body: 1.0625rem;                                    /* running text; 18px from 720px */
  --t-lg: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);  /* h3, card titles, ledes */
  --t-xl: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);       /* h2 within text, the closing band */
  --t-2xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);     /* section headings */
  --t-figure: clamp(2.75rem, 2rem + 2.2vw, 3.5rem);       /* the fees */
  --t-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);    /* page titles */

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --margin: 24px;
  --max: 1280px;
  --radius: 4px;
  --rule: 1.5px solid var(--clay);
  --section: var(--s5);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --fast: .2s;
  --slow: .8s;
}
@media (min-width: 720px) { :root { --margin: 40px; } }
@media (min-width: 1100px) { :root { --margin: 80px; --section: var(--s6); } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px;
  /* A light site only: native controls and scrollbars stay light under a dark
     system theme. No double-tap zoom delay; a tap flashes in the brand's tint. */
  color-scheme: light;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(168, 67, 31, .15);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; interpolate-size: allow-keywords; }
  /* Page to page: a short cross-fade, with the header held still across it. */
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--bark);
  font: 400 var(--t-body)/1.65 var(--font-body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) { :root { --t-body: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--terracotta-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--terracotta-700); outline-offset: 3px; }
/* On terracotta and bark the terracotta ring all but vanishes (1.0 to 2.2 to
   1), so there it is cream, well over the 3:1 a focus indicator needs. */
:is(.hero, .cta-band, .fees, .box--fee, .site-foot) :focus-visible { outline-color: var(--cream); }
::selection { background: var(--terracotta-200); }

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--t-display); line-height: 1.04; }
h2, .h2 { font-size: var(--t-2xl); }
h3, .h3 { font-size: var(--t-lg); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 12px; }
p { margin: 0 0 var(--s2); }
.lede { font-size: var(--t-lg); line-height: 1.55; max-width: 40em; }
.caption, .eyebrow {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--t-xs);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
}
.eyebrow { margin-bottom: var(--s2); }
/* On clay, the muted grey and terracotta deep fall just short of AA (4.1 and
   4.0 to 1), so small text there steps darker: bark for captions, a deeper
   shade of terracotta deep for links (8.8 and 5.1 to 1). */
:is(.section--clay, .feature, .qa-group--clay, .inline-cta) :is(.caption, .eyebrow) { color: var(--bark); }
:is(.section--clay, .feature, .qa-group--clay, .inline-cta) :is(a:not(.btn), .text-link) { color: var(--terracotta-800); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }
.wrap--text { max-width: calc(44rem + 2 * var(--margin)); }

.skip { position: absolute; left: var(--s2); top: -100px; z-index: 100; background: var(--bark); color: var(--cream); padding: var(--s1) var(--s2); }
.skip:focus { top: var(--s2); }
/* Out of sight, still read aloud: "(opens in a new tab)", a legend that would repeat the heading above it. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* -------------------------------------------------------------------------
   Wordmark — live text, built to the guideline construction
   ------------------------------------------------------------------------- */
.wordmark { display: inline-flex; align-items: baseline; gap: 0.23em; white-space: nowrap; line-height: 1; }
.wordmark__simply { font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--terracotta); font-size: 1.08em; letter-spacing: -0.01em; }
.wordmark__rest { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.02em; color: var(--bark); }

/* -------------------------------------------------------------------------
   Buttons and links
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 10px 20px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font: 500 var(--t-ui)/1.2 var(--font-head);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s var(--ease-out);
}
.btn:active:not(.btn--soon) { transform: scale(.98); }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: var(--t-body); }
@media (max-width: 767px) { .btn--lg { min-height: 52px; padding: 14px 24px; } }
.btn--block { width: 100%; }
.btn--primary { background: var(--terracotta-700); color: var(--white); }
.btn--primary:hover { background: var(--terracotta-800); }
.btn--light { background: var(--cream); color: var(--bark); border-color: var(--cream); }
.btn--light:hover { background: var(--white); border-color: var(--white); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .85); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); }
.btn--ghost { background: transparent; color: var(--bark); border-color: var(--clay); }
.btn--ghost:hover { border-color: var(--bark); }
.btn .icon { transition: transform .15s ease; }
.btn:hover .icon { transform: translateX(2px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); }

.text-link { display: inline-flex; align-items: center; gap: 0.4em; font: 500 var(--t-ui)/1.3 var(--font-head); color: var(--terracotta-700); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { transition: transform .15s ease; }
.text-link:hover .icon { transform: translateX(2px); }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: var(--rule); view-transition-name: site-head; }
.site-head__row { display: flex; align-items: center; gap: var(--s3); min-height: 80px; }
.site-head__brand { text-decoration: none; font-size: 1.4375rem; margin-right: auto; padding: var(--s1) 0; }
.site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  position: relative;
  font: 500 var(--t-ui)/1 var(--font-head); color: var(--bark); text-decoration: none;
  padding: 8px 0; white-space: nowrap;
}
/* The underline draws in from the left on hover; it stands drawn, in
   terracotta, under the current page. */
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"]::after { background: var(--terracotta); transform: scaleX(1); }
.site-head__actions { display: flex; align-items: center; gap: var(--s3); }
.login-link { display: inline-flex; align-items: center; gap: 0.4em; font: 500 var(--t-ui)/1 var(--font-head); color: var(--bark); text-decoration: none; white-space: nowrap; padding: 8px 0; }
.login-link { transition: color var(--fast) ease; }
.login-link:hover { color: var(--terracotta-700); }

/* Country selector. */
.market { position: relative; }
.market summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35em;
  font: 500 var(--t-sm)/1 var(--font-head); color: var(--muted); padding: 8px 0;
  transition: color var(--fast) ease;
}
.market summary::-webkit-details-marker { display: none; }
.market summary:hover, .market[open] summary { color: var(--bark); }
.market__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 240px;
  list-style: none; margin: 0; padding: var(--s1) 0;
  background: var(--white); border: var(--rule);
}
.market__list a { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px var(--s2); font: 500 var(--t-sm)/1.3 var(--font-head); color: var(--bark); text-decoration: none; }
.market__list a { transition: background-color var(--fast) ease; }
.market__list a:hover { background: var(--clay-soft); }
.market__list a[aria-current="true"] { color: var(--terracotta-700); }
.market__list small { font-weight: 400; color: var(--muted); }
.market--menu { margin: var(--s1) 0 var(--s2); }
.market--menu summary { font-size: var(--t-body); padding: 10px 0; }
.market--menu .market__list { position: static; margin-top: var(--s1); }

.market-note { background: var(--clay-soft); border-bottom: var(--rule); }
.market-note__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); padding-top: 12px; padding-bottom: 12px; }
.market-note p { margin: 0; font-size: var(--t-ui); }
.market-note button { background: none; border: 0; padding: 4px 0; cursor: pointer; }

.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px; padding: 0 12px; border: 1.5px solid var(--clay); border-radius: var(--radius);
  font: 500 var(--t-ui)/1 var(--font-head);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__icon { display: inline-flex; }
.menu__icon--close, .menu[open] .menu__icon--open { display: none; }
.menu[open] .menu__icon--close { display: inline-flex; }
.menu__panel {
  position: fixed; left: 0; right: 0; top: 80px; bottom: 0; z-index: 55;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); border-top: var(--rule);
  padding: var(--s2) var(--margin) calc(var(--s3) + env(safe-area-inset-bottom));
}
.menu__panel > .btn { margin-top: auto; }
body:has(.menu[open]) { overflow: hidden; }
.menu__panel ul { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.menu__panel li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--clay); font: 500 var(--t-body)/1.2 var(--font-head); color: var(--bark); text-decoration: none; }
.menu__panel li a[aria-current="page"] { color: var(--terracotta-700); }
.menu__login { display: inline-flex; align-items: center; gap: 0.4em; margin: var(--s1) 0 0; padding: 10px 0; font: 500 var(--t-body)/1 var(--font-head); color: var(--bark); text-decoration: none; }

/* Laptops and tablets on their side keep the whole header, set tighter: a
   smaller wordmark, closer links, and the login as its lock alone (its words
   stay for screen readers). */
@media (min-width: 1024px) and (max-width: 1219px) {
  .site-head__row, .site-head__actions, .site-nav ul { gap: 20px; }
  .site-head__brand { font-size: 1.25rem; }
  .site-nav a { padding: 12px 0; }
  .login-link { padding: 12px 6px; }
  .login-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-head__actions .btn { padding-inline: 16px; }
}
@media (max-width: 1023px) {
  .site-nav, .login-link, .market--head { display: none; }
  .menu { display: block; }
  .site-head__actions { gap: var(--s2); }
  .site-head__row { gap: var(--s2); }
}
@media (max-width: 559px) {
  .site-head__row { min-height: 64px; }
  .menu__panel { top: 64px; }
  .site-head__brand { font-size: 1.125rem; }
  .site-head__actions .btn { display: none; }
  .menu__label { display: none; }
}

/* -------------------------------------------------------------------------
   The drawn valuation report — what the customer buys, shown where the layout
   wants a picture and there is no photograph yet. Built from the brand's
   report spec: stacked lockup, terracotta band. Two sheets offset rather than
   a shadow. Decorative, so hidden from assistive technology.
   ------------------------------------------------------------------------- */
.report { position: relative; width: min(calc(100% - 18px), 360px); aspect-ratio: 210 / 297; margin: 0 auto; }
.report__page {
  position: absolute; inset: 0;
  background: var(--cream); color: var(--bark);
  padding: 13% 11% 9%;
  display: flex; flex-direction: column;
  border: 1px solid rgba(58, 44, 34, .12);
}
.report__page--back { transform: translate(18px, 18px); background: var(--clay); border-color: transparent; }
.section--clay .report__page--back { background: var(--clay-deep); }
.report__band { position: absolute; left: 0; right: 0; top: 0; height: 3.2%; background: var(--terracotta); }
.report__lockup { display: flex; flex-direction: column; font: 500 clamp(1rem, 0.7rem + 1vw, 1.375rem)/1.05 var(--font-head); letter-spacing: -0.02em; margin-bottom: 18%; }
.report__lockup .wordmark__simply { font-size: 1.05em; margin-bottom: 0.1em; }
.report__kind { font: 500 0.6875rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta-700); margin-bottom: 0.9em; }
.report__entity { font: 500 clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem)/1.1 var(--font-head); letter-spacing: -0.02em; margin-bottom: 0.6em; }
.report__basis { font-size: 0.875rem; line-height: 1.4; color: var(--muted); margin: 0; }
.report__lines { margin-top: auto; display: grid; gap: 7px; padding-bottom: 12%; }
.report__lines span { display: block; height: 6px; background: var(--clay-soft); }
.report__lines span:nth-child(2) { width: 82%; }
.report__lines span:nth-child(3) { width: 64%; }
.report__ref { font: 500 0.6875rem/1 var(--font-head); letter-spacing: .08em; color: var(--muted); border-top: 1px solid var(--clay); padding-top: 10px; margin: 0; }
/* Says what the drawing is: a sample, not a client's report. */
.report__sample { position: absolute; top: 7%; right: 8%; margin: 0; padding: 4px 8px; font: 500 0.625rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--clay-deep); }

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */
.section { padding: var(--section) 0; }
.section--tight { padding: var(--s5) 0; }
.section--flush { padding-top: 0; }
.section--clay { background: var(--clay); }
.section--white { background: var(--white); border-top: var(--rule); }
/* Two sections on the same cream ground share one gap — the first one's
   bottom padding — rather than stacking two. Where the ground changes (clay,
   white, the dark fee panel, a hero or a band) there is a visible edge, so the
   section after it keeps its own top padding and sits evenly between edges.
   The condition is on both sides: written only on the second, it outranked
   the rules restoring the padding and stripped it after clay and white too. */
.section:not(.section--clay):not(.section--white) + .section:not(.section--clay):not(.section--white) { padding-top: 0; }
.strip + .section, .hero + .section, .page-hero + .section:not(.section--flush),
.fees + .section, .cta-band + .section { padding-top: var(--section); }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4); }
.section__head h2 { margin: 0; }

/* Home hero — the one place the gradient is allowed. */
.hero { background: linear-gradient(90deg, var(--terracotta) 0%, var(--terracotta-700) 100%); color: var(--white); overflow: hidden; }
.hero__grid { display: grid; gap: var(--s5); align-items: center; padding-top: var(--s5); padding-bottom: var(--s5); }
.hero h1 { color: var(--white); max-width: 11em; }
/* 24px: large text, so white on terracotta clears AA at 3.6:1. */
.hero__lede { font-size: 1.5rem; line-height: 1.45; max-width: 26em; margin: 0; }
.hero__media { display: flex; justify-content: center; }
.hero__media--photo { aspect-ratio: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 7fr 5fr; padding-top: var(--s6); padding-bottom: var(--s6); }
}
/* In one column the report follows the words at a smaller scale: at full
   size it took the hero past a screen and a half. Zoom keeps its proportions,
   offset sheet included. */
@media (max-width: 899px) {
  .hero__grid { gap: var(--s4); }
  .hero .report { zoom: .72; }
}
@media (max-width: 559px) {
  .hero .report { zoom: .6; }
  /* Stacked buttons share one width rather than each fitting its words. */
  :is(.hero, .page-hero) .button-row .btn { flex: 1 1 100%; }
}

/* Other pages' heroes. With a picture: a clay panel (About). Without: a plain heading (FAQ, Insights). */
.page-hero { padding: var(--s5) 0 var(--s4); }
.page-hero .lede { margin-bottom: 0; }
.page-hero--media { background: var(--clay); padding: var(--s5) 0; }
.page-hero__grid { display: grid; gap: var(--s4); align-items: center; }
.page-hero__media { aspect-ratio: 1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .page-hero { padding-top: var(--s6); }
  .page-hero--media { padding: var(--s6) 0; }
  .page-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--s5); }
}

/* Strip — short statements under the hero, between rules. */
.strip { border-bottom: var(--rule); background: var(--cream); }
.strip__list { list-style: none; margin: 0; padding: var(--s4) 0; display: grid; gap: var(--s3); }
.strip__list li { font-size: var(--t-body); line-height: 1.5; }
.strip__list strong { font-family: var(--font-head); font-weight: 500; }
@media (min-width: 760px) {
  .strip__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; }
  .strip__list li { padding: 0 var(--s4); border-left: var(--rule); }
  .strip__list li:first-child { padding-left: 0; border-left: 0; }
}

/* Columns and numbered steps: a clay rule above each. */
.cols { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4) var(--s3); }
h2 + .cols, .eyebrow + h2 + .cols { margin-top: var(--s4); }
.cols > li { border-top: var(--rule); padding-top: var(--s3); }
.cols h3 a { color: inherit; }
.cols p { margin: 0; font-size: var(--t-ui); line-height: 1.6; }
.cols__n { display: block; font: 500 var(--t-sm)/1 var(--font-head); color: var(--terracotta-700); letter-spacing: .04em; margin-bottom: var(--s2); }
.cols img { margin-bottom: var(--s2); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 640px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .cols[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Boxes — a row of bordered boxes with a link at the foot; the fee box is dark. */
.boxes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
h2 + .boxes { margin-top: var(--s4); }
@media (min-width: 760px) { .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .boxes[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.box { display: flex; flex-direction: column; background: var(--white); border: var(--rule); padding: var(--s4) var(--s4) var(--s4); }
.box h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.box p { font-size: var(--t-ui); line-height: 1.6; }
.box__link { margin-top: auto; padding-top: var(--s3); }
.box { transition: border-color var(--fast) ease; }
.box:not(.box--fee):has(.box__link:hover) { border-color: var(--terracotta); }
.box--fee { background: var(--bark); border-color: var(--bark); color: var(--cream); }
.box--fee .caption { color: var(--clay); }
.box--fee p { color: var(--cream); }
.box .box__figure { font: 500 var(--t-figure)/1 var(--font-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: var(--s1) 0 var(--s3) !important; }
.box__figure small { display: block; font-size: var(--t-sm); letter-spacing: 0; color: var(--clay); margin-bottom: 6px; }
/* The space before the suffix is in the markup, so the figure never runs into it. */
.box__figure span { display: inline-block; font-size: var(--t-sm); letter-spacing: 0; color: var(--clay); }

/* Panel — a white box of ruled lines under a terracotta rule. */
.panel { background: var(--white); border-top: 3px solid var(--terracotta); padding: var(--s4) var(--s4) var(--s3); align-self: start; }
.panel .caption { margin-bottom: var(--s2); }
.panel ul, .panel ol { list-style: none; margin: 0; padding: 0; }
.panel li { display: flex; gap: var(--s3); padding: var(--s2) 0; border-bottom: var(--rule); font-size: var(--t-body); line-height: 1.5; }
.panel li:last-child { border-bottom: 0; }
.panel--steps { border: var(--rule); border-top-width: 1.5px; padding: var(--s4); }
.panel--steps h2 { margin-bottom: var(--s2); }
.panel__n { flex: none; font: 500 var(--t-sm)/1.6 var(--font-head); color: var(--terracotta-700); min-width: 1.6em; }

.with-panel { display: grid; gap: var(--s4) var(--s5); }
@media (min-width: 900px) { .with-panel { grid-template-columns: 7fr 5fr; align-items: start; } }

/* Rich text layouts. */
.split__grid { display: grid; gap: var(--s3) var(--s5); }
.split__head { margin: 0; }
@media (min-width: 900px) { .split__grid { grid-template-columns: 5fr 7fr; } }
.media-split { display: grid; gap: var(--s4) var(--s5); align-items: center; }
.media-split__figure--photo { aspect-ratio: 4 / 3; }
.media-split__figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .media-split { grid-template-columns: 7fr 5fr; } }

/* A closing paragraph that is nothing but a link reads as an action, as
   "Refer a client" does in the wireframes. */
.split .prose > p:last-child > a:only-child, .media-split .prose > p:last-child > a:only-child {
  font: 500 var(--t-ui)/1.3 var(--font-head); text-decoration: none;
}
.split .prose > p:last-child > a:only-child:hover { text-decoration: underline; }

/* Prose — CMS rich text. */
.prose { max-width: 40em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--t-xl); margin: var(--s5) 0 var(--s2); }
.prose > .eyebrow + h2, .prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-lg); margin: var(--s4) 0 var(--s1); }
.prose h4 { font-size: var(--t-body); margin: var(--s3) 0 var(--s1); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s3); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: var(--s1); }
.prose li::marker { color: var(--terracotta); }
.prose blockquote {
  margin: var(--s4) 0; padding: var(--s1) 0 var(--s1) var(--s4);
  border-left: 3px solid var(--terracotta);
  font-size: var(--t-lg); line-height: 1.45; font-style: italic;
}
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-top: var(--rule); margin: var(--s5) 0; }
.prose figure { margin: var(--s4) 0; }
.prose figcaption { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s1); }
.prose code { font-size: 0.9em; background: var(--clay-soft); padding: 0.1em 0.3em; }
.prose--column { max-width: 44rem; }

/* Fees — the dark panel (not in the wireframes; available to content). */
.fees { background: var(--bark); color: var(--cream); padding: var(--section) 0; }
.fees h2 { color: var(--cream); }
.fees__grid { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .fees__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.ticks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .icon { color: var(--terracotta-400); margin-top: 0.2em; }
.fees__bands { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .fees__bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band { background: rgba(251, 246, 239, .06); border-top: 3px solid var(--terracotta); padding: var(--s3); }
.band .caption { color: var(--clay); }
.band__label { font: 500 var(--t-lg)/1.3 var(--font-head); margin-bottom: var(--s3); }
.band__fee { font: 500 var(--t-figure)/1 var(--font-head); letter-spacing: -0.03em; margin-bottom: var(--s1); }
.band__fee span { display: block; font-size: var(--t-ui); letter-spacing: 0; margin-top: 8px; color: var(--clay); }
.fees .eyebrow { color: var(--clay); }
.band__ex { color: var(--clay); font-size: var(--t-ui); margin: 0; }

/* The closing band. */
.cta-band { background: var(--terracotta-700); color: var(--white); padding: var(--s5) 0; }
.cta-band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); }
.cta-band h2 { color: var(--white); font-size: var(--t-xl); margin: 0; }
.cta-band p { margin: var(--s1) 0 0; font-size: var(--t-body); max-width: 38em; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.cta-band__second { color: var(--white); font: 500 var(--t-body)/1 var(--font-head); text-decoration: none; white-space: nowrap; }
.cta-band__second:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Insights
   ------------------------------------------------------------------------- */
.feature { display: grid; background: var(--clay); color: var(--bark); text-decoration: none; }
.feature__body { padding: var(--s4) var(--s3); }
.feature__body h2 { margin-bottom: var(--s2); }
.feature__body p { max-width: 30em; }
.feature__media { min-height: 260px; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.feature--text .feature__body { max-width: 46rem; }
@media (min-width: 900px) {
  .feature:not(.feature--text) { grid-template-columns: 1fr 1fr; min-height: 420px; }
  .feature__body { padding: var(--s5); align-self: center; }
}
.article-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 720px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .article-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.article-card a { display: flex; flex-direction: column; height: 100%; background: var(--white); border: var(--rule); color: var(--bark); text-decoration: none; transition: border-color .15s ease; }
.article-card a:hover { border-color: var(--terracotta); }
.article-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.article-card__media { aspect-ratio: 9 / 4; overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: var(--s4); }
.article-card__body h3 { font-size: var(--t-lg); margin-bottom: 12px; }
.article-card__body p:last-child { margin: 0; font-size: var(--t-ui); }

.article__head { padding-top: var(--s5); }
.article__head::after { content: ""; display: block; border-top: var(--rule); margin-top: var(--s4); }
.article__crumb { margin-bottom: var(--s3); }
.article__crumb a { font: 500 var(--t-sm)/1 var(--font-head); text-decoration: none; }
.article__crumb a:hover { text-decoration: underline; }
.article__head h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); margin-bottom: var(--s3); }
.article__by { font: 400 var(--t-sm)/1.4 var(--font-head); color: var(--muted); margin: 0; }
.article__hero { margin: var(--s4) auto 0; }
.article__hero img { width: 100%; }
.article__body { padding-top: var(--s4); padding-bottom: var(--s5); }
.article__body.prose { max-width: calc(44rem + 2 * var(--margin)); }
.inline-cta { background: var(--clay); padding: var(--s5) 0; }
.inline-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.inline-cta h2 { margin-bottom: var(--s1); }
.inline-cta p { margin: 0; font-size: var(--t-ui); }
.inline-cta + .section { padding-top: var(--section); }
.article-links { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 720px) { .article-links { grid-template-columns: 1fr 1fr; } }
.article-links a { display: block; border-top: var(--rule); padding-top: var(--s3); color: var(--bark); text-decoration: none; }
.article-links a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; }
.article-links h3 { margin: 0; }

/* -------------------------------------------------------------------------
   Questions and answers
   ------------------------------------------------------------------------- */
.qa-layout { display: grid; gap: var(--s4); }
@media (min-width: 1000px) {
  .qa-layout { grid-template-columns: 3fr 9fr; gap: var(--s5); align-items: start; }
  .qa-index { position: sticky; top: 112px; }
}
.qa-index > div { border-top: var(--rule); padding: var(--s3) 0; }
.qa-index .caption { color: var(--terracotta-700); text-decoration: none; display: inline-block; margin-bottom: 12px; }
.qa-index ul { list-style: none; margin: 0; padding: 0; }
.qa-index li a { display: block; padding: 5px 0; font: 400 var(--t-sm)/1.4 var(--font-head); color: var(--bark); text-decoration: none; }
.qa-index li a { transition: color var(--fast) ease; }
.qa-index li a:hover { color: var(--terracotta-700); }
@media (max-width: 999px) {
  .qa-index ul { display: none; }
  .qa-index { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
  .qa-index > div { padding: var(--s2) 0 0; }
}
.qa-group { margin-bottom: var(--s5); }
.qa-group:last-child { margin-bottom: 0; }
.qa-group > h2 { font-size: var(--t-xl); margin-bottom: var(--s3); }
.qa-group > .eyebrow { margin-bottom: var(--s1); }
.qa-group--clay { background: var(--clay); padding: var(--s4) var(--s3); }
@media (min-width: 720px) { .qa-group--clay { padding: var(--s4); } }
.qa { border-top: var(--rule); }
.qa-group--clay .qa { border-top-color: var(--clay-deep); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { margin: 0; font-size: var(--t-lg); transition: color var(--fast) ease; }
.qa summary:hover h3, .qa[open] summary h3 { color: var(--terracotta-700); }
.qa__icon { color: var(--terracotta-700); display: inline-flex; font-size: 1.25rem; }
/* The plus folds into a minus: its upright closes towards the centre. */
.qa .icon__v { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease-out), opacity .3s ease; }
.qa[open] .icon__v { transform: scaleY(0); opacity: 0; }
.qa .prose { padding: 0 0 var(--s3); max-width: 44em; }
/* The answer opens and closes rather than appearing. Where a browser cannot
   animate a details element's height it opens at once, as before. */
@supports selector(::details-content) {
  .qa::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; }
  .qa .prose { opacity: 0; transition: opacity .3s ease; }
  .qa[open] .prose { opacity: 1; transition-delay: .08s; }
}

/* Contact details as a block. */
.contact-list { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0; }
.contact-list dd { margin: 0; font-size: var(--t-body); }

/* -------------------------------------------------------------------------
   Start page — the band cards (the order's revenue choice, below)
   ------------------------------------------------------------------------- */
.notice a, .contact-list a, .site-foot a { overflow-wrap: anywhere; }
.notice { background: var(--terracotta-100); border-left: 3px solid var(--terracotta); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); font-size: var(--t-body); }
.band-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 900px) { .band-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band-card { display: flex; flex-direction: column; background: var(--white); border: var(--rule); border-top: 3px solid var(--terracotta); padding: var(--s4); }
.band-card--quote { background: var(--cream); border-top-color: var(--clay-deep); }
.band-card__label { font-size: var(--t-lg); margin-bottom: var(--s3); }
.band-card__fee { font: 500 var(--t-figure)/1 var(--font-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: var(--s1); }
.band-card__fee span { display: inline-block; white-space: nowrap; font-size: var(--t-ui); letter-spacing: 0; color: var(--muted); }
.band-card__fee--quote { font-size: var(--t-lg); line-height: 1.25; letter-spacing: -0.01em; }
.band-card__note { color: var(--muted); font-size: var(--t-ui); margin-bottom: var(--s4); }
.band-card .btn { margin-top: auto; }
.btn--soon { background: var(--clay); color: var(--bark); cursor: default; }
.btn--soon:hover { background: var(--clay); }
.band-cards__foot { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--t-ui); }

.fees__go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-top: var(--s2); }
.fees__go p { margin: 0; max-width: 34em; color: var(--clay); font-size: var(--t-ui); }
/* What "annual revenue" means: under the fee cards, wherever they are. */
.fees__note { grid-column: 1 / -1; margin: 0; max-width: 46em; color: var(--clay); font-size: var(--t-sm); line-height: 1.5; border-top: 1px solid rgba(232, 205, 180, .25); padding-top: var(--s2); }
.band-cards__note { margin: var(--s3) 0 0; max-width: 46em; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }

/* -------------------------------------------------------------------------
   Footers
   ------------------------------------------------------------------------- */
.site-foot { background: var(--bark); color: var(--cream); font-size: var(--t-sm); }
.site-foot a { color: var(--cream); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .wordmark__rest { color: var(--cream); }
.site-foot .wordmark__simply { color: var(--cream); }
.site-foot--full { padding: var(--s5) 0 var(--s4); }
.site-foot__grid { display: grid; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid rgba(232, 205, 180, .2); }
.site-foot__brand > a { font-size: 1.375rem; display: inline-block; margin-bottom: var(--s2); }
.site-foot__brand p { max-width: 22em; }
.site-foot__muted, .site-foot__brand p { color: var(--clay); font-size: var(--t-sm); line-height: 1.6; }
.site-foot .caption { color: var(--clay); margin-bottom: var(--s2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--font-head); }
.site-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding-top: var(--s3); font: 400 var(--t-xs)/1.4 var(--font-head); color: var(--clay); }
.site-foot__base a { color: var(--clay); }
/* Tablets: the brand and blurb across the top, the three lists under it —
   four columns at this width broke the email address mid-word. */
@media (min-width: 760px) { .site-foot__grid { grid-template-columns: minmax(0, 2fr) max-content minmax(0, 3fr); } .site-foot__brand { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .site-foot__grid { grid-template-columns: 4fr 2fr 3fr 3fr; } .site-foot__brand { grid-column: auto; } }
.site-foot--compact { padding: var(--s4) 0; }
.site-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.site-foot__row > a { font-size: 1.25rem; }
.site-foot__row p { margin: 0; font: 400 var(--t-xs)/1.5 var(--font-head); color: var(--clay); }
.site-foot__row p a { color: var(--clay); }

/* Phones: the header has no room for the button, so it rides along the
   bottom of the screen instead. */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px var(--margin) calc(12px + env(safe-area-inset-bottom));
    background: var(--cream); border-top: var(--rule);
    transform: translateY(110%); transition: transform .25s ease;
  }
  /* assets/ui.js adds this once the visitor is past the first screen. */
  .mobile-cta.is-shown { transform: none; }
  .mobile-cta__fee { margin: 0; font: 500 var(--t-sm)/1.25 var(--font-head); }
  .mobile-cta__fee span { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-xs); }
  .mobile-cta .btn { flex: none; }
  body:has(.mobile-cta) { padding-bottom: 84px; }
  .hero__media--photo, .page-hero__media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* Start page: what to have ready. */
.start-prep { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0 0 var(--s4); padding: var(--s3) 0; border-top: var(--rule); border-bottom: var(--rule); }
.start-prep .caption { margin: 0; color: var(--bark); }
.start-prep ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0; padding: 0; }
.start-prep li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-ui); }
.start-prep .icon { color: var(--sage); }

/* -------------------------------------------------------------------------
   Start page — the order: the business, you, review and pay

   Works without script: every step shows, the browser checks the fields, and
   :has() swaps in the "Email us" card and the firm field. assets/order.js
   shows one step at a time with `hidden`, which nothing here may undo.
   ------------------------------------------------------------------------- */
.order { max-width: 52rem; }
.order [hidden] { display: none !important; }
.order-step { padding: var(--s5) 0 0; margin-top: var(--s5); border-top: var(--rule); }
.order-step:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.order-step__title { font-size: var(--t-xl); margin-bottom: var(--s4); }
/* Focused by the script when a step opens, to say where the reader now is. */
.order-step__title:focus { outline: none; }
.order-step__n {
  display: block; margin-bottom: var(--s1);
  font: 500 var(--t-xs)/1.3 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* Fields. */
.field { margin: 0 0 var(--s3); }
fieldset.field, .order-business { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
.field__label { display: block; margin: 0 0 var(--s1); padding: 0; font: 500 var(--t-ui)/1.35 var(--font-head); color: var(--bark); }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { margin: -2px 0 var(--s1); max-width: 36em; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.field__input {
  display: block; width: 100%; max-width: 32rem; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--clay-deep); border-radius: var(--radius);
  background: var(--white); color: var(--bark);
  font: 400 var(--t-body)/1.4 var(--font-head);
  transition: border-color var(--fast) ease;
}
.field__input--medium { max-width: 18rem; }
.field__input--short { max-width: 12rem; }
.field__input::placeholder { color: var(--driftwood); opacity: 1; }
.field__input:hover { border-color: var(--driftwood); }
.field__input:focus-visible { border-color: var(--bark); outline-offset: 1px; }
.field__input[aria-invalid="true"] { border-color: var(--terracotta-700); }
.field__input--select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%233A2C22' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
.field__error { margin: var(--s1) 0 0; max-width: 36em; color: var(--terracotta-800); font: 500 var(--t-sm)/1.45 var(--font-head); }
.field-row { display: grid; gap: 0 var(--s3); max-width: 32rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Yes / No, and the terms box. */
.choices { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 var(--t-ui)/1.3 var(--font-head); cursor: pointer; }
.choice input, .field--check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--terracotta-700); cursor: pointer; }
.field--check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0; }
.field--check input { margin-top: 1px; }
.field--check label { font: 400 var(--t-ui)/1.5 var(--font-head); cursor: pointer; }
.field--check .field__hint { display: block; margin: 2px 0 0; }
.order:not(:has(input[name="adviser"][value="yes"]:checked)) .order-firm { display: none; }

/* Each business. Two or more are ruled apart, each with its own heading. */
.order-business { position: relative; }
.order-business + .order-business { margin-top: var(--s4); padding-top: var(--s4); border-top: var(--rule); }
/* Floated, so the legend is laid out as a heading inside the padding rather
   than drawn in the fieldset's top border, where browsers put a legend. */
.order-business__legend { float: left; width: 100%; padding: 0 9rem 0 0; margin: 0 0 var(--s3); font: 500 var(--t-lg)/1.25 var(--font-head); letter-spacing: -0.015em; }
.order-business > :not(legend) { clear: both; }
.order-business__remove { position: absolute; top: 0; right: 0; margin: 0; }
.order-business + .order-business .order-business__remove { top: var(--s4); }
.order-business__remove .text-link { min-height: 32px; background: none; border: 0; padding: 0; cursor: pointer; }
.order-add { margin: var(--s3) 0 0; }
.order-next { margin-top: var(--s4); }

/* The revenue bands: the band cards, each a radio button. */
.band-cards--choice { gap: var(--s2); }
@media (min-width: 720px) { .band-cards--choice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band-choice { position: relative; height: 100%; padding: var(--s3); cursor: pointer; transition: border-color var(--fast) ease, background-color var(--fast) ease; }
.band-choice input { position: absolute; top: var(--s3); right: var(--s3); width: 22px; height: 22px; margin: 0; accent-color: var(--terracotta-700); cursor: pointer; }
.band-choice input:focus-visible { outline: none; }
.band-choice:has(input:focus-visible) { outline: 3px solid var(--terracotta-700); outline-offset: 3px; }
.band-choice:hover { border-color: var(--terracotta-400); }
.band-choice:has(input:checked) { border-color: var(--terracotta-700); background: var(--terracotta-100); }
.band-choice .band-card__label { display: block; margin: 0 0 var(--s2); padding-right: 32px; font: 500 var(--t-lg)/1.25 var(--font-head); letter-spacing: -0.015em; }
.band-choice .band-card__fee { display: block; font-size: var(--t-xl); }
.band-choice .band-card__fee--quote { font: 400 var(--t-ui)/1.4 var(--font-head); letter-spacing: 0; color: var(--muted); }
.band-choice .band-card__note { display: block; margin: 0; font-size: var(--t-sm); }
.order-bands .band-cards__note { margin-top: var(--s2); }
.order-business + .order-business .order-bands .band-cards__note { display: none; }

/* Above the fixed-fee bands: the "Email us" card in place of the rest of the order. */
.order-quote { display: none; margin: 0 0 var(--s3); padding: var(--s3); max-width: 32rem; }
.order-business:has(input[data-quote]:checked) .order-quote { display: flex; }
.order:has(input[data-quote]:checked) :is([data-step="2"], [data-step="3"], [data-step="1"] [data-step-next]) { display: none; }
.order-quote__title { margin: 0 0 var(--s1); font: 500 var(--t-ui)/1.45 var(--font-head); }
.order-quote .band-card__note { margin-bottom: var(--s2); }
.order-quote .btn { align-self: flex-start; margin-top: 0; }
.order-quote__others { margin: var(--s2) 0 0; font-size: var(--t-sm); }

/* Review and pay. */
.order-review { max-width: 40rem; margin: 0 0 var(--s4); padding: var(--s3); background: var(--white); border: var(--rule); border-top: 3px solid var(--terracotta); }
.order-lines { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.order-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 0 0 var(--s2); margin: 0 0 var(--s2); border-bottom: var(--rule); }
.order-line__name { margin: 0; font: 500 var(--t-ui)/1.35 var(--font-head); overflow-wrap: anywhere; }
.order-line__meta { margin: 2px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.order-line__fee { margin: 0; font: 500 var(--t-ui)/1.35 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-line__fee--none { font-weight: 400; color: var(--muted); }
.order-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0; font: 500 var(--t-lg)/1.3 var(--font-head); font-variant-numeric: tabular-nums; }
.order-total__tax { margin: 4px 0 0; text-align: right; color: var(--muted); font-size: var(--t-sm); }
.order-review__fallback { max-width: 36em; color: var(--muted); font-size: var(--t-ui); }
.order-pay { margin-top: var(--s4); }
.order-pay .btn { min-width: min(100%, 18rem); }
.order-pay__note { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-sm); }
.btn--soon[disabled] { opacity: 1; cursor: default; }
.order-error { margin-top: var(--s2); }
@media (max-width: 559px) {
  :is(.order-pay, .order-next) .btn { width: 100%; }
  .order-business__legend { padding-right: 0; }
  .order-business__remove { position: static; margin: calc(-1 * var(--s2)) 0 var(--s3); }
}

/* "Nothing was charged": shown by the script after a cancelled checkout, or
   without it by the #cancelled on Stripe's cancel_url. */
.order-cancelled { display: none; }
.order-cancelled:target, .order-cancelled.is-shown { display: block; }
.order-cancelled:focus { outline: none; }

/* /start/complete/ */
.order-complete__note { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-ui); }

/* -------------------------------------------------------------------------
   Motion — entrances. Transform and opacity only.
   ------------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes settle { from { opacity: 0; transform: translateY(32px) scale(.97); } }
/* The back sheet arrives with the front one, under it, then slides out to
   its own offset (its resting transform). */
@keyframes sheet-out {
  0% { opacity: 0; transform: translateY(32px) scale(.97); }
  45% { opacity: 1; transform: none; }
}
@keyframes draw { from { transform: scaleX(0); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
  /* The first screen, without script: the words rise in reading order. */
  /* A page heading is either straight inside its .wrap or in a first <div>
     there, beside its picture. */
  :is(.hero__copy > *, .page-hero > .wrap > div:first-child > *, .page-hero > .wrap > :is(:not(div), .button-row), .article__head > *) {
    animation: rise var(--slow) var(--ease-out) both;
  }
  :is(.hero__copy > *, .page-hero > .wrap > div:first-child > *, .page-hero > .wrap > :is(:not(div), .button-row), .article__head > *):nth-child(2) { animation-delay: .08s; }
  :is(.hero__copy > *, .page-hero > .wrap > div:first-child > *, .page-hero > .wrap > :is(:not(div), .button-row), .article__head > *):nth-child(3) { animation-delay: .16s; }
  :is(.hero__copy > *, .page-hero > .wrap > div:first-child > *, .page-hero > .wrap > :is(:not(div), .button-row), .article__head > *):nth-child(n+4) { animation-delay: .24s; }

  /* The signature: the valuation report is laid down, its second sheet slides
     out from under it, and its band and lines are written in. */
  :is(.hero, .page-hero) .report__page:not(.report__page--back) { animation: settle .9s .15s var(--ease-out) both; }
  :is(.hero, .page-hero) .report__page--back { animation: sheet-out 1.5s .15s var(--ease-out) both; }
  :is(.hero, .page-hero) .report__band { transform-origin: left; animation: draw .7s .55s var(--ease-out) both; }
  :is(.hero, .page-hero) .report__lines span { transform-origin: left; animation: draw .7s .8s var(--ease-out) both; }
  :is(.hero, .page-hero) .report__lines span:nth-child(2) { animation-delay: .9s; }
  :is(.hero, .page-hero) .report__lines span:nth-child(3) { animation-delay: 1s; }

  /* Pop-ups open rather than appear. */
  .menu[open] .menu__panel { animation: drop-in .25s var(--ease-out); }
  .market[open] .market__list { animation: drop-in var(--fast) var(--ease-out); }
}

/* Sections past the first screen: assets/ui.js sets .reveal on the parts not
   yet in view and .is-in as each is reached. Never set in markup, so without
   script nothing is hidden. */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform var(--slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .site-head, .cta-band, .site-foot, .menu, .mobile-cta { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}