@charset "UTF-8";
/* ==========================================================================
   ADVANTAGE LAW FIRM — design system
   --------------------------------------------------------------------------
   Premium · modern · minimal. Built on generous white space, one accent,
   and clean separation between sections.

   PALETTE — Nordic slate and warm oak.
   This is a property practice: hidden defects in houses and apartments. The
   palette is drawn from the material world those matters live in — wet slate
   for the darks, planed oak for the accent, limestone for the quiet ground.

     --ink         #1B2A32   wet slate — primary button, logo square
     --brand       #24363F   slate blue-grey — the wordmark colour, re-toned
     --accent      #B98B54   warm oak — every rule, icon and primary action
     --surface-alt #F2EEE7   limestone — the second ground

    1. Tokens          6. Buttons & links    11. Cards
    2. Reset & base    7. Icons              12. Team
    3. Layout          8. Header / nav       13. Testimonials
    4. Typography      9. Hero               14. Blog
    5. Furniture      10. CTA                15. Forms
                                             16. Footer
                                             17. Utilities · motion · print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand — slate & oak ---------------------------------------------------- */
  --ink:            #1B2A32;  /* wet slate — deepest ground, primary button  */
  --brand:          #24363F;  /* slate blue-grey, 11.6:1 on white            */
  --brand-deep:     #1E2E36;  /* dark section ground                         */
  --brand-darker:   #253840;  /* footer — lifted so it reads apart from the CTA */

  --accent:         #B98B54;  /* warm oak — rules, icons, UI (non-text)      */
  --accent-deep:    #8A6538;  /* oak as text (5.2:1 on white)                */
  --accent-soft:    #D6AE76;  /* oak on dark grounds (7.0:1)                 */

  /* Surfaces ------------------------------------------------------------- */
  --surface:        #FFFFFF;
  --surface-alt:    #F2EEE7;  /* limestone — reads clearly against white     */
  --surface-dark:   #1E2E36;

  /* Text ----------------------------------------------------------------- */
  --text:           #16232A;  /* 16.4:1 on white                             */
  --text-muted:     #51606A;  /*  6.4:1 on white, 6.0:1 on alt               */
  --text-inverse:   #FFFFFF;
  --text-inverse-mu:#A6B2BA;  /*  7.8:1 on --surface-dark                    */

  /* Lines ---------------------------------------------------------------- */
  --line:           #E4DFD6;
  --line-strong:    #D2CBBE;
  --line-control:   #75838C;  /* interactive boundaries — 3.6:1 on white     */
  --line-inverse:   rgba(255,255,255,.15);

  /* Feedback ------------------------------------------------------------- */
  --danger:         #A03328;
  --success:        #2F6B4F;

  /* Type ----------------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-micro:  0.75rem;
  --fs-xs:     0.8125rem;
  --fs-sm:     0.9375rem;
  --fs-base:   1rem;
  --fs-lead:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h4:     clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --fs-h3:     clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
  --fs-h2:     clamp(1.875rem, 1.4rem + 1.9vw, 3rem);
  --fs-h1:     clamp(2.25rem, 1.6rem + 2.7vw, 3.75rem);
  --fs-hero:   clamp(1.875rem, 1.35rem + 2.6vw, 4rem);

  --track-eyebrow: 0.2em;
  --track-display: -0.015em;

  /* Space — deliberately generous ---------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y:    clamp(2.75rem, 4vw, 4rem);
  --section-y-lg: clamp(3.25rem, 5vw, 5rem);

  /* Layout --------------------------------------------------------------- */
  --container: 1360px;
  --container-wide: 1500px;
  --container-narrow: 44rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 84px;

  /* Shape ---------------------------------------------------------------- */
  --r-xs: 2px;
  --r:    3px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 150ms;
  --t: 300ms;
  --t-slow: 600ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 500; }
p, ul, ol, figure, blockquote, dl, table { margin: 0; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
dd { margin-inline-start: 0; }
/* Lists inside site chrome are navigation, never content lists. */
nav ul, nav ol, .topbar ul, .site-footer ul, .hero__meta, .contact-strip, .info-list {
  list-style: none; padding: 0; margin: 0;
}
address { font-style: normal; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.on-dark :focus-visible, .site-footer :focus-visible, .mobile-nav :focus-visible { outline-color: var(--accent-soft); }

.skip-link {
  position: absolute; left: var(--gutter); top: 0; z-index: 1200;
  transform: translateY(-140%);
  background: var(--ink); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 var(--r) var(--r);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: transform var(--t) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

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

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* --------------------------------------------------------------------------
   SECTION GROUNDS
   Every band is a distinct surface, separated by a brass hairline rather than
   by empty space. Three grounds only: white, warm stone, deep navy.
   -------------------------------------------------------------------------- */
.section {
  position: relative; isolation: isolate;
  padding-block: var(--section-y);
}
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

/* Brass hairline marking the join between bands */
.section--alt, .section--dark, .cta, .page-head { border-top: 1px solid rgba(185,139,84,.28); }
.section--alt + .section:not(.section--alt):not(.section--dark) { border-top: 1px solid rgba(185,139,84,.28); }

/* Warm stone — a soft top-lit wash rather than a flat fill */
.section--alt {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(90% 70% at 85% 8%, rgba(185,139,84,.10), transparent 60%),
    var(--surface-alt);
}

/* Deep navy — vertical gradient, a brass glow off the top-right, and a fine
   grid that fades out before it reaches the content. */
.section--dark {
  background:
    radial-gradient(70% 55% at 82% 0%, rgba(185,139,84,.14), transparent 62%),
    linear-gradient(180deg, #2A3D46 0%, #1E2E36 45%, #17242B 100%);
  color: var(--text-inverse);
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 65% at 50% 0%, #000 0%, transparent 78%);
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--text-inverse); }
.section--dark p, .section--dark .lead { color: var(--text-inverse-mu); }
.rule-top { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* auto-fit alone fits three 24rem tracks in a 1360px box — pin it to two so a
   four-item grid reads 2 × 2 instead of 3 + 1 orphan. */
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--lg { gap: clamp(1.5rem, 2.4vw, 2rem); }
@media (min-width: 900px) {
  .grid-3--fixed { grid-template-columns: repeat(3, 1fr); }
  .grid-2--fixed { grid-template-columns: repeat(2, 1fr); }
}

/* Nested inside a split column the available width is roughly half, so the
   auto-fit floor has to come down or the grid collapses to one column. */
.grid-2--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.split { display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
.split--top { align-items: start; }
.split__media img { width: 100%; border-radius: var(--r); }
.split__media figcaption { margin-top: .85rem; font-size: var(--fs-xs); color: var(--text-muted); }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-wide { grid-template-columns: 1.08fr .92fr; }
  .split--text-wide  { grid-template-columns: .92fr 1.08fr; }
  .split--flip .split__media { order: 2; }
}

/* --------------------------------------------------------------------------
   FEATURE PANEL
   Image and copy locked into a single bordered frame of equal height, rather
   than two loose columns of different heights.
   -------------------------------------------------------------------------- */
.feature-panel {
  display: grid;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
  box-shadow: 0 40px 80px -60px rgba(22,35,42,.4);
}
.feature-panel__media { position: relative; min-height: 22rem; background: var(--surface-alt); }
.feature-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-panel__body { padding: clamp(1.5rem, 3.2vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 940px) {
  .feature-panel { grid-template-columns: .92fr 1.08fr; }
  .feature-panel--flip .feature-panel__media { order: 2; }
  .feature-panel__media { min-height: 100%; }
}
/* Caption strip locked to the bottom of the image */
/* Give the media the wider track. The body then wraps to roughly the same height as
   the image is wide, so the photo reads square-ish instead of as a stretched portrait
   crop — and it still fills the frame edge to edge, with no gaps to pad around. */
@media (min-width: 940px) {
  .feature-panel--square { grid-template-columns: 1.08fr .92fr; }
  .feature-panel--square .feature-panel__body { padding: clamp(1.5rem, 2.6vw, 2.25rem); }
}
.feature-panel__note {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: .85rem; align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(27,42,50,0), rgba(27,42,50,.88) 45%);
  color: #fff;
}
.feature-panel__note .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--accent-soft); flex: none; }
.feature-panel__note strong { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.feature-panel__note span { display: block; margin-top: .1rem; font-size: var(--fs-xs); color: rgba(255,255,255,.72); line-height: 1.4; }

/* --------------------------------------------------------------------------
   SPLIT CTA — headline left, contact cards right
   -------------------------------------------------------------------------- */
/* Compound selectors so these beat the generic centred `.cta` rules further down. */
.cta.cta--split { text-align: left; }
/* The split CTA is still a .container — widen it back to the page box rather than
   the narrow 46rem the centred CTA uses, but never past it. */
.cta.cta--split .cta__inner { max-width: var(--container); }
.cta__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .cta__grid { grid-template-columns: 1.05fr .95fr; } }
.cta.cta--split .lead { margin-inline: 0; max-width: 46ch; }
.cta.cta--split .btn-row { justify-content: flex-start; }

.contact-cards { display: grid; gap: var(--s-4); margin: 0; }
.contact-cards__item {
  display: flex; gap: 1rem; align-items: center;
  padding: 1.1rem 1.35rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.contact-cards__item:hover { border-color: rgba(214,174,118,.55); background: rgba(255,255,255,.08); transform: translateX(4px); }
.contact-cards__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2.9rem; block-size: 2.9rem; border-radius: var(--r);
  background: rgba(214,174,118,.14); color: var(--accent-soft);
}
.contact-cards__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.contact-cards dt { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.contact-cards dd { margin: .25rem 0 0; font-size: var(--fs-base); font-weight: 600; color: #fff; }
.contact-cards a { color: #fff; text-decoration: none; }
.contact-cards a:hover { color: var(--accent-soft); }

/* Offset image pair — asymmetric editorial composition */
.image-pair { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.image-pair img { border-radius: var(--r); width: 100%; }
@media (min-width: 720px) {
  .image-pair { grid-template-columns: 1.25fr .9fr; align-items: start; }
  .image-pair > *:last-child { margin-top: clamp(2rem, 7vw, 4.5rem); }
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  display: flex; align-items: center; gap: .75em;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--accent-deep); line-height: 1.4;
}
.eyebrow::before { content: ""; inline-size: 2rem; block-size: 1px; background: currentColor; flex: none; opacity: .85; }
.eyebrow--center { justify-content: center; }

.h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: var(--track-display); }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: var(--track-display); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: 1.4; }

.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .h2 + .lead, .section-head .h2 + p { margin-top: var(--s-5); }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; max-width: none; }
.section-head--split > div { max-width: 40rem; }

/* Two-column section head: headline left, supporting paragraph right. */
.section-head--two { max-width: none; display: grid; gap: var(--s-5) clamp(2rem, 6vw, 5rem); }
@media (min-width: 940px) {
  .section-head--two { grid-template-columns: 1.05fr .95fr; align-items: end; }
  .section-head--two > :last-child { padding-bottom: .4rem; }
}
.section-head--two .lead { max-width: 46ch; }

/* Body copy running under a two-column section head. A single measure would
   leave the right half of the band empty, so the text sets in two balanced
   columns on the same gutter as the head above it. */
@media (min-width: 940px) {
  .prose--cols { columns: 2; column-gap: clamp(2rem, 6vw, 5rem); }
  /* Margin-bottom rather than the inherited margin-top: a top margin on the
     first line of the second column is not reliably dropped by browsers. */
  .prose--cols > * + * { margin-top: 0; }
  .prose--cols > * { margin-bottom: 1.4em; }
  .prose--cols > :last-child { margin-bottom: 0; }
}

/* Decorative numeral used to open a section */
.section-index {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .2em; color: var(--accent-deep);
}

/* Long-form prose */
.prose { color: var(--text-muted); }
.prose > * + * { margin-top: 1.4em; }
.prose h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  line-height: 1.2; letter-spacing: -.015em; color: var(--text); margin-top: 2.2em;
}
.prose h3 { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); font-weight: 600; color: var(--text); margin-top: 1.9em; }
/* Nothing at the top of the prose carries a top margin — otherwise a leading figure
   or heading drops the column below whatever sits beside it. */
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a {
  color: var(--text); text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: .22em; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.prose a:hover { text-decoration-color: var(--text); }
.prose ul { list-style: none; padding: 0; }
.prose ul > li { position: relative; padding-left: 1.6rem; }
.prose ul > li::before { content: ""; position: absolute; left: .25rem; top: .72em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.prose ol { padding-left: 1.25rem; }
.prose ol::marker { color: var(--accent-deep); font-weight: 600; }
.prose li + li { margin-top: .5em; }
.prose figure { margin-block: 2.4em; }
.prose figcaption { margin-top: .85rem; font-size: var(--fs-xs); color: var(--text-muted); }
.prose blockquote {
  margin-block: 2.4em; padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1875rem, 1.05rem + .8vw, 1.625rem);
  line-height: 1.4; color: var(--text);
}
.prose blockquote p { color: inherit; }

/* ==========================================================================
   5. FURNITURE
   ========================================================================== */
.breadcrumb { font-size: var(--fs-xs); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.breadcrumb [aria-current="page"] { color: var(--text); }
.on-dark .breadcrumb li, .on-dark .breadcrumb a { color: rgba(255,255,255,.72); }
.on-dark .breadcrumb a:hover, .on-dark .breadcrumb [aria-current="page"] { color: #fff; }
.on-dark .breadcrumb li + li::before { color: rgba(255,255,255,.32); }

/* Numbered process list */
.steps { display: grid; gap: 0; margin: 0; }
.step { display: grid; gap: .5rem 2.5rem; padding-block: clamp(1.35rem, 2.4vw, 1.85rem); border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.step h3, .step h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; color: var(--text); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 54ch; }
@media (min-width: 820px) { .step { grid-template-columns: 4rem 16rem 1fr; align-items: start; } }
/* --------------------------------------------------------------------------
   SERVICE ROWS — copy and a landscape image side by side, alternating down the
   page, the way the live practice-area pages read. Deliberately not a
   .feature-panel: no card frame, and the image keeps a normal 3:2 shape instead
   of being stretched to the height of whatever sits next to it.
   -------------------------------------------------------------------------- */
.svc-rows { display: grid; }
.svc-row {
  display: grid; gap: clamp(1.5rem, 3vw, 3.25rem); align-items: center;
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .svc-row { grid-template-columns: 1.08fr .92fr; }
  .svc-row--flip .svc-row__media { order: -1; }
}
.svc-row__media { margin: 0; }
.svc-row__media img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r);
}
.svc-row__body > * + * { margin-top: var(--s-5); }
.svc-row__body h3 { max-width: 22ch; }
.svc-row__body p { color: var(--text-muted); line-height: 1.75; max-width: 60ch; }
.svc-row__body .checklist { margin-top: var(--s-6); }

/* Compact steps sit inside a column, so they stay stacked at every width. */
.steps--compact .step { gap: .35rem; padding-block: 1.1rem; }
@media (min-width: 820px) { .steps--compact .step { grid-template-columns: 3rem 1fr; } }
.steps--compact .step__num { font-size: 1.15rem; }
.steps--compact .step h4 { font-size: 1rem; }
.steps--compact .step p { grid-column: 2; }
.section--dark .step, .section--dark .step:last-child { border-color: var(--line-inverse); }
.section--dark .step__num { color: var(--accent-soft); }
.section--dark .step h3, .section--dark .step h4 { color: #fff; }
/* Without this the step copy stays --text-muted and all but disappears on the dark band. */
.section--dark .step p { color: var(--text-inverse-mu); }

/* Checklist */
.checklist { display: grid; gap: 0; margin: 0; }
.checklist li { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1.05rem; border-bottom: 1px solid var(--line); }
.checklist li:first-child { border-top: 1px solid var(--line); }
/* --------------------------------------------------------------------------
   INLINE ARTICLE CTA — a contact prompt set between body sections, the way the
   live article pages place theirs, instead of parking it in a sidebar.
   -------------------------------------------------------------------------- */
.inline-cta {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: center;
  margin-block: clamp(2.25rem, 4.5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(70% 60% at 88% 0%, rgba(185,139,84,.16), transparent 62%),
    linear-gradient(180deg, #2A3D46, #1E2E36 55%, #17242B);
  border: 1px solid rgba(185,139,84,.28);
  border-radius: var(--r-lg);
  color: #fff;
}
@media (min-width: 720px) { .inline-cta { grid-template-columns: 11rem 1fr; } }
.inline-cta__media img {
  display: block; width: 100%; max-width: 11rem;
  aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 15%;
  border-radius: var(--r);
}
.inline-cta__body > * + * { margin-top: var(--s-5); }
.inline-cta h2 { color: #fff; margin: 0; }
.inline-cta p { color: var(--text-inverse-mu); font-size: var(--fs-sm); line-height: 1.7; margin: 0; }
.inline-cta__list { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 0; list-style: none; padding: 0; }
.inline-cta__list li { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); font-weight: 600; }
.inline-cta__list .icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--accent-soft); }
.inline-cta__list a { color: #fff; text-decoration: none; }
.inline-cta__list a:hover { color: var(--accent-soft); }

/* Side by side rather than stacked, for a checklist that runs full width under a
   block instead of sitting in a column beside one. */
@media (min-width: 820px) {
  .checklist--cols { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); }
  .checklist--cols li { border-top: 1px solid var(--line); border-bottom: 0; }
}
.checklist .icon { inline-size: 1.2rem; block-size: 1.2rem; color: var(--accent); margin-top: .25rem; flex: none; }
.checklist strong { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: .1rem; }
.checklist span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.section--dark .checklist li { border-color: var(--line-inverse); }
.section--dark .checklist span { color: var(--text-inverse-mu); }
.section--dark .checklist .icon { color: var(--accent-soft); }

/* Facts */
.facts { display: grid; gap: var(--s-6) var(--s-7); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact__value { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 1.8rem + 1.9vw, 3.25rem); line-height: 1; letter-spacing: -.02em; }
.fact__label { margin-top: .6rem; font-size: var(--fs-sm); color: var(--text-muted); }
.section--dark .fact__label { color: var(--text-inverse-mu); }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  width: 100%; padding-block: clamp(1.2rem, 2.4vw, 1.6rem);
  background: none; border: 0; text-align: left;
  font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600;
  line-height: 1.45; color: var(--text); transition: color var(--t-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--accent-deep); }
.accordion__icon {
  position: relative; flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin-top: .15rem;
  border: 1px solid var(--line-control); border-radius: 50%;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; inset: 50% .35rem; height: 1px; background: currentColor;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--ink); border-color: var(--ink); color: #fff; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0); opacity: 0; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.accordion__trigger[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body { padding-bottom: clamp(1.2rem, 2.4vw, 1.6rem); max-width: 66ch; }
.accordion__body p, .accordion__body li { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.75; }
.accordion__body p + p, .accordion__body ul { margin-top: .85em; }
.accordion__body ul { list-style: none; padding: 0; }
.accordion__body li { position: relative; padding-left: 1.35rem; }
.accordion__body li + li { margin-top: .35em; }
.accordion__body li::before { content: ""; position: absolute; left: .2rem; top: .72em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.section--dark .accordion, .section--dark .accordion__item { border-color: var(--line-inverse); }
.section--dark .accordion__trigger { color: #fff; }
.section--dark .accordion__trigger:hover { color: var(--accent-soft); }
.section--dark .accordion__icon { border-color: rgba(255,255,255,.35); }
.section--dark .accordion__trigger[aria-expanded="true"] .accordion__icon { background: #fff; border-color: #fff; color: var(--ink); }
.section--dark .accordion__body p, .section--dark .accordion__body li { color: var(--text-inverse-mu); }

/* ==========================================================================
   6. BUTTONS & LINKS
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 56px; padding: 1rem 2.1rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .icon { inline-size: 1.05em; block-size: 1.05em; transition: transform var(--t) var(--ease); }
.btn:hover .icon--arrow { transform: translateX(4px); }

/* Gold — the primary conversion action */
.btn--gold {
  background: linear-gradient(135deg, #E2C293 0%, #D6AE76 38%, #B98B54 100%);
  color: var(--ink);
  box-shadow: 0 10px 30px -14px rgba(185,139,84,.7);
}
.btn--gold:hover {
  background: linear-gradient(135deg, #EBD0A6 0%, #D9B382 38%, #BE9260 100%);
  box-shadow: 0 14px 38px -14px rgba(185,139,84,.85);
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--brand); box-shadow: 0 12px 30px -16px rgba(27,42,50,.8); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--line-control); }
.btn--outline:hover { border-color: var(--ink); background: rgba(22,35,42,.04); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--surface-alt); }
.btn--ghost-light { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--ghost-light:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); }
.btn--sm { min-height: 46px; padding: .65rem 1.35rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.btn-row--center { justify-content: center; }

/* Pill badge — small labelled chip used above headings */
.badge {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 var(--s-5);
  padding: .5rem 1.1rem .5rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep);
  line-height: 1.35; max-width: 100%; flex-wrap: wrap;
}
@media (max-width: 480px) { .badge { letter-spacing: .1em; font-size: .6875rem; } }
.badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.badge--dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--accent-soft); }
.badge--dark::before { background: var(--accent-soft); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  text-decoration: none; padding-block: .2em;
}
.link-arrow::after {
  content: ""; inline-size: 1.05em; block-size: 1.05em; background: currentColor;
  -webkit-mask: var(--i-arrow) center/contain no-repeat; mask: var(--i-arrow) center/contain no-repeat;
  transition: transform var(--t) var(--ease);
}
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px; transition: background-size var(--t) var(--ease);
}
.link-arrow:hover > span { background-size: 100% 1px; }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--accent-soft); }

