/* =========================================================================
   Washington Business Brokers
   -------------------------------------------------------------------------
   Direction: premium, classic, editorial. Deep navy grounds, warm ivory
   sections, brass accent, high-contrast serif display over a neutral sans.

     · Navy #0F1D36 for hero, bands and footer. Ivory #F7F3EA for sections.
     · Brass #C9A961: buttons, eyebrows, rules, the italic half of a headline.
     · Lora for display type; Inter for everything operational.
     · Square corners, hairline rules, image-led cards.
     · Eyebrows are letterspaced caps in brass. No dash, no rule beside them.

   Order: tokens → reset → primitives → components → templates → utilities.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
  /* Navy */
  --navy-900: #091528;
  --navy-800: #0D1B33;
  --navy:     #0F1D36;
  --navy-700: #16294A;
  --navy-600: #23385C;

  /* Ivory / paper */
  /* Light grounds: white and the client-chosen grey. Nothing else. */
  --ivory:    #F0F0F0;
  --ivory-2:  #F0F0F0;
  --ivory-3:  #E6E6E6;
  --white:    #FFFFFF;

  /* Brass */
  --brass:      #C9A961;
  --brass-lt:   #DCC287;
  --brass-dp:   #AE8D46;
  --brass-txt:  #8A6E2C;   /* AA on ivory: the display brass is not */
  --brass-hair: rgba(201, 169, 97, .34);

  /* Text */
  --ink:   #14243F;
  --ink-2: #55534C;
  --ink-3: #7B776D;

  --line:      #E3DBCB;
  --line-2:    #D2C8B4;
  --line-cool: rgba(20, 36, 63, .10);

  --on-dark:      #FFFFFF;
  --on-dark-2:    rgba(255, 255, 255, .86);
  --on-dark-3:    rgba(255, 255, 255, .70);
  --on-dark-line: rgba(255, 255, 255, .18);

  --ok: #2C6A4E;
  /* Same hue as --ok, lifted so it still reads as green at fifteen pixels. */
  --live: #35B36B;

  /* Type */
  --display: "Lora", "Iowan Old Style", Georgia, serif;
  --sans:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-micro: .6875rem;
  --fs-xs:    .75rem;
  --fs-sm:    .8125rem;
  --fs-base:  .875rem;
  --fs-body:  .9375rem;
  --fs-lg:    1.0625rem;

  --fs-h3: 1.1875rem;
  --fs-h2: clamp(1.75rem, 1.9vw + 1.15rem, 2.5rem);
  --fs-h1: clamp(2.25rem, 3vw + 1.35rem, 3.5rem);
  --fs-stat: clamp(1.5rem, 1.2vw + 1.1rem, 1.875rem);

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.375rem; --s-6: 1.875rem; --s-7: 2.5rem; --s-8: 3.25rem;
  --s-9: 4.25rem;
  --s-band: clamp(3.75rem, 5.5vw, 5.75rem);

  --shell: 1250px;
  --gutter: clamp(1.25rem, 3.4vw, 2.75rem);
  --radius: 2px;

  --shadow-sm: 0 1px 2px rgba(9, 21, 40, .05);
  --shadow-md: 0 1px 3px rgba(9, 21, 40, .06), 0 14px 32px -20px rgba(9, 21, 40, .28);
  --shadow-lg: 0 2px 8px rgba(9, 21, 40, .07), 0 34px 60px -34px rgba(9, 21, 40, .42);

  --ease: cubic-bezier(.3, .7, .4, 1);
  --header-h: 74px;
}

/* --------------------------------------------------------------- 2. Reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--brass-txt); text-decoration: none; }
/* Note the specificity: (0,1,1). It outranks `.btn` at (0,1,0), which is why
   every anchor button used to turn ink blue on hover whatever its own rule
   said. The cure is on .btn:hover rather than an :is()/:not() exclusion here,
   because excluding would push this rule to (0,2,1) and it would start beating
   the single-class hovers, .link-arrow:hover among them. */
a:hover { color: var(--ink); }

:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: 600; line-height: 1.24; color: var(--ink); }
:where(p, ul, ol, figure, blockquote, dl) { margin: 0; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
::selection { background: var(--brass); color: var(--navy-900); }

.skip-link { position: absolute; left: -9999px; z-index: 999; padding: var(--s-3) var(--s-5); background: var(--navy); color: var(--on-dark); }
.skip-link:focus { left: var(--s-4); top: var(--s-4); color: var(--on-dark); }

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

/* ----------------------------------------------------------- 3. Primitives */

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

.section { padding-block: var(--s-band); }
.section--tint  { background: var(--ivory-2); }
.section--paper { background: var(--white); }
.section--dark  { background: var(--navy); color: var(--on-dark); }

.section__head { margin-bottom: var(--s-7); max-width: 46rem; }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head-text { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.72; max-width: 44ch; margin-top: var(--s-3); }
.section--dark .section__head-text { color: var(--on-dark-2); }
.section__foot { margin-top: var(--s-7); }

/* Head with a right-hand supporting column and a trailing link. */
.section__head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4) var(--s-7); align-items: end; max-width: none;
}
@media (max-width: 860px) { .section__head--split { grid-template-columns: 1fr; align-items: start; } }

/* Eyebrow: brass letterspaced caps. Nothing beside it. */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass-txt);
  margin-bottom: var(--s-4);
}
.eyebrow--gold, .section--dark .eyebrow, .hero .eyebrow,
.casestudy .eyebrow, .siteftr__cta .eyebrow, .proof .eyebrow,
.why .eyebrow { color: var(--brass); }

.h2 {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: -.008em;
  text-wrap: balance;
  color: var(--ink);
}
.h2--light { color: var(--on-dark); }
.h2 em { font-style: italic; color: var(--brass-txt); }
.h2--light em { color: var(--brass); }

.lede { font-size: var(--fs-lg); line-height: 1.68; color: var(--ink-2); max-width: 46ch; }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.checklist li {
  display: grid; grid-template-columns: 1.05rem 1fr; gap: var(--s-3);
  align-items: start; font-size: var(--fs-body); color: var(--ink-2); line-height: 1.62;
}
.tick { color: var(--brass-dp); margin-top: .34em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
}
.link-arrow:hover { color: var(--brass-txt); }
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
/* On a dark ground the resting colour flips to ivory, and the hover has to flip
   with it: --brass-txt is the darkened brass that passes AA on ivory, and it
   goes muddy on navy. */
.section--dark .link-arrow, .siteftr__cta .link-arrow { color: var(--on-dark); }
.section--dark .link-arrow:hover, .siteftr__cta .link-arrow:hover { color: var(--brass); }

/* ------------------------------------------------------------- 4. Buttons */

.btn {
  --btn-bg: var(--brass);
  --btn-fg: var(--navy-900);
  --btn-bd: var(--brass);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1.35em 2.1em;
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
/* `color` is restated here rather than left to .btn, which only scores (0,1,0)
   and loses the hovered state to the generic a:hover at (0,1,1). At (0,2,0)
   this wins, and it also holds against stray link rules from plugin
   stylesheets. */
.btn:hover { --btn-bg: var(--brass-lt); --btn-bd: var(--brass-lt); --btn-fg: var(--navy-900); color: var(--btn-fg); }

.btn--gold { --btn-bg: var(--brass); --btn-bd: var(--brass); --btn-fg: var(--navy-900); }
.btn--primary { --btn-bg: var(--navy); --btn-bd: var(--navy); --btn-fg: var(--on-dark); }
.btn--primary:hover { --btn-bg: var(--brass); --btn-bd: var(--brass); --btn-fg: var(--navy-900); }
.btn--outline { --btn-bg: transparent; --btn-bd: var(--line-2); --btn-fg: var(--ink); }
.btn--outline:hover { --btn-bg: var(--navy); --btn-bd: var(--navy); --btn-fg: var(--on-dark); }
/* The secondary button on a dark ground. It fills on hover rather than just
   recolouring its edge, so the press is unmistakable, and it fills with ivory
   rather than gold: it sits next to the gold button, and two gold buttons would
   read as two primaries. */
.btn--outline-light { --btn-bg: transparent; --btn-bd: rgba(255, 255, 255,.45); --btn-fg: var(--on-dark); }
.btn--outline-light:hover { --btn-bg: var(--on-dark); --btn-bd: var(--on-dark); --btn-fg: var(--navy-900); }
.btn--ghost { --btn-bg: transparent; --btn-bd: var(--line-2); --btn-fg: var(--ink); }
.btn--sm { padding: 1em 1.5em; }
.btn--lg { padding: 1.05em 2em; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Bottom left, not top left. Every listing photograph carries a baked-in WBB
   lockup at the top left and, when it applies, a gold "Under Contract"
   ribbon at the top right. The live badge landed on both. The status is
   worth rendering ourselves - it changes, and a baked ribbon means recutting
   the artwork every time it does - so it is the badge that moves. */
.badge {
  position: absolute; bottom: 0; left: 0;
  padding: .5em .85em;
  background: var(--navy); color: var(--on-dark);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1;
}
/* Brass reads as available, navy as spoken for: the distinction a buyer
   scanning the strip actually needs. */
.badge--active { background: var(--brass); color: var(--navy-900); }
.badge--sold { background: var(--ok); }
.badge--under-contract { background: var(--navy); color: var(--brass); }

/* --------------------------------------------------------- 5. Utility bar */

.utility { background: var(--navy-900); color: var(--on-dark-2); font-size: var(--fs-xs); }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 34px; }
.utility__claim { display: flex; align-items: center; gap: .6em; letter-spacing: .02em; }
.utility__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); flex: none; }
.utility__links { display: flex; align-items: center; gap: var(--s-5); }
.utility__link, .utility__phone { color: var(--on-dark-2); display: inline-flex; align-items: center; gap: .4em; }
.utility__link:hover, .utility__phone:hover { color: var(--brass); }
.utility__phone { color: var(--on-dark); font-weight: 600; }

@media (max-width: 760px) { .utility__claim { display: none; } .utility__inner { justify-content: center; } }

/* ------------------------------------------------------------- 6. Masthead */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid var(--on-dark-line);
}
.masthead.is-stuck { box-shadow: 0 8px 26px -18px rgba(0, 0, 0, .8); }
.masthead__inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }

/* Front page: the header floats over the hero photograph, as in the comp:
   transparent, no hairline, a little taller. It stays on the same 1250px
   shell as the hero copy so the logo and the eyebrow share a left edge at
   every viewport width. Interior pages keep the solid bar. */
.home .masthead { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; }
.home .masthead.is-stuck { box-shadow: none; }
.home .masthead__inner { min-height: 88px; }

.brand__link { display: inline-flex; align-items: center; gap: .7rem; color: var(--on-dark); }
/* The wordmark is an image, so this only shows on the text fallback, but that
   fallback sits on navy in both the header and the footer and would otherwise
   take the generic ink hover and disappear. */
.brand__link:hover { color: var(--brass); }
.brand__mark { flex: none; color: var(--brass); }
.brand__words { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display);
  font-size: 1.0625rem; font-weight: 500;
  letter-spacing: .085em; text-transform: uppercase; color: var(--on-dark);
}
.brand__sub {
  font-size: .5rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass); margin-top: 3px;
}
.custom-logo { max-height: 44px; width: auto; }

.masthead__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

/* --------------------------------------------------------- 7. Desktop nav */

/* One value for the space around a top-level link, because the brass underline
   is positioned to match it and the two silently drift apart otherwise.
   Widened once the buy side collapsed into a single Buying menu: six items have
   room that seven did not. */
.nav { margin-left: auto; --nav-pad: 1.35rem; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav__item { position: relative; display: flex; align-items: center; }

.nav__link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .6rem var(--nav-pad, .85rem);
  border: 0; background: none;
  color: var(--on-dark-2);
  font-size: calc(var(--fs-sm) + 1px); font-weight: 500;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__item--depth-0 > .nav__link:hover,
.nav__item--depth-0.is-current > .nav__link { color: var(--on-dark); }

.nav__item--depth-0::after {
  content: ""; position: absolute;
  left: var(--nav-pad, .85rem); right: var(--nav-pad, .85rem); bottom: -1px; height: 1.5px;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__item--depth-0:hover::after,
.nav__item--depth-0.is-current::after,
.nav__item--depth-0:focus-within::after { transform: scaleX(1); }

/* The carets are a hint, not a control: kept tight so eight top-level items
   still fit one row without the arrows eating the spacing between them. */
.nav__toggle { border: 0; background: none; padding: .6rem .1rem; color: var(--on-dark-3); display: inline-flex; align-items: center; }
/* The caret has to sit against its own label, not float between two of them.
   Pulling back by the link's padding does that and keeps doing it: hardcoding
   the offset meant widening --nav-pad pushed every caret away from its word. */
.nav__item--depth-0 > .nav__toggle { margin-left: calc(.4rem - var(--nav-pad, .85rem)); }
.nav__toggle .nav__chevron { width: 12px; height: 9px; }
.nav__chevron { transition: transform .24s var(--ease); }
[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.submenu {
  list-style: none; margin: 0; padding: .4rem;
  position: absolute; top: calc(100% + 1px); left: 0;
  /* Wide enough for the longest item the client has, which is "Mergers &
     Acquisitions ($5M+)". The box is absolutely positioned, so letting it
     size to its content costs the layout nothing and stops a service name
     breaking across two lines. */
  min-width: 15.5rem;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 70;
}
.submenu--depth-2 { top: -.4rem; left: 100%; border-top: 1px solid var(--line); border-left: 2px solid var(--brass); }

.nav__item--parent:hover > .submenu,
.nav__item--parent:focus-within > .submenu,
.nav__item--parent.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu .nav__item { display: flex; align-items: center; }
.submenu .nav__item::after { display: none; }
.submenu .nav__link { flex: 1; padding: .5rem .7rem; white-space: nowrap; color: var(--ink-2); }
.submenu .nav__link:hover { background: var(--ivory); color: var(--ink); }
.submenu .nav__toggle { padding: .5rem; color: var(--ink-3); }
.nav__item--depth-0:nth-last-child(-n+3) .submenu--depth-2 { left: auto; right: 100%; border-left: 1px solid var(--line); border-right: 2px solid var(--brass); }

@media (max-width: 1240px) { .nav { display: none; } }

.burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--on-dark-line); background: transparent; }
.burger__bars { display: grid; gap: 4px; width: 17px; }
.burger__bars i { display: block; height: 1.5px; background: var(--on-dark); transition: transform .26s var(--ease), opacity .16s var(--ease); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1240px) { .burger { display: inline-flex; } .masthead__actions .btn { display: none; } }

/* ---------------------------------------------------------- 8. Mobile nav */

.mobile-nav { position: fixed; inset: var(--header-h) 0 0; z-index: 55; background: var(--ivory); overflow: hidden; }
.mobile-nav[hidden] { display: none; }
.mobile-nav__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3) var(--gutter) var(--s-9); -webkit-overflow-scrolling: touch; }

.nav__list--mobile { display: block; }
.nav__list--mobile .nav__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.nav__list--mobile .nav__item::after { display: none; }
.nav__list--mobile .nav__item--depth-0 > .nav__link {
  flex: 1; padding: 1rem 0;
  font-family: var(--display); font-size: 1.25rem; font-weight: 400; color: var(--ink);
}
/* 19x36 before: the only route to about thirty sub-pages on a phone, and a
   miss landed on the parent link and navigated away. */
