/* property-data-web: the shared look, matched to the main site (www).
   Values follow www's app/globals.css and SiteChrome.module.css (site-web 376a6ce): the
   1180px shell, the header and footer, the navy page hero, section headings, buttons, the
   consult form and the hairline grids. Colours, typefaces and the type scale come from
   src/brand.js as custom properties (--c-*, --t-*, --font-sans, --font-serif) and the
   @font-face rules the layout writes into each page; nothing brand-specific is written here.

   Mobile first, at www's breakpoints: phones up to 760px, then 761px, 981px and 1181px
   (where the full header nav appears). No sideways scrolling at 375px: wide tables scroll
   inside .table-wrap. */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main,
section,
article,
aside {
  min-width: 0;
}

/* In-page links land below the sticky header. */
[id] {
  scroll-margin-top: 96px;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 4px;
}

h1,
h2,
h3,
h4 {
  color: var(--c-primary);
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

strong,
b {
  font-weight: 800;
}

.shell {
  width: min(100% - 32px, 620px);
  margin-right: auto;
  margin-left: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-150%);
  padding: 10px 16px;
  background: var(--c-raised);
  color: var(--c-primary);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

/* www's arrow after a link or button label */
.arrow::before {
  content: "\2197";
  content: "\2197" / "";
}

/* ---------- Header (www SiteHeader, solid) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid var(--c-line-on-primary);
  background: var(--c-primary-deep);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c-primary-deep) 18%, transparent);
  color: var(--c-on-primary);
}

.header-inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 1;
}

.brand-wordmark {
  display: inline-block;
  font-size: 30px;
  font-weight: var(--t-wordmark-weight);
  letter-spacing: -0.025em;
}

.desktop-nav {
  display: none;
}

.header-cta {
  display: none;
  flex: 0 0 auto;
  min-height: 47px;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border: 1px solid var(--c-line-on-primary);
  font-size: var(--t-ui-size);
  font-weight: var(--t-ui-weight);
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}

.header-cta:hover {
  background: var(--c-raised);
  color: var(--c-primary);
}

/* The menu for narrow screens: <details>, so it opens without JavaScript. */
.mobile-menu {
  position: relative;
  display: block;
  margin-left: auto;
}

.mobile-menu summary,
.nav-dropdown summary {
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker,
.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.mobile-menu > summary {
  padding: 8px 11px;
  border: 1px solid var(--c-line-on-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-panel {
  position: absolute;
  top: 46px;
  right: 0;
  display: grid;
  width: min(310px, calc(100vw - 32px));
  max-height: calc(100vh - 130px);
  overflow: auto;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--c-primary-deep);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.mobile-panel > a,
.mobile-nav-menu > summary {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-on-primary);
  font-size: 14px;
  font-weight: 700;
}

.mobile-nav-menu > summary,
.mobile-nav-subgroup > summary {
  position: relative;
}

.mobile-nav-menu > summary {
  padding-right: 28px;
}

.mobile-nav-menu > summary::after,
.mobile-nav-subgroup > summary::after {
  position: absolute;
  right: 8px;
  content: "+";
  content: "+" / "";
  font-weight: 500;
}

.mobile-nav-menu[open] > summary::after,
.mobile-nav-subgroup[open] > summary::after {
  content: "\2212";
  content: "\2212" / "";
}

.mobile-nav-menu summary,
.mobile-nav-subgroup summary {
  cursor: pointer;
  list-style: none;
}

.mobile-nav-menu summary::-webkit-details-marker,
.mobile-nav-subgroup summary::-webkit-details-marker {
  display: none;
}

.mobile-nav-menu-groups {
  display: grid;
  padding: 6px 0 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-subgroup > summary {
  padding: 10px 24px 10px 8px;
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-nav-subgroup > div {
  display: grid;
  padding: 0 0 6px 8px;
}

.mobile-nav-subgroup a,
.mobile-nav-menu-links a {
  padding: 9px 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--c-on-primary);
  font-size: 14px;
  font-weight: 650;
}

/* The page being shown: its rule turns gold. */
.mobile-nav-subgroup a[aria-current="page"],
.mobile-nav-menu-links a[aria-current="page"] {
  border-left-color: var(--c-accent);
}

/* ---------- Page hero (www .page-hero) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 42%, var(--c-hero-glow), transparent 29%),
    linear-gradient(120deg, var(--c-primary-deep), var(--c-primary));
}

.page-hero-grid {
  position: absolute;
  inset: 0 0 0 55%;
  opacity: 0.17;
  background-image:
    linear-gradient(var(--c-line-on-primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line-on-primary) 1px, transparent 1px);
  background-size: 72px 72px;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  padding: 90px 0 60px;
}

.page-hero h1 {
  max-width: 850px;
  margin: 0;
  color: var(--c-on-primary);
  font-size: var(--t-hero-size-small);
  font-weight: var(--t-hero-weight);
  letter-spacing: var(--t-hero-tracking);
  line-height: var(--t-hero-leading);
}

.page-hero .lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--c-intro-on-primary);
  font-size: var(--t-hero-intro-size-small);
  line-height: 1.6;
}

.eyebrow,
.page-crumbs {
  margin: 0 0 26px;
  color: var(--c-eyebrow-on-primary);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--t-eyebrow-weight);
  letter-spacing: var(--t-eyebrow-tracking);
  line-height: 1.6;
  text-transform: uppercase;
}

.eyebrow-blue {
  color: var(--c-link);
}

.page-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-crumbs li + li::before {
  content: "/";
  content: "/" / "";
  margin: 0 0.7em;
  opacity: 0.6;
}

.page-crumbs a {
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, color 180ms ease;
}

.page-crumbs a:hover {
  border-bottom-color: currentColor;
  color: var(--c-on-primary);
}

.page-crumbs [aria-current="page"] {
  color: var(--c-on-primary);
}

/* Links under the intro, as www's hero buttons: light, or ghost with .is-quiet. */
.page-hero-actions {
  display: grid;
  gap: 12px;
  margin: 34px 0 0;
}

.page-hero-actions a {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 12px 23px;
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: var(--t-ui-size);
  font-weight: var(--t-ui-weight);
  line-height: 1.35;
  transition: transform 180ms ease, background 180ms ease;
}

.page-hero-actions a::after {
  content: "\2197";
  content: "\2197" / "";
}

.page-hero-actions a:hover {
  transform: translateY(-2px);
  background: var(--c-raised);
}

.page-hero-actions.is-quiet a {
  border: 1px solid var(--c-line-on-primary);
  background: transparent;
  color: var(--c-on-primary);
}

.page-hero-actions.is-quiet a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* A panel beside the heading: www's service promise box. */
.page-hero-aside {
  margin-top: 50px;
}

.hero-panel {
  padding: 30px;
  border: 1px solid var(--c-line-on-primary);
  background: var(--c-panel-on-primary);
}

.hero-panel-label {
  margin: 0 0 10px;
  color: var(--c-accent-on-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---------- Page body ---------- */

/* The body is a run of full-width bands, as on www: each section is a band, paper and
   cream in turn, with no lines between them. The band behind a section reaches the edges
   of the window through a box-shadow that clip-path trims to the section's own height, so
   it never makes the page scroll sideways. A band that ends the body sits flush on the
   consult band: its negative bottom margin takes back the body's bottom padding. */
.page-body {
  padding: 52px 0;
}

.page-body > .shell > h1 {
  margin: 0 0 24px;
  font-size: var(--t-section-size);
  font-weight: var(--t-section-weight);
  letter-spacing: var(--t-section-tracking);
  line-height: var(--t-section-leading);
}

.page-body h2 {
  margin: 0 0 18px;
  font-size: var(--t-section-size);
  font-weight: var(--t-section-weight);
  letter-spacing: var(--t-section-tracking);
  line-height: var(--t-section-leading);
}

.page-body h3 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 470;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-body p,
.page-body li {
  max-width: 760px;
}

.page-body .lead {
  color: var(--c-ink);
  font-size: 19px;
}

/* Links in running text and tables: www's text links (the consent and policy links), navy
   and bold with a full underline in the text colour right under the words. :where() keeps
   these rules weak, so a component's own link style (a tile, a button) wins without
   fighting them. */
.page-body :where(a:not([class])),
.data-note :where(a),
.consult :where(a:not([class])) {
  border-bottom: 1px solid currentColor;
  color: var(--c-primary);
  font-weight: 800;
  text-decoration: none;
  transition: color 180ms ease;
}

.page-body :where(a:not([class])):hover,
.consult :where(a:not([class])):hover {
  color: var(--c-link);
}

/* A section of a page: www's section heading (label, heading, short intro), then content,
   as a full-width band. Every second section is cream. */
.pd-section {
  padding-bottom: 52px;
}

.pd-section + .pd-section {
  padding-top: 52px;
}

.pd-section:nth-of-type(even) {
  background: var(--c-surface);
  box-shadow: 0 0 0 100vmax var(--c-surface);
  clip-path: inset(0 -100vmax);
}

.page-body > .shell > .pd-section:last-child {
  margin-bottom: -52px;
}

.pd-section-head {
  margin-bottom: 28px;
}

.pd-section-head .eyebrow {
  margin: 0 0 14px;
}

.pd-section-head .eyebrow b {
  margin-right: 0.7em;
  color: var(--c-accent);
}

.pd-section-head h2 {
  margin: 0;
}

.pd-section-head > p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--c-muted);
  font-size: var(--t-copy-size);
}

.pd-copy {
  color: var(--c-muted);
  font-size: var(--t-copy-size);
}

.link-list {
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
}

.link-list li {
  border-bottom: 1px solid var(--c-line);
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 0;
  color: var(--c-primary);
  font-weight: 800;
  text-decoration: none;
}

.link-list a::after {
  content: "\2197";
  content: "\2197" / "";
}

/* ---------- Buttons (www .button) ---------- */

.button {
  display: inline-flex;
  min-height: 56px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 0 23px;
  border: 0;
  border-radius: 0;
  background: var(--c-primary);
  color: var(--c-on-primary);
  cursor: pointer;
  font-size: var(--t-ui-size);
  font-weight: var(--t-ui-weight);
  line-height: 1.3;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

a.button::after {
  content: "\2197";
  content: "\2197" / "";
}

a.button[href^="#"]::after {
  content: "\2193";
  content: "\2193" / "";
}

.button:hover {
  transform: translateY(-2px);
  background: var(--c-link);
}

.button-light {
  background: var(--c-surface);
  color: var(--c-primary);
}

.button-light:hover {
  background: var(--c-raised);
}

.button-ghost {
  border: 1px solid var(--c-line-on-primary);
  background: transparent;
  color: var(--c-on-primary);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.button-quiet {
  background: transparent;
  color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.button-quiet:hover {
  background: var(--c-surface);
}

.text-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding-top: 25px;
  border-bottom: 1px solid var(--c-primary);
  color: var(--c-primary);
  font-size: var(--t-ui-size);
  font-weight: var(--t-ui-weight);
}

.text-link::after {
  content: "\2197";
  content: "\2197" / "";
}

/* ---------- Tables (www's fee tables: white, hairline rows and columns, navy head) ---------- */

/* Wide tables scroll inside their box, never the page. position: relative keeps a
   .visually-hidden label inside the table positioned against the box, not the page. */
.table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--c-line);
  background: var(--c-raised);
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--c-link) var(--c-tint);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 12px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  vertical-align: middle;
}

tr > :last-child {
  border-right: 0;
}

thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 0;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

tbody th {
  color: var(--c-ink);
  font-weight: 800;
}

tbody td {
  color: var(--c-primary);
  font-weight: 800;
}

/* Numbers stay right-aligned so they line up: www centres its cells, but they hold ticks
   and short labels, not money. */
td.num,
th.num {
  text-align: right;
}

/* ---------- Forms (www's consult form fields) ---------- */

label {
  display: block;
  margin: 0 0 9px;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--c-field-line);
  border-radius: 0;
  background: var(--c-field);
  color: var(--c-ink);
  font: 500 15px/1.5 var(--font-sans);
  letter-spacing: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

select {
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-link);
  outline: 0;
  background-color: var(--c-raised);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-link) 18%, transparent);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 1px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--c-primary);
}