.link-underline {
  color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: .25em; transition: text-decoration-color var(--t-fast) var(--ease);
}
.link-underline:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   7. ICONS — one family, 24px grid, 1.6px stroke, round caps
   ========================================================================== */
:root {
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6L22 7'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M9 22v-8h6v8'/%3E%3C/svg%3E");
  --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='1.5'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h1M14 15h1M10 22v-3h4v3'/%3E%3C/svg%3E");
  --i-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M7 7h10'/%3E%3Cpath d='M7 7 4 14h6ZM17 7l-3 7h6Z'/%3E%3C/svg%3E");
  --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M2 12h20'/%3E%3C/svg%3E");
  --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-3.5 8-10V5.5L12 2.5 4 5.5V12c0 6.5 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5Z'/%3E%3C/svg%3E");
  --i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E");
  --i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.5 5C6.5 6.6 4.6 9.4 4.6 12.9c0 3.3 1.9 5.4 4.4 5.4 2.1 0 3.7-1.6 3.7-3.6 0-2-1.4-3.4-3.2-3.4-.4 0-.8.05-1.1.15.5-1.7 1.9-3.2 3.7-4.1Zm9.4 0c-3 1.6-4.9 4.4-4.9 7.9 0 3.3 1.9 5.4 4.4 5.4 2.1 0 3.7-1.6 3.7-3.6 0-2-1.4-3.4-3.2-3.4-.4 0-.8.05-1.1.15.5-1.7 1.9-3.2 3.7-4.1Z'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6-4.8-4.7 6.6-.9Z'/%3E%3C/svg%3E");
  --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.icon {
  display: inline-block; inline-size: 1.25em; block-size: 1.25em; flex: none;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.icon--arrow{-webkit-mask-image:var(--i-arrow);mask-image:var(--i-arrow)}
.icon--phone{-webkit-mask-image:var(--i-phone);mask-image:var(--i-phone)}
.icon--mail{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail)}
.icon--pin{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin)}
.icon--clock{-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock)}
.icon--home{-webkit-mask-image:var(--i-home);mask-image:var(--i-home)}
.icon--building{-webkit-mask-image:var(--i-building);mask-image:var(--i-building)}
.icon--scale{-webkit-mask-image:var(--i-scale);mask-image:var(--i-scale)}
.icon--file{-webkit-mask-image:var(--i-file);mask-image:var(--i-file)}
.icon--briefcase{-webkit-mask-image:var(--i-briefcase);mask-image:var(--i-briefcase)}
.icon--users{-webkit-mask-image:var(--i-users);mask-image:var(--i-users)}
.icon--shield{-webkit-mask-image:var(--i-shield);mask-image:var(--i-shield)}
.icon--check{-webkit-mask-image:var(--i-check);mask-image:var(--i-check)}
.icon--compass{-webkit-mask-image:var(--i-compass);mask-image:var(--i-compass)}
.icon--layers{-webkit-mask-image:var(--i-layers);mask-image:var(--i-layers)}
.icon--quote{-webkit-mask-image:var(--i-quote);mask-image:var(--i-quote)}
.icon--star{-webkit-mask-image:var(--i-star);mask-image:var(--i-star)}
.icon--chevron{-webkit-mask-image:var(--i-chevron);mask-image:var(--i-chevron)}

/* ==========================================================================
   8. HEADER / NAV
   ========================================================================== */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { block-size: 34px; inline-size: auto; }
/* On dark grounds the logo is the same artwork and the same 34px height as the
   header. The black wordmark cannot read on the dark ground on its own, so it sits
   on a light plate — the plate is the ground, the logo itself is unchanged. */
.brand--inverse {
  background: #fff;
  padding: .55rem .95rem;
  border-radius: var(--r);
}
/* Only in the footer grid does the plate pin to the top-left of its cell. In the
   mobile-nav head it must stay a plain flex item so it centres on the same line
   as the close button. */
.footer-intro .brand--inverse { align-self: start; justify-self: start; }
.brand--inverse img { block-size: 34px; inline-size: auto; filter: none; }

.topbar { background: var(--ink); color: var(--text-inverse-mu); font-size: var(--fs-xs); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 44px; flex-wrap: wrap; }
.topbar ul { display: flex; align-items: center; gap: var(--s-5); margin: 0; flex-wrap: wrap; }
.topbar li { display: inline-flex; align-items: center; gap: .5em; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--accent-soft); }
.topbar .icon { color: var(--accent-soft); inline-size: 1em; block-size: 1em; }
/* On a phone the strip has to wrap onto two rows and eats the top of the page —
   the address, hours, phone and mail are all repeated in the footer. */
@media (max-width: 780px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 24px rgba(22,35,42,.07); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); margin: 0; }
.nav a { position: relative; display: inline-block; padding-block: .5rem; font-size: var(--fs-sm); font-weight: 500; text-decoration: none; color: var(--text); white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.header-actions .btn { display: none; }
.header-phone { display: none; align-items: center; gap: .5em; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-phone .icon { color: var(--accent); }
.header-phone:hover { color: var(--accent-deep); }

.nav-toggle {
  display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px;
  background: transparent; border: 1px solid var(--line-control); border-radius: var(--r); color: var(--text);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle .icon { inline-size: 1.4rem; block-size: 1.4rem; -webkit-mask-image: var(--i-menu); mask-image: var(--i-menu); }
.nav-toggle[aria-expanded="true"] .icon, .nav-toggle--close .icon { -webkit-mask-image: var(--i-close); mask-image: var(--i-close); }

@media (min-width: 1000px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .header-actions .btn { display: inline-flex; }
  .header-phone { display: inline-flex; }
}
@media (min-width: 640px) and (max-width: 999px) { .header-phone { display: inline-flex; } }

.mobile-nav {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--surface-dark); color: #fff;
  transform: translateX(100%); visibility: hidden; overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--line-inverse); }
.mobile-nav .nav-toggle { border-color: rgba(255,255,255,.3); color: #fff; }
.mobile-nav__body { overflow-y: auto; padding: var(--s-7) var(--gutter) var(--s-9); }
.mobile-nav__list { margin: 0 0 var(--s-7); }
.mobile-nav__list li { border-bottom: 1px solid var(--line-inverse); }
.mobile-nav__list a { display: block; padding-block: 1.1rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: #fff; text-decoration: none; }
.mobile-nav__foot { display: grid; gap: var(--s-4); }
.mobile-nav__contact { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line-inverse); display: grid; gap: .6rem; font-size: var(--fs-sm); color: var(--text-inverse-mu); }
.mobile-nav__contact a { display: inline-flex; align-items: center; gap: .55em; color: #fff; font-weight: 600; text-decoration: none; }
.mobile-nav__contact .icon { color: var(--accent-soft); }

/* ==========================================================================
   9. HERO
   ========================================================================== */
/* Sized so the whole hero — badge, headline, lead, buttons and trust row —
   sits inside the first viewport under the top bar (44px) and header (84px). */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface-dark); color: #fff;
  display: grid; align-items: center;
  min-height: 640px;
  min-height: calc(100svh - 128px);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,22,27,.96) 0%, rgba(14,22,27,.88) 42%, rgba(14,22,27,.52) 100%),
    linear-gradient(180deg, rgba(14,22,27,.5), rgba(14,22,27,.12) 42%, rgba(14,22,27,.72));
}
/* .hero__inner IS the .container — it must keep the container's own max-width
   and centring, or the whole block shifts inward. Cap the child blocks instead. */