.nav__list--mobile .nav__toggle { padding: .95rem 1rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
/* A parent with no page of its own ("Areas Served") is rendered as one button
   holding both label and caret, so the caret has to be pushed to the edge
   itself: otherwise it sits mid-row while every other caret is right-aligned. */
.nav__list--mobile .nav__item--depth-0 > .nav__link--toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.nav__list--mobile .nav__item--depth-0 > .nav__link--toggle .nav__chevron { color: var(--ink-3); margin-right: .35rem; }
.nav__list--mobile .submenu { width: auto; max-width: none;
  position: static; width: 100%; flex-basis: 100%; min-width: 0;
  border: 0; box-shadow: none; background: transparent;
  padding: 0 0 var(--s-3) var(--s-4);
  opacity: 1; visibility: visible; transform: none; display: none;
}
.nav__list--mobile .nav__item.is-open > .submenu { display: block; }
.nav__list--mobile .submenu .nav__item { border-bottom: 0; }
.nav__list--mobile .submenu .nav__link { padding: .48rem 0; font-size: var(--fs-body); color: var(--ink-2); white-space: normal; }
.nav__list--mobile .submenu--depth-2 { border-left: 1px solid var(--line); padding-left: var(--s-4); }

.mobile-nav__foot { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.mobile-nav__phone { text-align: center; font-family: var(--display); font-size: 1.5rem; color: var(--navy); padding-top: var(--s-2); }

body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------- 9. Hero */

/* Hero + stats bar together fill the first screen exactly: the fold is
   100svh, the stats bar takes its natural height, the hero absorbs the rest. */
.fold { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.fold .hero { flex: 1 1 auto; display: flex; }
@media (max-width: 900px) { .fold { min-height: 0; } }

.hero { position: relative; background: var(--navy); color: var(--on-dark); overflow: hidden; }

/* The supplied comp background is a full-width composition: navy on the left,
   skyline on the right, so it covers the whole band; the scrim only insures
   text contrast over the left half.

   The homepage keeps the whole photograph, water and treeline included. The
   waterline crop and the baseline anchoring are for the interior heroes only,
   which are a third of this height and where the water was all you saw. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }

/* The film fills the band the same way the still does, and is framed the same
   way: the interesting third of a skyline shot is right of centre, and the left
   is where the headline sits. */
.hero__film {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  display: block;
}

/* A moving picture is brighter and busier than a still, so the left has to be
   carried further and deeper before the headline sits on it comfortably. Same
   shape as the still's scrim, weighted up. */

/* Nobody asked to watch this, so it stops for anyone who has said they would
   rather things held still. The poster stays. */
/* The still behind the film, always painted. It is what shows on a phone in
   Low Power Mode, on a slow line, and to anyone who asked for less motion. */
.hero__bg--film {
  background-size: cover;
  background-position: 72% 50%;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .hero__film { display: none; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,29,54,.45), rgba(15,29,54,0) 20%),
    linear-gradient(90deg, rgba(15,29,54,.72) 0%, rgba(15,29,54,.5) 34%, rgba(15,29,54,.12) 55%, rgba(15,29,54,0) 72%);
}

/* After .hero__scrim, not before it: both are one class deep, so whichever is
   written last wins. The element carries both, and for a long time this one
   sat above the base rule and therefore never applied at all.

   Deeper on the left than the still photograph needs, because a bright aerial
   in full sun is nothing like a dusk skyline, and cleared sooner on the right
   so the city is left alone. */
.hero__scrim--film {
  background:
    linear-gradient(180deg, rgba(15,29,54,.55), rgba(15,29,54,0) 22%),
    linear-gradient(90deg, rgba(15,29,54,.94) 0%, rgba(15,29,54,.86) 30%, rgba(15,29,54,.64) 45%, rgba(15,29,54,.34) 60%, rgba(15,29,54,.18) 75%, rgba(15,29,54,.16) 100%);
}

/* Thin brass rule closing the CTA group: from the comp. */
.hero__rule {
  display: block;
  width: 11.5rem; height: 1px;
  background: linear-gradient(90deg, var(--brass), rgba(201,169,97,0));
  margin-top: var(--s-6);
}

.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-8);
  /* The header overlays the hero: top padding clears it, and the copy
     centers itself in whatever height the fold hands the hero. */
  padding-block: calc(88px + 1.5rem) 2.5rem;
}
/* Wide enough that the italic second line holds as one line. */
.hero__copy { max-width: 42rem; }

.hero__title {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--white);
  margin-bottom: var(--s-5);
}
.hero__title-a, .hero__title-b { display: block; text-wrap: balance; }
.hero__title-b { font-style: italic; color: var(--brass); }

.hero__lede { font-size: var(--fs-body); line-height: 1.75; color: var(--on-dark-2); max-width: 26rem; margin-bottom: var(--s-6); }
.hero__lede strong { color: var(--white); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }

.hero__trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--on-dark-line); max-width: 26rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-sm); color: var(--on-dark-2); }
.hero__trust .tick { color: var(--brass); margin: 0; }

.hero__proof {
  align-self: end; justify-self: end;
  width: min(17.5rem, 100%);
  padding: var(--s-5);
  background: rgba(9, 21, 40, .78);
  border: 1px solid var(--on-dark-line);
  border-top: 2px solid var(--brass);
}
.hero__proof-k { padding-bottom: var(--s-3); border-bottom: 1px solid var(--on-dark-line); margin-bottom: var(--s-3); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); }
.hero__proof-v { font-family: var(--display); font-size: 1.1875rem; line-height: 1.3; color: var(--white); text-wrap: balance; }
.hero__proof-m { font-size: var(--fs-sm); color: var(--on-dark-3); margin-top: var(--s-2); }
.hero__proof-link { display: inline-flex; align-items: center; gap: .45em; margin-top: var(--s-4); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.hero__proof-link:hover { color: var(--white); }
.hero__proof-link svg { transition: transform .25s var(--ease); }
.hero__proof-link:hover svg { transform: translateX(3px); }

@media (max-width: 1040px) {
  .hero__bg { width: 100%; }
  .hero__scrim,
  .hero__scrim--film { background: linear-gradient(90deg, rgba(15,29,54,.96) 0%, rgba(15,29,54,.86) 55%, rgba(15,29,54,.6) 100%), linear-gradient(to top, rgba(9,21,40,.6), transparent 45%); }

  /* The film plays on a phone too, at the client's request. iOS still refuses
     to autoplay in Low Power Mode, and that is exactly why the still is
     painted behind it rather than carried as the video's poster: when the
     film does not run, the photograph is already there. */
  .hero__inner { grid-template-columns: 1fr; }
  .hero__proof { justify-self: start; }
}
@media (max-width: 640px) {
  .hero__inner { min-height: 0; padding-block: calc(76px + 1.25rem) var(--s-6); }
  .hero__actions { gap: .65rem; margin-bottom: var(--s-5); }
  .hero__actions .btn { flex: 1 1 100%; padding-block: 1.15em; }
  /* The eyebrow is long enough to wrap on a phone; let it, but tighten it so
     the two lines read as one label. */
  .hero .eyebrow { line-height: 1.5; margin-bottom: var(--s-3); }
  .hero__lede { font-size: var(--fs-body); margin-bottom: var(--s-5); }
  .hero__rule { margin-top: var(--s-5); }
  .home .masthead__inner { min-height: 76px; }
}

/* ------------------------------------------------------- 10. Proof / stats */

.proof { background: var(--navy-800); color: var(--on-dark); }
.proof__grid { display: grid; grid-template-columns: repeat(var(--proof-cols, 4), 1fr); margin: 0; }
.proof__item {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 1.125rem;
  padding: 1.5rem var(--s-4) 1.5rem var(--s-7);
}
.proof__item--lede:first-child { padding-left: 0; }
/* Short centered hairline between items, as in the comp, not full height. */
.proof__item + .proof__item::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 3.25rem;
  background: var(--on-dark-line);
}
.proof__item--lede { grid-template-columns: 1fr; }

/* The figures sit centred in their quarter of the strip. Each cell is an
   equal 1fr but the content is not: "10+" is a third the width of
   "$2M–$30M", so left-aligning them left the short one stranded
   against its divider. Centring evens them out whatever the figures say. */
.proof__item:not(.proof__item--lede) {
  grid-template-columns: auto auto;
  justify-content: center;
  padding-left: var(--s-5); padding-right: var(--s-5);
}

/* The lead-in names what the three figures beside it are. It is set as a
   label rather than a heading because it is read with them, not before them:
   "owners we help: two to thirty million, ten plus, seventy-five percent". */
.proof__lede {
  margin: 0;
  /* One line. Broken over two it reads as a heading sitting above the strip
     rather than as the first half of the sentence the figures finish. */
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--brass);
}

.proof__icon { color: var(--brass); display: flex; width: 42px; justify-content: center; }
.proof__icon svg { width: 42px; height: 42px; }
/* Optical corrections: these two draw larger inside their box than the rest. */
.proof__icon .icon--star  { width: 38px; height: 38px; }
.proof__icon .icon--users { width: 44px; height: 44px; }
.proof__figure {
  font-family: var(--display);
  font-size: var(--fs-stat);
  font-weight: 500; line-height: 1.1;
  color: var(--brass-lt);
  font-variant-numeric: tabular-nums lining-nums;
  /* A figure must never break mid-value: "$2M–$30M" over two lines reads as
     two separate numbers. */
  white-space: nowrap;
}
.proof__label { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--on-dark-2); line-height: 1.4; white-space: nowrap; }

@media (max-width: 900px) {
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .proof__item:nth-child(odd) { padding-left: 0; }
  .proof__item:nth-child(odd)::before { display: none; }
  .proof__label { white-space: normal; }
  .proof__item--lede { grid-column: 1 / -1; padding-bottom: 0; }
  /* The lead-in owns the whole first row, which flips which items start a row:
     after it, the even-numbered ones sit at the left edge. Without this the
     hairline meant to divide a pair lands against the shell instead. */
  .proof__item--lede ~ .proof__item:nth-child(odd) { padding-left: var(--s-7); }
  .proof__item--lede ~ .proof__item:nth-child(odd)::before { display: block; }
  .proof__item--lede ~ .proof__item:nth-child(even) { padding-left: 0; }
  .proof__item--lede ~ .proof__item:nth-child(even)::before { display: none; }
}
/* Two-by-two on a phone rather than four stacked rows: the figures are short,
   and stacking them pushed the whole first screen down. */
@media (max-width: 560px) {
  .proof__item { padding: 1.1rem var(--s-3) 1.1rem var(--s-4); gap: .75rem; }
  .proof__item:nth-child(odd) { padding-left: 0; }
  .proof__icon, .proof__icon svg,
  .proof__icon .icon--star, .proof__icon .icon--users { width: 30px; height: 30px; }
  .proof__figure { font-size: 1.25rem; }
  .proof__label { font-size: var(--fs-micro); line-height: 1.35; }
  .proof__lede { font-size: var(--fs-xs); letter-spacing: .14em; }
  .proof__item + .proof__item::before { height: 2.5rem; }
  /* Same flip as above, at this breakpoint's tighter padding. */
  .proof__item--lede ~ .proof__item:nth-child(odd) { padding-left: var(--s-4); }
  .proof__item--lede ~ .proof__item:nth-child(even) { padding-left: 0; }
}

/* ------------------------------------------------------ 11. Founder split */

/* Photograph and copy both sit inside the shell; nothing bleeds off the edge.
   A brass outline sits behind the photograph, offset down and right. */
.about { padding-block: clamp(4rem, 7vw, 7rem); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

/* The photograph takes its height from the copy beside it, so the two columns
   start and finish on exactly the same lines. */
/* The panel carries the photograph's own 9:10 proportion, so the frame never
   has to cut into the picture; his head, arms and the table all stay in. */
.portrait { position: relative; margin: 0; width: 100%; max-width: 27rem; aspect-ratio: 9 / 10; min-height: 21rem; }
.portrait::after {
  content: "";
  position: absolute; inset: 1.15rem -1.15rem -1.15rem 1.15rem;
  border: 1px solid var(--brass-hair);
  z-index: 0;
}
/* Absolute, so the photograph fills the column without its own intrinsic
   height dictating how tall the row is: the copy decides that. */
/* Anchored near the top, so any trimming the panel needs comes off the table
   at the bottom rather than off his head. */
.portrait__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }

.about__copy { align-self: center; }
.about__copy .eyebrow { margin-bottom: 1.15rem; }
/* Full display size, full column width. `balance` is the site default for
   headings, but here it equalises the lines into a block visibly narrower than
   the paragraphs below it: `pretty` fills the measure and just avoids a
   stranded last word. */
.about__copy .h2 { margin-bottom: 1.6rem; max-width: none; text-wrap: pretty; }
.about__text { font-size: var(--fs-body); line-height: 1.85; color: var(--ink-2); margin-bottom: 1.85rem; }
.about__text em { font-style: italic; color: var(--brass-txt); }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); margin-top: 3rem; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  /* Full width once stacked: capped at 22rem it sat small against the left
     edge with most of a tablet column empty beside it. */
  .portrait { max-width: 100%; }
}

/* ------------------------------------------- 11b. Why owners choose WBB */

/* Navy with a brass wash in the top corner and a wide arc leaving the bottom
   right: enough depth that the band does not read as a flat rectangle. */
.why {
  position: relative; overflow: hidden;
  color: var(--on-dark);
  padding-block: clamp(2.75rem, 4vw, 4rem);
  background:
    radial-gradient(70% 55% at 2% 0%, rgba(201, 169, 97, .09), transparent 55%),
    linear-gradient(165deg, var(--navy-900), var(--navy) 45%, var(--navy-800));
}
/* Centre sits just outside the bottom-right corner, so only a shallow arc
   grazes it rather than sweeping across the copy. */
.why::after {
  content: "";
  position: absolute; right: -40rem; bottom: -47rem;
  width: 62rem; height: 62rem;
  border: 1px solid rgba(201, 169, 97, .3);
  border-radius: 50%;
  pointer-events: none;
}
.why > .shell { position: relative; z-index: 1; }

.why__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: var(--s-4) var(--s-7);
  margin-bottom: clamp(1.75rem, 2.4vw, 2.25rem);
}
.why__head .eyebrow { margin-bottom: var(--s-4); }
.why__title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.9vw + 1.05rem, 2.5rem);
  font-weight: 400; line-height: 1.14; letter-spacing: -.012em;
  color: var(--white);
}
/* The firm's name takes the second line whole; it should never break. Only
   where there is room for it: forcing nowrap on a phone pushed the heading
   past the screen edge. */
.why__title em { display: block; font-style: italic; color: var(--brass); }
@media (min-width: 700px) { .why__title em { white-space: nowrap; } }

.why__grid {
  list-style: none; margin: 0; padding: clamp(1.75rem, 2.4vw, 2.25rem) 0 0;
  border-top: 1px solid rgba(201, 169, 97, .3);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: clamp(1.9rem, 2.6vw, 2.5rem);
}

/* Dividers are borders on the entries themselves, so they break between the
   rows rather than running the full height of the grid. */
.wcard { padding-inline: clamp(1.1rem, 2vw, 2rem); border-left: 1px solid rgba(201, 169, 97, .22); }
.wcard:nth-child(4n + 1) { border-left: 0; padding-left: 0; }

/* Bare brass marks at the same size and weight as the stats bar under the
   hero. No frames, no circles. */
.wcard__mark { display: block; margin-bottom: 1.05rem; color: var(--brass); }
.wcard__mark svg { width: 38px; height: 38px; }

.wcard__title {
  font-family: var(--display); font-size: 1.3125rem; font-weight: 400;
  line-height: 1.25; color: var(--white);
}
.wcard__title::after {
  content: ""; display: block;
  width: 2rem; height: 1px; margin: .7rem 0 .8rem;
  background: var(--brass);
}
/* Two lines reserved for every entry, so the titles and rules stay on the same
   baselines across a row even if one description runs short. */
.wcard__text { font-size: var(--fs-sm); line-height: 1.68; color: var(--on-dark-2); min-height: calc(2 * 1.68em); }

@media (max-width: 1040px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard:nth-child(4n + 1) { border-left: 1px solid rgba(201, 169, 97, .22); padding-left: clamp(1.1rem, 2vw, 2rem); }
  .wcard:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .why__head { grid-template-columns: 1fr; align-items: start; }
  .why__grid { grid-template-columns: 1fr; }
  .wcard, .wcard:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
}

/* ------------------------------------ 11c. Selling in three steps */

.steps { background: var(--white); padding-block: clamp(3rem, 4.5vw, 4.5rem); }

.steps__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5) clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 2.4vw, 2.25rem);
}
.steps__head .h2 { font-size: clamp(1.75rem, 1.9vw + 1.05rem, 2.5rem); text-wrap: pretty; }
.steps__intro { font-size: var(--fs-base); line-height: 1.78; color: var(--ink-2); }
.steps__intro em { font-style: normal; color: var(--brass-txt); font-weight: 600; }

.steps__grid {
  list-style: none; margin: 0; padding: clamp(1.75rem, 2.4vw, 2.25rem) 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Same divider language as the reasons band, in ink rather than brass. */
.pstep { padding-inline: clamp(1.25rem, 2.6vw, 2.75rem); border-left: 1px solid var(--line); }
.pstep:first-child { border-left: 0; padding-left: 0; }

.pstep__num {
  display: block;
  font-family: var(--display); font-size: 2.25rem; font-weight: 400;
  line-height: 1; color: var(--brass);
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: .85rem;
}
.pstep__title {
  font-family: var(--display); font-size: 1.3125rem; font-weight: 400;
  line-height: 1.25; color: var(--ink);
}
.pstep__title::after {
  content: ""; display: block;
  width: 2rem; height: 1px; margin: .7rem 0 1.1rem;
  background: var(--brass);
}

.pstep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pstep__list li {
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2);
}
.pstep__list .tick { margin-top: .3em; }

@media (max-width: 860px) {
  .steps__head { grid-template-columns: 1fr; align-items: start; }
  .steps__grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .pstep, .pstep:first-child { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------- 11d. Recent transactions */

/* Short navy band separating the two grey sections either side of it, and
   catching the reader at the point they are most likely to want a valuation. */
.ctaband { background: var(--navy); color: var(--on-dark); padding-block: clamp(1.75rem, 2.6vw, 2.5rem); }
.ctaband__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-5) var(--s-7);
}
.ctaband__text {
  font-family: var(--display); font-size: clamp(1.125rem, .9vw + .85rem, 1.5rem);
  line-height: 1.35; color: var(--white); margin: 0;
}
.ctaband__text em { display: block; font-style: italic; color: var(--brass); }
.ctaband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.ctaband__phone { font-family: var(--display); font-size: 1.125rem; color: var(--on-dark); white-space: nowrap; }
.ctaband__phone:hover { color: var(--brass); }