textarea {
  min-height: 135px;
  resize: vertical;
}

fieldset {
  min-width: 0;
}

/* ---------- Consult form (www .consult-section and .consult-form) ---------- */

.consult-band {
  position: relative;
  overflow: hidden;
  padding: 52px 0;
  background: var(--c-tint);
}

.consult-band::before {
  content: "";
  position: absolute;
  top: -260px;
  right: -210px;
  width: 620px;
  height: 620px;
  border: 1px solid color-mix(in srgb, var(--c-primary) 12%, transparent);
  border-radius: 50%;
}

.consult {
  position: relative;
  z-index: 1;
  padding: 28px;
  border: 1px solid var(--c-line);
  border-color: color-mix(in srgb, var(--c-primary) 17%, transparent);
  background: var(--c-raised);
  background: color-mix(in srgb, var(--c-raised) 82%, transparent);
  box-shadow: 0 32px 80px color-mix(in srgb, var(--c-primary) 9%, transparent);
  backdrop-filter: blur(14px);
}

.consult-head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-line);
}

.consult-head h2 {
  max-width: 700px;
  margin: 0;
  color: var(--c-primary);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.consult-head p {
  max-width: 640px;
  margin: 16px 0 0;
  color: var(--c-muted);
  font-size: var(--t-copy-size);
}

.consult-form {
  display: grid;
  gap: 22px;
  padding-top: 32px;
}

/* "Private consultation" above the heading, as on www's form. */
.consult-head .eyebrow {
  margin: 0 0 26px;
  color: var(--c-link);
  font-size: var(--t-eyebrow-size);
}

.consult-intent {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.consult-intent legend {
  width: 100%;
  margin-bottom: 24px;
  padding: 0;
  color: var(--c-primary);
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.3;
}

.consult-intent .consult-field-error {
  grid-column: 1 / -1;
}

/* An intent tile: www's, with the radio at the top, the choice in the serif face and a
   line about it. */
.consult-choice {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.58);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.consult-choice:hover,
.consult-choice:focus-within,
.consult-choice:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-raised);
  box-shadow: inset 0 4px 0 var(--c-accent);
}