.hero__inner { padding-block: clamp(2.5rem, 6vh, 4.5rem); text-align: left; min-width: 0; }
.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1.04;
  letter-spacing: var(--track-display);
  margin: var(--s-5) 0 var(--s-5);
  max-width: 48rem;
  overflow-wrap: break-word;
}
.hero__title em { font-style: italic; color: var(--accent-soft); }
.hero__lead {
  font-size: var(--fs-lead); line-height: 1.6;
  color: rgba(255,255,255,.82); max-width: 44ch; margin-bottom: var(--s-6);
}

/* Trust row at the foot of the hero — icon, label, sub-label */
.hero__trust {
  display: grid; gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-top: clamp(1.75rem, 4vh, 3rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 62rem;
}
.trust-item { display: flex; gap: .85rem; align-items: flex-start; }
.trust-item__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  color: var(--accent-soft);
}
.trust-item__icon .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.trust-item dt { font-size: var(--fs-sm); font-weight: 600; color: #fff; line-height: 1.35; }
.trust-item dd { margin: .15rem 0 0; font-size: var(--fs-xs); color: rgba(255,255,255,.62); line-height: 1.45; }

@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: clamp(3rem, 9vh, 5rem); }
  /* let the headline flow and wrap naturally instead of holding the forced break */
  .hero__title br { display: none; }
  .hero__title em { display: block; }
}

/* Built to the same recipe as the home hero — same grounds, same scrim, same
   left-aligned rhythm — just shorter, because an inner page has to show its
   content above the fold. */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface-dark); color: #fff;
  display: grid; align-items: center;
  min-height: 380px;
  min-height: min(30rem, calc(62svh - 64px));
}
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,22,27,.96) 0%, rgba(14,22,27,.88) 42%, rgba(14,22,27,.52) 100%),
    linear-gradient(180deg, rgba(14,22,27,.5), rgba(14,22,27,.12) 42%, rgba(14,22,27,.72));
}
/* .page-head__inner IS the .container — capping it here would re-centre the whole
   block inside the page box. Cap the children instead, exactly as in the hero. */
.page-head__inner { padding-block: clamp(2.25rem, 5vh, 3.75rem); text-align: left; min-width: 0; }
.page-head .breadcrumb { margin-bottom: var(--s-6); }
.page-head .h1 { margin-bottom: var(--s-5); max-width: 40rem; overflow-wrap: break-word; }
.page-head .lead { color: rgba(255,255,255,.82); max-width: 46ch; }
.page-head .btn-row { margin-top: var(--s-7); }

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-dark); color: #fff; text-align: center; }
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,25,30,.92), rgba(16,25,30,.96)); }
.cta__inner { max-width: 46rem; margin-inline: auto; }
.cta .eyebrow { color: var(--accent-soft); }
.cta .lead { color: rgba(255,255,255,.84); margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: var(--s-7); }

.contact-strip { display: grid; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-inverse); }
@media (min-width: 720px) { .contact-strip { grid-template-columns: repeat(3, 1fr); } }
.contact-strip__item { display: grid; gap: .35rem; justify-items: center; }
.contact-strip__item .icon { inline-size: 1.4rem; block-size: 1.4rem; color: var(--accent-soft); }
.contact-strip__item dt { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
.contact-strip__item dd { margin: 0; font-size: var(--fs-sm); }
.contact-strip__item a { color: #fff; text-decoration: none; font-weight: 600; }
.contact-strip__item a:hover { color: var(--accent-soft); }

/* ==========================================================================
   11. CARDS
   ========================================================================== */
/* Service card — image with an icon badge, body, feature list, footer link.
   A real bordered card so the grid reads as a set rather than loose columns. */
.service-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -40px rgba(22,35,42,.4);
}
.service-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.service-card:hover .service-card__media img { transform: scale(1.05); }
/* Scrim at both ends: the index sits top-left over sky, the badge bottom-right. */
.service-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,42,50,.55) 0%, rgba(27,42,50,.08) 32%,
                                      rgba(27,42,50,0) 55%, rgba(27,42,50,.4) 100%);
}
.service-card__index {
  position: absolute; left: 1.25rem; top: 1.1rem; z-index: 1;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
  letter-spacing: .12em; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 6px rgba(27,42,50,.6);
}
.service-card__badge {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 1;
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--r); background: var(--surface); color: var(--accent-deep);
  box-shadow: 0 6px 18px -8px rgba(27,42,50,.5);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.service-card__badge .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.service-card:hover .service-card__badge { background: var(--ink); color: var(--accent-soft); }

.service-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.2vw, 1.6rem); }
.service-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; margin-bottom: .65rem; }
.service-card__title a { text-decoration: none; }
.service-card__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }

/* Dash-marker feature list inside cards */
.feature-list { margin: var(--s-5) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.feature-list li {
  position: relative; padding-left: 1.35rem;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6;
}
.feature-list li + li { margin-top: .55rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  inline-size: .6rem; block-size: 1px; background: var(--accent);
}
/* --------------------------------------------------------------------------
   TILE GRID
   Short service labels set as cards instead of a bare list: the limestone
   surface, the standard hairline and a slate medallion carrying the icon —
   the same palette as the rest of the page. Sits in the right
   half of the two-column advisory sections, which is the same width as the copy
   beside it, so the tiles run two-up and drop to one-up when the column narrows.
   -------------------------------------------------------------------------- */
.tile-grid {
  display: grid; margin: 0; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.tile {
  display: flex; align-items: center; gap: .95rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.tile__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 50%;
  background: var(--brand); color: #fff;
}
.tile__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
/* min-width:0 lets the label shrink inside the flex row, and the wrap rules
   break the long Swedish compounds instead of letting them run past the frame. */
.tile__label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.35; color: var(--text);
  overflow-wrap: break-word; hyphens: auto;
}

/* Footer is pinned to the bottom of the card so every card in a row lines up,
   whether or not it carries a feature list. */
.service-card__foot,
.service-card__body > .link-arrow,
.post-card__foot,
.post-card__body > .link-arrow {
  margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.service-card__body > .link-arrow,
.post-card__body > .link-arrow { display: flex; width: 100%; }
.service-card__foot .link-arrow, .service-card__body > .link-arrow { color: var(--accent-deep); }

.value-card {
  position: relative; height: 100%; overflow: hidden;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-alt);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.value-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 26px 54px -42px rgba(22,35,42,.42); }
/* On the stone band the card ground would match the section, so flip both grounds. */
.section--alt .value-card { background: var(--surface); }
.section--alt .value-card__icon { background: var(--surface-alt); }
.value-card__icon {
  display: grid; place-items: center;
  inline-size: 3rem; block-size: 3rem; margin-bottom: var(--s-5);
  border-radius: var(--r); background: var(--surface-alt); color: var(--accent-deep);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.value-card__icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.value-card:hover .value-card__icon { background: var(--ink); color: var(--accent-soft); }
.value-card__num {
  position: absolute; top: clamp(1.25rem, 2.5vw, 1.75rem); right: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  line-height: 1; color: var(--line-strong);
}
.value-card h3 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: .6rem; }
.value-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
.section--dark .value-card { background: rgba(255,255,255,.04); border-color: var(--line-inverse); }
.section--dark .value-card__icon { background: rgba(255,255,255,.07); color: var(--accent-soft); }
.section--dark .value-card:hover .value-card__icon { background: var(--accent-soft); color: var(--ink); }
.section--dark .value-card__num { color: rgba(255,255,255,.18); }
.section--dark .value-card p { color: var(--text-inverse-mu); }

/* Stat strip — small figures under a section head */
.stat-strip {
  display: grid; gap: var(--s-5) var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.stat__value { font-family: var(--font-display); font-size: clamp(1.75rem,1.4rem+1.3vw,2.5rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.stat__label { margin-top: .5rem; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.section--dark .stat-strip { border-color: var(--line-inverse); }
.section--dark .stat__label { color: var(--text-inverse-mu); }

/* Floating card that overlaps an image edge */
.float-card {
  position: absolute; z-index: 2;
  left: clamp(-1rem, -2vw, -2rem); bottom: clamp(-1rem, -2vw, -2rem);
  display: flex; gap: .9rem; align-items: center;
  padding: 1.1rem 1.4rem; max-width: 17rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -35px rgba(22,35,42,.45);
}
.float-card__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: var(--r); background: var(--ink); color: var(--accent-soft); }
.float-card__icon .icon { inline-size: 1.2rem; block-size: 1.2rem; }
.float-card strong { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.float-card span { display: block; margin-top: .15rem; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.split__media--float { position: relative; }
@media (max-width: 720px) { .float-card { position: static; max-width: none; margin-top: var(--s-4); box-shadow: none; } }

/* Shared card signature: a brass edge that draws across the top on hover */
.service-card, .post-card, .value-card { position: relative; }
.service-card::after, .post-card::after, .value-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.service-card:hover::after, .post-card:hover::after, .value-card:hover::after { transform: scaleX(1); }

.stretched-link { text-decoration: none; color: inherit; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.stretched-link:focus-visible { outline: none; }
.stretched-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ==========================================================================
   12. TEAM
   ========================================================================== */
.team-grid { display: grid; gap: clamp(1.5rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 1080px) { .team-grid--4 { grid-template-columns: repeat(4, 1fr); } .team-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.person { position: relative; display: flex; flex-direction: column; }
.person__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface-alt); margin-bottom: var(--s-5);
}
.person__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.03);
  transition: transform var(--t-slow) var(--ease-out), filter var(--t) var(--ease);
}
.person:hover .person__media img { transform: scale(1.04); filter: grayscale(0); }
/* Gold wash + contact affordance that lifts in on hover */
.person__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,42,50,0) 40%, rgba(27,42,50,.72) 100%);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.person:hover .person__media::after { opacity: 1; }
.person__actions {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  display: flex; gap: .5rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.person:hover .person__actions, .person:focus-within .person__actions { opacity: 1; transform: none; }
.person__actions a {
  display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: 50%; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.person__actions a:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }
.person__actions .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.person__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.person__name a { text-decoration: none; }
.person__role { margin-top: .35rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.person__meta { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }

.profile { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) { .profile { grid-template-columns: minmax(0, 23rem) 1fr; } }
.profile__media img { width: 100%; border-radius: var(--r); }
.profile__role { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--s-4); }
.profile__contact { display: grid; gap: .7rem; margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.profile__contact a { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.profile__contact .icon { color: var(--accent); }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tag-list li { font-size: var(--fs-xs); font-weight: 500; padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-muted); }

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.quote-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.quote-card:hover { transform: translateY(-4px); }
.quote-card::before {
  content: ""; position: absolute; left: 0; top: clamp(1.35rem,2.6vw,1.9rem); bottom: clamp(1.35rem,2.6vw,1.9rem);
  width: 2px; background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.section--dark .quote-card { background: rgba(255,255,255,.045); border-color: var(--line-inverse); }
.section--dark .quote-card:hover { border-color: rgba(255,255,255,.28); }
.quote-card__icon { inline-size: 1.75rem; block-size: 1.75rem; color: var(--accent); opacity: .5; margin-bottom: var(--s-5); }
.section--dark .quote-card__icon { color: var(--accent-soft); }
.quote-card__stars { display: flex; gap: .2rem; margin-bottom: var(--s-4); }
.quote-card__stars .icon { inline-size: .9rem; block-size: .9rem; color: var(--accent); }
.section--dark .quote-card__stars .icon { color: var(--accent-soft); }
.quote-card blockquote { font-size: var(--fs-sm); line-height: 1.8; color: var(--text-muted); flex: 1; }
.section--dark .quote-card blockquote { color: var(--text-inverse-mu); }
.quote-card__by { display: flex; align-items: center; gap: .9rem; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.section--dark .quote-card__by { border-color: var(--line-inverse); }
.quote-card__avatar {
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  background: var(--surface-alt); color: var(--accent-deep);
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; flex: none; letter-spacing: .02em;
}
.section--dark .quote-card__avatar { background: rgba(255,255,255,.08); color: var(--accent-soft); }
.quote-card__name { font-size: var(--fs-sm); font-weight: 600; }
.quote-card__role { font-size: var(--fs-xs); color: var(--text-muted); }
.section--dark .quote-card__role { color: var(--text-inverse-mu); }

/* --------------------------------------------------------------------------
   Google review cards — reviewer, date, rating, then the review itself.
   Static markup: a live feed needs the Places API, which would mean a key in
   the client. See README §12.
   -------------------------------------------------------------------------- */
.review-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
@media (min-width: 1100px) { .review-grid { grid-template-columns: repeat(4, 1fr); } }

.g-review {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.g-review:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 26px 54px -42px rgba(22,35,42,.42); }

.g-review__head { display: flex; align-items: center; gap: .8rem; }
.g-review__avatar {
  display: grid; place-items: center; flex: none;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
}
.g-review__who { min-width: 0; flex: 1; }
.g-review__name {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-review__when { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .1rem; }
.g-review__source { flex: none; inline-size: 1.2rem; block-size: 1.2rem; }
.g-review__source svg { width: 100%; height: 100%; display: block; }

.g-review__rating { display: flex; align-items: center; gap: .45rem; margin-top: var(--s-5); }
.g-review__stars { display: flex; gap: .12rem; }
/* The rating is a graphic that carries meaning, so it has to clear 3:1 (SC 1.4.11).
   Google's own #E7B41F only reaches 1.9:1 on white — this is the same gold, darkened. */
.g-review__stars .icon { inline-size: 1rem; block-size: 1rem; color: #B08300; }
.g-review__verified { inline-size: .95rem; block-size: .95rem; flex: none; }
.g-review__verified svg { width: 100%; height: 100%; display: block; }

.g-review blockquote { margin-top: var(--s-4); font-size: var(--fs-sm); line-height: 1.7; color: var(--text-muted); }
.g-review blockquote p { margin: 0; }
.g-review__note {
  margin-top: auto; padding-top: var(--s-5);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.review-source {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--text-muted);
}
.review-source svg { inline-size: 1rem; block-size: 1rem; flex: none; }

/* ==========================================================================
   14. BLOG
   ========================================================================== */
.post-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 30px 60px -40px rgba(22,35,42,.4); }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.2vw, 1.6rem); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: .7rem; }
.post-card__cat { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
/* Category chip sitting on the image */
.post-card__chip {
  position: absolute; left: 1rem; top: 1rem; z-index: 1;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-deep); line-height: 1;
}

.post-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; margin-bottom: .7rem; }
.post-card__title a { text-decoration: none; }
.post-card:hover .post-card__title a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; flex: 1; }
.post-card .link-arrow { margin-top: var(--s-5); }

.post-feature { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .post-feature { grid-template-columns: 1.15fr 1fr; } }
.post-feature__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--surface-alt); }
.post-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.post-feature:hover .post-feature__media img { transform: scale(1.02); }
.post-feature__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; margin-block: .75rem 1rem; }
.post-feature__title a { text-decoration: none; }

.reading-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); z-index: 950; will-change: transform; }
.article-hero { aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--r); background: var(--surface-alt); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; font-size: var(--fs-xs); color: var(--text-muted); }
.article-meta--inverse { color: var(--text-inverse-mu); }