.deals { padding-block: clamp(3rem, 4.5vw, 4.5rem); }
.deals .section__head--split { align-items: start; }
.deals .section__head-text { margin-top: 0; padding-top: .35rem; }

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

.dcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dcard > :not(.dcard__media) { padding-inline: clamp(1.25rem, 1.7vw, 1.6rem); }

.dcard__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--ivory-2); }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; }
.dcard__stamp {
  position: absolute; top: 0; left: 0;
  padding: .5em .85em;
  background: var(--brass); color: var(--navy-900);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1;
}

.dcard__meta {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass-txt);
  padding-top: clamp(1.1rem, 1.5vw, 1.4rem);
}

/* What the business was, then whose it was: the plain description leads and
   the brand mark corroborates it, on the same line. */
.dcard__brand { display: flex; align-items: center; gap: .85rem; margin-top: .5rem; }
.dcard__logo { height: 34px; width: auto; max-width: 40%; flex: none; object-fit: contain; object-position: left center; }
.dcard__title {
  flex: 1; min-width: 0;
  font-family: var(--display); font-size: 1.1875rem; font-weight: 400;
  line-height: 1.25; color: var(--ink);
  text-wrap: pretty;
}

.dcard__facts {
  margin-top: auto; padding-top: var(--s-4); padding-bottom: clamp(1.25rem, 1.7vw, 1.6rem);
  display: grid; gap: .55rem;
}
.dcard__facts::before {
  content: ""; display: block; height: 1px;
  background: var(--line); margin-bottom: var(--s-4);
}
/* Label left, figure right: read as a column of values, not a paragraph. */
.dcard__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
.dcard__facts dt { font-size: var(--fs-sm); color: var(--ink-3); }
.dcard__facts dd {
  margin: 0; text-align: right;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

.deals__foot { display: flex; justify-content: center; margin-top: var(--s-7); }

@media (max-width: 900px) { .deals__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- 12. Expertise cards */

.cards { display: grid; gap: var(--s-4); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1040px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cards--3, .cards--4 { grid-template-columns: 1fr; } }

.scard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* The frame clips the photograph (and its hover zoom); the media wrapper does
   not clip, so the badge can hang past the bottom edge. */
.scard__media { position: relative; display: block; }
.scard__frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-700); }
.scard__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.scard:hover .scard__frame img { transform: scale(1.045); }

/* Circular badge straddling the image and the card body. */
.scard__badge {
  position: absolute; left: var(--s-5); bottom: 0;
  transform: translateY(50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--navy); color: var(--brass);
  border-radius: 50%;
  z-index: 2;
}
.scard__badge svg { width: 21px; height: 21px; }

.scard__body { display: flex; flex-direction: column; gap: var(--s-3); padding: calc(var(--s-6) + .5rem) var(--s-5) var(--s-6); flex: 1; }
.scard__kicker { display: none; }
.scard__title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; color: var(--ink); }
.scard__title a { color: inherit; }
.scard__title a::after { content: ""; position: absolute; inset: 0; }
.scard__text { font-size: var(--fs-base); line-height: 1.68; color: var(--ink-3); flex: 1; }
.scard__cta { display: inline-flex; align-items: center; gap: .55em; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.scard__cta svg { transition: transform .25s var(--ease); }
.scard:hover .scard__cta { color: var(--brass-txt); }
.scard:hover .scard__cta svg { transform: translateX(4px); }

/* ------------------------------------------- 13. Why clients choose us */

.pillarband { background: var(--navy); color: var(--on-dark); }
.pillarband__inner {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: var(--s-8);
  align-items: center;
}
.pillarband__head .h2 { font-size: clamp(1.375rem, 1.1vw + 1.05rem, 1.75rem); line-height: 1.22; }

.pillars {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
}
.pillar { display: grid; gap: var(--s-3); align-content: start; padding-left: var(--s-5); border-left: 1px solid var(--on-dark-line); }
.pillar__icon { color: var(--brass); }
.pillar__icon svg { width: 24px; height: 24px; }
.pillar__title { font-size: var(--fs-base); font-weight: 600; color: var(--on-dark); }
.pillar__text { font-size: var(--fs-sm); line-height: 1.62; color: var(--on-dark-2); }

@media (max-width: 1040px) {
  .pillarband__inner { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* Section 14 (the old sell-side process band) was removed with its template
   part: "steps" now carries the client's own three-stage copy. Its rules also
   claimed the .steps class, which silently reformatted the new section. */


/* ------------------------------------------------------ 15. Listing cards */

.lcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* The same 4:3 as the listing rows: it is the same photograph. */
.lcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--navy-700); overflow: hidden; }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.lcard:hover .lcard__media img { transform: scale(1.045); }
.lcard__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: var(--s-5); text-align: center;
  font-family: var(--display); font-size: 1.125rem; color: var(--brass);
  background: var(--navy);
}
.lcard__body { display: flex; flex-direction: column; gap: .55rem; padding: var(--s-5) var(--s-5) var(--s-6); flex: 1; }
.lcard__meta { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-txt); }
.lcard__title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.32; color: var(--ink); text-wrap: pretty; }
.lcard__title a { color: inherit; }
.lcard__title a::after { content: ""; position: absolute; inset: 0; }

/* Financials as labelled pairs: what a buyer scans for, in two columns so a
   listing quoting three or four figures still reads as a block. */
.lfigures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem var(--s-5);
  margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.lfigures dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lfigures dd {
  margin: .2rem 0 0;
  /* Figures in the sans: Inter's lining numerals line up column to column in a
     way the serif's do not. */
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}

.listings .section__head--split { align-items: start; }
.listings .section__head-text { margin-top: 0; padding-top: .35rem; }
.listings__foot { display: flex; justify-content: center; margin-top: var(--s-7); }

/* Financials as an inline run, separated by hairlines: a deal strip. */
.figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; margin: 0; }
.figures__item { display: flex; align-items: baseline; gap: .35rem; }
.figures__item + .figures__item { padding-left: .75rem; border-left: 1px solid var(--line); }
.figures dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.figures dd { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

/* Section 16 (the old transaction-outcome boxes) went with the deals column
   in the testimonials part. Those rules also claimed the .deals class, which
   silently reformatted the new Recent transactions section. */


/* ------------------------------------------------------------- 17. Quotes */

.quotes { position: relative; }
.quotes__track {
  list-style: none; margin: 0; padding: 0 0 var(--s-3);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 26rem);
  gap: var(--s-5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.quotes__track::-webkit-scrollbar { height: 3px; }
.quotes__track::-webkit-scrollbar-thumb { background: var(--line-2); }

.quote { scroll-snap-align: start; }
.quote__fig { height: 100%; display: grid; gap: var(--s-4); align-content: start; }
.quote__theme { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass-txt); }
.quote__body { margin: 0; }
.quote__body p { font-family: var(--display); font-size: clamp(1.0625rem, .6vw + .92rem, 1.25rem); line-height: 1.55; color: var(--ink); }
.quote__cite { display: grid; gap: 2px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.quote__cite span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); color: var(--ink-3); }

.quotes__controls { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.cbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; color: var(--ink);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cbtn:hover { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.cbtn[disabled] { opacity: .3; cursor: default; }
.cbtn[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--line-2); }

/* Outcomes + testimonial, side by side. */
.outcomes__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.outcomes__note { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-4); }
@media (max-width: 980px) { .outcomes__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- 18. Case study */

.casestudy { background: var(--navy); color: var(--on-dark); }
/* One column. The reviews used to be the right-hand 0.85fr of this grid,
   which is why they stacked: three across a column that narrow would have
   been three slivers. Copy on top, reviews across the full width. */
.casestudy__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.6vw, 2.25rem); padding-block: var(--s-band); }
/* Two columns: the writing and the call to action on the left, the figures
   stacked down the right. The reviews are a full-width row under both. */
.casestudy__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.casestudy__lead { display: grid; gap: var(--s-4); align-content: start; }
@media (max-width: 860px) { .casestudy__copy { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
.casestudy__text { color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.72; max-width: 62ch; }
.casestudy__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--on-dark-line); }
.casestudy__facts li { padding: var(--s-4) 0; display: grid; gap: 4px; }
.casestudy__facts li + li { border-top: 1px solid var(--on-dark-line); }
.casestudy__facts-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.casestudy__facts-v { font-size: var(--fs-base); color: var(--on-dark); }
.casestudy__lead .btn { justify-self: start; }

.pullquote { margin: 0; padding: var(--s-7) var(--s-6); background: rgba(255, 255, 255, .05); border: 1px solid var(--on-dark-line); border-top: 2px solid var(--brass); }

/* Google reviews, one at a time. Each slide is the full width of the panel, so
   the panel is sized by the longest review instead of jumping as the reader
   steps through them. */
/* ------------------------------------------ The case study

   Navy panel on the left carrying the seller's account, white card on the
   right carrying the five things he credits. Measured off the reference:
   the navy ends at 31% of the frame. Three earlier attempts kept the whole
   band one tone, and the split is what gives it its structure. */
/* No padding here. The wrapper carries .section, which already applies
   --s-band, so setting it again gave this band roughly twice the space above
   and below every other section on the page. Same mistake as the awards band,
   made a second time. */
.cstudy__frame {
  display: grid;
  grid-template-columns: minmax(0, .45fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* The navy half. */
.cstudy__told {
  background: var(--navy);
  color: var(--on-dark);
  padding: clamp(1.5rem, 2.1vw, 2rem);
  display: grid; gap: var(--s-3); align-content: start;
}
.cstudy__told .eyebrow { margin-bottom: 0; }
.cstudy__told .h2 { margin: 0; }

.cstudy__quote { margin: 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--brass); }
/* Two sentences, so it can be set as the pull-quote it is rather than as a
   paragraph. It was carrying his whole account before, which is why the panel
   read as a wall however the spacing was arranged. */
.cstudy__quote p {
  margin: 0;
  font-family: var(--display); font-style: italic;
  font-size: clamp(.9375rem, .3vw + .89rem, 1.0625rem); line-height: 1.6;
  color: var(--on-dark);
}

/* The figures, stacked at the foot of the navy panel. */
.cstudy__facts { margin: .25rem 0 0; display: grid; border-top: 1px solid var(--on-dark-line); }
.cstudy__fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: .4rem 0; border-bottom: 1px solid var(--on-dark-line);
}
.cstudy__fact dt {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass); flex: none;
}
.cstudy__fact dd { margin: 0; font-size: var(--fs-sm); color: var(--on-dark); text-align: right; }

/* The white half: the five points, numbered in brass, one per row. */
.cstudy__list {
  list-style: none; margin: 0; padding: clamp(1.5rem, 2.1vw, 2rem);
  background: var(--white);
  counter-reset: cpoint;
  display: grid; align-content: center;
}
.cstudy__point {
  counter-increment: cpoint;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 var(--s-3);
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.cstudy__point:first-child { padding-top: 0; border-top: 0; }
.cstudy__point:last-child { padding-bottom: 0; }
.cstudy__point::before {
  content: counter(cpoint, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--display); font-size: 1rem; font-weight: 500;
  color: var(--brass-txt); font-variant-numeric: tabular-nums; line-height: 1.45;
}
.cstudy__point-head { margin: 0 0 .2rem; font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.cstudy__point-text { margin: 0; font-size: var(--fs-xs); line-height: 1.62; color: var(--ink-2); }

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

/* No max-width here. It had 70ch, and ch is measured in this box's own font -
   body size - so 70ch came out around 595px while the heading inside it is set
   at up to 40px and needs about 640px. The heading was overflowing its own box
   and only looked right because there was slack in the shell beside it. The
   reading measure belongs on the lede, which is the part that is actually read
   as a paragraph; the heading gets the full width and so fits on one line
   honestly rather than by spilling.

   The eyebrow's own margin-bottom is dropped because this is a grid and the
   gap already spaces the three children. Carrying both is the trap that put
   four to five rem under the heading here, and under the awards band, and
   under the case study lead. */
.reviews__head { display: grid; gap: .3rem; }
.reviews__head .eyebrow { margin-bottom: 0; }
/* text-wrap: balance splits a short heading across two lines whether or not it
   needs them. Now that the box is wide enough for the heading to fit, this is
   a guard rather than a fix; below 640 it may wrap rather than spill. */
.reviews__head .h2 { white-space: nowrap; }
@media (max-width: 640px) { .reviews__head .h2 { white-space: normal; } }
.reviews__lede { margin: .15rem 0 0; max-width: 68ch; font-size: var(--fs-sm); line-height: 1.65; color: var(--on-dark-2); }

/* No frame and no ground of its own: every card inside is framed now, and a
   box around a row of boxes is just a second border. */
.reviews { min-width: 0; }
.reviews__score {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--on-dark-line);
}
.reviews__score-text {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem;
  margin: 0; font-size: var(--fs-sm); color: var(--on-dark-2);
}
/* Google's own mark, unaltered; it is what makes the rating read as
   independently verifiable rather than self-reported. */
.reviews__source { display: flex; flex: none; }
.reviews__source svg { width: 22px; height: 22px; }
.reviews__stars { color: var(--brass); letter-spacing: .12em; font-size: .9375rem; }
.reviews__score strong { font-family: var(--display); font-size: 1.25rem; font-weight: 500; color: var(--white); }

/* Three across the full width of the band. */
.reviews__grid {
  list-style: none; margin: 0; padding: 0;
  min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5);
}
/* A card each: the brass rule along the top is the same mark the panel
   used to carry, moved onto the thing it is actually marking. */
.reviews__item {
  display: flex;
  padding: var(--s-6);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--on-dark-line);
  border-top: 2px solid var(--brass);
}
@media (max-width: 900px) { .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .reviews__grid { grid-template-columns: minmax(0, 1fr); } }
.reviews__fig { margin: 0; display: flex; flex-direction: column; height: 100%; }

.reviews__body { margin: 0 0 var(--s-5); flex: 1; }
.reviews__body p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, .55vw + .88rem, 1.1875rem); line-height: 1.6;
  color: var(--on-dark);
  /* Long reviews are trimmed to keep the panel in proportion with the case
     study beside it; the full text is a click away on Google. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.reviews__cite {
  display: grid; gap: 3px; padding-top: var(--s-4);
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass);
}
.reviews__cite span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); color: var(--on-dark-2); }

.reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
.reviews__nav { display: flex; gap: var(--s-3); }
.reviews__link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-dark-2);
}
.reviews__link:hover { color: var(--brass); }

/* Kept, but secondary: the badge is worth something and people do want to
   check, while the click itself should stay on this site. */