.consult-choice label {
  margin: 20px 0 0;
  color: var(--c-primary);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.consult-choice p {
  margin: 16px 0 0;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* The whole tile is the radio's click target; the radio itself stays on top of it. */
.consult-choice input {
  position: relative;
  z-index: 1;
}

.consult-choice label::after {
  content: "";
  position: absolute;
  inset: 0;
}

.consult-field {
  min-width: 0;
}

.consult-hint {
  margin: 8px 0 0;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.45;
}

.consult-field-error {
  margin: 0 0 9px;
  color: var(--c-error);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.consult-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.55);
}

.consult-check label {
  margin: 0;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.consult-numbers {
  margin: -10px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--c-line);
  border-top: 0;
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.consult-numbers summary {
  color: var(--c-primary);
  cursor: pointer;
  font-weight: 800;
}

.consult-notice {
  max-width: 760px;
  margin: 24px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface);
  color: var(--c-notice);
  font-size: 14px;
  font-weight: 700;
}

.consult-errors {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--c-error);
  border-left-width: 3px;
  background: var(--c-raised);
  font-size: 14px;
}

.consult-errors h3 {
  margin: 0 0 8px;
  color: var(--c-error);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}

.consult-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.consult-errors a {
  color: var(--c-error);
  font-weight: 800;
}