/* Article left, aside right — matching the live single-post pages. The aside comes
   after the body in source order too, so it reads last without a tab-order fix. */
.article-layout { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1040px) { .article-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }

.article-main { min-width: 0; }
.article-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: var(--s-6); }
.side-form {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.side-form__title {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep); text-align: center; line-height: 1.5; margin-bottom: var(--s-5);
}
.side-form .field + .field { margin-top: .75rem; }
.side-form .input, .side-form .textarea { background: var(--surface); }
.side-form .textarea { min-height: 6.5rem; }
.side-form .form-status { margin-top: var(--s-4); }
.side-form .btn { margin-top: var(--s-5); }
[data-article-body] { max-width: 52rem; }

.toc { position: sticky; top: calc(var(--header-h) + 2rem); }
.toc__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--s-4); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-left: 1px solid var(--line); }
.toc a { display: block; padding: .5rem 0 .5rem .9rem; margin-left: -1px; border-left: 1px solid transparent; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); text-decoration: none; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--text); font-weight: 600; border-left-color: var(--accent); }

.author-card { display: grid; gap: var(--s-5); align-items: center; padding-block: clamp(1.5rem,3vw,2rem); border-block: 1px solid var(--line); }
@media (min-width: 620px) { .author-card { grid-template-columns: 5rem 1fr; } }
.author-card__media { inline-size: 5rem; block-size: 5rem; border-radius: 50%; overflow: hidden; }
.author-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; padding-block: var(--s-5); border-block: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.chip { min-height: 42px; padding: .5rem 1.1rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; background: transparent; border: 1px solid var(--line-control); border-radius: var(--r-pill); color: var(--text-muted); transition: all var(--t-fast) var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.empty-state { padding: var(--s-8) var(--s-5); text-align: center; color: var(--text-muted); border: 1px dashed var(--line-strong); border-radius: var(--r); }

/* ==========================================================================
   15. FORMS
   ========================================================================== */
.form { display: grid; gap: var(--s-2); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .45rem; }
.field > label, .u-fieldset > legend { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 0; }
.field .req { color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }
.u-fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }

.input, .select, .textarea {
  width: 100%; min-height: 54px; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line-control); border-radius: var(--r);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text); appearance: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 10rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: .8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(185,139,84,.22); }
.select { background-image: var(--i-chevron); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 2.9rem; }
.field[data-invalid="true"] .input, .field[data-invalid="true"] .select, .field[data-invalid="true"] .textarea { border-color: var(--danger); }
.field__error { display: none; font-size: var(--fs-xs); color: var(--danger); font-weight: 500; }
.field[data-invalid="true"] .field__error { display: block; }

.choice-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .6rem 1.1rem; border: 1px solid var(--line-control); border-radius: var(--r); font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__dot { inline-size: 1rem; block-size: 1rem; border: 1px solid var(--line-control); border-radius: 50%; flex: none; transition: all var(--t-fast) var(--ease); }
.choice input:checked ~ .choice__dot { border-color: var(--ink); border-width: 5px; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--surface-alt); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.consent { display: flex; gap: .9rem; align-items: flex-start; padding: var(--s-5); background: var(--surface-alt); border-radius: var(--r); }
.consent input[type="checkbox"] { inline-size: 1.15rem; block-size: 1.15rem; margin-top: .2rem; accent-color: var(--ink); flex: none; }
.consent label { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.65; }
.consent a { color: var(--text); }

.form-status { display: none; padding: var(--s-5); border-radius: var(--r); font-size: var(--fs-sm); line-height: 1.6; }
.form-status.is-visible { display: block; }
.form-status[data-state="error"]   { background: rgba(160,51,40,.07); border-left: 2px solid var(--danger); }
.form-status[data-state="info"]    { background: var(--surface-alt); border-left: 2px solid var(--accent); }
.form-status[data-state="success"] { background: rgba(47,107,79,.09); border-left: 2px solid var(--success); }

.on-dark .field > label, .on-dark .u-fieldset > legend { color: rgba(255,255,255,.74); }
.on-dark .input, .on-dark .select, .on-dark .textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.26); color: #fff; }
.on-dark .input::placeholder, .on-dark .textarea::placeholder { color: rgba(255,255,255,.52); }
.on-dark .input:focus, .on-dark .select:focus, .on-dark .textarea:focus { border-color: var(--accent-soft); }
.on-dark .consent { background: rgba(255,255,255,.05); }
.on-dark .consent label { color: rgba(255,255,255,.74); }
.on-dark .consent a { color: var(--accent-soft); }
.on-dark .field__hint { color: rgba(255,255,255,.64); }

.info-card { padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r); }
.info-card--dark { background: var(--surface-dark); border-color: transparent; color: #fff; }
.info-card h2, .info-card h3 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: .6rem; }
.info-card--dark h2, .info-card--dark h3 { color: #fff; }
.info-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }
.info-card--dark p { color: var(--text-inverse-mu); }
.info-list { display: grid; gap: 1.1rem; margin: var(--s-5) 0 0; }
.info-list li { display: flex; gap: .85rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.6; }
.info-list .icon { color: var(--accent); margin-top: .2rem; inline-size: 1.15rem; block-size: 1.15rem; }
.info-card--dark .info-list .icon { color: var(--accent-soft); }
.info-list a { text-decoration: none; font-weight: 600; }
.info-list a:hover { color: var(--accent-deep); }
.info-card--dark .info-list a:hover { color: var(--accent-soft); }

.map-embed { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { background: var(--brand-darker); color: var(--text-inverse-mu); font-size: var(--fs-sm); border-top: 1px solid rgba(185,139,84,.3); }

/* Intro row: mark beside the firm description, spanning the full width */
.footer-intro {
  display: grid; gap: var(--s-5);
  padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
}
@media (min-width: 760px) { .footer-intro { grid-template-columns: auto 1fr; align-items: start; gap: var(--s-6); } }
.footer-intro img { block-size: 34px; inline-size: auto; }
/* No measure cap here — the description is meant to run the full width of the
   page box so it ends level with the rule underneath it. Set brighter and a step
   larger than the link columns: it is body copy, not a label, and the muted grey
   was too faint to read comfortably against the footer ground. */
.footer-intro p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: #E3E9ED;
}

/* Four link columns */
.footer-cols {
  display: grid; gap: clamp(2rem, 3.5vw, 3rem);
  padding-block: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 640px)  { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: var(--s-5);
}
.footer-links { display: grid; gap: .85rem; margin: 0; }
.footer-links a {
  color: var(--text-inverse-mu); text-decoration: none;
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.footer-links a:hover { color: #fff; }

.footer-contact { display: grid; gap: 1.1rem; margin: 0; }
.footer-contact li { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.6; }
.footer-contact .icon { color: var(--accent-soft); margin-top: .15rem; inline-size: 1.05rem; block-size: 1.05rem; }
.footer-contact span, .footer-contact a { font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }
.footer-contact a { color: var(--text-inverse-mu); text-decoration: none; }
.footer-contact a:hover { color: #fff; }

/* Bottom bar: copyright left, social tiles right */
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-sm);
}
.site-footer__bottom b { color: var(--accent-soft); font-weight: 600; }
.social-row { display: flex; gap: .6rem; margin: 0; }
.social-row a {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px;
  border-radius: var(--r); background: rgba(0,0,0,.35);
  color: #fff; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.social-row a:hover { background: var(--accent-soft); color: var(--ink); }
.social-row svg { inline-size: 1rem; block-size: 1rem; fill: currentColor; }
/* ==========================================================================
   17. UTILITIES · MOTION · PRINT
   ========================================================================== */
.u-mt-2{margin-top:var(--s-2)} .u-mt-4{margin-top:var(--s-4)} .u-mt-5{margin-top:var(--s-5)}
.u-mt-6{margin-top:var(--s-6)} .u-mt-7{margin-top:var(--s-7)} .u-mt-8{margin-top:var(--s-8)}
.u-mb-0{margin-bottom:0 !important} .u-mb-5{margin-bottom:var(--s-5)} .u-mb-6{margin-bottom:var(--s-6)}
.u-measure{max-width:56ch} .u-center-text{text-align:center} .u-white{color:#fff} .u-nolink{text-decoration:none}
@media (max-width: 780px) { .u-hide-sm { display: none !important; } }
[data-more-item][hidden] { display: none !important; }

.js-reveal [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@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; }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .service-card:hover, .service-card:hover .service-card__media img,
  .post-card:hover .post-card__media img, .person:hover .person__media img,
  .post-feature:hover .post-feature__media img { transform: none; }
}

@media print {
  .site-header, .topbar, .mobile-nav, .cta, .site-footer, .skip-link, .reading-progress { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   18. ESTATE LAYER
   --------------------------------------------------------------------------
   The practice is a property practice, and the page has to look like one
   before a word is read. This layer changes no copy — it sets how the
   existing components look and how much of the page the photography carries.

   The whole layer is built on the two colours the brand already owns —
   wet slate and warm oak — and one third ground, limestone. Nothing new is
   introduced; the existing palette is simply used at more weights, so the
   page reads as one material world rather than a white page with photos on it.

     18.1  palette weights, shape, elevation, rhythm
     18.2  grounds — limestone, slate, and slate over a photograph
     18.3  photography — plates, frames, ratios
     18.4  the hero
     18.5  heads, eyebrows, numerals
     18.6  cards — one family
     18.7  editorial rows, feature panels, media figures
     18.8  process, statistics, checklists, tiles
     18.9  accordion
     18.10 team
     18.11 contact band and footer
     18.12 chrome
     18.13 property glyphs

   Everything degrades: remove this section and the site still works.
   ========================================================================== */

/* 18.1 Palette weights, shape, elevation, rhythm --------------------------- */
:root {
  /* Slate, five weights — the same hue the logo and the brand tokens use */
  --slate-900: #131E24;
  --slate-800: #16232A;
  --slate-700: #1B2A32;
  --slate-600: #24363F;
  --slate-500: #2E434E;

  /* Oak, four weights */
  --oak-700: #7A5930;
  --oak-600: #8A6538;
  --oak-500: #B98B54;
  --oak-400: #D6AE76;
  --oak-300: #E8CFA9;

  /* Limestone, three weights */
  --stone-100: #FBF9F5;
  --stone-200: #F4F0E9;
  --stone-300: #E9E2D6;

  /* Shape — the references lean on generous, confident curvature */
  --r-xs:   8px;
  --r:     14px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Elevation — wide, soft, warm-neutral. The light a house is shot in. */
  --sh-xs: 0 1px 2px rgba(19,30,36,.05);
  --sh-sm: 0 2px 12px -6px rgba(19,30,36,.14), 0 1px 2px rgba(19,30,36,.04);
  --sh-md: 0 16px 36px -20px rgba(19,30,36,.24), 0 4px 10px -6px rgba(19,30,36,.08);
  --sh-lg: 0 38px 72px -38px rgba(19,30,36,.34), 0 12px 28px -18px rgba(19,30,36,.14);
  --sh-xl: 0 70px 120px -60px rgba(19,30,36,.55), 0 24px 50px -30px rgba(19,30,36,.22);

  /* Rhythm */
  --section-y:    clamp(3.75rem, 5.4vw, 6.25rem);
  --section-y-lg: clamp(4.75rem, 7vw, 8rem);
}

/* 18.2 Grounds -------------------------------------------------------------
   Three grounds and no rules between them. A band change is legible on its
   own; a hairline on top of it only adds noise. */
.section--alt, .section--dark, .cta, .page-head { border-top: 0; }
.section--alt + .section:not(.section--alt):not(.section--dark) { border-top: 0; }

/* The band starts at stone-200, NOT stone-100.

   stone-100 is #FBF9F5 — 98% white. Starting the gradient there made the top
   edge of every alt band invisible against the white section above it, so a
   white -> alt join simply vanished and two sections read as one. Only the
   bottom edge showed, because it lands on stone-300.

   Running the band between stone-200 and stone-300 gives it a visible edge at
   BOTH ends while staying in the same warm stone family. Check any white -> alt
   join after changing these values; the top edge is the one that fails quietly. */
.section--alt {
  background: linear-gradient(180deg, var(--stone-200) 0%, var(--stone-300) 100%);
}
.section--alt::before { content: none; }

/* Slate. A vertical fall from 500 to 900, one oak glow off the top right,
   and a surveyor's grid that fades out before it reaches the copy. */
.section--dark {
  background:
    radial-gradient(52% 42% at 84% 0%, rgba(185,139,84,.20), transparent 66%),
    radial-gradient(60% 55% at 6% 100%, rgba(185,139,84,.08), transparent 62%),
    linear-gradient(180deg, var(--slate-500) 0%, var(--slate-700) 46%, var(--slate-900) 100%);
}
.section--dark::before {
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 96px 96px;
}

/* Slate over a photograph. The picture is chosen for the section it sits in,
   so the scrim is heavy enough to read type over and light enough that the
   building still comes through. */
.section--photo { position: relative; isolation: isolate; }
.section--photo > .section__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.section--photo > .section__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 40% at 86% 4%, rgba(185,139,84,.20), transparent 68%),
    linear-gradient(100deg, rgba(19,30,36,.96) 0%, rgba(19,30,36,.90) 44%, rgba(19,30,36,.66) 100%),
    linear-gradient(180deg, rgba(19,30,36,.60), rgba(19,30,36,.30) 45%, rgba(19,30,36,.88));
}
.section--photo.section--dark { background: var(--slate-800); }

/* A hairline of oak closing the top of every slate band — the one rule the
   page keeps, because it reads as a material seam rather than a divider. */
.section--dark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(214,174,118,.55) 22%, rgba(214,174,118,.55) 78%, transparent);
  pointer-events: none;
}
.section--photo.section--dark::after { z-index: 2; }