.reviews__verify {
  font-size: var(--fs-sm); color: var(--on-dark-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.reviews__verify:hover { color: var(--brass); }

.cbtn--light { border-color: var(--on-dark-line); color: var(--on-dark); }
.cbtn--light:hover { background: var(--brass); border-color: var(--brass); color: var(--navy-900); }
.cbtn--light[disabled]:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.pullquote__body p { font-family: var(--display); font-style: italic; font-size: clamp(1.125rem, .8vw + .95rem, 1.375rem); line-height: 1.5; color: var(--on-dark); }
.pullquote__cite { display: grid; gap: 3px; padding-top: var(--s-4); border-top: 1px solid var(--on-dark-line); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.pullquote__cite span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); color: var(--on-dark-2); }

/* minmax(0, 1fr), not 1fr: a bare 1fr keeps an auto minimum, which let the
   review carousel's flex track force the whole page to 1069px wide on a phone.
   The track must be allowed to shrink and scroll instead. */
@media (max-width: 900px) {
  .casestudy__facts { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- 19. Areas */

/* Wider measure than the default head: this paragraph carries the counties
   argument and reads badly broken into a narrow column. */
.areas__head .h2 { max-width: 26ch; }
.areas__head .section__head-text { max-width: 68ch; margin-top: var(--s-4); }

.areas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.area { display: grid; }
.area__link { display: grid; gap: 3px; align-content: center; height: 100%; min-height: 4.75rem; padding: var(--s-4) var(--s-5); background: var(--white); color: var(--ink); position: relative; transition: background-color .18s var(--ease), color .18s var(--ease); }
.area__link:hover { background: var(--navy); color: var(--on-dark); }
.area__name { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.24; }
.area__sub { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.area__link:hover .area__sub { color: var(--brass); }
.area__arrow { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--brass); opacity: 0; transition: opacity .18s var(--ease); }
.area__link:hover .area__arrow { opacity: 1; }
/* The catch-all tile wears the hover state permanently, so it reads as the
   one actionable cell in the grid rather than as a fifteenth county. */
.area--more .area__link { background: var(--navy); color: var(--on-dark); }
.area--more .area__name { color: var(--on-dark); }
.area--more .area__sub { color: var(--brass); }
.area--more .area__arrow { opacity: 1; }
.area--more .area__link:hover { background: var(--navy-700); }

@media (max-width: 1040px) { .areas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .areas { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- 20. Article cards */

.acard { position: relative; display: grid; gap: var(--s-3); align-content: start; background: var(--white); border: 1px solid var(--line); padding: var(--s-5); transition: border-color .22s var(--ease); }
.acard:hover { border-color: var(--brass); }
/* 16:9. Every article image on this site is 16:9 and the card was cutting 16%
   off the sides of all of them. Listings stay 3:2, which is the shape their
   photographs are supplied in. */
.acard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivory-3); margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; }
.acard__media img { width: 100%; height: 100%; object-fit: cover; }
.acard__body { display: grid; gap: var(--s-2); align-content: start; }
/* Ryan: the month and the category ran together and read as one string.
   A rule between them, and the category in the brass, so the eye takes
   them as two facts. */
.acard__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px; height: .75em;
  margin: 0 .6em -.06em;
  background: currentColor;
  opacity: .35;
}
.acard__meta > span:last-child { color: var(--brass, #b8935a); }

.acard__meta { display: flex; align-items: center; gap: .5em; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.acard__cat { color: var(--brass-txt); position: relative; z-index: 2; }
.acard__title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.32; color: var(--ink); text-wrap: balance; }
.acard__title a { color: inherit; }
.acard__title a::after { content: ""; position: absolute; inset: 0; }
.acard:hover .acard__title { color: var(--brass-txt); }
.acard__excerpt { font-size: var(--fs-base); line-height: 1.66; color: var(--ink-3); }

/* -------------------------------------------------------------- 21. Logos */

.logos { padding-block: var(--s-8); background: var(--ivory-2); }
.logos__title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-bottom: var(--s-6); }
.logos__grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-5) var(--s-8); }
.logos__item { flex: 0 0 auto; }
.logos__img { max-height: 46px; width: auto; filter: grayscale(1); opacity: .48; transition: filter .22s var(--ease), opacity .22s var(--ease); }
.logos__item:hover .logos__img { filter: grayscale(0); opacity: 1; }
.logos__foot { text-align: center; margin-top: var(--s-6); }

/* ------------------------------------------------------------- 22. Footer */

.siteftr { background: var(--navy-900); color: var(--on-dark-2); }

/* Closing band with a landscape behind it. */
.siteftr__cta { position: relative; background: var(--navy-800); overflow: hidden; }
.siteftr__cta-bg { position: absolute; inset: 0; z-index: 0; }
.siteftr__cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.siteftr__cta-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--navy-800) 0%, rgba(13,27,51,.86) 48%, rgba(13,27,51,.62) 100%); }
.siteftr__cta-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--s-5) var(--s-8); align-items: center;
  padding-block: var(--s-8);
}
.siteftr__cta-title { font-family: var(--display); font-size: clamp(1.625rem, 1.9vw + 1rem, 2.25rem); font-weight: 400; line-height: 1.18; color: var(--white); text-wrap: balance; margin-bottom: var(--s-3); }
.siteftr__cta-text { color: var(--on-dark-2); max-width: 46ch; font-size: var(--fs-body); }
.siteftr__cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 900px) { .siteftr__cta-inner { grid-template-columns: 1fr; } }

/* Brand, then three short link columns. Compact: the closing call to action
   that used to sit above this is gone, so the footer is the last thing on the
   page and should not sprawl. */
.siteftr__body { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.1fr); gap: var(--s-5) var(--s-6); padding-block: var(--s-6); }
/* The column heading is a link now: the navigation's top-level items are
   real pages, and a footer that lists their children but not them made
   Selling and Buying reachable only from the header. */
.siteftr__head a { color: inherit; }
.siteftr__head a:hover { color: var(--on-dark); }
.siteftr__logo { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: var(--s-4); }
.siteftr__logo .brand__name { color: var(--on-dark); }
.siteftr__logo .brand__sub { color: var(--brass); }
.siteftr__blurb { font-size: var(--fs-sm); line-height: 1.65; max-width: 34ch; margin-bottom: var(--s-3); }
.siteftr__nap { font-style: normal; font-size: var(--fs-sm); display: grid; gap: .55rem; }
.siteftr__nap-row { display: grid; grid-template-columns: 1rem 1fr; gap: .65rem; align-items: start; line-height: 1.5; }
.siteftr__nap-icon { display: flex; color: var(--brass); margin-top: .1em; }
.siteftr__nap-icon svg { width: 16px; height: 16px; }
/* Same split as the sidebar card had, resolved the other way: the footer is
   quiet by intent and every other link in it already sits at --on-dark-2, so it
   is the address block's links that were the outlier at full brightness, not
   the address itself. */
.siteftr__nap a { color: inherit; }
.siteftr__nap a:hover { color: var(--brass); }

/* Solid brand marks, no chrome around them: the outlined circles read as
   buttons and fought the rest of the footer. */
.siteftr__social { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; gap: .95rem; }
.siteftr__social a {
  display: block; color: var(--on-dark);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.siteftr__social a:hover { color: var(--brass); transform: translateY(-2px); }
.siteftr__social svg { width: 19px; height: 19px; }

.siteftr__head { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--s-3); }
.siteftr__list { list-style: none; padding: 0; display: grid; gap: .45rem; }
.siteftr__list a { color: var(--on-dark-2); font-size: var(--fs-sm); }
.siteftr__list a:hover { color: var(--on-dark); }

@media (max-width: 1040px) { .siteftr__body { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .siteftr__body { grid-template-columns: 1fr; } }

.siteftr__legal { border-top: 1px solid var(--on-dark-line); }
.siteftr__legal-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-5); font-size: var(--fs-xs); color: var(--on-dark-3); }
/* Six links now, so this has to wrap, without it the row ran 3px past the
   right edge at 390px and made every page scroll sideways. */
.siteftr__legal-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); min-width: 0; }
.siteftr__legal-links a { color: var(--on-dark-3); }
.siteftr__legal-links a:hover { color: var(--on-dark); }

/* --------------------------------------------------------- 23. Breadcrumb */

.breadcrumb { padding-block: var(--s-4); }
.breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; font-size: var(--fs-xs); color: var(--ink-3); }
.breadcrumb__item + .breadcrumb__item::before { content: "/"; margin-right: .4em; color: var(--line-2); }
.breadcrumb__item a { color: var(--ink-3); }
.breadcrumb__item a:hover { color: var(--brass-txt); }

/* -------------------------------------------------------------- 24. Forms */

.form { display: grid; gap: var(--s-4); }
.form p { margin: 0; }
.form label { display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="url"], .form input[type="number"], .form input[type="date"],
.form select, .form textarea {
  width: 100%; padding: .82em 1em;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius);
  font-size: var(--fs-body); line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form textarea { min-height: 7rem; resize: vertical; }
/* The old ring was 1.06:1 against white and the border change 1.36:1 - which
   is to say invisible to the person filling the form in. */
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-3); }
.form input[type="submit"], .form button[type="submit"], .form .wpforms-submit {
  width: auto; padding: .95em 1.75em;
  background: var(--brass); border: 1px solid var(--brass); border-radius: var(--radius);
  color: var(--navy-900); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .22s var(--ease), border-color .22s var(--ease);
}
.form input[type="submit"]:hover, .form button[type="submit"]:hover, .form .wpforms-submit:hover { background: var(--brass-lt); border-color: var(--brass-lt); }

.wpcf7-not-valid-tip, .wpforms-error { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); color: #9A3324; letter-spacing: 0; text-transform: none; }
.wpcf7-response-output, .wpforms-confirmation-container-full {
  margin: var(--s-4) 0 0 !important; padding: var(--s-4) var(--s-5) !important;
  border: 1px solid var(--line) !important; border-left: 2px solid var(--brass) !important;
  background: var(--ivory); font-size: var(--fs-body);
}
.wpcf7 form.invalid .wpcf7-response-output { border-left-color: #9A3324 !important; }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--ok) !important; }
.wpforms-field-label { font-size: var(--fs-micro) !important; font-weight: 600 !important; letter-spacing: .13em; text-transform: uppercase; }
.wpforms-required-label { color: #9A3324; }
.wpforms-field-description { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-2); }
/* Honeypot. !important is warranted: WPForms' stylesheet resets descendant
   positioning, which left this field sitting in the layout as a visible
   "Leave this field empty" box: broken-looking, and useless as a trap. */
.wbb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* -------------------------------------------------- 25. Generic page body */

.entry { padding-block: var(--s-6) var(--s-band); }
.entry__header { max-width: 44rem; margin-bottom: var(--s-7); }
.entry__title { font-family: var(--display); font-size: clamp(2rem, 2.6vw + 1.2rem, 3rem); font-weight: 400; line-height: 1.14; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.entry__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; color: var(--ink); margin-top: var(--s-7); }
.prose h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin-top: var(--s-6); }
.prose p, .prose li { color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.78; }
.prose ul, .prose ol { padding-left: 1.15rem; display: grid; gap: var(--s-2); }
.prose a { color: var(--brass-txt); border-bottom: 1px solid var(--brass-hair); }
.prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.prose blockquote { padding-left: var(--s-5); border-left: 2px solid var(--brass); font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--ink); }
.prose figcaption { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.prose th, .prose td { padding: .65rem .85rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { background: var(--ivory-2); font-weight: 600; color: var(--ink); }

.table-scroll { overflow-x: auto; }

.pagination { margin-top: var(--s-8); display: flex; gap: var(--s-2); font-size: var(--fs-body); }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding-inline: .5rem; border: 1px solid var(--line); color: var(--ink-2); }
.pagination .page-numbers:hover { border-color: var(--brass); color: var(--ink); }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }

.searchform { display: flex; gap: var(--s-2); max-width: 26rem; }
.searchform input[type="search"] { flex: 1; padding: .82em 1em; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font-size: var(--fs-body); }

/* ------------------------------------------------------------- 26. Motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* ------------------------------- 26b. Discovery call band (above footer) */

/* The closing enquiry band.

   The navy used to be on the BAND, which meant the bottom of every page was one
   continuous navy mass: the form band and the navy footer with nothing between
   them, and on several pages a dark section above that as well, three or four
   dark bands deep.

   So the navy moved from the band to the panel. Everything inside is unchanged
   (gold italic heading, hairline fields, gold submit) because it is all styled
   against the panel behind it, not the band. What changes is that the panel now
   reads as an object sitting on a light ground, with a clear edge above the
   footer.

   Grey rather than white deliberately: it works whichever ground the section
   above happens to use. */
.discovery {
  background: var(--ivory-2);
  padding-block: clamp(2.75rem, 4.5vw, 4.5rem);
  color: var(--on-dark);
}
.discovery__frame {
  background: linear-gradient(165deg, var(--navy-900), var(--navy) 45%, var(--navy-800));
  border: 1px solid var(--brass-hair);
  border-radius: var(--radius);
  padding: clamp(2rem, 3.4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-lg);
}

.discovery__head { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.5rem, 2.4vw, 2rem); }
.discovery__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.8vw + 1.05rem, 2.4rem);
  font-weight: 400; line-height: 1.18; letter-spacing: -.01em;
  color: var(--white);
}
/* Same emphasis the other headings use: the operative phrase in brass italic. */
.discovery__title em { font-style: italic; color: var(--brass); }
.discovery__text { margin-top: var(--s-3); font-size: var(--fs-lg); line-height: 1.65; color: var(--on-dark-2); }

/* Fields on navy: transparent wells with hairline borders, light text. */
.discovery__form { max-width: 60rem; margin-inline: auto; }
.discovery__form .form--wpforms {
  --wpforms-field-border-color: rgba(255, 255, 255, .28);
  --wpforms-field-border-radius: var(--radius);
  --wpforms-field-text-color: #FFFFFF;
  --wpforms-label-color: #FFFFFF;
  --wpforms-label-sublabel-color: rgba(255, 255, 255, .6);
  --wpforms-button-border-radius: var(--radius);
}
.discovery__form .wpforms-container { margin: 0; max-width: none; }
.discovery__form .form label,
.discovery__form .wpforms-field-label { color: var(--on-dark) !important; }
.discovery__form .form input[type="text"],
.discovery__form .form input[type="email"],
.discovery__form .form input[type="tel"],
.discovery__form .form input[type="url"],
.discovery__form .form input[type="number"],
.discovery__form .form select,
.discovery__form .form textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
  color: #FFFFFF;
}
.discovery__form .form input::placeholder,
.discovery__form .form textarea::placeholder { color: rgba(255, 255, 255, .45); }
.discovery__form .form input:focus,
.discovery__form .form select:focus,
.discovery__form .form textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .22);
}
.discovery__form .form select option { color: var(--ink); background: var(--white); }
.discovery__form .wpforms-field-description { color: var(--on-dark-2); }

/* The consent row: box and wording together, not at opposite ends of the
   field. WPForms' own grid puts them in separate columns here. */
.discovery__form .wpforms-field-checkbox ul,
.discovery__form .wpforms-field-radio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.discovery__form .wpforms-field-checkbox li,
.discovery__form .wpforms-field-radio li {
  display: flex; align-items: flex-start; gap: .6rem;
  color: var(--on-dark-2);
}
/* Sized to the fine print beside it and nudged onto its first line: the
   plugin's default box is far larger than 11px text. */
.discovery__form .wpforms-field-checkbox li input,
.discovery__form .wpforms-field-radio li input {
  width: 14px !important; height: 14px !important;
  min-width: 0 !important; flex: none;
  margin: 1px 0 0 !important;
}
.discovery__form .wpforms-field-checkbox li label,
.discovery__form .wpforms-field-radio li label {
  /* Fine print, not body copy; it should not shout louder than the fields. */
  margin: 0; font-size: var(--fs-micro) !important; font-weight: 400 !important;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  color: var(--on-dark-3) !important;
}

/* Two rows: the four short fields across the top, the message beneath. The
   plugin's own column classes drive it, so the layout survives field edits in
   the admin. */
.discovery__form .wpforms-field { padding: 0 0 var(--s-4); }
/* Field labels read as labels, not as eyebrows: sentence case, normal spacing,
   sized so they sit comfortably above the input. */
.discovery__form .wpforms-field-label {
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  text-transform: none;
  margin-bottom: .5rem;
  color: var(--on-dark) !important;
}
.discovery__form .wpforms-required-label { color: var(--brass) !important; }
.discovery__form .form textarea { min-height: 6.5rem; }
/* WPForms caps "medium" fields at a fixed width, which leaves each of the four
   columns holding a short stub of an input. Let them fill their column. */
.discovery__form .wpforms-field input,
.discovery__form .wpforms-field select,
.discovery__form .wpforms-field textarea { width: 100% !important; max-width: 100% !important; }

/* Submit sits bottom-right of the block, as in the reference. */
.discovery__form .wpforms-submit-container { text-align: right; }
.discovery__form .form--wpforms button[type="submit"] {
  /* The plugin sizes its button from its own height variable, which is why it
     rendered far larger than every other button on the site. */
  height: auto !important;
  padding: 1.05em 2.1em !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  background-color: var(--brass) !important;
  border-color: var(--brass) !important;
  color: var(--navy-900) !important;
}
.discovery__form .form--wpforms button[type="submit"]:hover {
  background-color: var(--brass-lt) !important;
  border-color: var(--brass-lt) !important;
}
/* The floating reCAPTCHA badge, removed at the client's request. Google allows
   this only alongside the attribution line rendered under the form, which is
   why .discovery__legal exists: keep them together. */
.grecaptcha-badge { visibility: hidden; }

.discovery__legal {
  margin-top: var(--s-4);
  font-size: var(--fs-micro); line-height: 1.5;
  color: var(--on-dark-3);
}
.discovery__legal a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.discovery__legal a:hover { color: var(--brass); }

/* The thank-you message after the form is sent.
   It appears inside the navy band, and the rule below only coloured the
   container - the paragraph WPForms puts inside it kept the dark body colour,
   so the client submitted the form and got near-black text on navy. Every
   descendant is coloured now, and both of WPForms' container class names are
   matched, because which one it uses depends on the confirmation setting. */
.discovery__form .wpforms-confirmation-container-full,
.discovery__form .wpforms-confirmation-container {
  background: rgba(255, 255, 255, .07) !important;
  border-color: var(--brass-hair) !important;
  color: var(--on-dark) !important;
}
.discovery__form .wpforms-confirmation-container-full *,
.discovery__form .wpforms-confirmation-container * {
  color: var(--on-dark) !important;
}
.discovery__form .wpforms-confirmation-container-full a,
.discovery__form .wpforms-confirmation-container a {
  color: var(--brass-lt) !important;
  text-decoration: underline;
}
/* ------------------------------------------------ 26c. Phone refinements */

/* Section-by-section tightening for phones. Everything above already stacks
   correctly; this is about vertical rhythm and tap targets, so the page does
   not read as a desktop layout squeezed into a column. */