.consult-form .consult-errors {
  margin: 0;
}

.consult-noscript,
.consult-status {
  margin: 0;
  color: var(--c-muted);
  font-size: 13px;
}

.consult-status:empty {
  display: none;
}

.consult-actions {
  margin: 4px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--c-line);
}

.consult-actions button {
  display: inline-flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 23px;
  border: 0;
  border-radius: 0;
  background: var(--c-primary);
  color: var(--c-on-primary);
  cursor: pointer;
  font-size: var(--t-ui-size);
  font-weight: var(--t-ui-weight);
  transition: transform 180ms ease, background 180ms ease;
}

.consult-actions button::after {
  content: "\2197";
  content: "\2197" / "";
}

.consult-actions button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--c-link);
}

.consult-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.consult-sent {
  padding: 28px 0 0;
  outline: 0;
}

.consult-sent h3 {
  margin: 0;
  color: var(--c-primary);
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.consult-sent p {
  max-width: 660px;
  margin: 18px 0 0;
  color: var(--c-muted);
}

/* ---------- Footer (www SiteFooter) ---------- */

.site-footer {
  padding: 65px 0 28px;
  background: var(--c-primary-deep);
  color: var(--c-on-primary);
}

/* Above www's footer: these pages' own sections, and on a data page its source. */
.footer-data {
  display: grid;
  gap: 22px;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-line-on-primary);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
}