/* 18.3 Photography ---------------------------------------------------------
   One grade, generous radii, and nothing ever printed across the subject. */
.hero__media img,
.page-head__media img,
.cta__media img,
.section__media img,
.feature-panel__media img,
.service-card__media img,
.post-card__media img,
.post-feature__media img,
.svc-row__media img,
.split__media img,
.article-hero img,
.media-figure img,
.note-panel__media img,
.hero__frame img {
  filter: saturate(.98) contrast(1.03);
}
.service-card__media::before,
.post-card__media::before,
.feature-panel__media::before { content: none; }
.svc-row__media::after { content: none; }

.split__media img, .svc-row__media img { border-radius: var(--r-lg); box-shadow: var(--sh-md); }

/* MEDIA FIGURE — a photograph mounted the way a drawing is mounted on board:
   the plate itself, and a fine oak rule stepped off one corner behind it. It
   is the page's one decorative move, and it is drawn, not photographed. */
.media-figure { position: relative; margin: 0; }
.media-figure::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: clamp(.9rem, 2vw, 1.6rem) calc(-1 * clamp(.9rem, 2vw, 1.6rem)) calc(-1 * clamp(.9rem, 2vw, 1.6rem)) clamp(.9rem, 2vw, 1.6rem);
  border: 1px solid rgba(185,139,84,.45);
  border-radius: var(--r-lg);
}
.media-figure--flip::before {
  inset: clamp(.9rem, 2vw, 1.6rem) clamp(.9rem, 2vw, 1.6rem) calc(-1 * clamp(.9rem, 2vw, 1.6rem)) calc(-1 * clamp(.9rem, 2vw, 1.6rem));
}
.media-figure img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.media-figure--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.media-figure--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.section--dark .media-figure::before { border-color: rgba(214,174,118,.45); }

/* 18.4 THE HERO ------------------------------------------------------------
   One cinematic plate of architecture held inside the page box, with the
   headline set into its lower-left corner. The photograph is the first
   impression; the type sits in the part of the frame the light has already
   fallen away from, so nothing has to be dimmed to make it legible. */
.hero--estate {
  display: block; min-height: 0; overflow: visible;
  background: linear-gradient(180deg, var(--stone-100) 0%, var(--stone-200) 58%, var(--surface) 100%);
  color: var(--text);
  padding-block: clamp(1.25rem, 2.4vw, 2.25rem) clamp(3.5rem, 6vw, 6.5rem);
}
.hero--estate::after { content: none; }

.hero__frame {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: min(78svh, 760px);
  border-radius: var(--r-2xl);
  background: var(--slate-800);
  box-shadow: var(--sh-xl), inset 0 0 0 1px rgba(214,174,118,.20);
}
.hero__frame > .hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__frame > .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(44% 40% at 88% 6%, rgba(214,174,118,.26), transparent 68%),
    linear-gradient(96deg, rgba(19,30,36,.94) 0%, rgba(19,30,36,.86) 30%, rgba(19,30,36,.46) 62%, rgba(19,30,36,.14) 100%),
    linear-gradient(180deg, rgba(19,30,36,.36) 0%, rgba(19,30,36,0) 34%, rgba(19,30,36,.72) 100%);
}

.hero__body {
  position: relative; z-index: 2;
  padding: clamp(1.75rem, 4.4vw, 4rem);
  max-width: 47rem; color: #fff;
}
/* A short oak rule opening the block, the same mark the section eyebrows use. */
.hero__body::before {
  content: ""; display: block;
  inline-size: clamp(2.5rem, 6vw, 4.5rem); block-size: 2px;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.75rem);
  background: linear-gradient(90deg, var(--oak-400), rgba(214,174,118,0));
}
.hero--estate .hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 1.35rem + 3.5vw, 4.25rem);
  line-height: 1.02; letter-spacing: -.022em;
  max-width: 15ch; margin: var(--s-5) 0 var(--s-5);
  text-wrap: balance;
}
.hero--estate .hero__lead {
  color: rgba(255,255,255,.84);
  font-size: clamp(1rem, .95rem + .32vw, 1.1875rem);
  max-width: 50ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero--estate .badge {
  background: rgba(255,255,255,.10);
  border-color: rgba(214,174,118,.42);
  color: var(--oak-300);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero--estate .badge::before { background: var(--oak-400); }

/* The interior mounted over the frame's lower-right corner: the second half of
   the story — the house outside, the home inside. */
.hero__inset {
  position: absolute; z-index: 3; margin: 0;
  right: clamp(1.75rem, 3.4vw, 3.25rem); bottom: clamp(1.75rem, 3.4vw, 3.25rem);
  inline-size: clamp(11rem, 15vw, 15rem); aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), var(--sh-lg);
}
.hero__inset img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1099px) { .hero__inset { display: none; } }
@media (max-width: 720px) {
  .hero__frame { min-height: 0; border-radius: var(--r-xl); }
  .hero__frame > .hero__media { position: relative; inset: auto; aspect-ratio: 16 / 11; }
  .hero__frame::after { inset: 0 0 auto 0; height: 100%; }
  .hero__body { background: linear-gradient(180deg, var(--slate-700), var(--slate-900)); max-width: none; }
}

/* 18.5 Heads, eyebrows, numerals ------------------------------------------- */
.badge {
  margin-bottom: var(--s-5);
  padding: .5rem 1.1rem .5rem .9rem;
  background: rgba(185,139,84,.09);
  border-color: rgba(185,139,84,.32);
  letter-spacing: .15em;
}
.badge::before { inline-size: 5px; block-size: 5px; border-radius: 50%; }
.badge--dark { background: rgba(214,174,118,.13); border-color: rgba(214,174,118,.32); }
.section--dark .badge, .on-dark .badge {
  background: rgba(214,174,118,.13); border-color: rgba(214,174,118,.32); color: var(--oak-300);
}
.section--dark .badge::before, .on-dark .badge::before { background: var(--oak-400); }

.section-head { margin-bottom: clamp(2.5rem, 4.2vw, 4rem); }
.section-head .h2 { max-width: 20ch; text-wrap: balance; }
.section-head--two .h2 { max-width: 21ch; }
.h2 { line-height: 1.08; }

.section-index {
  display: inline-flex; align-items: center; gap: .8rem;
  margin-bottom: var(--s-4);
  font-size: .8125rem; letter-spacing: .26em; color: var(--oak-600);
}
.section-index::after {
  content: ""; inline-size: 2.5rem; block-size: 1px;
  background: linear-gradient(90deg, var(--oak-500), rgba(185,139,84,0));
}

/* 18.6 Cards — one family --------------------------------------------------
   A single radius, a single hairline, a single resting shadow and a single
   lift. Applied everywhere, it does more for the premium read than any
   amount of ornament. */
.info-card {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--surface);
  border-color: rgba(19,30,36,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.info-card h2, .info-card h3 {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: -.01em; margin-bottom: .7rem;
}
.info-card--dark {
  background:
    radial-gradient(70% 58% at 88% 2%, rgba(185,139,84,.20), transparent 66%),
    linear-gradient(180deg, var(--slate-600), var(--slate-800));
  border-color: transparent; box-shadow: var(--sh-lg);
}

.value-card {
  padding: clamp(1.6rem, 2.8vw, 2.15rem);
  background: var(--surface);
  border-color: rgba(19,30,36,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.section--alt .value-card { background: var(--surface); border-color: rgba(19,30,36,.07); }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(185,139,84,.38); }
.value-card__icon {
  inline-size: 3.5rem; block-size: 3.5rem; margin-bottom: var(--s-6);
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(214,174,118,.24), rgba(185,139,84,.10));
  color: var(--oak-600);
  box-shadow: inset 0 0 0 1px rgba(185,139,84,.22);
}
.section--alt .value-card__icon { background: linear-gradient(150deg, rgba(214,174,118,.24), rgba(185,139,84,.10)); }
.value-card:hover .value-card__icon { background: var(--slate-700); color: var(--oak-300); }
.value-card__num {
  font-size: 2rem; font-weight: 500;
  color: transparent; -webkit-text-stroke: 1px rgba(19,30,36,.16);
}
.value-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); letter-spacing: -.01em; margin-bottom: .55rem;
}
.grid-4 .value-card h3 { font-size: 1.1875rem; line-height: 1.3; }
.section--dark .value-card__num { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.24); }

.service-card::after, .post-card::after, .value-card::after { height: 2px; }
.service-card, .post-card, .quote-card, .g-review { border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.service-card:hover, .post-card:hover, .g-review:hover { box-shadow: var(--sh-lg); }

.tile {
  padding: 1.15rem 1.3rem;
  background: var(--surface);
  border-color: rgba(19,30,36,.08);
  border-radius: var(--r);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile:hover { box-shadow: var(--sh-md); border-color: rgba(185,139,84,.38); transform: translateY(-2px); }
.tile__icon {
  border-radius: var(--r-xs);
  background: linear-gradient(150deg, rgba(214,174,118,.26), rgba(185,139,84,.10));
  color: var(--oak-600);
  box-shadow: inset 0 0 0 1px rgba(185,139,84,.20);
}
.tile__label {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1.45; hyphens: manual;
}
.section--alt .tile { border-color: rgba(19,30,36,.07); }

.grid--lg { gap: clamp(1.5rem, 2.6vw, 2.25rem); }

/* PANEL — a limestone plate used to gather a block that would otherwise sit
   loose on the page. */
.panel {
  padding: clamp(1.75rem, 3.4vw, 3rem);
  background: linear-gradient(160deg, var(--stone-100), var(--stone-200));
  border: 1px solid rgba(19,30,36,.07);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.section--alt .panel { background: var(--surface); }

/* NOTE PANEL — a photograph and a short slate note locked into one frame.
   Used where a caution belongs beside the thing it is cautioning about. */
.note-panel {
  display: grid; overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  background: var(--slate-700);
}
@media (min-width: 860px) { .note-panel { grid-template-columns: 1.05fr .95fr; } }
.note-panel__media { position: relative; min-height: 15rem; }
.note-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.note-panel__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  color: #fff;
  background:
    radial-gradient(76% 62% at 88% 4%, rgba(185,139,84,.22), transparent 66%),
    linear-gradient(180deg, var(--slate-600), var(--slate-900));
}
.note-panel__body::before {
  content: ""; display: block;
  inline-size: 2.75rem; block-size: 2px; margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--oak-400), rgba(214,174,118,0));
}
.note-panel__body h2, .note-panel__body h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem);
  letter-spacing: -.01em; color: #fff; margin-bottom: .75rem;
}
.note-panel__body p { color: var(--text-inverse-mu); font-size: var(--fs-base); line-height: 1.75; }

/* 18.7 Editorial rows, feature panels -------------------------------------- */
.feature-panel {
  border: 0; border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.feature-panel__body { padding: clamp(1.75rem, 3.6vw, 3.25rem); }
.feature-panel__note {
  padding: 1.35rem 1.6rem;
  background: linear-gradient(180deg, rgba(19,30,36,0), rgba(19,30,36,.92) 58%);
}
.feature-panel__note strong { font-size: var(--fs-base); }

.svc-rows { display: grid; gap: 0; }
.svc-row {
  padding-block: clamp(2.5rem, 4.4vw, 4rem);
  border-top: 1px solid rgba(19,30,36,.08);
  gap: clamp(1.75rem, 3.6vw, 4.5rem);
}
.svc-row:last-child { border-bottom: 1px solid rgba(19,30,36,.08); }
.svc-row__body h2, .svc-row__body h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  letter-spacing: -.015em;
}
.svc-row__media img { aspect-ratio: 3 / 2; }

/* 18.8 Process, statistics, checklists ------------------------------------- */
@media (min-width: 900px) {
  .section--dark .steps { grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); }
  .section--dark .step {
    display: block;
    padding: clamp(1.6rem, 2.6vw, 2.15rem);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .section--dark .step:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
  .section--dark .step:hover { border-color: rgba(214,174,118,.48); transform: translateY(-6px); }
  .section--dark .step p { grid-column: auto; }
}
.section--dark .step__num {
  display: inline-grid; place-items: center;
  inline-size: 3rem; block-size: 3rem; margin-bottom: var(--s-5);
  border: 1px solid rgba(214,174,118,.45); border-radius: 50%;
  background: rgba(214,174,118,.10);
  font-size: 1.0625rem; color: var(--oak-300);
}
.section--dark .step h3 {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600;
  line-height: 1.3; margin-bottom: .5rem;
}

.stat-strip {
  gap: var(--s-6) var(--s-7);
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top-color: rgba(255,255,255,.16);
}
.stat__value {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  color: #fff; letter-spacing: -.025em;
}
.section--dark .stat-strip > div { position: relative; padding-left: clamp(0px, 2vw, 1.75rem); }
@media (min-width: 640px) {
  .section--dark .stat-strip > div + div::before {
    content: ""; position: absolute; left: 0; top: .1rem; bottom: .1rem;
    width: 1px; background: linear-gradient(180deg, rgba(214,174,118,.5), rgba(255,255,255,.06));
  }
}

.checklist li { padding-block: 1.35rem; gap: 1.15rem; border-color: rgba(19,30,36,.08); }
.checklist li:first-child { border-top-color: rgba(19,30,36,.08); }
@media (min-width: 820px) { .checklist--cols li { border-top-color: rgba(19,30,36,.08); } }
.checklist .icon {
  position: relative; margin-top: 0; flex: none;
  inline-size: 1.85rem; block-size: 1.85rem;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(214,174,118,.28), rgba(185,139,84,.12));
  box-shadow: inset 0 0 0 1px rgba(185,139,84,.24);
  -webkit-mask-image: none; mask-image: none;
}
.checklist .icon::after {
  content: ""; position: absolute; inset: .42rem;
  background: var(--oak-600);
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}
.section--dark .checklist .icon,
.on-dark .checklist .icon { background: rgba(214,174,118,.18); box-shadow: inset 0 0 0 1px rgba(214,174,118,.3); }
.section--dark .checklist .icon::after,
.on-dark .checklist .icon::after { background: var(--oak-300); }
.checklist strong {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.005em; margin-bottom: .3rem;
}