@media (max-width: 640px) {

  /* Bands: less air between sections than on a wide screen. */
  .about, .steps, .deals, .why, .discovery { padding-block: 2.5rem; }
  .section { padding-block: 2.5rem; }
  .ctaband { padding-block: 1.75rem; }

  /* Headings: the clamp minimums are still large for a 390px column. */
  .h2, .steps__head .h2, .about__copy .h2 { font-size: 1.6rem; }
  .why__title { font-size: 1.6rem; }
  .discovery__title { font-size: 1.5rem; }
  .section__head { margin-bottom: var(--s-5); }

  /* About: the offset brass frame hangs off the right edge at this width. */
  .about__grid { gap: 2rem; }
  .portrait { max-width: 100%; }
  .portrait::after { inset: .75rem -.75rem -.75rem .75rem; }
  .about__actions { gap: var(--s-4); margin-top: 1.75rem; }
  .about__actions .btn { width: 100%; }

  /* Reasons: single column with the hairline as the only separator. */
  .why__head { margin-bottom: 1.75rem; }
  .why__head .btn { width: 100%; }
  .why__grid { row-gap: 1.5rem; padding-top: 1.5rem; }

  /* Steps: the task lists carry the section, so give them room. */
  .steps__grid { padding-top: 1.5rem; row-gap: 2rem; }
  .pstep__num { font-size: 1.875rem; }

  /* Card grids: full-width cards, tighter gaps. */
  .cards, .deals__grid { gap: 1.25rem; }
  .listings__foot, .deals__foot { margin-top: var(--s-6); }
  .listings__foot .btn, .deals__foot .btn, .areas__head .btn { width: 100%; }

  /* Case study and reviews. */
  .casestudy__inner { padding-block: 2.5rem; gap: 1.75rem; }
  .casestudy__copy .btn { width: 100%; }
  .reviews { padding: var(--s-5); }
  .reviews__foot { gap: var(--s-3); }

  /* Discovery form: full-width submit, and the frame inset trimmed. */
  .discovery__frame { padding: 1.5rem 1.1rem; }
  .discovery__form .wpforms-submit-container { text-align: left; }
  .discovery__form .form--wpforms button[type="submit"] { width: 100%; }

  /* The plugin's quarter-width columns do not stack on their own here, which
     left four fields sharing 390px and the labels clipped to "Emai"/"Phor". */
  .discovery__form .wpforms-field.wpforms-one-fourth,
  .discovery__form .wpforms-field.wpforms-one-third,
  .discovery__form .wpforms-field.wpforms-one-half,
  .discovery__form .wpforms-field.wpforms-two-fourths,
  .discovery__form .wpforms-field.wpforms-three-fourths {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  /* Footer. */
  .siteftr__body { padding-block: 2rem; gap: 1.75rem; }
  .siteftr__legal-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }

  /* Anything tapped gets a comfortable target. */
  .nav__link, .siteftr__list a, .siteftr__legal-links a { padding-block: .35rem; }
}

/* -------------------------------------------------------------- 27. Print */

@media print {
  .utility, .masthead, .mobile-nav, .siteftr__cta, .hero__bg, .hero__scrim { display: none !important; }
  body, .hero { background: #fff; color: #000; }
}

/* ---------------------------------------------------- 28. Supplied logo */

/* White-and-gold on transparent: only ever placed on a navy ground. */
/* Ryan asked for the mark to carry more weight in the masthead. 33px was
   sized to sit under the utility bar without crowding it; 44px is the most
   it can take before the nav wraps at the 1024 breakpoint. */
.brand__logo { height: 44px; width: auto; }
.siteftr__logo .brand__logo { height: 44px; }
@media (max-width: 1080px) { .brand__logo { height: 38px; } }
@media (max-width: 560px) { .brand__logo { height: 34px; } }

/* --------------------------------------- 29. Reference-match refinements */

/* Listing teaser figures: the shorthand a broker writes on a teaser sheet. */
.lcard__figures {
  font-family: var(--display);
  font-size: 1.125rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: var(--s-1);
}
.lcard__sub { font-size: var(--fs-sm); color: var(--ink-3); }

/* ------------------------------------------- 30. Interior page hero */

/* The same skyline as the homepage hero, under a heavy navy scrim. The picture
   is atmosphere on these pages rather than the subject, so the scrim is weighted
   to keep the type legible over any part of it.

   The band holds a minimum height and centres its content, which is what stops
   a one-line title ("Businesses for sale.") producing a short hero while a
   three-line title produces a tall one. */
.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--on-dark);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

/* Same treatment as the homepage: the photograph is cropped to the waterline
   and anchored to the foot of the band at natural scale, so the skyline is the
   baseline of every hero and sits at the same size on all of them. These bands
   vary a lot in height, from a one-line title to a title with a lede, buttons
   and a fact row, and covering would have rescaled the city on each. */
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img {
  position: absolute; left: 0; bottom: 10px;
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
          mask-image: linear-gradient(to bottom, transparent, #000 18%);
}

/* The scrim protects the copy, which sits on the left, and now has to stay off
   the city, which sits along the bottom right. So it is heavy across the left
   two thirds, where the photograph is empty water-dark sky anyway, and lifts
   off entirely towards the right and the foot of the band. The longest line of
   copy a hero can hold reaches 59% of the shell; the first lit windows are at
   62%, so the two do not meet. */
.phero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(9, 21, 40, .94) 0%, rgba(9, 21, 40, .86) 34%, rgba(9, 21, 40, .62) 58%, rgba(9, 21, 40, .18) 100%),
    linear-gradient(to bottom, rgba(9, 21, 40, .55), rgba(9, 21, 40, .08) 52%, rgba(9, 21, 40, 0));
}
/* Centred heroes run their copy straight across the city, so this one stays a
   flat wash; it only eases off at the foot so the skyline still reads. */
.phero--center .phero__scrim {
  background: linear-gradient(to bottom, rgba(9, 21, 40, .90), rgba(9, 21, 40, .80) 50%, rgba(9, 21, 40, .52));
}

/* Fixed shape regardless of how long the title runs. */
.phero__inner {
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(13rem, 20vw, 17.5rem);
}
.phero--center .phero__inner { text-align: center; align-items: center; }
.phero--center .phero__lede { margin-inline: auto; }
.phero--center .phero__actions { justify-content: center; }
.phero--center .phero__facts { justify-content: center; }

.phero__title {
  font-family: var(--display);
  font-size: clamp(2.05rem, 2.9vw + 1.15rem, 3.15rem);
  font-weight: 400; line-height: 1.13; letter-spacing: -.012em;
  color: var(--on-dark); text-wrap: balance;
  /* A fixed measure rather than a character count, so every hero title turns
     at the same place down the page instead of at a width that depends on its
     own font size. */
  max-width: 40rem;
}
.phero--center .phero__title { margin-inline: auto; }
.phero__title em { font-style: italic; color: var(--brass); }

.phero__lede {
  margin-top: var(--s-5);
  font-size: var(--fs-lg); line-height: 1.68;
  color: var(--on-dark-2); max-width: 44rem;
}
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }

/* Fact row, used by the area, deal and listing templates to state the few
   numbers that matter before the reader scrolls. */
.phero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8);
  margin: var(--s-7) 0 0; padding-top: var(--s-5);
  border-top: 1px solid var(--on-dark-line);
}
.phero__fact dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.phero__fact dd { margin: var(--s-2) 0 0; font-family: var(--display); font-size: 1.25rem; color: var(--on-dark); }

@media (max-width: 640px) {
  .phero__inner { min-height: 0; }
}

/* On a phone the band is nearly as tall as it is wide, so the picture at its
   natural scale would be a thin strip along the bottom. Cover it instead, still
   anchored to the waterline, and bias across to the city: centring would frame
   the empty water the crop exists to avoid. */
@media (max-width: 700px) {
  /* The same ten pixels of clearance, taken off the frame rather than the image:
     an absolutely positioned replaced element ignores `bottom` once it has an
     intrinsic height, so the offset has to live on the container. Interior
     heroes only; the homepage keeps its own full-bleed treatment. */
  .phero__bg { bottom: 10px; }

  .phero__bg img {
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 70% 100%;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Copy runs the full width of a phone, so the scrim can no longer lift off
     towards the right the way it does on a desktop. It becomes a flat wash and
     eases only at the foot, below the last line of type. */
  .phero__scrim {
    background: linear-gradient(to bottom, rgba(9, 21, 40, .90), rgba(9, 21, 40, .84) 55%, rgba(9, 21, 40, .62));
  }
}
/* ----------------------------------------------------- 31. FAQ accordion */

/* Head on the left, questions on the right: the heading and its link stay in
   view while a long accordion scrolls past, and it uses the full 1250px
   instead of stranding the questions in a narrow centred column. */
.faqs__inner {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  gap: var(--s-7) clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.faqs__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.faqs__text { margin-top: var(--s-4); font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2); }
.section--dark .faqs__text { color: var(--on-dark-2); }
.faqs__more { margin-top: var(--s-6); }

.faqs__list { border-top: 1px solid var(--line); }
.section--dark .faqs__list { border-top-color: var(--on-dark-line); }

.qa { border-bottom: 1px solid var(--line); }
.section--dark .qa { border-bottom-color: var(--on-dark-line); }

.qa__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.36;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ""; }
.qa__q:hover { color: var(--brass-txt); }
.section--dark .qa__q { color: var(--on-dark); }
.section--dark .qa__q:hover { color: var(--brass); }
.qa__q:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.qa__q-text { text-wrap: pretty; }

/* A plus that loses its upright stroke when the panel opens. */
.qa__sign { position: relative; flex: none; width: 13px; height: 13px; margin-top: .38em; color: var(--brass-dp); }
.section--dark .qa__sign { color: var(--brass); }
.qa__sign::before, .qa__sign::after { content: ""; position: absolute; background: currentColor; }
.qa__sign::before { top: 6px; left: 0; width: 13px; height: 1.5px; }
.qa__sign::after { left: 6px; top: 0; width: 1.5px; height: 13px; transform-origin: center; transition: transform .24s var(--ease); }
.qa[open] .qa__sign::after { transform: scaleY(0); }

.qa__a { padding-bottom: var(--s-5); max-width: 62ch; }
.qa__a p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.78; }
.qa__a p + p { margin-top: var(--s-4); }
.section--dark .qa__a p { color: var(--on-dark-2); }
.qa__a a { color: var(--brass-txt); border-bottom: 1px solid var(--brass-hair); }
.section--dark .qa__a a { color: var(--brass); }

@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa__a { animation: qa-in .28s var(--ease) both; }
}
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

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

/* --------------------------------------------------------- 32. Video cards */

.vids__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6) var(--s-5); }
.vids__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vids__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vcard { display: grid; gap: var(--s-4); min-width: 0; align-content: start; }

/* Fixed 16:9 well on navy. Half this library was shot vertically for Shorts,
   so a vertical poster is contained rather than cropped: cropping a 9:16
   frame to 16:9 cuts the speaker's face off. A blurred, over-scaled copy of
   the same poster fills the gap instead of black bars. */
.vcard__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid var(--line-cool); border-radius: var(--radius);
  background: var(--navy-900); overflow: hidden; cursor: pointer;
  transition: border-color .22s var(--ease);
}
.section--dark .vcard__frame { border-color: var(--on-dark-line); }
.vcard__frame:hover { border-color: var(--brass); }
.vcard__frame:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.vcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vcard__frame--tall .vcard__img { object-fit: contain; }

.vcard__wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.25);
  filter: blur(22px) saturate(1.2) brightness(.62);
}

/* Glass, not a badge.

   This was a 52px disc filled solid brass, which sat on the poster like a
   sticker and fought the client's own branded cards for attention - those
   already carry a play mark of their own in the corner tag.

   Smaller, and made of the poster it sits on: a hairline ring and a wash of
   ivory at 14%, blurred so whatever is behind it stays readable as backing
   rather than as detail. Browsers without backdrop-filter get the wash on its
   own, which is still legible over both halves of these cards. */
.vcard__play {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--on-dark);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  transition: background-color .22s var(--ease), border-color .22s var(--ease), transform .3s var(--ease);
}
.vcard__frame:hover .vcard__play {
  background: rgba(255, 255, 255, .26);
  border-color: var(--on-dark);
  transform: translate(-50%, -50%) scale(1.06);
}

.vcard__len {
  position: absolute; z-index: 2; right: 8px; bottom: 8px;
  padding: .3em .5em; border-radius: var(--radius);
  background: rgba(9, 21, 40, .82); color: var(--on-dark);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em;
  font-variant-numeric: tabular-nums lining-nums;
}

.vcard__title {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500;
  line-height: 1.34; color: var(--ink); text-wrap: pretty;
}
.section--dark .vcard__title { color: var(--on-dark); }

/* Swapped in by main.js once someone presses play. */
.vcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

@media (max-width: 1100px) {
  .vids__grid--3, .vids__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .vids__grid--3, .vids__grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------- 33. Who we serve */

.serve__head .h2 { max-width: 30ch; }
.serve__head .section__head-text { max-width: 56ch; }

/* Same hairline grid language as the areas block, but these cells are a
   record rather than a set of destinations, so nothing here is a link. */
.serve__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.serve__item {
  display: flex; align-items: center; min-height: 4.25rem;
  padding: var(--s-4) var(--s-5);
  background: var(--white); color: var(--ink);
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.26;
}
.section--dark .serve__grid { background: var(--on-dark-line); border-color: var(--on-dark-line); }
.section--dark .serve__item { background: var(--navy); color: var(--on-dark); }

/* --------------------------------------------------- Recognition band

   Award graphics come from the awarding bodies at whatever size they feel
   like, so they are levelled by height and left to keep their own width.
   Centred, because the band is a claim about the firm rather than something
   to be read across. */
/* No padding-block here. The wrapper carries .section, which already applies
   --s-band, so setting it again gave the band twice the space above and
   below every other band on the page. */
.awards__inner { display: grid; gap: var(--s-5); justify-items: center; text-align: center; }
/* 24ch broke a seven-word heading over three lines and put the full stop
   at the start of the second. Wide enough to sit on one or two. */
/* The gap does the spacing, so the eyebrow drops its own margin. Carrying
   both put 1.75rem between the eyebrow and the heading where every other
   band on the site has 1rem. */
.awards__head { display: grid; gap: var(--s-2); max-width: 100%; }

/* Any container that spaces its children with gap has to stop the eyebrow
   adding its own margin on top, or the space under it is doubled. These are
   the two that use gap; every other head spaces with margins. */
.awards__head .eyebrow,
.casestudy__lead .eyebrow { margin-bottom: 0; }

/* The house heading, like every other band. The reference sets this one in
   bold sans; following that made the single loudest thing on the page a
   typeface the site does not otherwise use. */
.awards__title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: -.008em;
  color: var(--ink);
  margin: 0;
  /* One line. text-wrap: balance was splitting a 34-character heading in
     two because it balances line lengths whether or not a second line is
     needed. Below 640 it is allowed to wrap rather than overflow. */
  white-space: nowrap;
}
@media (max-width: 640px) { .awards__title { white-space: normal; text-wrap: balance; } }
.awards__text {
  margin: 0; max-width: 66ch;
  font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2);
}
.awards__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: .625rem;
}
/* A box round each badge, as in the reference. The badge itself keeps its
   own shape and is levelled by height: the awarding bodies supply squares
   and landscapes and will not be talked out of it. */
.awards__item { display: flex; padding: 3px; border: 1px solid var(--line-2); background: var(--white); }
/* 104: nine across with room to spare, and small enough that the band reads
   as a line of proof under the sentence rather than the point of the page. */
.awards__img { height: 104px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.awards__note { margin: 0; max-width: 72ch; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-3); }
.section--dark .awards__text { color: var(--on-dark-2); }
.section--dark .awards__note { color: var(--on-dark-2); }
.section--dark .awards__img { border-color: var(--on-dark-line); }
@media (max-width: 900px) { .awards__img { height: 88px; } }
@media (max-width: 560px) { .awards__img { height: 68px; } .awards__row { gap: .4rem; } }

/* ------------------------------------------- The listing-site roster

   Eight marketplace names, set as chips that take the width of their own
   words. The ruled grid they used to sit in gave every name the same box
   and implied the columns meant something; they did not. */
/* A white card each, on the tinted band. The marks are trimmed to their ink
   before they are uploaded, so capping the height sizes the logo rather than
   the whitespace around it - that is what made some look twice the size of
   others. Width is capped too: several of these are 6:1 wordmarks. */
.plats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.125rem);
}
.plats__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 6rem; padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
}
.plats__link { display: flex; align-items: center; justify-content: center; width: 100%; }
.plats__link:hover .plats__logo, .plats__link:focus-visible .plats__logo { opacity: .72; }
.plats__logo {
  max-height: 44px; max-width: 100%; width: auto;
  object-fit: contain; display: block;
  transition: opacity .2s var(--ease);
}
/* No logo yet: the name, set to carry the same weight as a mark would. */
.plats__name {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500;
  line-height: 1.25; text-align: center; color: var(--ink-3);
}
.section--dark .plats__name { color: var(--on-dark-2); }
@media (max-width: 900px) { .plats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plats__item { min-height: 4.75rem; } .plats__logo { max-height: 34px; } }

.serve__note {
  margin-top: var(--s-6); max-width: 68ch;
  font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2);
}
.serve__note em { font-style: italic; color: var(--brass-txt); }
.section--dark .serve__note { color: var(--on-dark-2); }
.section--dark .serve__note em { color: var(--brass); }