.site-nav-label {
  margin: 0;
  color: var(--c-accent-on-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-transform: uppercase;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  color: var(--c-footer-link);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}

.site-nav a {
  transition: color 180ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--c-on-primary);
}

.site-nav a[aria-current="page"] {
  border-bottom: 1px solid var(--c-accent);
}

.data-note {
  max-width: 900px;
  color: var(--c-footer-link);
  font-size: 14px;
  line-height: 1.6;
}

.data-note p {
  margin: 0 0 6px;
}

.data-note p:last-child {
  margin-bottom: 0;
}

.data-note strong {
  color: var(--c-on-primary);
}

.data-note a {
  color: var(--c-on-primary);
}

.footer-top,
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  color: var(--c-footer-link);
  font-size: 14px;
  font-weight: 700;
}

.footer-links a {
  transition: color 180ms ease;
}

.footer-links a:hover {
  color: var(--c-on-primary);
}

.footer-bottom {
  margin-top: 55px;
  padding-top: 25px;
  border-top: 1px solid var(--c-line-on-primary);
  color: var(--c-footer-legal);
  font-size: 12px;
}

.footer-bottom p {
  margin: 0;
}

/* ---------- 761px and wider (www's tablet and desktop) ---------- */

@media (min-width: 761px) {
  .shell {
    width: min(1180px, calc(100% - 48px));
  }

  .header-inner {
    min-height: 92px;
  }

  .brand-wordmark {
    font-size: var(--t-wordmark-size);
  }

  .header-cta {
    display: inline-flex;
    margin-left: auto;
  }

  .mobile-menu {
    margin-left: 0;
  }

  .page-hero-inner {
    padding: 90px 0 70px;
  }

  .page-hero h1 {
    font-size: var(--t-hero-size);
  }

  .page-hero .lead {
    font-size: var(--t-hero-intro-size);
  }

  .page-hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .page-body {
    padding: 80px 0;
  }

  .pd-section {
    padding-bottom: 80px;
  }

  .pd-section + .pd-section {
    padding-top: 80px;
  }

  .page-body > .shell > .pd-section:last-child {
    margin-bottom: -80px;
  }

  .pd-section-head {
    display: grid;
    grid-template-columns: 0.75fr 1.2fr 0.7fr;
    align-items: start;
    gap: 50px;
    margin-bottom: 40px;
  }

  .pd-section-head .eyebrow {
    margin: 14px 0 0;
  }

  .pd-section-head > p:not(.eyebrow) {
    margin: 7px 0 0;
  }

  /* Without a label the heading takes the first two columns. */
  .pd-section-head > h2:first-child {
    grid-column: 1 / 3;
  }

  .button {
    width: auto;
  }

  thead th {
    padding: 18px 14px;
  }

  tbody th {
    padding: 17px 20px;
  }

  tbody td {
    padding: 15px 14px;
  }

  .consult-band {
    padding: 80px 0;
  }

  .consult {
    padding: clamp(28px, 4vw, 50px);
  }

  .consult-head {
    padding-bottom: 32px;
  }

  .consult-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 30px;
    padding-top: 36px;
  }

  .consult-form > :not(.consult-field) {
    grid-column: 1 / -1;
  }

  .consult-field-wide {
    grid-column: 1 / -1;
  }

  .consult-intent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .consult-choice {
    min-height: 196px;
  }

  .consult-choice label {
    margin-top: 30px;
  }

  .consult-actions {
    display: flex;
    justify-content: flex-end;
  }

  .consult-actions button {
    width: auto;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 981px) {
  /* www's page hero: at least 440px tall (its fee guide, the text-only hero), the copy
     centred, and a panel beside it that sits low, like www's service promise box. */
  .page-hero-inner {
    display: grid;
    min-height: 440px;
    align-content: center;
    padding: 85px 0;
  }

  .page-hero-inner.has-aside {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.55fr);
    align-items: center;
    gap: 90px;
  }

  .page-hero-aside {
    align-self: end;
    margin: 0 0 30px;
  }

  .consult-intent {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-links {
    min-width: 0;
    justify-content: flex-end;
    gap: 16px 30px;
  }
}