/* 18.9 Accordion — every question on its own plate ------------------------- */
.accordion { border-top: 0; display: grid; gap: .75rem; }
.accordion__item {
  border: 1px solid rgba(19,30,36,.08);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-xs);
  padding-inline: clamp(1.15rem, 2.2vw, 1.65rem);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.accordion__item:hover { border-color: rgba(185,139,84,.4); box-shadow: var(--sh-sm); }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: rgba(185,139,84,.5); box-shadow: var(--sh-md);
}
.accordion__trigger { padding-block: clamp(1.15rem, 2.2vw, 1.45rem); }
.accordion__icon { border-radius: 50%; border-color: rgba(185,139,84,.5); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--oak-600); border-color: var(--oak-600); }

/* 18.10 Team --------------------------------------------------------------- */
.person__media { border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.person__media img { filter: grayscale(.5) contrast(1.03); }
.person:hover .person__media img { filter: grayscale(0) contrast(1.03); }
.person__meta { border-top-color: rgba(19,30,36,.09); }
.person__role { color: var(--oak-600); }

/* 18.11 Contact band and footer -------------------------------------------- */
.cta::after,
.cta--split::after,
.cta--split.cta::after {
  background:
    radial-gradient(44% 40% at 88% 4%, rgba(214,174,118,.22), transparent 68%),
    linear-gradient(100deg, rgba(19,30,36,.95) 0%, rgba(19,30,36,.88) 44%, rgba(19,30,36,.52) 100%),
    linear-gradient(180deg, rgba(19,30,36,.58), rgba(19,30,36,.24) 45%, rgba(19,30,36,.84));
}
.cta__media img { object-position: 50% 46%; }
.cta { border-top: 0; }
.cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(214,174,118,.55) 22%, rgba(214,174,118,.55) 78%, transparent);
}
.contact-cards__item {
  border-radius: var(--r-lg); padding: 1.3rem 1.55rem;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.contact-cards__icon {
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(214,174,118,.28), rgba(185,139,84,.12));
  box-shadow: inset 0 0 0 1px rgba(214,174,118,.26);
}

.site-footer { background-image: none; border-top: 0; position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,174,118,.5) 22%, rgba(214,174,118,.5) 78%, transparent);
}
.social-row a { border-radius: var(--r-xs); }

/* 18.12 Chrome ------------------------------------------------------------- */
.site-header { background: rgba(255,255,255,.86); border-bottom-color: rgba(19,30,36,.07); }
.site-header.is-stuck { background: rgba(255,255,255,.95); box-shadow: 0 1px 24px rgba(19,30,36,.07); }
.nav a { font-weight: 500; }
.nav a::after { height: 1.5px; bottom: 0; background: var(--oak-500); }
.nav-toggle { border-radius: var(--r-xs); }
.topbar { background: var(--slate-800); }

.btn--gold {
  background: linear-gradient(135deg, #E9CFA4 0%, #D6AE76 40%, #B98B54 100%);
  box-shadow: 0 14px 30px -16px rgba(185,139,84,.8);
}
.btn--gold:hover { box-shadow: 0 18px 38px -16px rgba(185,139,84,.9); transform: translateY(-1px); }
.btn--primary { background: var(--slate-700); }
.btn--primary:hover { background: var(--slate-600); transform: translateY(-1px); }
.btn--outline { border-color: rgba(19,30,36,.22); }
.btn--outline:hover { border-color: var(--slate-700); background: rgba(19,30,36,.04); }

.input, .select, .textarea { border-radius: var(--r-xs); }
.map-embed, .article-hero, .post-feature__media, .profile__media img { border-radius: var(--r-lg); }
.side-form, .inline-cta { border-radius: var(--r-lg); }
.consent, .form-status { border-radius: var(--r-xs); }

@media (prefers-reduced-motion: reduce) {
  .value-card:hover, .tile:hover, .section--dark .step:hover,
  .btn--gold:hover, .btn--primary:hover { transform: none; }
}

/* 18.13 Property glyphs ---------------------------------------------------- */
:root {
  --i-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 11 10-7 10 7'/%3E%3Cpath d='M5 9.9V20h14V9.9M5 20h14M9 20v-5h6v5M12 4.6V9'/%3E%3C/svg%3E");
  --i-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 10.4A6 6 0 0 1 6 13.4C6 9.4 12 3 12 3Z'/%3E%3Cpath d='M9.4 14a2.6 2.6 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
  --i-plan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1.5'/%3E%3Cpath d='M3 10h7M10 3v18M10 15h11M17 15v6'/%3E%3C/svg%3E");
  --i-survey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='2.5' width='6' height='3.5' rx='1'/%3E%3Cpath d='m8.5 12 2 2 4-4M8.5 17h7'/%3E%3C/svg%3E");
  --i-crack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z'/%3E%3Cpath d='m11 8-2.5 4h4L10 17'/%3E%3C/svg%3E");
  --i-mould: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='3.2'/%3E%3Ccircle cx='15.5' cy='14.5' r='4.2'/%3E%3Ccircle cx='6.5' cy='16.5' r='2.2'/%3E%3C/svg%3E");
  --i-pipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h5a4 4 0 0 1 4 4v5a3 3 0 0 0 3 3h4'/%3E%3Cpath d='M3 4v4M18 16.5v3'/%3E%3C/svg%3E");
  --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6Z'/%3E%3C/svg%3E");
  --i-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1.5'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v6M15 9v6M9 15v6'/%3E%3C/svg%3E");
  --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='14.5' r='4'/%3E%3Cpath d='m10.4 11.6 8.1-8.1M16 6l2.5 2.5M13.6 8.4l2.5 2.5'/%3E%3C/svg%3E");
  --i-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 6 2-1.5L21 9v6l-3 2-4-3.5'/%3E%3Cpath d='M3 9.5 8.5 5l3.5 2.6-3 2.6a1.6 1.6 0 0 0 0 2.4l3.6 3.1'/%3E%3Cpath d='M3 9.5V15l3 2'/%3E%3C/svg%3E");
}
.icon--frame{-webkit-mask-image:var(--i-frame);mask-image:var(--i-frame)}
.icon--drop{-webkit-mask-image:var(--i-drop);mask-image:var(--i-drop)}
.icon--plan{-webkit-mask-image:var(--i-plan);mask-image:var(--i-plan)}
.icon--survey{-webkit-mask-image:var(--i-survey);mask-image:var(--i-survey)}
.icon--crack{-webkit-mask-image:var(--i-crack);mask-image:var(--i-crack)}
.icon--mould{-webkit-mask-image:var(--i-mould);mask-image:var(--i-mould)}
.icon--pipe{-webkit-mask-image:var(--i-pipe);mask-image:var(--i-pipe)}
.icon--bolt{-webkit-mask-image:var(--i-bolt);mask-image:var(--i-bolt)}
.icon--tile{-webkit-mask-image:var(--i-tile);mask-image:var(--i-tile)}
.icon--key{-webkit-mask-image:var(--i-key);mask-image:var(--i-key)}
.icon--handshake{-webkit-mask-image:var(--i-handshake);mask-image:var(--i-handshake)}

.service-card__media { aspect-ratio: 3 / 2; }
.service-card__badge {
  inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: var(--r);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.service-card__badge .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.value-card__icon .icon { inline-size: 1.6rem; block-size: 1.6rem; }

/* 18.14 PARTY PANELS — the two-sided section ------------------------------
   Buyer and seller are one idea seen from two ends, so they are set as a
   matched pair: the same plate, the same glyph medallion, one in limestone
   and one in slate, with a drawn elevation behind each rather than a
   photograph. It keeps a text-only block from reading as two grey boxes. */
.party-grid { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); }
@media (min-width: 900px) { .party-grid { grid-template-columns: repeat(2, 1fr); } }
.party-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(1.85rem, 3.4vw, 2.85rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(19,30,36,.08);
  background: linear-gradient(160deg, var(--surface), var(--stone-100));
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.party-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(185,139,84,.35); }
.party-card__icon {
  display: grid; place-items: center;
  inline-size: 3.75rem; block-size: 3.75rem; margin-bottom: var(--s-6);
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(214,174,118,.28), rgba(185,139,84,.10));
  color: var(--oak-600);
  box-shadow: inset 0 0 0 1px rgba(185,139,84,.24);
}
.party-card__icon .icon { inline-size: 1.7rem; block-size: 1.7rem; }
.party-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  letter-spacing: -.012em; margin-bottom: .85rem;
}
.party-card p { color: var(--text-muted); line-height: 1.8; }
/* The drawn elevation, low in the corner, at the weight of a watermark. */
.party-card::after {
  content: ""; position: absolute; z-index: -1; right: -1.5rem; bottom: -1.5rem;
  inline-size: 15rem; block-size: 10rem; opacity: .5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23B98B54' stroke-opacity='.32' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 150h224'/%3E%3Cpath d='M28 150V86l44-30 44 30v64'/%3E%3Cpath d='M58 150v-30h28v30'/%3E%3Cpath d='M42 98h16v14H42zM86 98h16v14H86z'/%3E%3Cpath d='M148 150V60h56v90M148 60h56'/%3E%3Cpath d='M158 74h14v14h-14zM182 74h14v14h-14zM158 100h14v14h-14zM182 100h14v14h-14zM158 126h14v14h-14zM182 126h14v14h-14z'/%3E%3C/svg%3E")
      right bottom / contain no-repeat;
}
.party-card--slate {
  background:
    radial-gradient(70% 58% at 88% 2%, rgba(185,139,84,.20), transparent 66%),
    linear-gradient(165deg, var(--slate-600), var(--slate-900));
  border-color: transparent; color: #fff;
  box-shadow: var(--sh-lg);
}
.party-card--slate h3 { color: #fff; }
.party-card--slate p { color: var(--text-inverse-mu); }
.party-card--slate .party-card__icon {
  background: rgba(214,174,118,.16); color: var(--oak-300);
  box-shadow: inset 0 0 0 1px rgba(214,174,118,.3);
}
.party-card--slate::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23D6AE76' stroke-opacity='.3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 150h224'/%3E%3Cpath d='M28 150V86l44-30 44 30v64'/%3E%3Cpath d='M58 150v-30h28v30'/%3E%3Cpath d='M42 98h16v14H42zM86 98h16v14H86z'/%3E%3Cpath d='M148 150V60h56v90M148 60h56'/%3E%3Cpath d='M158 74h14v14h-14zM182 74h14v14h-14zM158 100h14v14h-14zM182 100h14v14h-14zM158 126h14v14h-14zM182 126h14v14h-14z'/%3E%3C/svg%3E");
}

/* 18.15 REMEDY CARDS — the compensation section ---------------------------
   Three outcomes, set as a stacked column beside the property they are
   measured against, each opening with its own oak rule. */

.remedy-card {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.75rem, 3vw, 2.35rem);
  background: var(--surface);
  border: 1px solid rgba(19,30,36,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.remedy-card::before {
  content: ""; position: absolute; left: 0; top: clamp(1.4rem,2.6vw,1.9rem); bottom: clamp(1.4rem,2.6vw,1.9rem);
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--oak-400), var(--oak-600));
}
.remedy-card:hover { transform: translateX(4px); box-shadow: var(--sh-md); border-color: rgba(185,139,84,.35); }
.remedy-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
  letter-spacing: -.01em; margin-bottom: .5rem;
}
.remedy-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.75; }
.remedy-card .badge { margin-bottom: .85rem; }


/* 18.18 Hero corrections after proofing ------------------------------------ */
.hero__frame > .hero__media img { object-position: 50% 62%; }
.hero__frame::after {
  background:
    radial-gradient(44% 40% at 88% 6%, rgba(214,174,118,.24), transparent 68%),
    linear-gradient(96deg, rgba(19,30,36,.92) 0%, rgba(19,30,36,.82) 33%, rgba(19,30,36,.40) 66%, rgba(19,30,36,.08) 100%),
    linear-gradient(180deg, rgba(19,30,36,.30) 0%, rgba(19,30,36,0) 36%, rgba(19,30,36,.70) 100%);
}
.hero__body::before { margin-bottom: clamp(.85rem, 1.6vw, 1.15rem); }
/* An oak ring rather than a white one: the inset should sit inside the frame's
   material, not punch a hole in it. */
.hero__inset { box-shadow: 0 0 0 1px rgba(214,174,118,.55), var(--sh-lg); }
/* Surveyor's corner marks, top right — the one drawn detail on the plate. */
.hero__frame::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  right: clamp(1.5rem, 3vw, 2.75rem); top: clamp(1.5rem, 3vw, 2.75rem);
  inline-size: clamp(2.5rem, 5vw, 4rem); block-size: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(214,174,118,.6);
  border-right: 1px solid rgba(214,174,118,.6);
  border-top-right-radius: 6px;
}

/* 18.19 CHECKLIST — paired column beside a photograph ---------------------- */
@media (min-width: 640px) {
  .checklist--pair { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
  .checklist--pair li { border-top: 1px solid rgba(19,30,36,.08); border-bottom: 0; }
}

/* A portrait plate sitting beside a stack of cards should not tower over it —
   cap it and let the photograph crop rather than the row grow. */
.media-figure--portrait img { max-height: 46rem; }

/* 18.20 Corrections after proofing ----------------------------------------
   Three faults that only showed once the page was rendered end to end. */

/* The scrim over a photographic slate band was being written to ::after, which
   the oak seam rule on .section--dark also claims — so the seam won and the
   photograph came through at full strength with white type over it. The scrim
   belongs to the media element, where nothing else competes for it. */
.section--photo::after {
  background: none;
  height: 1px; inset: 0 0 auto 0;
}
.section--photo > .section__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(48% 40% at 86% 4%, rgba(214,174,118,.20), transparent 68%),
    linear-gradient(100deg, rgba(19,30,36,.96) 0%, rgba(19,30,36,.92) 42%, rgba(19,30,36,.80) 100%),
    linear-gradient(180deg, rgba(19,30,36,.82), rgba(19,30,36,.72) 45%, rgba(19,30,36,.94));
}