@media (max-width: 1040px) { .serve__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .serve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .serve__grid { grid-template-columns: minmax(0, 1fr); } }

/* The closing cell of the who-we-serve grid. Fills whatever is left of the last
   row so the rectangle always completes, at every column count. */
.serve__item--more {
  padding: 0;
  grid-column: span var(--span4, 1);
  background: var(--navy);
}
.serve__more {
  display: grid; gap: 3px; align-content: center;
  width: 100%; height: 100%; min-height: 4.25rem;
  padding: var(--s-4) var(--s-5);
  position: relative;
  color: var(--on-dark);
  transition: background-color .18s var(--ease);
}
.serve__more:hover { background: var(--navy-700); }
.serve__more-k { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.24; color: var(--on-dark); }
.serve__more-v { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.serve__more-arrow { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--brass); }

@media (max-width: 1040px) { .serve__item--more { grid-column: span var(--span3, 1); } }
@media (max-width: 720px)  { .serve__item--more { grid-column: span var(--span2, 1); } }
@media (max-width: 420px)  { .serve__item--more { grid-column: span 1; } }

/* A navy button on a navy ground is invisible: the same markup renders as the
   light outline inside dark sections and interior page heroes. */
.section--dark .btn--primary,
.phero .btn--primary {
  --btn-bg: transparent; --btn-bd: rgba(255, 255, 255, .45); --btn-fg: var(--on-dark);
}
.section--dark .btn--primary:hover,
.phero .btn--primary:hover {
  --btn-bg: var(--on-dark); --btn-bd: var(--on-dark); --btn-fg: var(--navy-900);
}

/* ------------------------------------ 34. Interior page body + sidebar */

.pbody { padding-block: var(--s-band); background: var(--white); }
.pbody--tint { background: var(--ivory-2); }

/* Prose column plus sticky sidebar. The measure stays near 65 characters even
   though the shell is 1250px wide: a full-width paragraph is unreadable. */
.pbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20.5rem);
  gap: var(--s-8) clamp(2.5rem, 5.5vw, 5rem);
  align-items: start;
}
.pbody__grid--wide { grid-template-columns: minmax(0, 1fr); }
.pbody__main { min-width: 0; max-width: 46rem; }
.pbody__grid--wide .pbody__main { max-width: none; }

@media (max-width: 980px) {
  .pbody__grid { grid-template-columns: minmax(0, 1fr); }
  .pbody__main { max-width: none; }
}

/* Section headings inside a long page. Scoped to the prose column: an
   unscoped .pbody h2 also caught the sidebar's own headings, which turned
   "Our services" into a 28px serif and painted "Talk to Ryan" navy-on-navy. */
.pbody__main h2 { font-family: var(--display); font-size: clamp(1.4rem, 1.1vw + 1.05rem, 1.75rem); font-weight: 500; line-height: 1.24; color: var(--ink); text-wrap: balance; }
.pbody__main h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }

.psec + .psec { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.psec__head { margin-bottom: var(--s-5); }
.psec__eyebrow { display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass-txt); margin-bottom: var(--s-3); }

/* ------------------------------------------------------------- Sidebar */

.pside { display: grid; gap: var(--s-5); position: sticky; top: calc(var(--header-h) + var(--s-5)); }
@media (max-width: 980px) { .pside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 640px) { .pside { grid-template-columns: minmax(0, 1fr); } }

.pside__block { padding: var(--s-5) var(--s-5) var(--s-6); border: 1px solid var(--line); background: var(--white); }
.pside__title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }
.pside__title--light { color: var(--brass); }

.pside__nav { list-style: none; margin: 0; padding: 0; display: grid; }
.pside__link {
  display: block; padding: .7rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.3;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.pside__nav li:first-child .pside__link { border-top: 0; padding-top: 0; }
.pside__link:hover { color: var(--brass-txt); }
.pside__link.is-current { color: var(--brass-txt); }
/* The current page gets a brass tick of a rule rather than a bolder weight, so
   the list keeps one typographic voice. */
.pside__link.is-current { box-shadow: -.6rem 0 0 -.5rem var(--brass); padding-left: .6rem; }

.pside__card { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.pside__text { font-size: var(--fs-body); line-height: 1.68; color: var(--on-dark-2); margin-bottom: var(--s-5); }

/* One weight for the whole list. The rows are phone, email and address: equal
   standing, and only two of them happen to be links. Dimming the row and
   brightening the link left the address at 70% between two rows at full, which
   read as the card being half faded. The card sets --on-dark, so the list
   follows the card; hover carries the affordance instead of brightness. */
.pside__meta { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.pside__meta li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-body); line-height: 1.55; color: var(--on-dark); }
.pside__meta svg { width: 15px; height: 15px; margin-top: .2em; color: var(--brass); }
.pside__meta a { color: inherit; }
.pside__meta a:hover { color: var(--brass); }

/* ------------------------------------------- Numbered list of stages */

/* Used by the Selling and Buying Process pages, where the client's own copy is
   a genuine sequence. */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: plist; }
.pitem { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4) var(--s-5); counter-increment: plist; }
.pitem__num {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500;
  color: var(--brass); line-height: 1;
  padding-top: .1em;
  font-variant-numeric: lining-nums tabular-nums;
}
.pitem__num::before { content: counter(plist, decimal-leading-zero); }
.pitem__body { min-width: 0; }
.pitem__title { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.pitem__text { margin-top: var(--s-3); font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); }
.pitem__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.pitem__list li { display: grid; grid-template-columns: 1.05rem 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }

@media (max-width: 520px) {
  .pitem { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}

/* ----------------------------------------------- Two and three-up panels */

.pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.pcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { padding: var(--s-5) var(--s-5) var(--s-6); border: 1px solid var(--line); background: var(--white); display: grid; gap: var(--s-3); align-content: start; }
.pcard__mark { color: var(--brass-dp); }
.pcard__mark svg { width: 30px; height: 30px; }
.pcard__title { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.pcard__text { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2); }
.pcard__link { margin-top: var(--s-2); }

.section--dark .pcard { background: var(--navy-700); border-color: var(--on-dark-line); }
.section--dark .pcard__title { color: var(--on-dark); }
.section--dark .pcard__text { color: var(--on-dark-2); }
.section--dark .pcard__mark { color: var(--brass); }

@media (max-width: 980px) { .pcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pcards--2, .pcards--3 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------- Download rows */

/* Market reports and the seller guide: a file list that states what each thing
   is and when it is from, because "download" on its own tells you nothing. */
.dlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dlist__row { border-bottom: 1px solid var(--line); }
.dlist__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-4) var(--s-5); align-items: center;
  padding: var(--s-5) 0;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.dlist__link:hover { color: var(--brass-txt); }
.dlist__name { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.dlist__period { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; }
.dlist__kind { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-txt); }

@media (max-width: 560px) {
  .dlist__link { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* ----------------------------------------------------- Podcast episodes */

/*
 * Not the reports list above. A report is a file you take away, so one line
 * with the name and the format is the whole of it. An episode is something you
 * decide whether to spend forty minutes on, so it is given room for a title, a
 * paragraph saying what is in it, and the player itself.
 */
.eplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.epitem {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.epitem__head { display: flex; flex-direction: column; gap: var(--s-2); }
.epitem__title { font-family: var(--display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin: 0; }
.epitem__meta {
  margin: 0;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.epitem__text { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); }
.epitem__text p { margin: 0 0 var(--s-3); }
.epitem__text p:last-child { margin-bottom: 0; }

/* The browser draws the player; all this does is let it use the width. */
.epitem__play { display: block; width: 100%; max-width: 32rem; }

.epitem__out { margin: 0; }

/* --------------------------------------------------------- Empty state */

/* Podcasts and People We Trust have no content from the client yet. An honest
   placeholder is better than inventing entries. */
.pempty {
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--line); border-left: 2px solid var(--brass);
  background: var(--white);
}
.pempty__title { font-family: var(--display); font-size: 1.3125rem; font-weight: 500; color: var(--ink); }
.pempty__text { margin-top: var(--s-3); font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); max-width: 60ch; }
.pempty__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Short-label variant of the who-we-serve grid: used for platform names. */
.serve__grid--tight .serve__item { min-height: 3.5rem; font-size: 1rem; }

/* Definition rows: a term and its explanation, for pages where four factors
   each need a sentence and a heading each would be too loud. */
.pdefs { display: grid; border-top: 1px solid var(--line); }
.pdefs__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s-3) var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.pdefs dt { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.pdefs dd { margin: 0; font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2); }
@media (max-width: 620px) { .pdefs__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

/* ------------------------------------------- 35. Transaction cards */

/* Deliberately text-led. These nineteen deals exist on the client's current
   site only as flat images with every figure baked into the artwork; putting a
   stock photograph on each card here would recreate the same problem in a
   prettier way. The brand's own mark carries the visual weight instead, and
   every number is real text. */
.tcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.tcard {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--white); border: 1px solid var(--line);
  min-width: 0;
}

/* The logo plate. A fixed height on a light ground so nineteen marks of wildly
   different proportions still read as one row of cards. */
.tcard__plate {
  position: relative;
  height: 7.5rem; padding: var(--s-5) var(--s-6);
  background: var(--white); border-bottom: 1px solid var(--line);
}
/* object-fit: contain inside a fixed plate normalises these by AREA rather than
   by height. Capping height alone made the square marks (BonBon, Sugarbabies,
   The Plate & Pint) look half the size of the wide ones like Anderson Roofing;
   this lets a tall mark use the full plate height and a wide one the full
   width, so all nineteen carry similar visual weight. */
.tcard__logo { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.tcard__brandtext { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; color: var(--ink); text-align: center; }

.tcard__stamp {
  position: absolute; top: 0; left: 0;
  padding: .45em .8em;
  background: var(--ok); color: #fff;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1;
}

.tcard__body { padding: var(--s-5); display: grid; align-content: start; gap: var(--s-3); }
.tcard__title { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.28; color: var(--ink); text-wrap: pretty; }
.tcard__brand { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-txt); }
.tcard__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }

.tcard__facts { margin: var(--s-3) 0 0; display: grid; border-top: 1px solid var(--line); }
.tcard__row {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.tcard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.tcard__facts dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tcard__facts dd {
  margin: 0; font-family: var(--sans); font-size: var(--fs-base); font-weight: 600;
  color: var(--ink); line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 1040px) { .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .tcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px)  {
  .tcard__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ------------------------------------- 36. Team, person and card extras */

.pcard__role { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-txt); }
.section--dark .pcard__role { color: var(--brass); }

.pcard__portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  margin-bottom: var(--s-2);
}

/* Icon-led variant of the numbered stage list: used by Why WBB, where the
   eight reasons are a set rather than a sequence, so a brass mark is honest
   where a number would not be. */
.pitem__mark { color: var(--brass-dp); padding-top: .1em; }
.pitem__mark svg { width: 32px; height: 32px; }

/* Person layout: prose left, portrait and contact card right. */
.pbody__grid--person { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
/* The gap has to clear the portrait's offset brass outline, which extends
   1.15rem below the image: a tighter gap clips it against the card. */
.pperson { display: grid; gap: var(--s-7); position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.pperson__figure { margin: 0; position: relative; }
.pperson__figure::after {
  content: ""; position: absolute; inset: 1.15rem -1.15rem -1.15rem 1.15rem;
  border: 1px solid var(--brass-hair); pointer-events: none;
}
.pperson__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 9 / 10; object-fit: cover; object-position: 50% 8%; }

@media (max-width: 980px) {
  .pbody__grid--person { grid-template-columns: minmax(0, 1fr); }
  .pperson { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pperson__figure { max-width: 22rem; }
}
@media (max-width: 640px) {
  .pperson { grid-template-columns: minmax(0, 1fr); }
  .pperson__figure::after { inset: .8rem -.8rem -.8rem .8rem; }
}

/* ------------------------------------------------- 37. Affiliation cards */

.acards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5);
}
.acard2 {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr);
  border: 1px solid var(--line); background: var(--white); min-width: 0;
}
.acard2__plate {
  display: grid; place-items: center;
  padding: var(--s-5); border-right: 1px solid var(--line);
  background: var(--white);
}
.acard2__logo { width: 100%; height: auto; max-height: 90px; object-fit: contain; }
.acard2__body { padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.acard2__title { font-family: var(--display); font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.acard2__text { font-size: var(--fs-body); line-height: 1.68; color: var(--ink-2); }

@media (max-width: 1040px) { .acards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .acard2 { grid-template-columns: minmax(0, 1fr); }
  .acard2__plate { border-right: 0; border-bottom: 1px solid var(--line); }
  .acard2__logo { max-height: 64px; }
}

/* --------------------------------------------------- 38. Review wall */

/* ------------------------------------------------- Google reviews page

   A bento, not a grid of equal cards. One review gets the floor - navy,
   large, in the serif - and the rest sit around it. Selling a company is a
   decision made slowly and nervously; a page of identical boxes reads as a
   form, while one voice at full height reads as a person.

   Every card leads with a headline, because nobody reads seven paragraphs to
   find the one that matches their situation - they scan the bold lines and
   stop at the one that sounds like them.                                      */

.rhead {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin: 0 0 var(--s-6);
}
.rhead__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
}
.rhead__title em { font-style: italic; color: var(--brass-txt); }
.rhead__score { margin: 0; display: flex; align-items: baseline; gap: .5em; font-size: var(--fs-sm); color: var(--ink-3); }
.rhead__score strong { font-size: var(--fs-base); color: var(--ink); font-variant-numeric: tabular-nums; }

.rstars { color: var(--brass); font-size: .8125rem; letter-spacing: .14em; line-height: 1; }

/* Name over role and date, wherever a reviewer is named. */
.rwho { display: grid; gap: 2px; min-width: 0; }
.rwho strong { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.rwho span { font-size: var(--fs-xs); color: var(--ink-3); }

.rbento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: stretch;
}

/* ------------------------------------------------------------- the one */

.rfeat {
  grid-column: span 2; grid-row: span 2;
  margin: 0;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-5);
  padding: var(--s-6);
  background: var(--ink);
  color: var(--on-dark);
}
.rfeat .rstars { color: var(--brass-lt); font-size: 1rem; }
.rfeat__body { margin: 0; align-self: center; }
.rfeat__body p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1vw + 1.05rem, 1.75rem);
  line-height: 1.45;
  color: var(--on-dark);
}
.rfeat__cite { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.rfeat .rwho strong { color: var(--on-dark); }
.rfeat .rwho span { color: var(--on-dark-3); }
.rfeat__more {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--on-dark);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px; line-height: 1.3;
}
.rfeat__more:hover { color: var(--brass-lt); }

/* ---------------------------------------------------------- the others */

.rcard {
  margin: 0;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.rcard:hover { border-color: var(--line-2); }
.rcard__head {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink);
}
.rcard__body { margin: 0; }
.rcard__body p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); }
.rcard__cite { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.rcard__more {
  flex: none;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px; line-height: 1.3;
}
.rcard__more:hover { color: var(--brass-txt); }

/* --------------------------------------------------- the way out, in brass */

.rmore {
  display: grid; align-content: space-between; gap: var(--s-6);
  padding: var(--s-5);
  background: var(--brass);
  color: var(--ink);
  text-decoration: none;
  transition: background .2s var(--ease);
}
.rmore:hover { background: var(--brass-dp); }
.rmore__count { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rmore__say { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.3; }

/* ------------------------------------------------------- the full review */

.rdlg {
  width: min(660px, calc(100vw - 2rem));
  max-height: min(80vh, 720px);
  padding: 0; border: 0;
  background: var(--white); color: var(--ink-2);
  box-shadow: var(--shadow-lg);
}
.rdlg::backdrop { background: rgba(9, 21, 40, .55); }
.rdlg__inner { display: grid; gap: var(--s-4); padding: var(--s-6); }
.rdlg__head { display: flex; align-items: center; gap: var(--s-3); }
.rdlg__x {
  margin-inline-start: auto; flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line); background: none;
  color: var(--ink-3); cursor: pointer;
}
.rdlg__x:hover { color: var(--ink); border-color: var(--line-2); }
.rdlg__body { margin: 0; overflow-y: auto; }
.rdlg__body p { margin: 0; font-size: var(--fs-lg); line-height: 1.75; color: var(--ink-2); }
.rdlg__link { justify-self: start; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass-hair); padding-bottom: 1px; }
.rdlg__link:hover { border-bottom-color: var(--brass); }