@media (min-width: 1181px) {
  .desktop-nav {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    /* The least room between two items. The nav spreads its items over the width it has
       (space-between), so this only shows when they barely fit. With www's clamp(13px,
       1.35vw, 22px), the three dropdowns run the last link into the button at 1181px wide
       and crowd it up to about 1220px; 12px keeps it clear. Where the items fit, the
       spacing is the same as www's. */
    gap: 12px;
    margin-left: auto;
    font-size: var(--t-nav-size);
    font-weight: var(--t-nav-weight);
  }

  .desktop-nav a,
  .desktop-nav summary {
    position: relative;
    white-space: nowrap;
    opacity: 0.78;
    transition: opacity 180ms ease;
  }

  .desktop-nav a:hover,
  .desktop-nav a:focus-visible,
  .nav-dropdown[open] summary,
  .nav-dropdown summary:hover,
  .nav-dropdown summary:focus-visible,
  .desktop-nav .nav-listings {
    opacity: 1;
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown summary::after {
    margin-left: 6px;
    content: "\2304";
    content: "\2304" / "";
    font-size: 12px;
  }

  .nav-dropdown-panel {
    position: absolute;
    top: 34px;
    left: -18px;
    display: grid;
    width: min(690px, calc(100vw - 48px));
    grid-template-columns: 0.78fr 1.12fr 1.2fr;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--c-primary-deep);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  }

  /* A one-column panel for a short list, such as Valuation (www's desktopPanelSingle). */
  .nav-dropdown-panel-single {
    width: min(240px, calc(100vw - 48px));
    grid-template-columns: 1fr;
  }

  .nav-dropdown-group {
    display: grid;
    align-content: start;
    padding: 18px 20px 20px;
  }

  .nav-dropdown-group + .nav-dropdown-group {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-dropdown-title {
    margin: 0 0 8px;
    color: var(--c-accent);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .nav-dropdown-links {
    display: grid;
    align-content: start;
  }

  .desktop-nav .nav-dropdown-links a {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--c-on-primary);
    font-size: 14px;
    line-height: 1.35;
    opacity: 0.8;
  }

  .desktop-nav .nav-dropdown-links a:hover {
    opacity: 1;
  }

  /* The page being shown, in its dropdown: the link's rule turns gold, and the label that
     opens the dropdown stays at full strength. */
  .desktop-nav .nav-dropdown-links a[aria-current="page"] {
    border-bottom-color: var(--c-accent);
    opacity: 1;
  }

  .nav-dropdown:has([aria-current="page"]) > summary {
    opacity: 1;
  }

  .header-cta {
    margin-left: 0;
  }

  .mobile-menu {
    display: none;
  }
}

/* A header with more items than www's ten (src/layout.js adds .header-inner-wide; today only
   with the StackSight tab, STACKSIGHT_MENU on). At 14px the eleven items need about 936px
   with 12px between them, and the 1180px shell leaves the nav 853px to 897px, so they would
   run into the "Speak with us" button at every width. The header takes a 1280px shell from
   1280px wide, and keeps the Menu button below that. */
@media (min-width: 1181px) and (max-width: 1279.98px) {
  .header-inner-wide .desktop-nav {
    display: none;
  }

  .header-inner-wide .header-cta {
    margin-left: auto;
  }

  .header-inner-wide .mobile-menu {
    display: block;
  }
}

@media (min-width: 1280px) {
  .shell.header-inner-wide {
    width: min(1280px, calc(100% - 48px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .button:hover,
  .consult-actions button:hover:not(:disabled) {
    transform: none;
  }
}

@media print {
  .site-header,
  .skip-link,
  .site-nav,
  .page-hero-grid {
    display: none !important;
  }

  .page-hero,
  .page-hero::before {
    background: none;
    color: var(--c-ink);
  }

  .page-hero h1 {
    color: var(--c-primary);
  }
}