/* A badge is an inline chip. Inside the flex columns it now sits in — the
   feature panel body, the party cards — it was being stretched to the column. */
.badge { align-self: flex-start; }


/* The scrim over the photographic bands was tuned blind and came out opaque.
   Enough to hold white type, light enough that the building still reads. */
.section--photo > .section__media::after {
  background:
    radial-gradient(48% 40% at 86% 4%, rgba(214,174,118,.22), transparent 68%),
    linear-gradient(100deg, rgba(19,30,36,.95) 0%, rgba(19,30,36,.88) 40%, rgba(19,30,36,.66) 100%),
    linear-gradient(180deg, rgba(19,30,36,.74), rgba(19,30,36,.56) 45%, rgba(19,30,36,.90));
}

/* 18.22 PROCESS RAIL — a drawn line running behind the four steps ---------- */
@media (min-width: 900px) {
  .process-grid { position: relative; }
  .process-grid::before {
    content: ""; position: absolute; z-index: 0;
    left: 7%; right: 7%; top: 3.8rem; height: 1px;
    background: repeating-linear-gradient(90deg,
      rgba(185,139,84,.55) 0 6px, rgba(185,139,84,0) 6px 15px);
  }
  .process-grid > * { position: relative; z-index: 1; }
}

/* Between the tablet and desktop breakpoints the copy spans most of the frame,
   so a scrim that falls away to the right leaves the lead sitting over the lit
   part of the house. Below 1100px the wash becomes vertical instead. */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero__frame::after {
    background:
      radial-gradient(50% 38% at 88% 6%, rgba(214,174,118,.20), transparent 68%),
      linear-gradient(180deg, rgba(19,30,36,.40) 0%, rgba(19,30,36,.16) 28%, rgba(19,30,36,.84) 66%, rgba(19,30,36,.95) 100%);
  }
}

/* The photographic bands lost the oak seam when their scrim moved off ::after.
   Put it back so every slate band closes the same way. */
.section--photo::after {
  background: linear-gradient(90deg, transparent, rgba(214,174,118,.55) 22%, rgba(214,174,118,.55) 78%, transparent);
}


/* ==========================================================================
   19. FULL-BLEED HERO AND SECTION BALANCE
   ========================================================================== */

/* 19.1 The hero runs the full width of the viewport ------------------------
   Held inside the page box the plate read as a card on a page. Edge to edge it
   reads as the building itself, which is the first impression the page is
   after. The copy still sits on the container grid — only the photograph and
   the scrim break out. */
.hero--estate { padding-block: 0; background: var(--slate-800); }
.hero__frame {
  border-radius: 0;
  min-height: min(82svh, 820px);
  box-shadow: none;
}
/* .hero__body IS the .container now, so the gutter comes from the container and
   only the vertical padding belongs to the hero. */
.hero--estate .hero__body {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--container);
  margin-inline: auto;
}
/* The corner marks and the inset align to the container's content edge, not to
   the viewport, or they drift off into the margin on a wide screen. */
.hero__frame::before,
.hero__inset {
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.hero__frame::before { top: clamp(1.75rem, 3.4vw, 3rem); }
.hero__inset { bottom: clamp(2rem, 4vw, 3.5rem); }

@media (max-width: 720px) {
  .hero__frame { border-radius: 0; }
  .hero--estate .hero__body { padding-block: clamp(2rem, 7vw, 3rem); }
}

/* 19.2 The two advisory sections ------------------------------------------
   Copy and a photograph in one column, the eight service tiles two-up in the
   other — the pairing the page had before. The photograph takes the wider
   16:9 crop so the column does not tower, and the tile column centres against
   whatever height is left. */
.split--advisory .media-figure--wide img { aspect-ratio: 16 / 9; }
@media (min-width: 940px) {
  .split--advisory { grid-template-columns: 1.02fr .98fr; }
  .split--advisory > :last-child { align-self: center; }
}

/* 19.3 Small screens -------------------------------------------------------
   A long badge wraps on a phone, and as a flex item the marker dot was left
   stranded on a line of its own. Inline-block ties it to the first word.
   (This rule was in the layer this one replaced; it belongs here now.) */
@media (max-width: 620px) {
  .badge { display: inline-block; padding: .45rem 1rem; line-height: 1.5; }
  .badge::before { display: inline-block; margin-right: .6em; vertical-align: .12em; }
}
/* The surveyor's corner mark reads as a detail on a wide plate and as clutter
   on a phone, where it lands over the photograph's own edge. */
@media (max-width: 720px) { .hero__frame::before { content: none; } }

/* 19.4 FLUSH SPLIT — the photograph finishes level with the copy -----------
   Centred, a 3:2 plate beside a two-paragraph column starts lower and ends
   higher than the text, so the pair reads as two loose blocks. Stretched, the
   photograph fills the row and the two columns begin and end on the same
   lines — which is the whole point of setting them side by side. */
@media (min-width: 940px) {
  .split--flush { align-items: stretch; }
  .split--flush .split__media { display: block; }
  .split--flush .split__media img { height: 100%; object-fit: cover; }
}

/* 19.5 CHECKLIST AS CARDS — the six reasons on a slate band ----------------
   The same plate as the four steps: a glass card, an oak medallion carrying
   the mark, a display heading and muted copy. Three up, two rows. */
.checklist--cards { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 700px)  { .checklist--cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .checklist--cards { grid-template-columns: repeat(3, 1fr); } }

.section--dark .checklist--cards li,
.section--dark .checklist--cards li:first-child {
  display: block;
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.section--dark .checklist--cards li:hover {
  border-color: rgba(214,174,118,.48); transform: translateY(-6px);
}
.section--dark .checklist--cards .icon {
  display: block; margin: 0 0 var(--s-5);
  inline-size: 3rem; block-size: 3rem;
  border: 1px solid rgba(214,174,118,.45);
  background: rgba(214,174,118,.10);
  box-shadow: none;
}
.section--dark .checklist--cards .icon::after { inset: .8rem; background: var(--oak-300); }
.section--dark .checklist--cards strong {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600;
  line-height: 1.3; color: #fff; margin-bottom: .5rem;
}
.section--dark .checklist--cards span { color: var(--text-inverse-mu); line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .section--dark .checklist--cards li:hover { transform: none; }
}

/* ==========================================================================
   20. COLUMN BALANCE
   --------------------------------------------------------------------------
   Two sections were leaving a column short. Both are fixed by changing what
   goes in the columns rather than by padding one of them out.
   ========================================================================== */

/* 20.1 The two advisory sections ------------------------------------------
   Copy, photograph and eight tiles in two columns could never finish level:
   the copy side ran a heading, two paragraphs and a plate, the tile side four
   rows. Splitting it into a two-column head with the row of image + tiles
   underneath puts blocks of comparable height beside each other, and the
   dead space on the right goes with it. */
.split--advisory .media-figure--wide img { aspect-ratio: 3 / 2; }
@media (min-width: 940px) {
  .split--advisory { grid-template-columns: 1.02fr .98fr; align-items: start; }
}
/* The prose in the head sets on a measure rather than running the full track. */
.section-head--two > .prose { max-width: 48ch; }

/* ==========================================================================
   21. TWO LAST CORRECTIONS
   ========================================================================== */

/* 21.1 The compensation section --------------------------------------------
   A 4:5 photograph beside three cards made the section twice as tall as the
   copy in it warranted, and no crop of a house reads well at that shape. The
   three remedies are one set of three, so they sit as a row of three — which
   is what the section is actually saying. */
.remedy-row { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); }
@media (min-width: 900px) { .remedy-row { grid-template-columns: repeat(3, 1fr); } }

/* 21.2 The two-column section head -----------------------------------------
   The head bottom-aligns its heading against the column beside it, which is
   right when that column holds one short lead. Against two paragraphs of prose
   it pushed the heading down and opened a hole above it, so where the head
   carries prose the two columns start together instead. */
.section-head--two:has(.prose) { align-items: start; }
.section-head--two:has(.prose) > :first-child { align-self: start; }

/* ==========================================================================
   22. PRACTICE PAGE — dolda-fel-i-hus.html
   --------------------------------------------------------------------------
   Four components the home page did not need. Everything else on the page is
   the home page's own vocabulary: the full-bleed hero, the feature panel, the
   flush splits, the value and remedy cards, the accordion and the split CTA.
   ========================================================================== */

/* 22.1 A read-more link closing a value card -------------------------------
   The defect cards carry their own link, so the card gets a footer rule and
   the link is pinned to it — the same signature the service cards use. */
.value-card { display: flex; flex-direction: column; }
.value-card > p { flex: 1; }
.value-card > .link-arrow {
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--accent-deep);
}
.section--alt .value-card > .link-arrow { border-top-color: rgba(0,0,0,.08); }

/* 22.2 An icon plate on the remedy cards -----------------------------------
   On the home page the three remedies open with a badge. Here they open with
   a glyph, so the row reads at a glance before a word of it is. */
.remedy-card__icon {
  display: grid; place-items: center;
  inline-size: 3.25rem; block-size: 3.25rem;
  margin-bottom: var(--s-5);
  border-radius: var(--r);
  background: rgba(185,139,84,.10);
  color: var(--accent-deep);
}
.remedy-card__icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }

/* 22.3 The expert band -----------------------------------------------------
   A headline, one action and the face of the lawyer who takes the call, set
   over the slate photographic ground. */
.expert-band { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) {
  .expert-band { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
}
.expert-band__body .h2 { max-width: 24ch; }
.expert-band__portrait {
  position: relative; margin: 0; justify-self: start;
  inline-size: clamp(11rem, 22vw, 16rem); aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(214,174,118,.35), 0 0 0 10px rgba(255,255,255,.05), var(--sh-lg);
}
@media (min-width: 860px) { .expert-band__portrait { justify-self: end; } }
.expert-band__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(.35) contrast(1.03);
}

/* 22.4 The FAQ column ------------------------------------------------------
   Twelve questions run long, so the accordion sets on a measure and centres
   under its head rather than stretching the full page box. */
.faq-wrap { max-width: 58rem; margin-inline: auto; }
.section-head--center .badge { display: inline-flex; }

/* 22.5 The form on the contact band ---------------------------------------- */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-lg);
}
.form-card .form { gap: var(--s-4); }
.form-card .field > label { color: rgba(255,255,255,.76); }

/* 22.7 A rule where the home page uses an eyebrow -------------------------
   The practice page carries no eyebrow text of its own, and inventing labels
   would have meant adding words to a page whose copy is fixed. A short oak
   rule holds the same position in the rhythm and says nothing. */
.eyebrow-rule {
  display: block; inline-size: 3.25rem; block-size: 2px;
  margin-bottom: var(--s-5); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(185,139,84,.15));
}
.eyebrow-rule--dark { background: linear-gradient(90deg, var(--accent-soft), rgba(214,174,118,.15)); }
.section-head--center .eyebrow-rule { margin-inline: auto; }

/* 22.8 The contact form, two fields to a row ------------------------------
   Five fields stacked ran the card longer than the copy beside it. Name and
   phone share a row, e-mail and subject share the next, and the message keeps
   the full width. The base `.form__row--2` pairs from 640px, which is right
   while the card is full width — but between 940px and 1100px the card is only
   a narrow column of the split, and two inputs in it would be cramped. */
@media (min-width: 940px) and (max-width: 1023px) {
  .form-card .form__row--2 { grid-template-columns: 1fr; }
}
.form-card .form__row { gap: var(--s-4); }
.form-card .input, .form-card .select { min-height: 48px; }
.form-card .textarea { min-height: 7.5rem; }

/* 22.9 EDITORIAL SPLIT — a portrait plate beside a long column ------------
   The section that runs five paragraphs takes a photograph shot tall rather
   than a landscape one stretched to fit: a narrower media track and a 4:5
   source, so the plate finishes level with the copy with almost nothing
   cropped away. Prefer this wherever a portrait crop of
   the photograph exists. */
@media (min-width: 940px) {
  .split--editorial { grid-template-columns: .85fr 1.15fr; }
}

/* 22.10 Two-column prose ---------------------------------------------------
   `columns` will happily break a paragraph across the gutter, so the reader
   finishes a sentence at the foot of one column and picks it up at the head of
   the next. Every block in a `.prose--cols` stays whole. */
@media (min-width: 940px) {
  .prose--cols > * { break-inside: avoid; page-break-inside: avoid; }
}

/* 22.11 The closing contact note ------------------------------------------
   The note that ends the practice page reads as a bar rather than a card:
   the address and number on the left, the action on the right, so it does not
   sit as a tall block under a two-column argument. */
.contact-note { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 820px) { .contact-note { grid-template-columns: 1fr auto; gap: var(--s-6); } }
.contact-note p { margin: 0; max-width: 78ch; }
.contact-note p + p { margin-top: .9em; }
.contact-note .btn { white-space: nowrap; }

/* 22.12 A photograph behind a light band ----------------------------------
   `.section--photo` puts a slate scrim over its picture and sets white type on
   it. This is the daylight counterpart: the photograph sits far back under a
   limestone wash, so it gives the band warmth and depth without competing with
   the white cards standing on it. The wash is opaque enough that every text
   contrast on the band is unchanged. */
.section--photo-soft { position: relative; isolation: isolate; overflow: hidden; }
.section--photo-soft > .section__media { position: absolute; inset: 0; z-index: -1; }
.section--photo-soft > .section__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
}
.section--photo-soft > .section__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.72), transparent 70%),
    linear-gradient(180deg, rgba(250,247,242,.91) 0%, rgba(242,238,231,.88) 45%, rgba(239,234,225,.94) 100%);
}

/* 22.13 Two pillars ---------------------------------------------------------
   The disputes page opens on a pair of long-form blocks — when the seller is
   liable, and what to do first. They are the same plate as the three remedies,
   two up and carrying several paragraphs each. */
@media (min-width: 900px) { .remedy-row--2 { grid-template-columns: repeat(2, 1fr); } }
.remedy-row--2 .remedy-card p + p { margin-top: 1em; }

/* 22.14 TERMS SHEET — a numbered legal document ----------------------------
   Twelve clauses on one white sheet, set on the limestone band so the panel
   reads as a document rather than a run of loose text. Each clause is three
   columns: an oak medallion, the title, and the body running to the right
   edge of the sheet — capping the body at a measure and leaving the right
   third of the page empty was the first attempt and it looked unfinished. */