@media (max-width: 900px) {
  .rbento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rfeat { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .rbento { grid-template-columns: minmax(0, 1fr); }
  .rfeat { grid-column: auto; padding: var(--s-5); }
  .rhead { gap: var(--s-2); }
  .rdlg__inner { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .rcard, .rmore { transition: none; }
}


/* ------------------------------------- the enquiry form on a city page

   A paid landing page has one job, so the form is given a band of its own
   rather than being tucked under the copy where a reader scrolling for the
   next heading goes straight past it. */
.areaform {
  margin: var(--s-7) 0 0;
  padding: var(--s-6);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
}
.areaform__title { margin: 0 0 var(--s-3); font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; color: var(--ink); }
.areaform__text { margin: 0 0 var(--s-5); font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.areaform .pipedriveWebForms { max-width: 100%; }
.areaform iframe { max-width: 100%; border: 0; }

@media (max-width: 600px) { .areaform { padding: var(--s-5); } }

/* ------------------------------------------- 39. Topic chips + article body */

.ptopics { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }
.ptopics--tags { margin: var(--s-7) 0 0; }
.ptopic {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .6em 1em;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.ptopic:hover { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.ptopic span { color: var(--brass-txt); font-variant-numeric: tabular-nums lining-nums; }
.ptopic:hover span { color: var(--brass); }

.pfeature { margin: 0 0 var(--s-6); }
.pfeature img { width: 100%; height: auto; display: block; }

/* The legacy article and area bodies come through the_content(), so the prose
   rules have to cope with whatever the builder left behind. */
.prose--article { max-width: 46rem; }
.prose--article h2 { font-family: var(--display); font-size: clamp(1.4rem, 1.1vw + 1.05rem, 1.75rem); font-weight: 500; line-height: 1.25; color: var(--ink); margin-top: var(--s-8); }
.prose--article h3 { font-size: 1.1875rem; font-weight: 600; color: var(--ink); margin-top: var(--s-7); }
.prose--article h4 { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); margin-top: var(--s-6); }
.prose--article img { max-width: 100%; height: auto; display: block; }
.prose--article figure { margin: var(--s-6) 0; }
.prose--article ul, .prose--article ol { padding-left: 1.15rem; }
.prose--article br + br { display: none; }
/* Builder markup routinely leaves empty paragraphs behind; they read as broken
   spacing once its stylesheet is gone. */
.prose--article p:empty { display: none; }

/* Three cards across inside the prose column works out at roughly 215px each:
   four or five words a line, which is unreadable. Inside the main column they
   become full-width rows with the mark alongside instead. The full three-up grid
   is still used where the section spans the whole shell. */
.pbody__main .pcards--3 { grid-template-columns: minmax(0, 1fr); }
.pbody__main .pcards--3 .pcard {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: start;
}
.pbody__main .pcards--3 .pcard > * { grid-column: 2; }
.pbody__main .pcards--3 .pcard__mark { grid-column: 1; grid-row: 1 / -1; }

@media (max-width: 520px) {
  .pbody__main .pcards--3 .pcard { grid-template-columns: minmax(0, 1fr); }
  .pbody__main .pcards--3 .pcard > *,
  .pbody__main .pcards--3 .pcard__mark { grid-column: 1; grid-row: auto; }
}

/* ------------------------------- 40. Legacy content safety net */

/* The articles and area pages come through the builder, and with its stylesheet
   gone some of its markup has no width discipline of its own. At 390px an
   inline icon list carried a negative left margin and a textarea sat 20px wider
   than the viewport, which made the whole document scroll sideways.
   Everything here is defensive: it constrains inherited markup and changes
   nothing the theme itself renders. */

.prose--article ul.elementor-inline-items,
.prose--article ul.elementor-icon-list-items {
  display: flex; flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-left: 0; padding-left: 0;
  list-style: none;
}
.prose--article ul.elementor-inline-items > li,
.prose--article ul.elementor-icon-list-items > li { min-width: 0; }

/* Anything measured in absolute units, or sized by a cols/width attribute. */
.prose--article textarea,
.prose--article input,
.prose--article select,
.prose--article iframe,
.prose--article video,
.prose--article pre,
.prose--article table { max-width: 100%; }
.prose--article textarea { width: 100%; box-sizing: border-box; }

/* Builder wrappers occasionally carry their own widths and negative margins. */
.prose--article [class*="elementor-"] { max-width: 100%; }

/* A long unbroken URL in body copy is the other classic overflow. */
.prose--article p, .prose--article li, .prose--article td { overflow-wrap: break-word; }

/* ----------------------------------------- 41. Phone density refinements */

@media (max-width: 480px) {
  /* Fourteen industry rows at desktop height is nearly a full screen of
     scrolling for a list of labels. Tighter rows keep it scannable. */
  .serve__item { min-height: 3.25rem; padding: var(--s-3) var(--s-4); font-size: 1rem; }
  .serve__more { min-height: 3.9rem; padding: var(--s-3) var(--s-4); }

  /* The logo plate does not need to be as tall as the desktop card. */
  .tcard__plate { height: 6rem; padding: var(--s-4) var(--s-5); }

  /* Fact rows read better as label-above-value at this width than as two
     columns squeezed into 300px. */
  .tcard__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: .5rem 0; }
}

/* Search form above the results. */
.searchform-wrap { margin-bottom: var(--s-7); }

/* Full-width main column, for pages whose content is one wide embed. */
.pbody__main--wide { max-width: none; }

/* A table that has been wrapped scrolls inside its own box. Also give it a
   minimum width so columns do not collapse into unreadable slivers. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table { min-width: 30rem; }

/* ------------------------------------------------ 42. Team pages */

/* The role sits above the standfirst inside the hero lede, so a person's page
   states what they do before it states anything else. */
.phero__role {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--brass);
}

/* Team cards. A whole-card link, because a portrait beside a name that is not
   clickable is the thing everybody tries to click first. */
.team__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
.mcard { min-width: 0; }
.mcard__link {
  display: grid; gap: var(--s-4);
  height: 100%; align-content: start;
  color: var(--ink);
}

.mcard__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 9 / 10;
  background: var(--ivory-3);
  border: 1px solid var(--line);
}
.mcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Headshots put the face high in the frame. */
  object-position: 50% 14%;
  transition: transform .5s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .mcard__link:hover .mcard__media img { transform: scale(1.03); }
}

.mcard__body { display: grid; gap: var(--s-2); }
.mcard__role { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass-txt); }
.mcard__name { font-family: var(--display); font-size: 1.3125rem; font-weight: 500; line-height: 1.2; color: var(--ink); }
.mcard__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }
.mcard__more {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: var(--s-2);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
}
.mcard__more svg { transition: transform .25s var(--ease); }
.mcard__link:hover .mcard__more { color: var(--brass-txt); }
.mcard__link:hover .mcard__more svg { transform: translateX(4px); }
.mcard__link:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.section--dark .mcard__name,
.section--dark .mcard__more { color: var(--on-dark); }
.section--dark .mcard__text { color: var(--on-dark-2); }
.section--dark .mcard__role { color: var(--brass); }
.section--dark .mcard__media { background: var(--navy-700); border-color: var(--on-dark-line); }

@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* Two people (a person viewing their own page sees the other two) should not
   leave an empty third column, and should not blow the portraits up to 600px
   either, so the cards keep roughly their three-up width. */
.team__grid--1 { grid-template-columns: minmax(0, 24rem); }
.team__grid--2 { grid-template-columns: repeat(2, minmax(0, 24rem)); }
.team__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .team__grid--2, .team__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team__grid--1, .team__grid--2, .team__grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Interior hero actions match the homepage hero on phones: full width and
   equal, rather than two buttons of different lengths stacked. */
@media (max-width: 640px) {
  .phero__actions { gap: .65rem; }
  .phero__actions .btn { flex: 1 1 100%; padding-block: 1.15em; }
  .phero__facts { gap: var(--s-5) var(--s-6); }
}

/* The team strip used to borrow .pbody for its padding, which also gave it
   .pbody background white, overriding the tint. It has its own padding now. */
.team { padding-block: var(--s-band); }

/* The enquiry band and the affiliations strip choose grey or white at render
   time, whichever the band above them did not use. */
.discovery--grey, .logos--grey { background: var(--ivory-2); }
.discovery--white, .logos--white { background: var(--white); }

/* The three-steps band takes whichever light ground the band above did not. */
.steps--white { background: var(--white); }
.steps--grey { background: var(--ivory-2); }

/* The last light bands to become self-choosing. Their fixed backgrounds are
   replaced by a grey/white pair so no two neighbours can share a ground. */
.deals--grey, .listings--grey, .areas-band--grey, .about--grey { background: var(--ivory-2); }
.deals--white, .listings--white, .areas-band--white, .about--white { background: var(--white); }

/* ------------------------------------------- 43. Listing body structure */

/* The listing pages arrive from the builder as one long run of paragraphs; see
   wbb_listing_body(). These are the shapes it rebuilds them into. */

/* Specification list. Same reading as the sidebar's "at a glance" panel, in a
   wider measure, so a buyer comparing figures sees them in the same form in
   both places. */
.lspec {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--line);
}
.lspec__row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}
.lspec dt {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  /* The label sits on the first line of a value that wraps to several. */
  padding-top: .3em;
}
/* Medium rather than semibold: several of these values are a sentence, not a
   figure, and semibold turns those into a shout. */
.lspec dd {
  margin: 0;
  font-size: var(--fs-body); font-weight: 500; color: var(--ink); line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 560px) {
  .lspec__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .lspec dt { padding-top: 0; }
}

/* Lists the builder stored as <br>-separated lines inside a paragraph. */
.prose .lpoints { padding-left: 1.15rem; display: grid; gap: var(--s-2); }

/* A line the author wrapped in asterisks, which is how these listings mark a
   condition worth stopping on: under contract, no medical licence needed. */
.lnote {
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--brass);
  background: var(--ivory-2);
  font-size: var(--fs-body); color: var(--ink);
}
.pbody--tint .lnote { background: var(--white); }
/* The NDA line is an action, not a caution, so it reads as one compact row
   rather than a note-sized block with a short label floating in it. */
.lnote--cta { padding-block: var(--s-3); }
.lnote--cta a {
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: var(--fs-micro); color: var(--brass-txt); border-bottom: 0;
}
.lnote--cta a::after { content: " \2192"; }
.lnote--cta a:hover { color: var(--ink); }

/* The listing body runs a little wider than an article: it is reference
   material with tables in it, not a piece of reading. */
.prose--listing { max-width: 48rem; }
.prose--listing h2 { margin-top: var(--s-8); }

/* ------------------------------------------------- 44. Advisor card */

/* Replaces the block the builder left at the foot of every listing: an
   "Advisor" heading, a 450px circular portrait with the ring painted into the
   artwork, and a bullet point. Same person, read from the team profiles, so the
   portrait matches the one on the team strip and on their own page. */

.advisor__head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-4); align-items: center; }

.advisor__media { display: block; overflow: hidden; border: 1px solid var(--line); }
.advisor__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 10; object-fit: cover;
  /* The three portraits are framed differently; anchoring high keeps every
     face in the same place in a card this small. */
  object-position: 50% 8%;
}

.advisor__role { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-txt); }
.advisor__name { margin-top: var(--s-2); font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.advisor__name a { color: inherit; }
.advisor__name a:hover { color: var(--brass-txt); }

.advisor__text { margin-top: var(--s-4); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }

.advisor__meta { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
/* Row and link at one weight, for the same reason as .pside__meta: a row that
   is not a link must not read as a faded version of one. */
.advisor__meta li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.advisor__meta svg { width: 14px; height: 14px; margin-top: .25em; color: var(--brass); }
/* Long addresses break rather than push the sidebar wide. */
.advisor__meta a { color: inherit; overflow-wrap: anywhere; }
.advisor__meta a:hover { color: var(--ink); }

.advisor__link { margin-top: var(--s-5); }

/* --------------------------------------------- 45. Guidance assistant */

/* Not a chat window. Speech bubbles, a round avatar pill and three bouncing
   dots are Intercom's visual language, and on a firm that sells discretion to
   people considering the largest transaction of their lives they read as a
   support widget bolted to the corner.

   So this is built from the same parts as the rest of the site: brass eyebrow
   labels, a serif question, hairline rows, a rule under each answer. It reads
   as a page of the site that happens to be in a panel, which is what it is. */

.wba { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 60; }
.wba[hidden] { display: none; }

/* --- panel ------------------------------------------------------------- */

.wba__panel {
  position: absolute; right: 0; bottom: calc(100% + .6rem);
  display: flex; flex-direction: column;
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 8rem));
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  border-radius: 0;
  box-shadow: 0 30px 60px -24px rgba(9, 21, 40, .45), 0 2px 10px -4px rgba(9, 21, 40, .2);
  overflow: hidden;
  animation: wba-in .24s var(--ease) both;
}
.wba__panel[hidden] { display: none; }
.wba__panel:focus { outline: none; }

@keyframes wba-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- head -------------------------------------------------------------- */

/* The person is here because the visitor is being routed towards a person, but
   as a byline under a section label, not as a chat avatar. */
.wba__head {
  flex: none;
  padding: var(--s-5);
  background: var(--navy); color: var(--on-dark);
}
.wba__head-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: center;
}

/* What the panel is for, said once and left there rather than scrolling away
   as the first message in the thread would. */
.wba__intro {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--brass-hair);
  font-size: var(--fs-micro); line-height: 1.5; color: var(--on-dark-2);
}
.wba__face { display: block; width: 2.75rem; height: 2.75rem; flex: none; overflow: hidden; border: 1px solid var(--brass-hair); }
.wba__face img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wba__who { min-width: 0; }
/* Name first and set in the display face, role under it in brass. The panel is
   fronted by a person, so their name is the line that should carry it. */
.wba__title { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.2; color: var(--on-dark); }
.wba__role { margin-top: .22rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }

.wba__close {
  align-self: start; flex: none; display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin: -.3rem -.4rem 0 0;
  background: none; border: 0; cursor: pointer; color: var(--on-dark-2);
}
.wba__close:hover { color: var(--brass); }

/* --- thread ------------------------------------------------------------ */

.wba__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5); background: var(--white); }
.wba__thread { display: grid; gap: var(--s-4); }

.wba__msg, .wba__choices, .wba__links, .wba__actions, .wba__restart, .wba__chips {
  animation: wba-block .22s var(--ease) both;
}
@keyframes wba-block {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Body copy. No bubble, no tail, no alignment games: it is prose. */
.wba__msg {
  font-size: var(--fs-sm); line-height: 1.68; color: var(--ink-2);
}

/* The question being put to the visitor: the loudest thing in the panel,
   because it is the only thing that needs acting on. */
.wba__msg--lead {
  margin-top: var(--s-2);
  font-family: var(--display); font-size: 1.25rem; font-weight: 500;
  line-height: 1.3; color: var(--ink);
}

/* A section label: the same eyebrow the rest of the site uses. */
.wba__msg--label {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass-txt);
}
.wba__thread > .wba__msg--label:first-child { margin-top: 0; }
.wba__msg--fine { font-size: var(--fs-micro); color: var(--ink-3); }

/* What the visitor picked, as a trail entry rather than a speech bubble. The
   brass tick reads as "you are here" in a document; a navy bubble floated to
   the right reads as a text message. */
/* What the visitor answered. A record of what happened, deliberately quieter
   than the question above it and the answer below it: set in the display face at
   17px it was the loudest thing in the panel, which put the emphasis on what the
   visitor already knew instead of on what they had to read next. The brass rule
   is what makes it findable; the size is not. */