.terms-sheet {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: clamp(1.5rem, 3.4vw, 3rem) clamp(1.5rem, 3.4vw, 3.25rem);
}
.terms-list { counter-reset: clause; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.terms-item {
  counter-increment: clause;
  display: grid; gap: .75rem 1.75rem;
  padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  border-top: 1px solid rgba(0,0,0,.08);
}
.terms-item:first-child { border-top: 0; padding-top: 0; }
.terms-item:last-child { padding-bottom: 0; }

.terms-item::before {
  content: counter(clause, decimal-leading-zero);
  display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 50%;
  background: rgba(185,139,84,.10);
  border: 1px solid rgba(185,139,84,.30);
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
  line-height: 1; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.terms-item__title {
  align-self: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.4375rem);
  line-height: 1.25; letter-spacing: -.01em; color: var(--text);
  margin: 0;
}
.terms-item .prose p { max-width: none; }

/* Three columns: medallion, title, body. The body fills the sheet rather than
   sitting under the title, so the clause reads across the page and nothing is
   left standing empty beside it. */
@media (min-width: 1000px) {
  .terms-item {
    grid-template-columns: 2.75rem minmax(0, 17rem) minmax(0, 1fr);
    align-items: start; gap: 0 2.25rem;
  }
  .terms-item::before { grid-column: 1; grid-row: 1; }
  .terms-item__title { grid-column: 2; grid-row: 1; align-self: start; padding-top: .3rem; }
  .terms-item .prose { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1240px) {
  .terms-item { grid-template-columns: 2.75rem minmax(0, 19rem) minmax(0, 1fr); }
}

/* 22.15 The expert band on a light ground ---------------------------------
   On the terms page the band sits between the clause sheet and the closing
   contact band. Left dark it merged into the CTA below it and the two read as
   one long slate region; on white it separates them and the page alternates
   light and dark the way the rest of the site does. */
.expert-band--light .expert-band__portrait {
  box-shadow: 0 0 0 1px rgba(185,139,84,.35), 0 0 0 10px rgba(185,139,84,.07), var(--sh-lg);
}
.expert-band--light .expert-band__portrait img { filter: grayscale(.25) contrast(1.03); }

/* 22.16 ADDRESS NOTE — a postal address set apart from the copy -----------
   The consumer board's address is the last thing in its paragraph on the
   source page. Left inline it reads as three orphan lines; given an oak rule
   and a limestone ground it reads as what it is — somewhere to write to. */
.address-note {
  display: block;
  padding: 1.1rem 1.35rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: var(--surface-alt);
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 600;
  line-height: 1.65; color: var(--text);
  font-style: normal;
}

/* 22.17 Long single-word headlines ----------------------------------------
   `.hero__title` breaks words so a headline can never overflow its box. That
   is right for a phrase, wrong for a Swedish compound standing alone:
   "Konsumenttvistnämnden" is 21 characters against a 15ch cap, so it split as
   "Konsumenttvistnäm / nden". The cap now only governs where phrases wrap —
   a single long word overflows it and sets on one line, which the container
   has room for. */
.hero--estate .hero__title { overflow-wrap: normal; }
/* A one-word headline cannot wrap, so on a narrow screen it either overflows
   or splits mid-syllable. `hyphens: auto` would break it properly, but only
   where the browser ships a Swedish dictionary — Chrome does not. Sizing the
   headline so the word fits is the reliable answer; add the modifier to any
   hero whose title is a single long compound. */
@media (max-width: 480px) {
  .hero--estate .hero__title--compound {
    font-size: clamp(1.625rem, 7.2vw, 2.25rem);
    overflow-wrap: normal;
  }
}

/* 22.18 Numbered lists inside an accordion --------------------------------
   `.accordion__body li::before` draws an oak dot for every list item, which
   is right for a bulleted list and wrong for a numbered one — an <ol> came
   out as four dots. Ordered lists keep their markers. */
.accordion__body ol {
  list-style: decimal; padding-left: 1.5rem; margin-top: .85em;
}
.accordion__body ol > li { padding-left: .2rem; }
.accordion__body ol > li::before { content: none; }
.accordion__body ol > li::marker { color: var(--accent-deep); font-weight: 600; }
.accordion__body strong { color: var(--text); font-weight: 600; }
/* A paragraph closing a list needs the same air as one following a paragraph. */
.accordion__body ol + p, .accordion__body ul + p { margin-top: .85em; }

/* ==========================================================================
   23. FOOTER — the client's four-column layout
   --------------------------------------------------------------------------
   The brand blurb is now the first column of the grid rather than a row of its
   own above it, matching the live site: blurb, Snabblänkar, Kontaktinformation,
   Prenumerera oss, then a bottom bar carrying the copyright and three links out
   to advantage.se.
   ========================================================================== */
.footer-cols--brand { border-top: 0; }
.footer-cols--brand .footer-intro {
  display: block; padding-block: 0; gap: 0;
}
.footer-cols--brand .footer-intro p {
  margin-top: var(--s-5);
  font-size: var(--fs-sm); line-height: 1.75;
}
@media (min-width: 1040px) {
  .footer-cols--brand { grid-template-columns: 1.55fr 1fr 1.1fr .75fr; }
}

/* Between the drawer breakpoint and the wide grid the four columns are narrow
   enough that "Prenumerera oss" wraps and the fourth social tile drops onto a
   second row. Borrowing width from the blurb keeps that column on one line. */
@media (min-width: 1040px) and (max-width: 1279px) {
  .footer-cols--brand { grid-template-columns: 1.2fr 1fr 1.1fr 1.05fr; }
}

/* The social row is a footer column now, not a tail on the bottom bar. */
.footer-cols--brand .social-row { flex-wrap: wrap; }

/* Bottom bar: copyright left, the three advantage.se links right. */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 0;
  list-style: none; padding: 0;
}
.footer-legal a {
  color: var(--text-inverse-mu); text-decoration: none;
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.footer-legal a:hover { color: #fff; }

/* Six Swedish nav items are longer than the six English ones they replace, so
   the row needs to keep its nerve down to the drawer breakpoint. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .nav ul { gap: 1rem; }
  .nav a { font-size: var(--fs-xs); }
  .header-phone { display: none; }
}

/* ==========================================================================
   24. CONTACT PAGE — contact lines and the map frame
   --------------------------------------------------------------------------
   The live contact page lists phone, e-mail and address as icon + text with no
   label above each one, so `.contact-cards` (which needs a <dt>) cannot be used
   here without inventing words. `.contact-lines` is the same pill on dark, minus
   the label row.
   ========================================================================== */
.contact-lines {
  display: grid; gap: var(--s-4);
  /* The top margin lives here rather than on a utility class: the component
     resets the list margin, and a reset in a later section beats `.u-mt-*`. */
  margin: var(--s-7) 0 0; padding: 0; list-style: none;
}
.contact-lines li {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.05);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.contact-lines li:hover {
  border-color: rgba(214,174,118,.55);
  background: rgba(255,255,255,.08);
  transform: translateX(4px);
}
.contact-lines__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--r);
  background: rgba(214,174,118,.16);
  color: var(--accent-soft);
}
.contact-lines__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.contact-lines a, .contact-lines > li > span:last-child {
  color: #fff; font-weight: 600; font-size: var(--fs-base);
  text-decoration: none; overflow-wrap: anywhere;
}
.contact-lines a:hover { color: var(--accent-soft); }

/* The office address is a single 54-character run of capitals; on a narrow
   column it needs the smaller step or it crowds the icon. */
@media (max-width: 620px) {
  .contact-lines li { padding: var(--s-4); }
  .contact-lines a, .contact-lines > li > span:last-child { font-size: var(--fs-sm); }
}

/* The Google embed, framed like every other media block on the site. */
.map-frame {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--sh-lg);
  /* A tinted ground rather than white, so the frame still reads as a panel while
     the Google embed is loading — or if a visitor blocks third-party frames. */
  background: linear-gradient(160deg, #E8E2D7, #D9D2C6);
}
.map-frame iframe {
  display: block;
  inline-size: 100%;
  block-size: clamp(20rem, 42vw, 30rem);
  border: 0;
  filter: saturate(.88) contrast(1.02);
}

/* ==========================================================================
   25. WORDPRESS — pagination, search form, widgets, editor output
   --------------------------------------------------------------------------
   Everything the static build never needed because it had no query behind it.
   Kept to the existing tokens so a WordPress page is indistinguishable from a
   hand-built one.
   ========================================================================== */

/* --- Pagination ---------------------------------------------------------- */
.adf-pagination { margin-top: var(--s-8); }
.adf-pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center;
}
.adf-pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-inline-size: 2.75rem; block-size: 2.75rem; padding-inline: .75rem;
  border: 1px solid rgba(0,0,0,.1); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.adf-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent-ink, var(--text)); }
.adf-pagination .page-numbers.current {
  background: var(--slate-800); border-color: var(--slate-800); color: #fff;
}
.adf-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* --- Search form --------------------------------------------------------- */
.search-form { display: flex; gap: .5rem; flex: 1 1 16rem; max-inline-size: 26rem; }
.search-form .input { flex: 1 1 auto; min-height: 44px; }
.search-form .btn { flex: 0 0 auto; }
@media (max-width: 720px) { .search-form { max-inline-size: none; } }

/* The filter bar holds chips on the left and the search box on the right. */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; justify-content: space-between; }
.chip.is-active { background: var(--slate-800); border-color: var(--slate-800); color: #fff; }

/* --- Paged posts (<!--nextpage-->) --------------------------------------- */
.adf-page-links { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }
.adf-page-links a { text-decoration: none; }

/* --- Blog sidebar widgets ------------------------------------------------ */
.widget + .widget { margin-top: var(--s-7); }
.widget__title { font-size: var(--fs-lg); margin-bottom: var(--s-5); }
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.widget ul a { color: var(--text-mu); text-decoration: none; }
.widget ul a:hover { color: var(--accent); }

/* --- Editor output inside .prose ----------------------------------------
   Posts written in Gutenberg or the classic editor land inside .prose, which
   already styles headings, lists, blockquotes and figures. These are the few
   block wrappers .prose does not know about. */
.prose .wp-block-image { margin-block: var(--s-7); }
.prose .wp-block-image img { border-radius: var(--r-lg); }
.prose figcaption, .prose .wp-element-caption {
  margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-mu); text-align: left;
}
.prose .wp-block-pullquote, .prose .wp-block-quote { margin-block: var(--s-7); }
.prose .wp-block-table { overflow-x: auto; display: block; }
.prose .wp-block-table table { inline-size: 100%; border-collapse: collapse; }
.prose .wp-block-table th, .prose .wp-block-table td {
  padding: .7rem .9rem; border-bottom: 1px solid rgba(0,0,0,.08); text-align: left;
}
.prose .wp-block-embed__wrapper { position: relative; }
.prose .alignleft { float: left; margin: 0 var(--s-6) var(--s-5) 0; }
.prose .alignright { float: right; margin: 0 0 var(--s-5) var(--s-6); }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignwide, .prose .alignfull { margin-inline: 0; }
.prose img { max-inline-size: 100%; height: auto; }

/* WordPress admin bar offsets the fixed header. */
body.admin-bar .mobile-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mobile-nav { top: 46px; } }

/* --- Comments ------------------------------------------------------------ */
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.comment-list .children { list-style: none; margin: var(--s-6) 0 0; padding-left: var(--s-6); display: grid; gap: var(--s-6); }
.comment-body {
  padding: var(--s-6); border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--r-lg); background: var(--surface);
}
.comment-meta { display: flex; gap: .75rem; align-items: center; font-size: var(--fs-sm); color: var(--text-mu); }
.comment-meta img { border-radius: 50%; }

/* ==========================================================================
   26. LOAD MORE — the article listing grows in place
   --------------------------------------------------------------------------
   Replaces numbered pagination. The button sits centred under the grid with a
   live count beneath it, so a visitor always knows how much is left rather than
   clicking into the dark.
   ========================================================================== */
.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-8);
  text-align: center;
}
.load-more .btn { min-inline-size: 15rem; }

.load-more__status {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-mu);
  letter-spacing: .01em;
}

/* Once everything is loaded the button hides itself; keep the count visible so
   the section does not end abruptly. */
.load-more[data-exhausted="true"] .load-more__status { color: var(--text-mu); }

/* The button reports its own busy state rather than going disabled, so it stays
   focusable and screen readers hear the change. */
.load-more .btn[aria-disabled="true"] { opacity: .65; cursor: progress; }

/* Cards appended after load start hidden like every other [data-reveal] element
   and are handed to the observer by main.js. If JavaScript fails after the HTML
   arrives, this makes sure they are never left invisible. */
.no-js .post-card[data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   27. LOGO HARDENING
   --------------------------------------------------------------------------
   The logo is a raster wordmark with thin serifs, so anything that recolours or
   half-composites it shows up immediately as a washed-out "ADVANTAGE" next to a
   still-crisp "A" mark. These rules remove every way that can happen from
   outside the theme.

   `forced-color-adjust: none` is the important one. Windows High Contrast mode
   and the forced-colors media feature repaint images and backgrounds with the
   user's palette, which turns a dark wordmark on a transparent background into a
   pale ghost. Opting the logo out keeps the client's artwork intact while leaving
   the rest of the page free to adapt, which is the behaviour you want.

   The rest are belt and braces against a plugin, an Elementor kit, or a browser
   extension applying a filter, an opacity or a blend mode to images site-wide.
   ========================================================================== */
.brand img,
.brand--inverse img,
.site-header .brand img,
.site-footer .brand img,
.mobile-nav .brand img {
  forced-color-adjust: none;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* The master artwork is 322x62. Rendered at 34px it is a clean downscale on a
     1x screen and very close to native on 2x. Keep it here rather than letting a
     stray rule stretch it — a non-integer scale is what makes thin serifs go grey. */
  block-size: 34px;
  inline-size: auto;
  max-inline-size: none;
  image-rendering: auto;
}

/* Under forced colors, give the mark a border so it still reads as a logo block
   even though we have opted its pixels out of the recolouring. */
@media (forced-colors: active) {
  .brand img { forced-color-adjust: none; }
}

/* If the file ever fails to load, the alt text is what shows. Make sure it is
   legible on both grounds rather than inheriting a colour meant for an image. */
.brand { color: var(--text); font-family: var(--font-display); font-weight: 700; }
.brand--inverse { color: var(--slate-800); }