.wba__msg--you {
  margin-top: var(--s-4);
  padding: .1rem 0 .1rem .8rem;
  border-left: 2px solid var(--brass);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
  line-height: 1.5; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.wba__thread > .wba__msg--you:first-child { margin-top: 0; }

/* Working. A brass rule that fills, instead of dots that bounce. */
.wba__typing { height: 1px; background: var(--line); overflow: hidden; }
.wba__typing i { display: block; width: 40%; height: 100%; background: var(--brass); animation: wba-scan 1.1s infinite var(--ease); }
@keyframes wba-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* --- choices ----------------------------------------------------------- */

/* Hairline rows with a chevron, exactly like the sidebar navigation elsewhere
   on the site. Not pill buttons stacked in a message balloon. */
.wba__choices { display: grid; border-top: 1px solid var(--line); }
.wba__choice {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left;
  padding: .8rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.3;
  color: var(--ink); cursor: pointer;
  transition: color .18s var(--ease);
}
.wba__choice::after {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-right: 2px;
  border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}
.wba__choice:hover { color: var(--brass-txt); }
.wba__choice:hover::after { transform: rotate(-45deg) translate(2px, 2px); }

/* --- links ------------------------------------------------------------- */

.wba__links { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.wba__link { display: grid; gap: .12rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.wba__link-label { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.wba__link-text { font-size: var(--fs-micro); color: var(--ink-3); line-height: 1.5; }
.wba__link:hover .wba__link-label { color: var(--brass-txt); }

/* --- actions ----------------------------------------------------------- */

.wba__actions { display: grid; gap: var(--s-2); }
.wba__btn {
  display: block; padding: .9em 1.1em;
  border: 1px solid var(--line-2); border-radius: 0;
  background: var(--white); color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  text-align: center; line-height: 1.2; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.wba__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.wba__btn--gold { background: var(--brass); border-color: var(--brass); color: var(--navy-900); }
.wba__btn--gold:hover { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--navy-900); }

.wba__restart {
  justify-self: start; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.wba__restart:hover { color: var(--brass-txt); }

/* --- suggested questions ----------------------------------------------- */

/* Squared, hairline, quiet. Rounded brass pills were the last thing in here
   still reading as a messaging app. */
.wba__chips { display: grid; gap: 0; border-top: 1px solid var(--line); }
.wba__chip {
  display: block; width: 100%; text-align: left;
  padding: .65rem 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--ink-2);
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.45; cursor: pointer;
  transition: color .18s var(--ease);
}
.wba__chip::before { content: "\201C"; color: var(--brass); margin-right: .3em; font-family: var(--display); }
.wba__chip:hover { color: var(--ink); }

/* --- ask --------------------------------------------------------------- */

.wba__ask { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; border-top: 1px solid var(--line); background: var(--ivory-2); }
.wba__input {
  padding: .95rem var(--s-4);
  border: 0; background: none; color: var(--ink);
  font-family: inherit; font-size: var(--fs-sm);
}
.wba__input:focus { outline: 2px solid var(--brass); outline-offset: -2px; background: var(--white); }
.wba__input::placeholder { color: var(--ink-3); }
.wba__send {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-left: 1px solid var(--line);
  color: var(--brass-txt); cursor: pointer;
}
.wba__send:hover { color: var(--ink); }

.wba__foot {
  flex: none; display: flex; flex-wrap: wrap; gap: .2rem .6rem;
  padding: .6rem var(--s-4) .7rem;
  border-top: 1px solid var(--line); background: var(--navy-900); color: var(--on-dark-2);
  font-size: var(--fs-micro); line-height: 1.5;
}
.wba__foot a { color: var(--brass); font-weight: 600; }
.wba__foot a:hover { color: var(--on-dark); }

/* --- phone ------------------------------------------------------------- */

@media (max-width: 560px) {
  .wba { right: 1rem; bottom: 1rem; left: 1rem; }
  .wba__launch { width: 100%; justify-content: center; }
  .wba__panel {
    position: fixed; inset: auto 1rem calc(1rem + 3.4rem) 1rem;
    width: auto; max-height: calc(100vh - 11rem); max-height: calc(100svh - 11rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wba__launch, .wba__choice, .wba__btn, .wba__chip { transition: none; }
  .wba__panel, .wba__msg, .wba__choices, .wba__links, .wba__actions, .wba__restart, .wba__chips { animation: none; }
  .wba__typing i { animation: none; width: 100%; }
}

/* It is a navigation aid, not content. */
@media print { .wba { display: none !important; } }

/* --- launcher and its greeting ----------------------------------------- */

/* The launcher is the portrait, and the sentence that used to be welded to it
   is a card above that can be dismissed. A face is the one thing in the corner
   worth stopping for, and a circle is the right shape for exactly one element
   on this site: a photograph of a person. */

.wba { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; }

.wba__nudge-wrap { position: relative; max-width: min(19rem, calc(100vw - 2rem)); animation: wba-nudge .34s var(--ease) both; }
.wba__nudge-wrap[hidden] { display: none; }

@keyframes wba-nudge {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.wba__nudge {
  display: grid; gap: .3rem;
  width: 100%; text-align: left;
  padding: var(--s-4) 2.2rem var(--s-4) var(--s-4);
  background: var(--white);
  border: 1px solid var(--line); border-top: 2px solid var(--brass);
  box-shadow: 0 22px 44px -22px rgba(9, 21, 40, .5);
  font-family: inherit; cursor: pointer;
  transition: border-color .2s var(--ease);
}
.wba__nudge:hover { border-color: var(--line-2); border-top-color: var(--brass); }

.wba__nudge-lead { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.wba__nudge-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.wba__nudge-by {
  margin-top: .35rem; padding-top: .45rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.wba__nudge-by i { font-style: normal; color: var(--brass-txt); }
.wba__nudge-by i::before { content: "\2002\00B7\2002"; color: var(--line-2); }

.wba__nudge-close {
  position: absolute; top: .45rem; right: .45rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
}
.wba__nudge-close:hover { color: var(--ink); }

/* The face, in a brass ring: the accent every other framed thing on this site
   uses, and it holds against both the photograph on the homepage and the white
   of an interior page. The dot is a sibling rather than
   a child, because the launcher clips its own overflow to keep the portrait
   round and the dot has to straddle that edge. */
.wba__launch {
  position: relative; display: block;
  width: 3.75rem; height: 3.75rem; flex: none;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--brass), 0 16px 34px -14px rgba(9, 21, 40, .75);
  cursor: pointer; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wba__launch:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--brass-lt), 0 20px 40px -14px rgba(9, 21, 40, .85); }

.wba__launch-dot {
  position: absolute; right: .1rem; bottom: .1rem;
  width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px var(--brass);
  pointer-events: none;
}
/* Nothing to be available for once the panel is open. */
.wba.is-open .wba__launch-dot { display: none; }

.wba__launch-face { position: absolute; inset: 0; display: block; }
.wba__launch-face img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Swaps in for the portrait while the panel is open, so the same control
   closes it. */
.wba__launch-close {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brass); color: var(--navy-900);
  opacity: 0; transition: opacity .2s var(--ease);
}
.wba.is-open .wba__launch-close { opacity: 1; }
.wba.is-open .wba__launch { box-shadow: 0 0 0 1px var(--brass), 0 16px 34px -14px rgba(9, 21, 40, .75); }

/* The panel is anchored to the launcher, which is now the last child. */
.wba__panel { bottom: calc(3.75rem + 1.25rem); }

@media (max-width: 560px) {
  .wba { align-items: flex-end; }
  .wba__nudge-wrap { max-width: none; width: 100%; }
  .wba__panel { inset: auto 1rem calc(1rem + 4.75rem) 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wba__nudge-wrap { animation: none; }
  .wba__launch, .wba__nudge, .wba__launch-close { transition: none; }
}

/* The line that turns an answer into a reason to call. Set apart from the body
   copy so it does not read as more facts: brass rule, ink, a touch larger. */
.wba__msg--bridge {
  margin-top: var(--s-2);
  padding: var(--s-4);
  background: var(--ivory-2);
  border-left: 2px solid var(--brass);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--ink);
}


/* ====================================================== 46. THE ADVISOR'S FACE

   Ryan's photograph next to the primary call to action, for the reason he
   gave: a first meeting is usually a video call, and an owner wants to see who
   they are about to sit across from before agreeing to it.

   It sits beside the button rather than inside it. Inside was tried and
   rejected - the verb and the name stacked forced the button two lines tall and
   it read as a banner. Out here the button is untouched, and the name is big
   enough to be read.
*/

/* --- beside the button: the button stays plain -----------------------------

   The button is left exactly as it is and the face sits next to it as a line of
   reassurance. It costs the button nothing and gives the name room to be read,
   which the in-button version cannot do without growing.
*/
.hero__with {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-left: .2rem;
}

.hero__with-face {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-700);
  box-shadow: 0 0 0 1px var(--brass-hair);
}

.hero__with-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__with-text {
  display: grid;
  gap: .1em;
  line-height: 1.3;
}

.hero__with-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark);
}

.hero__with-role {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}

@media (max-width: 700px) {
  /* The button goes full width on a phone; the face line should not stretch
     with it, and it reads better under the button than beside it. */
  .hero__actions .hero__with { flex: 1 1 100%; padding-left: 0; }
}

/* ==================================================== 47. WHO WE SERVE

   Five kinds of owner and a way in, in the same hairline rectangle the sectors
   use underneath. Both halves of the band are then the same object at two
   levels of detail, which is what lets them sit under one heading without
   either having to balance the other.

   A two-column split - copy one side, sectors the other - was tried four times
   and abandoned. A paragraph of copy and a list of thirteen single words are
   not the same weight, so one side always hung off the bottom of the other;
   stretching the short one gave cells with one word and a hundred pixels of
   air. The reference this came from fills that space with a photograph of
   advisors and clients, and there is no such photograph in the library.
*/

.serve__who-block { margin-bottom: var(--s-7); }

.serve__lead {
  max-width: 62ch;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

.serve__who {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.serve__type {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: var(--s-5) var(--s-5) var(--s-6);
  background: var(--white);
}

.serve__type-k {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
}

.serve__type-v {
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink-2);
}

/* The way in. Navy, like the closing cell of the sector grid below it, so the
   two read as the same device rather than as two different ideas. It also
   completes the rectangle: five types across three columns would leave a hole,
   and this is a better thing to put there than a blank. */
.serve__type--cta { padding: 0; background: var(--navy); }

.serve__type--cta a {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  height: 100%;
  padding: var(--s-5) var(--s-5) var(--s-6);
  position: relative;
  transition: background-color .18s var(--ease);
}

.serve__type--cta a:hover { background: var(--navy-700); }
.serve__type--cta .serve__type-k { color: var(--on-dark); padding-right: 2rem; }
.serve__type--cta .serve__type-v { color: var(--on-dark-2); }

.serve__type-arrow {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  color: var(--brass);
}

.serve__grid-lead {
  max-width: 62ch;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-2);
}

.section--dark .serve__lead,
.section--dark .serve__grid-lead { color: var(--on-dark-2); }
.section--dark .serve__who { background: var(--on-dark-line); border-color: var(--on-dark-line); }
.section--dark .serve__type { background: var(--navy); }
.section--dark .serve__type-k { color: var(--on-dark); }
.section--dark .serve__type-v { color: var(--on-dark-2); }

@media (max-width: 1040px) {
  .serve__who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .serve__who { grid-template-columns: minmax(0, 1fr); }
  .serve__lead { font-size: var(--fs-body); }
  .serve__type,
  .serve__type--cta a { padding: var(--s-4) var(--s-4) var(--s-5); }
}

/* ==================================================== 48. REFERRAL DIRECTORY

   People we trust: named advisors grouped by what they do, each with their
   firm, their details and a link out.

   The reference the client showed uses drop-shadowed cards on a grey ground.
   This is the same information in the language the rest of the site speaks:
   hairline rectangles, square corners, the display face on the name.
*/

.refgroup { margin-top: var(--s-7); }
.refgroup:first-of-type { margin-top: var(--s-6); }

.refgroup__title {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--brass-hair);
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.refgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.refcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: start;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line);
  background: var(--white);
}

.refcard__head {
  grid-column: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3) var(--s-4);
}

.refcard__face {
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--brass-hair);
}

.refcard__face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.refcard__initials {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--brass);
}

.refcard__id { min-width: 0; }

.refcard__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
}

.refcard__role,
.refcard__firm { margin: .2em 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.refcard__firm { color: var(--brass-txt); font-weight: 600; }

/* The firm's mark, where one has been uploaded. Capped so a wide logo and a
   square one occupy the same corner. */
.refcard__logo {
  grid-column: 1 / -1;
  max-width: 8rem;
  max-height: 1.75rem;
}

.refcard__logo img { max-width: 100%; max-height: 1.75rem; width: auto; height: auto; display: block; }

/* The contact block sits beside the name, not under it, against a hairline
   that runs the height of whichever side is taller. */
.refcard__meta {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-5);
  border-left: 1px solid var(--line-2);
  display: grid;
  align-content: start;
  gap: .55rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.refcard__meta li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.refcard__meta .icon { width: 15px; height: 15px; color: var(--brass); margin-top: .18em; }
.refcard__meta a { color: var(--ink-2); }
.refcard__meta a:hover { color: var(--ink); }

/* Indented past the face so it lines up under the name rather than under the
   photograph, which gave the left half of every card two left edges. */
.refcard__link {
  grid-column: 1;
  align-self: end;
  padding-left: calc(4.25rem + var(--s-4));
  font-size: var(--fs-sm);
}

/* Only reach down to the second row when there is one. Someone with no
   website has no link, and an unconditional span would open an empty row
   inside their card. Scoped to the split, because three classes of
   specificity would otherwise outrank the stacked rules below. */
@media (min-width: 641px) {
  .refcard:has(.refcard__link) .refcard__meta { grid-row: 1 / span 2; }
}

/* Below the split the two halves stack, so the hairline moves to the top of
   the contact block and the padding moves with it. */
@media (max-width: 640px) {
  .refcard { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .refcard__head,
  .refcard__meta,
  .refcard__link { grid-column: 1; }
  .refcard__meta {
    grid-row: auto;
    padding: var(--s-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }
}

@media (max-width: 420px) {
  .refcard__head { grid-template-columns: minmax(0, 1fr); }
  .refcard__link { padding-left: 0; }
}

/* The three organisations the firm recommends in its own words. Firms, not
   people, so no face and no contact block - a label, a name, the reasoning. */

.reffirms {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.reffirm {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}

.reffirm:last-child { border-bottom: 1px solid var(--line); }

.reffirm__kind {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-txt);
}

.reffirm__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.reffirm__text { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }
.reffirm__link { margin-top: var(--s-2); font-size: var(--fs-sm); }

/* ================================================= 49. STACKED LISTING ROWS

   Businesses for Sale only. The three-across card is a glance; this is a read.
   Image left, and on the right the sentence about the business the card had no
   room for, then the figures, then the way in.
*/

.lrows { display: grid; gap: var(--s-5); }

.lrow {
  position: relative;
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  transition: box-shadow .28s var(--ease);
}

.lrow:hover { box-shadow: var(--shadow-md); }

.lrow__media {
  position: relative;
  display: block;
  /* 4:3, and it does not stretch. Three different boxes used to show the same
     listing photograph at three different shapes - this one, the related
     cards at 16:10, and 3:2 on a phone - so whichever shape was uploaded, two
     of the three cropped it. They are all 4:3 now.

     4:3 rather than 3:2 because the column is 26rem and the text beside it
     runs to about 21rem: 3:2 left the picture noticeably shorter than the
     words next to it. */
  align-self: start;
  aspect-ratio: 4 / 3;
  background: var(--navy-700);
  overflow: hidden;
}

.lrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.lrow:hover .lrow__media img { transform: scale(1.045); }

.lrow__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--s-5); text-align: center;
  font-family: var(--display); font-size: 1.0625rem; color: var(--brass);
  background: var(--navy);
}

.lrow__body { display: flex; flex-direction: column; gap: .55rem; padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5); }
.lrow__meta { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-txt); }

.lrow__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}

.lrow__title a { color: inherit; }

/* The title covers the row, so the whole thing is one target. The button in
   the foot is lifted back above it, or it would be unpressable. */
.lrow__title a::after { content: ""; position: absolute; inset: 0; }

.lrow__text { margin: .15rem 0 0; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); max-width: 60ch; }

/* The asking price leads on its own, in the brass the client's own listings
   use for it. */
.lrow__price {
  margin: .1rem 0 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--brass-txt);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Detail left, way in right, sharing one band above the hairline. */
.lrow__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-5);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* Two columns of labelled pairs. auto-fit rather than a fixed two, so a
   listing carrying only industry and location does not leave a hole. */
.lrow__facts {
  flex: 1 1 22rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .7rem var(--s-5);
  margin: 0;
}

.lrow__fact dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lrow__fact dd { margin: .18rem 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); }

/* Money gets the sans and lining numerals, so columns of it line up. */
.lrow__fact--money dd {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Lifted above .lrow__title a::after, which covers the row. */
.lrow__btn { position: relative; z-index: 1; flex: 0 0 auto; }

@media (max-width: 860px) {
  .lrow { grid-template-columns: minmax(0, 1fr); }
  .lrow__media { aspect-ratio: 4 / 3; min-height: 0; }
  .lrow__body { padding: var(--s-5); }
  .lrow__detail { align-items: start; }
  .lrow__btn { width: 100%; text-align: center; }
}

/* The button the client asked for on the smaller cards. It has to be lifted
   above .lcard__title a::after, which covers the card. */
.lcard__more {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------- coming soon

   A business whose marketing materials are not finished. No photograph and no
   figures, because that is the whole reason it is in this band and a grey
   placeholder would make an empty entry look like a real one.
*/

.soon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.soon__head { grid-column: 1; }

.soon__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.1vw + 1.05rem, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.soon__text { margin: var(--s-3) 0 0; font-size: var(--fs-lg); line-height: 1.7; color: var(--ink-2); max-width: 62ch; }

.soon__list {
  grid-column: 1 / -1;
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
}

.soon__item {
  display: grid;
  gap: .3rem;
  align-content: start;
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
}

.soon__ref { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-txt); }
.soon__what { margin: 0; font-family: var(--display); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.soon__where { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.soon__btn { grid-column: 2; grid-row: 1; justify-self: end; }

@media (max-width: 760px) {
  .soon { grid-template-columns: minmax(0, 1fr); }
  .soon__btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s-5); }
}

/* The client read the listing description as greyed out beside the figures in
   its own sidebar, and he was right: the site's body grey is a warm mid-tone
   and these pages are long runs of it. The listing body alone takes the
   darkest ink, which is what the sidebar values already use. */
.prose--listing p,
.prose--listing li,
.prose--listing td { color: var(--ink); }

/* WordPress's own hidden-label class. The theme never declared it, so any
   markup using it - core's search and comment forms, and our own button
   labels - printed its hidden text in full. */
.screen-reader-text {
  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;
}

/* Focusable hidden text - a skip link - has to come back into view. */
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}