/* ==========================================================================
   Shelbys Auctioneers: base.css (handle shelbys-base)
   Shared part of spec/design/final/styles.css (design system v3: logo blue + Libre Franklin, responsive contract), ported by
   work/foundation/port_css.py: tokens, reset, type, layout and every shared component. Rules that only
   style homepage sections (hero, next-sale bar, facts + "as seen on", about grid, how-it-works wrapper,
   category cards, the sale-calendar grid, the FAQ teaser) are left to the home module's home.css; see
   docs/COMPONENTS.md "Homepage-only classes". Sections 23+ are the theme's WordPress glue.
   Breakpoints (literal): 640, 768, 1024 (layouts), 1120 (--bp-nav: desktop header), 1280.
   ========================================================================== */
/* 01 FONTS ----------------------------------------------------------------
   Libre Franklin (OFL, Fontsource @fontsource-variable/libre-franklin@5.3.0), latin subset, one
   variable upright file (wght 100-900) of which we use exactly two weights: 400 and 700.
   No italic file ships: nothing on the site is set in italic. */
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback (Arial), computed from Libre Franklin's hhea/OS2 metrics: no reflow on swap. */
@font-face {
  font-family: "Franklin Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 104.8%; ascent-override: 92.2%; descent-override: 23.5%; line-gap-override: 0%;
}

/* 02 TOKENS -------------------------------------------------------------- */
:root {
  /* Blue: the logo swoosh, sampled (#00007E is 10,946 of the logo's opaque pixels). One hue, three steps. */
  --blue:       #00007E;  /* brand + primary: dark bands, buttons on white, links, icons, eyebrows   */
  --blue-deep:  #00005A;  /* darker shade: utility row, next-sale bar, footer, call bar, button hover */
  --blue-tint:  #E6E6F2;  /* pressed / hover fill on white, white-button hover on blue (non-text)     */

  /* Ground + ink: plain white page, one light neutral band, near-black ink (the logo's script is black) */
  --white:    #FFFFFF;    /* page ground, cards, fields */
  --ground-2: #F3F3F5;    /* alternating band           */
  --ground-3: #E7E7EB;    /* image placeholders, tags   */
  --ink:      #14141A;    /* headings + body   18.35:1 white / 16.55:1 ground-2 */
  --ink-2:    #4A4A55;    /* secondary text     8.74:1 white /  7.89:1 ground-2 */
  --ink-3:    #64646E;    /* meta only          5.85:1 white /  5.28:1 ground-2 */
  --on-blue:   #FFFFFF;   /* text on blue      16.14:1 blue / 18.30:1 blue-deep */
  --on-blue-2: #C3C5EB;   /* secondary on blue  9.61:1 blue / 10.90:1 blue-deep */
  --rule:        #DCDCE2;              /* hairlines on white (decorative)          */
  --rule-strong: #8A8A94;              /* control outlines + input borders (3.42:1) */
  --rule-blue:   rgb(255 255 255 / .2);
  --field-line:  #8A8A94;

  /* Feedback */
  --error: #B42318;          /* 6.57:1 white */
  --error-on-blue: #FFB4AB;  /* 9.50:1 blue  */
  --success: #1E6B34;        /* 6.55:1 white */
  --error-bg: #FDF0EE;
  --success-bg: #EDF5EF;

  /* One family, two weights */
  --font-sans: "Libre Franklin", "Franklin Fallback", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
  --w-regular: 400;
  --w-bold: 700;

  /* Fluid type scale, 360px -> 1440px viewport (rem, so it also grows with the ultra-wide root) */
  --step--2: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);   /* 13 -> 14 legal, meta floor  */
  --step--1: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);       /* 15 -> 16 UI small, eyebrows */
  --step-btn: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);      /* 16 -> 17 buttons, nav       */
  --step-0:  clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);  /* 17 -> 19 body               */
  --step-1:  clamp(1.1875rem, 1.125rem + 0.2778vw, 1.375rem);    /* 19 -> 22 H3, FAQ summary    */
  --step-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);     /* 17 -> 22 leads              */
  --step-2:  clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);       /* 22 -> 28 card titles        */
  --step-3:  clamp(1.625rem, 1.4167rem + 0.9259vw, 2.25rem);     /* 26 -> 36 inner H2           */
  --step-4:  clamp(1.75rem, 1.2917rem + 2.037vw, 3.125rem);      /* 28 -> 50 section H2         */
  --step-5:  clamp(2.25rem, 1.625rem + 2.7778vw, 4.125rem);      /* 36 -> 66 page-title H1      */
  --step-hero-h1: clamp(1.625rem, 1.4583rem + 0.7407vw, 2.125rem); /* 26 -> 34 hero H1          */
  --step-numeral: clamp(2.25rem, 1.875rem + 1.6667vw, 3.375rem);  /* 36 -> 54 fact numerals     */

  --lh-body: 1.6;
  --lh-tight: 1.1;
  --track-tight: -.02em;  /* large headings */
  --track-caps: .08em;

  /* Spacing (px values on a 4px base) */
  --space-3xs: .25rem;  /*   4 */
  --space-2xs: .5rem;   /*   8 */
  --space-xs:  .75rem;  /*  12 */
  --space-s:   1rem;    /*  16 */
  --space-m:   1.5rem;  /*  24 */
  --space-l:   2rem;    /*  32 */
  --space-xl:  3rem;    /*  48 */
  --space-2xl: 4rem;    /*  64 */
  --space-3xl: 6rem;    /*  96 */
  --space-4xl: 8rem;    /* 128 */

  /* Fluid space: one scale for section rhythm, proportionally smaller on phones */
  --section:   clamp(1.5rem, 1rem + 2.4vw, 3.5rem);      /* 25 @390, 34 @768, 41 @1024, 51 @1440, 56 cap (63 on an 18px root) */
  --section-s: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);     /* 24 -> 36 slim bands, footer rows  */
  --head-gap:  clamp(1.25rem, .9rem + 1.2vw, 2rem);      /* 20 -> 32 section head -> content  */
  --flow:      clamp(1rem, .75rem + .9vw, 1.625rem);     /* 16 -> 26 gaps inside components   */
  --gutter:    clamp(1rem, 4vw, 2.5rem);                 /* 16 -> 40 side gutter              */
  --rail-gap:  clamp(.75rem, .5rem + 1vw, 1.5rem);       /* 12 -> 24 gap between rail items   */

  /* Containers */
  --wrap: 77.5rem;       /* 1240 at a 16px root, 1395 at 18px */
  --wrap-text: 45rem;    /*  720: prose column (~68ch at 19px) */
  --wrap-narrow: 52rem;  /*  832: centred heads */

  /* Radii: square-ish and practical */
  --r-xs: 2px;     /* buttons, inputs, tags, chips */
  --r-s: 3px;      /* images, logo tab, notices    */
  --r-m: 4px;      /* cards                        */
  --r-pill: 999px; /* the hero discs and icon rings only (circles, not pills) */

  /* Shadows: only for things that float over content (dropdown, sticky header, back-to-top).
     Cards are separated by 1px rules, not shadows. */
  --shadow-card: none;
  --shadow-lift: none;
  --shadow-pop:  0 8px 24px -8px rgb(0 0 40 / .28), 0 1px 3px rgb(0 0 40 / .12);

  /* Layers */
  --z-raised: 2;
  --z-nameplate: 3;
  --z-header: 100;
  --z-dropdown: 110;
  --z-callbar: 120;
  --z-totop: 120;
  --z-drawer: 200;
  --z-skip: 1000;

  /* Header heights (used to pad heroes/banners that sit under the overlay header) */
  --header-h: 4.5rem;        /*  72 below the nav breakpoint */
  --header-h-lg: 7.75rem;    /* 124 from 1120px              */
  --callbar-h: 4.75rem;      /*  76 sticky call bar + rule   */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 160ms;  /* colour, hover   */
  --dur-2: 280ms;  /* reveals, lifts  */
  --dur-3: 600ms;  /* image zoom      */

  color-scheme: light;
}
/* 03 SURFACES: semantic colour roles flip on dark grounds ------------------ */
:root,
.on-light {
  --c-bg: var(--white);
  --c-text: var(--ink);
  --c-text-2: var(--ink-2);
  --c-text-3: var(--ink-3);
  --c-heading: var(--ink);
  --c-accent: var(--blue);          /* eyebrows, labels, small icons */
  --c-accent-deco: var(--blue);
  --c-rule: var(--rule);
  --c-link: var(--blue);
  --c-link-line: currentColor;
  --c-focus: var(--blue);
  --c-icon: var(--blue);
  --c-icon-accent: var(--blue);     /* icons are one colour; the sprite's .ac paths no longer differ */
}
.on-dark {
  --c-bg: var(--blue);
  --c-text: var(--on-blue);
  --c-text-2: var(--on-blue-2);
  --c-text-3: var(--on-blue-2);
  --c-heading: var(--on-blue);
  --c-accent: var(--on-blue-2);
  --c-accent-deco: var(--on-blue-2);
  --c-rule: var(--rule-blue);
  --c-link: var(--on-blue);
  --c-link-line: currentColor;
  --c-focus: var(--on-blue);
  --c-icon: var(--on-blue);
  --c-icon-accent: var(--on-blue);
  color: var(--c-text);
  color-scheme: dark;
}

/* 04 RESET + BASE --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  /* 16px up to 1600px wide, then fluid to 18px at 2240px+. Percent-based, so a reader's own
     default font size still scales everything. */
  font-size: clamp(100%, 0.6875rem + 0.3125vw, 112.5%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 6rem;
}
/* Below the nav breakpoint the call bar is fixed to the bottom: keep focused/anchored content clear of it */
@media (max-width: 1119.98px) { html { scroll-padding-block-end: calc(var(--callbar-h) + 1rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; }
}
body {
  min-block-size: 100vh;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, li, dd, dt, figcaption, h1, h2, h3, h4, summary, label { overflow-wrap: break-word; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
:where(a) { color: var(--c-link); }
:target { scroll-margin-block-start: 6rem; }
[hidden] { display: none !important; }
svg.i { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.i--fill { fill: currentColor; stroke: none; }
/* Icons: the sprite's accent paths read
   var(--icon-ac) through an inline style, because selectors cannot reach inside <use> shadow trees. */
svg.i { --icon-ac: var(--c-icon-accent); }

/* Focus: one visible ring everywhere; colour flips on dark surfaces */
:focus-visible {
  outline: 3px solid var(--c-focus, var(--blue));
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: var(--z-skip);
  padding: .75rem 1.25rem; background: var(--blue); color: var(--on-blue);
  font-weight: var(--w-bold); text-decoration: none; border-radius: var(--r-xs);
  transform: translateY(-200%);
}
.skip-link:focus-visible, .skip-link:focus { transform: none; outline-color: var(--ink); }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.visually-hidden.focusable:focus-visible { position: static !important; inline-size: auto; block-size: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }

/* 05 TYPOGRAPHY ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--c-heading); font-weight: var(--w-bold); line-height: 1.2; text-wrap: balance; }
h1, h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
h3, h4 { font-family: var(--font-sans); font-size: var(--step-1); letter-spacing: -.01em; }
.h1, .h2 { font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.h1 { font-size: var(--step-5); }
.h2 { font-size: var(--step-4); }
.h3 { font-weight: var(--w-bold); font-size: var(--step-3); line-height: 1.15; letter-spacing: var(--track-tight); }
.title { font-weight: var(--w-bold); font-size: var(--step-2); line-height: 1.2; letter-spacing: -.01em; }
/* No italic anywhere: emphasis inside a heading is plain text (v3) */
h1 em, h2 em, h3 em { font-style: normal; }
p { text-wrap-style: pretty; }
.lead { font-size: var(--step-lead); line-height: 1.5; color: var(--c-text-2); max-inline-size: 58ch; }
.meta { font-size: var(--step--1); color: var(--c-text-3); }
.caps {
  font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps);
  text-transform: uppercase; line-height: 1.3;
}
.num, .tel { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
strong, b { font-weight: var(--w-bold); }

/* 06 LAYOUT --------------------------------------------------------------- */
/* .wrap: max-width container. Bands (hero, banners, split, footer, paper-2 bands) stay full-bleed;
   only their content sits in the wrap. */
.wrap { inline-size: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--text { inline-size: min(100% - 2 * var(--gutter), var(--wrap-text)); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .66); }
.band { background: var(--ground-2); border-block: 1px solid var(--rule); }
.band + .band { border-block-start: 0; }
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-s)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-xs)); align-items: center; }
/* Intrinsic grid: as many columns as fit at --grid-min, never overflowing a narrow column */
.grid { display: grid; gap: var(--grid-gap, var(--space-l)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr)); }
/* Query containers. Components query the wrapper they sit in, so the same card works in a full-width
   band, a sidebar or a two-column split. */
.cq { container-type: inline-size; }

/* Core flow-layout margins (theme.json block gap) never apply inside the design components built from
   core blocks; each component sets its own spacing. Keep this before section 07 (components win later). */
:is(.service-cards, .service-card, .features, .feature, .steps, .step, .step__body, .notice, .answer, .answer__main,
  .banner, .banner__content, .banner__copy, .banner__actions, .cta-band, .cta-band__inner, .cta-band__copy,
  .cta-band__actions, .shelbys-faq, .wp-block-buttons) > * { margin-block-start: 0; }

/* 07 BUTTONS, LINKS, EYEBROWS, SECTION HEADS ------------------------------ */
.btn {
  /* Primary on white: the logo blue itself. Hover goes one step darker. */
  --btn-bg: var(--blue); --btn-fg: var(--on-blue); --btn-bd: var(--blue);
  --btn-bg-h: var(--blue-deep); --btn-fg-h: var(--on-blue); --btn-bd-h: var(--blue-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-block-size: 3.25rem;                  /* 52px */
  max-inline-size: 100%;
  padding: .5rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-xs);
  font: var(--w-bold) var(--step-btn)/1.2 var(--font-sans); letter-spacing: .005em;
  text-align: center; text-decoration: none; text-wrap: balance;   /* wraps rather than overflowing at 320px */
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
.btn:active { transform: translateY(1px); }
.btn .i { inline-size: 1.15em; block-size: 1.15em; }
/* Primary on blue grounds: white with blue text (the inverse of .btn), so the CTA is always the highest-contrast thing in its band */
.btn--cta { --btn-bg: var(--white); --btn-fg: var(--blue); --btn-bd: var(--white); --btn-bg-h: var(--blue-tint); --btn-fg-h: var(--blue); --btn-bd-h: var(--blue-tint); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-blue); --btn-bd: rgb(255 255 255 / .7); --btn-bg-h: rgb(255 255 255 / .1); --btn-fg-h: var(--on-blue); --btn-bd-h: var(--on-blue); }
.btn--ghost .i { color: var(--on-blue); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--blue); --btn-bd: var(--blue); --btn-bg-h: var(--blue); --btn-fg-h: var(--on-blue); --btn-bd-h: var(--blue); }
.btn--lg { min-block-size: 3.5rem; padding-inline: 1.75rem; }
.btn--sm { min-block-size: 2.75rem; padding-inline: 1.125rem; }
.btn--block { inline-size: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (max-width: 639.98px) { .btn--stack-sm { inline-size: 100%; }
}

/* Inline text links: blue, currentColor underline that thickens on hover */
.prose a, .link {
  color: var(--c-link); font-weight: var(--w-bold);
  text-decoration-line: underline; text-decoration-color: var(--c-link-line);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: text-decoration-color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease);
}
.prose a:hover, .link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* "Read the guide ->" style links: 44px tall target */
.more {
  display: inline-flex; align-items: center; gap: .5em; min-block-size: 2.75rem;
  color: var(--c-link); font-weight: var(--w-bold); font-size: var(--step--1);
  text-decoration: none;
}
.more span { text-wrap: balance; text-decoration: underline; text-decoration-color: var(--c-link-line); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.more .i { transition: transform var(--dur-1) var(--ease); color: var(--c-accent); }
.more:hover span { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.more:hover .i { transform: translateX(3px); }

/* Eyebrow: [Lot 01] -- [CAPS LABEL]. "Lot" numerals: homepage only, five sections. */
.eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .875rem;
  color: var(--c-accent); margin-block-end: clamp(.5rem, .35rem + .5vw, .875rem);
}
.eyebrow__lot {
  font: var(--w-bold) var(--step--1)/1.3 var(--font-sans); font-variant-numeric: tabular-nums;   /* "Lot 01": plain catalogue numbering */
  display: inline-flex; align-items: center; gap: .875rem; white-space: nowrap;
}
.eyebrow__lot::after { content: ""; inline-size: 1.5rem; block-size: 2px; background: currentColor; }
.eyebrow__label { font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.3; }
.eyebrow--rule::before { content: ""; inline-size: 1.5rem; block-size: 2px; background: currentColor; }

.section-head { max-inline-size: var(--wrap-narrow); margin-inline: auto; text-align: center; margin-block-end: var(--head-gap); }
.section-head .lead { margin-inline: auto; margin-block-start: clamp(.5rem, .3rem + .6vw, .875rem); }
/* Start-aligned head with an action (button or links) that wraps under the copy when space runs out */
.section-head--start {
  max-inline-size: none; text-align: start;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-s) var(--space-xl);
}
.section-head--start > :first-child { flex: 1 1 30rem; max-inline-size: 66rem; }
.section-head--start .lead { margin-inline: 0; max-inline-size: 68ch; }
.head-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.head-links li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; }
.head-links__note { color: var(--c-text-2); font-size: var(--step--1); }
/* --aside: a short lead sits beside the heading (bottom-aligned) and drops under it when space runs out */
.section-head--aside > :first-child { flex: 1 1 auto; }
.section-head--aside > .lead { flex: 1 1 22rem; max-inline-size: 36rem; }
/* --links: section links share the eyebrow row on wide screens, so the H2 gets the full measure */
.section-head--links { max-inline-size: none; text-align: start; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "links"; column-gap: var(--space-l); }
.section-head--links > div { display: contents; }
.section-head--links .eyebrow { grid-area: eyebrow; justify-self: start; }
.section-head--links h2 { grid-area: title; }
.section-head--links .head-links { grid-area: links; margin-block-start: .25rem; }
.section-head--links .lead { grid-area: lead; margin-inline: 0; margin-block-start: clamp(.375rem, .25rem + .4vw, .625rem); }
.section-head--links:has(.lead) { grid-template-areas: "eyebrow" "title" "lead" "links"; }
@media (min-width: 768px) {
  .section-head--links { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow links" "title title"; align-items: center; }
  .section-head--links:has(.lead) { grid-template-areas: "eyebrow links" "title title" "lead lead"; }
  .section-head--links .head-links { margin: 0; }
}
@media (max-width: 639.98px) { .section-head--start > .btn { inline-size: 100%; }
}

/* 08 HEADER, NAV, DRAWER -------------------------------------------------- */
.site-header {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: var(--z-header);
  color: var(--on-blue);
}
.site-header__inner { display: flex; align-items: flex-start; gap: var(--space-m); }

/* Hanging logo tab: flat white plate flush to the top edge (the logo is a white-ground raster). */
.logo-tab {
  position: relative; flex: none; display: block;
  inline-size: clamp(7.25rem, 5.5rem + 7vw, 8.25rem);   /* 116 at 320 -> 132 */
  margin-block: .5rem;
  padding: .875rem 1.0625rem;                            /* keeps the swoosh clear of the curve */
  background: var(--white);
  border-radius: 50%;                                    /* oval plate echoing the logo's own swoosh */
}
.logo-tab img { inline-size: 100%; block-size: auto; }
.logo-tab:focus-visible { outline-color: var(--on-blue); }

.site-header__rows { flex: 1; min-inline-size: 0; }
.utility, .masthead__nav, .masthead__cta { display: none; }

/* Mobile/tablet header actions */
.masthead { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-block-size: var(--header-h); }
.icon-btn, .menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 3rem; min-inline-size: 3rem; padding-inline: .875rem;
  border: 1px solid rgb(255 255 255 / .4); border-radius: var(--r-xs);
  color: var(--on-blue); text-decoration: none; font-weight: var(--w-bold); font-size: var(--step--1);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.icon-btn { padding: 0; border-color: rgb(255 255 255 / .7); color: var(--on-blue); }
.icon-btn:hover, .menu-btn:hover { background: rgb(255 255 255 / .08); border-color: var(--on-blue); }
.icon-btn .i { inline-size: 1.375rem; block-size: 1.375rem; }

/* --bp-nav (1120px): the desktop header. Measured: logo tab + five items + CTA need ~1060px of
   viewport; at 1024 the nav ran into the CTA and the utility row wrapped, so tablets in landscape
   keep the drawer. */
@media (min-width: 1120px) {
  .site-header__inner { gap: clamp(1.5rem, 2.5vw, 3rem); }
  .logo-tab { inline-size: 12rem; padding: 1rem 1.125rem 1.5rem; }     /* 192 */
  .utility {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); white-space: nowrap;
    min-block-size: 2.75rem; border-block-end: 1px solid var(--rule-blue);
    font-size: var(--step--2); color: var(--on-blue-2);
  }
  .utility__hours { display: none; align-items: center; gap: .5rem; }
  .utility__hours .i { color: var(--on-blue-2); }
  .utility__links { display: flex; align-items: center; gap: 0; margin-inline-start: auto; }
  .utility__links > li { display: flex; align-items: center; }
  .utility__links > li + li::before { content: ""; inline-size: 1px; block-size: 1rem; background: var(--rule-blue); margin-inline: clamp(.5rem, 1vw, .875rem); }
  .utility a, .utility button {
    display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.75rem;
    color: var(--on-blue-2); text-decoration: none; font-size: var(--step--2);
  }
  .utility a:hover, .utility button:hover { color: var(--on-blue); }
  .utility .tel-link { color: var(--on-blue); font-weight: var(--w-bold); font-size: var(--step--1); }
  .utility .tel-link__label { color: var(--on-blue-2); font-weight: var(--w-regular); font-size: var(--step--2); }
  .utility .i { color: var(--on-blue-2); inline-size: 1.05rem; block-size: 1.05rem; }
  .masthead { justify-content: space-between; min-block-size: 5rem; gap: var(--space-m); }
  .masthead__nav { display: block; min-inline-size: 0; }
  .masthead__cta { display: inline-flex; flex: none; white-space: nowrap; }
  .masthead .icon-btn, .masthead .menu-btn { display: none; }
}
@media (min-width: 1280px) { .utility__hours { display: inline-flex; }
}

/* Main nav (desktop): sentence case, white underline for hover/current */
.nav__list { display: flex; align-items: center; gap: clamp(.25rem, 1.1vw, 1.5rem); list-style: none; padding: 0; white-space: nowrap; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-block-size: 3rem; padding-inline: .375rem;
  color: var(--on-blue); text-decoration: none; font-size: var(--step-btn); font-weight: var(--w-regular);
}
.nav__link::after {
  content: ""; position: absolute; inset-inline: .375rem; inset-block-end: .55rem; block-size: 2px;
  background: var(--on-blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__toggle {
  display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 2.75rem;
  color: var(--on-blue); border-radius: var(--r-xs);
}
@media (pointer: coarse) { .nav__toggle { inline-size: 2.75rem; }
}   /* touch laptops / iPad Pro landscape */
.nav__toggle .i { inline-size: 1rem; block-size: 1rem; transition: transform var(--dur-2) var(--ease); }
.nav__toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav__panel {
  position: absolute; inset-block-start: calc(100% + .25rem); inset-inline-start: -1rem; z-index: var(--z-dropdown);
  min-inline-size: 17rem; padding: .75rem; white-space: normal;
  background: var(--white); color: var(--ink); border-radius: var(--r-s);
  border: 1px solid var(--rule); border-block-start: 3px solid var(--blue); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s linear var(--dur-1);
  --c-focus: var(--blue);
}
.nav__panel--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; min-inline-size: 34rem; }
.nav__item.is-open > .nav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover > .nav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.nav__panel-title { padding: .5rem .75rem .25rem; color: var(--blue); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.nav__panel ul { list-style: none; padding: 0; }
.nav__panel a {
  display: flex; align-items: center; min-block-size: 2.75rem; padding: .5rem .75rem;
  color: var(--ink); text-decoration: none; font-size: var(--step--1); border-radius: var(--r-xs);
}
.nav__panel a:hover { background: var(--blue-tint); color: var(--blue); }
.nav__panel a[aria-current="page"] { font-weight: var(--w-bold); box-shadow: inset 2px 0 0 var(--blue); }

/* Sticky state (desktop only): solid bar after the hero. On small screens the header scrolls
   away and the call bar takes over, so two fixed bars never eat the viewport. */
@media (min-width: 1120px) {
  .site-header.is-stuck {
    position: fixed; background: var(--blue); border-block-end: 1px solid var(--rule-blue);
    animation: header-in var(--dur-2) var(--ease);
  }
  .site-header.is-stuck .utility { display: none; }
  .site-header.is-stuck .logo-tab { inline-size: 8.5rem; padding: .375rem .625rem .5rem; margin-block-end: -.5rem; }
  .site-header.is-stuck .masthead { min-block-size: 4.5rem; }
}
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* Drawer (mobile + tablet nav): full-height blue sheet from the right, focus-trapped */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: grid; justify-items: end;
  background: rgb(0 0 90 / .6);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.drawer.is-open { opacity: 1; }
.drawer__panel {
  inline-size: min(100%, 26rem); block-size: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--blue); padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-m);
  transform: translateX(100%); transition: transform var(--dur-2) var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-block-size: 3.5rem; }
.drawer__title { font: var(--w-bold) var(--step--1)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--on-blue-2); }
.drawer__nav ul { list-style: none; padding: 0; }
.drawer__nav > ul > li { border-block-end: 1px solid var(--rule-blue); }
.drawer__row { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav a, .drawer__sub-toggle { color: var(--on-blue); text-decoration: none; }
.drawer__nav > ul > li > .drawer__row > a, .drawer__nav > ul > li > a {
  display: flex; align-items: center; flex: 1; min-block-size: 3.5rem;
  font: var(--w-bold) 1.375rem/1.2 var(--font-sans);
}
.drawer__sub-toggle { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; color: var(--on-blue); border: 1px solid var(--rule-blue); border-radius: var(--r-xs); }
.drawer__sub-toggle .i { transition: transform var(--dur-2) var(--ease); }
.drawer__sub-toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
.drawer__sub { padding-block-end: .75rem; }
.drawer__sub a { display: flex; align-items: center; min-block-size: 2.75rem; padding-inline-start: .75rem; color: var(--on-blue-2); font-size: var(--step-0); border-inline-start: 1px solid var(--rule-blue); }
.drawer__sub a:hover { color: var(--on-blue); border-color: var(--on-blue); }
.drawer__contact { display: grid; gap: .75rem; }
.drawer__tel { display: grid; gap: .125rem; padding: .875rem 1rem; border: 1px solid var(--rule-blue); border-radius: var(--r-xs); color: var(--on-blue); text-decoration: none; }
.drawer__tel span { color: var(--on-blue-2); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.drawer__tel strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.drawer__meta { color: var(--on-blue-2); font-size: var(--step--1); display: grid; gap: .5rem; }
.drawer__meta a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--on-blue); }
html.has-drawer { overflow: hidden; }
@media (min-width: 1120px) { .drawer { display: none !important; }
}

/* AuctionForge login state (body.bp-login is set by AF's app.js) */
body.bp-login .hdr-guest, .bp-login-early .hdr-guest { display: none !important; }
body:not(.bp-login) .hdr-bidder { display: none !important; }
.bp-login-early body .hdr-bidder { display: flex !important; }

/* 09 HERO + NEXT-SALE BAR ------------------------------------------------- */

@media (min-width: 1280px) { .banner.banner--slim.banner--end { --banner-split: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 57rem); }
}

   

/* 10 FACTS + "AS SEEN ON" (one band) -------------------------------------- */

/* 11 ABOUT + FEATURES ----------------------------------------------------- */

.fig-caption { display: flex; gap: .75rem; margin-block-start: .75rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; }
.fig-caption__no { flex: none; font: var(--w-bold) var(--step--1)/1.45 var(--font-sans); color: var(--blue); }
.features { list-style: none; padding: 0; display: grid; gap: var(--flow) var(--space-l); }
/* Narrow: icon beside the title, text full width under both. Wide: icon column, title + text beside it. */
.feature { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .25rem .875rem; align-items: center; align-content: start; }
.feature > .i { inline-size: 2rem; block-size: 2rem; color: var(--c-icon); stroke-width: 1.4; }
.feature > p { grid-column: 1 / -1; }
.feature h3 { font-size: var(--step-1); line-height: 1.3; }
.feature h3 a { color: var(--ink); text-decoration: none; }
.feature h3 a::after { content: ""; position: absolute; inset: -.5rem; border-radius: var(--r-s); }   /* the whole feature is the target */
.feature h3 .i { display: inline-block; vertical-align: -.2em; margin-inline-start: .35em; inline-size: 1em; block-size: 1em; color: var(--blue); transition: transform var(--dur-1) var(--ease); }
.feature p { color: var(--ink-2); }
.feature:hover h3 a { color: var(--blue); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .2em; }
.feature:hover h3 .i { transform: translateX(3px); }
.feature:focus-within { outline: 3px solid var(--c-focus); outline-offset: .5rem; border-radius: var(--r-s); }
.feature h3 a:focus-visible { outline: none; }
@container about (min-width: 40rem) {
  
  
  .feature { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .feature > .i { inline-size: 2.5rem; block-size: 2.5rem; grid-row: span 2; }
  .feature > p { grid-column: 2; }
}
@container about (min-width: 56rem) {
  
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
}

/* 12 RAILS: one row that swipes on small screens, a grid when there is room -------------------
   .rail (query container) > .rail__scroller (scrolls; main.js adds role=region, an aria-label and
   tabindex=0 only while it actually overflows, so keyboard users can arrow-scroll it) > ul.rail__list.
   On narrow containers the scroller bleeds to the screen edges and the next card peeks in; a thin
   visible scrollbar and the "Swipe for more" hint are the affordances. Card links stay in the tab
   order, and focusing one scrolls it into view. */
.rail { container: rail / inline-size; position: relative; }
.rail__scroller {
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  padding-block: var(--rail-pad-top, .375rem) 1rem;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.rail__scroller:focus-visible { outline-offset: -3px; }
.rail__list {
  list-style: none; padding: 0; display: grid; grid-auto-flow: column;
  grid-auto-columns: var(--rail-col, clamp(13rem, 66cqi, 17rem)); gap: var(--rail-gap);
}
.rail__list > * { scroll-snap-align: start; }
.rail__hint { display: flex; align-items: center; gap: .4rem; margin-block-start: .25rem; color: var(--ink-3); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: .06em; text-transform: uppercase; }
.rail__hint .i { color: var(--blue); }

@container rail (min-width: 40rem) {
  .rail--lots .rail__scroller { overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
  .rail--lots .rail__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail--lots .rail__hint { display: none; }
}

/* 13 HOW IT WORKS: steps, with the key benefits folded into the copy -------------------------- */

.steps { list-style: none; padding: 0; display: grid; gap: var(--flow); }
/* Narrow: the step is one compact grid (ring | tag over title, then text full width); .step__body
   dissolves with display: contents. Wide (>= 56rem): pill tag row, hairline, ring column. */
.step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .875rem; row-gap: .125rem; align-items: center; padding-block-start: .875rem; border-block-start: 1px solid var(--rule); }
.step__body { display: contents; }
.step__body > .ring { grid-column: 1; grid-row: 1 / span 2; }
.step__body > h3 { grid-column: 2; }
.step__body > p { grid-column: 1 / -1; margin-block-start: .375rem; }
.step__tag {
  grid-column: 2; grid-row: 1; justify-self: start; align-self: end;
  display: inline-flex; align-items: center; color: var(--blue); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.2;
}
.ring { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1.5px solid var(--blue); border-radius: var(--r-pill); color: var(--blue); }
.ring .i { inline-size: 1.25rem; block-size: 1.25rem; stroke-width: 1.4; }
.step h3 { font-size: var(--step-1); line-height: 1.3; }
.step p { color: var(--ink-2); }
.step p a { color: var(--blue); font-weight: var(--w-bold); text-decoration-color: currentColor; text-underline-offset: .2em; white-space: nowrap; }
@container how (min-width: 62rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3.5cqi, 3rem); }
  .step { display: block; padding: 0; border: 0; }
  .step__tag { min-block-size: 1.75rem; padding: .125rem .625rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-xs); }
  .step__body { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: .25rem 1.25rem; margin-block-start: .875rem; padding-block-start: 1.125rem; border-block-start: 1px solid var(--rule); }
  .step__body > .ring { grid-row: span 2; }
  .step__body > h3 { align-self: end; }
  .step__body > p { grid-column: 2; margin: 0; }
  .ring { inline-size: 4.5rem; block-size: 4.5rem; }
  .ring .i { inline-size: 2rem; block-size: 2rem; }
}

/* Compact variant for prose columns on inner pages */
.steps--compact { gap: var(--space-m); margin-block-start: 1.5rem; }

/* 14 CATEGORY CARDS (inside .rail--cards) ---------------------------------- */
          
   

   

/* 15 SALE CALENDAR: next-sale card, sale-week strip, recently sold ------------------------------
   Narrow: card, week rows, lots (swipe rail). 40-70rem: the card turns landscape (date | title +
   facts | buttons), the week becomes a four-cell strip, lots a row of four. >= 70rem: card on the
   left spanning, lots top right, week strip under them. */

.sale-card {
  display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.25rem, 1rem + .8vw, 1.5rem);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m);
}
.sale-card--next { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.sale-card__date { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-block-end: .75rem; border-block-end: 1px solid var(--c-rule); }
.sale-card__day { font: var(--w-bold) clamp(3.25rem, 2.75rem + 1.5vw, 4rem)/.82 var(--font-sans); letter-spacing: var(--track-tight); font-variant-numeric: lining-nums; color: var(--c-heading); }
.sale-card__when { text-align: end; font-size: var(--step--1); line-height: 1.45; color: var(--c-text-2); }
.sale-card__when strong { display: block; color: var(--c-heading); letter-spacing: .06em; text-transform: uppercase; }
.tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; min-block-size: 1.875rem; padding: .25rem .625rem;
  font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-xs);
  background: var(--ground-3); color: var(--ink);
}
.tag--light { background: var(--white); color: var(--blue); }
.sale-card__title { font: var(--w-bold) 1.375rem/1.2 var(--font-sans); color: var(--c-heading); }
.sale-card__facts { display: grid; gap: 0; font-size: var(--step--1); }
.sale-card__facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; padding-block: .375rem; border-block-start: 1px dashed var(--c-rule); }
.sale-card__facts dt { color: var(--c-heading); font-weight: var(--w-bold); }
.sale-card__facts dd { color: var(--c-text-2); }
/* The two card buttons pair up whenever the card has ~282px inside, and stack below that */
.sale-card__links { margin-block-start: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .625rem; padding-block-start: .25rem; }
.sale-card__links .btn { padding-inline: .5rem; font-size: 1rem; }
.sale-card--empty .sale-card__day { font-size: var(--step-3); }
/* Landscape card between 40 and 70rem (tablets, small laptops) */
@container sales (min-width: 40rem) and (max-width: 69.99rem) {
  .sale-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(10.5rem, auto); grid-template-areas: "date tag links" "date title links" "date facts links"; gap: .5rem clamp(1rem, 3cqi, 2rem); align-items: start; }
  .sale-card__date { grid-area: date; flex-direction: column; gap: .5rem; padding: 0 clamp(1rem, 3cqi, 2rem) 0 0; border-block-end: 0; border-inline-end: 1px solid var(--c-rule); align-self: stretch; }
  .sale-card__when { text-align: start; }
  .sale-card .tag { grid-area: tag; justify-self: start; }
  .sale-card__title { grid-area: title; }
  .sale-card__facts { grid-area: facts; }
  .sale-card__links { grid-area: links; grid-template-columns: minmax(0, 1fr); align-self: center; margin: 0; padding: 0; }
}
/* Sale-week strip: Wed&Thu / Fri / Sat / Mon-Wed. Ledger rows, four columns when wide. */
.week { list-style: none; padding: 0; display: grid; align-self: start; background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--r-m); }
.week li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: baseline; gap: .25rem .75rem; padding: .625rem 1rem; }
.week li + li { border-block-start: 1px solid var(--rule); }
.week__when { font: var(--w-bold) 1.1875rem/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; font-variant-numeric: lining-nums; }
.week__what { color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; }
.week .is-sale .week__when { color: var(--blue); }
@container sales (min-width: 40rem) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week li { grid-template-columns: none; align-content: start; padding: .75rem 1.125rem .875rem; }
  .week li + li { border-block-start: 0; border-inline-start: 1px solid var(--rule); }
}

.sold { display: grid; gap: .75rem; align-content: start; min-inline-size: 0; }
.sold-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-block-end: .625rem; border-block-end: 1px solid var(--rule); }
.sold-head h3 { font-size: var(--step-1); }
.sold-head p { color: var(--ink-3); font-size: var(--step--1); }
.rail--lots { --rail-col: clamp(10.5rem, 46cqi, 14rem); --rail-pad-top: .5rem; }
.lots { list-style: none; padding: 0; }
.lot-card { position: relative; display: grid; gap: .625rem; align-content: start; }
.lot-card__img { position: relative; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ground-3); }
.lot-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.lot-card__no { font: var(--w-bold) var(--step--2)/1.2 var(--font-sans); color: var(--blue); letter-spacing: var(--track-caps); text-transform: uppercase; }
.lot-card h4 {
  margin-block-start: .25rem; font-size: var(--step--1); font-weight: var(--w-bold); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;   /* catalogue titles run long */
}
.lot-card h4 a { color: var(--ink); text-decoration: none; }
.lot-card h4 a::after { content: ""; position: absolute; inset: 0; }
.lot-card__meta { margin-block-start: .125rem; color: var(--ink-3); font-size: var(--step--2); }
.lot-card__price { margin-block-start: .25rem; display: flex; align-items: baseline; gap: .5rem; color: var(--ink-2); font-size: var(--step--1); }
.lot-card__price strong { font: var(--w-bold) 1.375rem/1 var(--font-sans); color: var(--ink); font-variant-numeric: lining-nums; }
.lot-card:hover .lot-card__img img { transform: scale(1.035); }
.lot-card:hover h4 a { color: var(--blue); text-decoration: underline; }
.lot-card:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: var(--r-s); }
.lot-card h4 a:focus-visible { outline: none; }

/* 16 PHOTO BANNERS ------------------------------------------------------------------------------
   Phones: photo on top, hard edge, copy on solid blue below; text never sits on a photo.
   >= 768px: the photo goes full-bleed behind the copy with a wash only on the copy side.
   The homepage uses .banner--slim (content-height, ~460px at 1440); inner pages close with
   .banner--compact. */
.banner { position: relative; isolation: isolate; background: var(--blue); color: var(--on-blue); }
.banner__media { position: relative; aspect-ratio: 3 / 1; overflow: hidden; }
@media (min-width: 480px) { .banner__media { aspect-ratio: 5 / 2; }
}
.banner__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--banner-pos, 60% 50%); }
/* v3: no fades. Phones: photo, then a hard edge into solid blue. From 768px the copy sits on a solid blue
   panel with a hard vertical edge; the rest of the photo is shown untinted. (Hard colour stops, not a gradient.) */
.banner__media::after { content: none; }
.banner__content { position: relative; padding-block: var(--space-s) var(--section); }
.banner__copy > * { max-inline-size: 40rem; }
.banner__title { font-size: var(--step-4); max-inline-size: 18ch; }
.banner__text { margin-block-start: clamp(.625rem, .4rem + .8vw, 1rem); color: var(--on-blue-2); max-inline-size: 48ch; }
.banner__text strong { color: var(--on-blue); font-weight: var(--w-regular); }
.banner__actions { margin-block-start: var(--flow); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.banner__small { margin-block-start: var(--space-s); color: var(--on-blue-2); font-size: var(--step--1); }
.call-line { display: grid; gap: .125rem; min-block-size: 2.75rem; color: var(--on-blue); text-decoration: none; }
.call-line span { color: var(--on-blue-2); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.call-line strong { font: var(--w-bold) 1.75rem/1.1 var(--font-sans); font-variant-numeric: lining-nums; white-space: nowrap; }
.call-line:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
@media (max-width: 639.98px) { .banner__actions .btn { inline-size: 100%; }
}
/* Two short buttons share a row on phones when they fit, rather than stacking */
@media (max-width: 639.98px) { .banner__actions--pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; } .banner__actions--pair .btn { padding-inline: .75rem; }
}
@media (min-width: 768px) {
  .banner { display: grid; align-items: center; }
  .banner__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  /* Tablet: copy column is ~65% wide, so the wash runs further across */
  .banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--banner-dir, 90deg), var(--blue) 0 var(--banner-split, 76%), transparent var(--banner-split, 76%)); }
  .banner--end { --banner-dir: 270deg; }
  .banner__content { padding-block: var(--section); }
  .banner__copy { max-inline-size: min(40rem, 68%); }
  .banner--end .banner__copy { margin-inline-start: auto; }
}
@media (min-width: 1024px) {
  /* panel edge = side margin + copy column (38rem) + 4rem breathing room */
  .banner { --banner-split: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 42rem); }
  .banner__copy { max-inline-size: 38rem; }
  .banner { min-block-size: clamp(28rem, 22rem + 10vw, 36rem); }
  .banner--slim { min-block-size: 0; }
  .banner--slim .banner__content { padding-block: clamp(2rem, 1rem + 2vw, 3rem); }
  /* Banner 2 is short and wide: the copy column widens so the heading sits on one line, and the
     blue panel runs further across (from 1280px; solid below). */
  .banner--slim.banner--end { --banner-split: 100%; }   /* the 54rem copy leaves only a sliver of photo below 1280px: solid panel */
  .banner--slim.banner--end .banner__copy { max-inline-size: 54rem; }
  .banner--slim.banner--end .banner__copy > * { max-inline-size: none; }
  .banner--slim.banner--end .banner__text { max-inline-size: 60ch; }
  .banner--compact { min-block-size: clamp(26rem, 20rem + 10vw, 32rem); }
  .banner--compact .banner__content { padding-block: var(--section); }
}

/* Area chips (internal links at the moment of intent). In banner 1 they run as a full-bleed blue-deep
   strip along the foot of the banner, echoing the hero's next-sale bar. */
.banner__strip { position: relative; background: var(--blue-deep); border-block-start: 1px solid var(--rule-blue); }
.banner__strip .chips-block { padding-block: .875rem 1rem; }
.banner--slim:has(.banner__strip) { grid-template-rows: 1fr auto; }
.chips-block { padding-block-start: var(--space-s); }
.chips-label { color: var(--c-text-2); font-size: var(--step--1); margin-block-end: .5rem; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: .375rem .875rem;
  border: 1px solid var(--c-rule); border-radius: var(--r-xs); color: var(--c-link); text-decoration: none; font-size: var(--step--1); font-weight: var(--w-regular);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.on-dark .chip { border-color: rgb(255 255 255 / .45); background: rgb(0 0 90 / .35); }
.chip:hover { border-color: currentColor; background: rgb(0 0 126 / .06); }
.on-dark .chip:hover { background: rgb(255 255 255 / .1); }
.on-light .chip, .chip--light { border-color: var(--rule-strong); }
.on-dark .banner__strip .chip { background: transparent; }
@media (min-width: 768px) {
  .banner__strip { z-index: 1; }
  .banner__strip .chips-block { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-block: .625rem; }
  .banner__strip .chips-label { margin: 0; }
}

/* 17 FAQ TEASER + ACCORDION --------------------------------------------------------------------
   .faq-list (homepage teaser) and .shelbys-faq (FAQ owner pages) share the accordion look. Only
   .shelbys-faq is read by the mu-plugin for FAQPage schema, so the homepage carries none. */

:is(.shelbys-faq, .faq-list) { border-block-start: 1px solid var(--rule); }
.shelbys-faq { margin-block-start: 1.25rem; }
.shelbys-faq > * + * { margin-block-start: 0; }
:is(.shelbys-faq, .faq-list) details { border-block-end: 1px solid var(--rule); }
:is(.shelbys-faq, .faq-list) summary {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 1rem; align-items: center;
  min-block-size: 3.5rem; padding-block: 1rem; cursor: pointer;
  font: var(--w-bold) var(--step-1)/1.35 var(--font-sans); color: var(--ink);
}
:is(.shelbys-faq, .faq-list) summary::-webkit-details-marker { display: none; }
:is(.shelbys-faq, .faq-list) summary::after {
  content: ""; inline-size: 2rem; block-size: 2rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background:
    linear-gradient(var(--blue), var(--blue)) center / .75rem 1.5px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 1.5px .75rem no-repeat;
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease);
}
:is(.shelbys-faq, .faq-list) details[open] > summary::after { background: linear-gradient(var(--blue), var(--blue)) center / .75rem 1.5px no-repeat; transform: rotate(180deg); border-color: var(--blue); }
:is(.shelbys-faq, .faq-list) summary:hover { color: var(--blue); }
:is(.shelbys-faq, .faq-list) summary:hover::after { background-color: var(--ground-2); }
:is(.shelbys-faq, .faq-list) details > :not(summary) { max-inline-size: 62ch; color: var(--ink-2); padding-inline-end: 3rem; }
:is(.shelbys-faq, .faq-list) details > :not(summary) + * { margin-block-start: .75em; }
:is(.shelbys-faq, .faq-list) details > :last-child { padding-block-end: 1.25rem; }

@media (max-width: 479.98px) { :is(.shelbys-faq, .faq-list) details > :not(summary) { padding-inline-end: 0; }
}

/* 18 SPLIT (CALL-BACK) + FORMS (.sf-* hooks from FORMS-MAIL.md) ---------------------------------- */
.split { display: grid; background: var(--ground-2); border-block: 1px solid var(--rule); }
/* Phones: the figure is a compact blue card, photo thumbnail beside the caption. 640-1023: a photo
   strip with the caption card hanging off it. >= 1024: full-height photo half with the card over it. */
.split__media { position: relative; margin: 0; display: grid; grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr); background: var(--blue); }
.split__media img { inline-size: 100%; block-size: 100%; min-block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.split__body { padding: var(--section) var(--gutter); }
.split__body-inner { max-inline-size: 44rem; }
.split__lead { margin-block-start: clamp(.5rem, .3rem + .6vw, .875rem); color: var(--ink-2); max-inline-size: 64ch; }
.caption-card {
  position: relative; padding: 1rem var(--gutter) 1rem 1rem; background: var(--blue); color: var(--on-blue);
}
.caption-card h3 { font: var(--w-bold) 1.25rem/1.2 var(--font-sans); color: var(--on-blue); }
.caption-card p { margin-block-start: .375rem; color: var(--on-blue-2); font-size: var(--step--1); line-height: 1.45; }
.caption-card .more { --c-link: var(--on-blue); --c-link-line: currentColor; --c-accent: var(--on-blue); }
@media (min-width: 640px) {
  .split__media { display: block; aspect-ratio: 3 / 1; }
  .split__media img { position: absolute; inset: 0; }
  .caption-card { position: absolute; inset-inline-start: var(--gutter); inset-block-end: 0; translate: 0 50%; max-inline-size: 28rem; padding: 1rem 1.25rem; border-radius: var(--r-s); box-shadow: var(--shadow-pop); }
  .split__media + .split__body { padding-block-start: calc(var(--section) + 5.5rem); }
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split__media { order: 2; aspect-ratio: auto; min-block-size: 100%; }
  .split__media + .split__body { padding-block-start: var(--section); }
  .split__body { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)) clamp(2rem, 4vw, 4rem); }
  .caption-card { inset-inline-start: clamp(1.25rem, 2vw, 2rem); inset-block-end: clamp(1.25rem, 2vw, 2rem); translate: none; padding: 1.25rem 1.5rem; }
  .caption-card h3 { font-size: 1.375rem; }
}

/* Form system. Class names match the markup skeleton in FORMS-MAIL.md §15.1. */
.sf { container: form / inline-size; }
.sf-form { display: grid; gap: 1rem; margin-block-start: var(--flow); }
.sf-row { display: grid; gap: 1rem; }
@container form (min-width: 30rem) { .sf-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* .sf-form--grid: one form, three densities. < 20rem one column; >= 20rem name|phone, topic,
   when|postcode; >= 34rem name|phone, topic|when, postcode|submit. DOM order = reading order. */
@container form (min-width: 20rem) {
  .sf-form--grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; column-gap: .875rem; }
  .sf-form--grid > * { grid-column: span 6; }
  .sf-form--grid > .sf-col-half { grid-column: span 3; }
}
@container form (min-width: 34rem) {
  .sf-form--grid > .sf-col-wide { grid-column: span 4; }
  .sf-form--grid > .sf-col-narrow { grid-column: span 2; }
  .sf-form--grid > .sf-actions--inline { grid-column: span 4; }
}
.sf-field { display: grid; gap: .375rem; border: 0; padding: 0; min-inline-size: 0; }
.sf-field > label, .sf-field > legend { font-size: var(--step--1); font-weight: var(--w-bold); color: var(--ink); padding: 0; line-height: 1.35; }
.sf-opt { font-weight: var(--w-regular); color: var(--ink-2); }
.sf-hint { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.sf-input,
.sf-select,
.sf-textarea,
.sf-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.sf-field select,
.sf-field textarea {
  inline-size: 100%; min-block-size: 3.375rem; padding: .75rem 1rem;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--r-xs);
  font-size: max(1.0625rem, 16px); line-height: 1.4;   /* >= 16px stops iOS zoom */
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.sf-field textarea { min-block-size: 8rem; resize: vertical; }
.sf-field select {
  appearance: none; padding-inline-end: 2.75rem; text-overflow: ellipsis;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .875rem center / 1.125rem no-repeat;
}
.sf-field input:hover, .sf-field select:hover, .sf-field textarea:hover { border-color: var(--blue); }
.sf-field input:focus-visible, .sf-field select:focus-visible, .sf-field textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgb(0 0 126 / .18);
}
.sf-field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.sf-error { display: flex; gap: .5rem; align-items: flex-start; color: var(--error); font-size: var(--step--1); font-weight: var(--w-bold); line-height: 1.4; }
.sf-error .i { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .1rem; }
.sf-choice { display: flex; align-items: center; gap: .75rem; min-block-size: 2.75rem; }
.sf-choice input { inline-size: 1.375rem; block-size: 1.375rem; accent-color: var(--blue); flex: none; }
.sf-summary { padding: 1.25rem 1.5rem; border: 2px solid var(--error); border-inline-start-width: 6px; background: var(--error-bg); border-radius: var(--r-s); }
.sf-summary__title { font-size: var(--step-1); color: var(--error); }
.sf-summary__list { margin-block-start: .5rem; padding-inline-start: 1.25rem; }
.sf-summary__list a { color: var(--error); font-weight: var(--w-bold); }
.sf-turnstile { min-block-size: 0; }                     /* interaction-only: 0 height until needed (max 65px) */
.sf-turnstile:empty { display: none; }

.sf-actions { display: grid; gap: 1rem; }
.sf-actions .btn { inline-size: 100%; }
@container form (min-width: 30rem) {
  .sf-actions { grid-template-columns: auto 1fr; align-items: center; }
  .sf-actions .btn { inline-size: auto; }
  .sf-actions > .sf-turnstile { grid-column: 1 / -1; }
}
.sf-form--grid .sf-actions { grid-template-columns: minmax(0, 1fr); }
.sf-form--grid .sf-actions .btn { inline-size: 100%; }
.sf-notice { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.sf-notice a { color: var(--blue); font-weight: var(--w-bold); }
.sf-notice a[href^="tel"] { white-space: nowrap; }
.sf-form--grid > .sf-notice { margin-block-start: -.25rem; }
.sf-alt { margin-block-start: var(--flow); padding-block-start: 1rem; border-block-start: 1px solid var(--rule); color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.sf-alt a { color: var(--blue); font-weight: var(--w-bold); }
.sf-alt a[href^="tel"] { white-space: nowrap; }
/* Honeypot: clipped in place (no off-screen box, so nothing can cause sideways scroll) */
.sf-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-done { padding: 1.75rem; border: 1px solid var(--rule); border-inline-start: 6px solid var(--success); background: var(--success-bg); border-radius: var(--r-s); }
.sf-done h3 { color: var(--success); font-size: var(--step-1); }
.sf-done:focus { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Inline single-field form (sale alerts) */
.sf-inline { display: grid; gap: .75rem; }
@container form (min-width: 30rem) { .sf-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* 19 GUIDES / ARTICLE CARDS ---------------------------------------------------------------------
   < 34rem: thumbnail rows (title only). 34-56rem: rows with the excerpt. >= 56rem: three cards. */
.guides-wrap { container: guides / inline-size; }
.guides { list-style: none; padding: 0; display: grid; gap: var(--flow); }
.guide { position: relative; display: grid; grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr); gap: 1rem; align-items: center; }
.guide__img { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 1; background: var(--ground-3); }
.guide__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.guide__cat { margin-block-end: .25rem; }
.guide h3 { font: var(--w-bold) clamp(1.1875rem, 1.1rem + .5cqi, 1.4375rem)/1.25 var(--font-sans); letter-spacing: -.01em; }
.guide h3 a { color: var(--ink); text-decoration: none; }
.guide h3 a::after { content: ""; position: absolute; inset: 0; }
.guide__excerpt { display: none; margin-block-start: .5rem; color: var(--ink-2); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.guide:hover .guide__img img { transform: scale(1.035); }
.guide:hover h3 a { color: var(--blue); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.guide:focus-within { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: var(--r-m); }
.guide h3 a:focus-visible { outline: none; }
.guide__date { color: var(--ink-3); font-size: var(--step--1); margin-block-start: .5rem; }
@container guides (min-width: 34rem) {
  .guide { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; }
  .guide__img { aspect-ratio: 4 / 3; }
  .guide__excerpt { display: -webkit-box; }
}
@container guides (min-width: 56rem) {
  .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3cqi, 2.5rem); }
  .guide { grid-template-columns: none; gap: 0; align-items: start; align-content: start; }
  .guide__img { aspect-ratio: 9 / 4; border-radius: var(--r-m); }
  .guide__body { margin-block-start: 1rem; }
}

/* 20 FOOTER, CALL BAR, BACK TO TOP ---------------------------------------- */
.site-footer { background: var(--blue-deep); color: var(--on-blue-2); font-size: var(--step--1); padding-block-end: calc(var(--callbar-h) + .5rem + env(safe-area-inset-bottom)); }
@media (min-width: 1120px) { .site-footer { padding-block-end: 0; }
}
.footer-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-xl);
  padding-block: clamp(1.25rem, .9rem + 1.2vw, 2rem); border-block-end: 1px solid var(--rule-blue);
}
.footer-cta__copy { flex: 1 1 14rem; }
.footer-cta__copy .eyebrow { margin-block-end: .25rem; }
.footer-cta__title { font: var(--w-bold) var(--step-3)/1.1 var(--font-sans); letter-spacing: var(--track-tight); color: var(--on-blue); }
.footer-cta__tel { display: inline-flex; align-items: center; min-block-size: 2.75rem; font: var(--w-bold) clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--font-sans); letter-spacing: var(--track-tight); color: var(--on-blue); text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; }
.footer-cta__tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Phones: the sticky call bar already carries the office number and Get a quote, and Mark's number is
   in Visit us just below, so the CTA row keeps only the heading and the big number. */
@media (max-width: 639.98px) { .footer-cta__actions, .footer-cta__copy .eyebrow { display: none; }
}

.footer-grid { display: grid; gap: var(--flow) var(--space-m); padding-block: clamp(1.25rem, .9rem + 1.2vw, 2rem) clamp(1rem, .75rem + .8vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand, .footer-visit { grid-column: 1 / -1; }
.footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; align-items: center; }
.footer-brand .logo-plate { display: inline-block; inline-size: clamp(6.5rem, 5rem + 5vw, 8.5rem); padding: .875rem 1.0625rem; background: var(--white); border-radius: 50%; position: relative; }
.footer-brand p { max-inline-size: 38ch; }
/* Phones: logo plate beside the two social links; the one-line blurb returns from 768px */
.footer-brand__blurb { display: none; }
@media (min-width: 768px) { .footer-brand__blurb { display: block; }
}
.footer-social { grid-column: 1 / -1; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer-social a { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; color: var(--on-blue); text-decoration: none; }
.footer-social a:hover { text-decoration: underline; }
.footer-social .i { color: var(--on-blue-2); }
@media (max-width: 767.98px) { .footer-social { grid-column: 2; flex-direction: column; }
}
.footer-col h2 { font: var(--w-bold) var(--step-0)/1.3 var(--font-sans); letter-spacing: 0; color: var(--on-blue); padding-block-end: .625rem; margin-block-end: .25rem; border-block-end: 1px solid var(--rule-blue); }
.footer-col ul { list-style: none; padding: 0; }
.footer-links a { display: flex; align-items: center; min-block-size: 2.75rem; padding-block: .25rem; line-height: 1.3; color: var(--on-blue-2); text-decoration: none; }
.footer-links a:hover { color: var(--on-blue); text-decoration: underline; text-decoration-color: var(--on-blue-2); text-underline-offset: .25em; }
.footer-contact { list-style: none; padding: 0; display: grid; gap: .5rem; margin-block-start: .5rem; }
.footer-contact li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; line-height: 1.5; }
.footer-contact .i { color: var(--on-blue-2); margin-block-start: .2rem; }
.footer-contact a { color: var(--on-blue); text-decoration: none; }
.footer-contact a:hover, .footer-contact .link { text-decoration: underline; text-decoration-color: var(--on-blue-2); text-underline-offset: .25em; }
.footer-contact .link { display: inline-flex; min-block-size: 2.75rem; align-items: center; font-weight: var(--w-regular); }
.footer-contact strong { color: var(--on-blue); font-weight: var(--w-bold); }
.footer-address { display: block; max-inline-size: 30ch; }
.footer-tels { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-tels a, .footer-mail { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 2.75rem; }
.footer-tels a span { color: var(--on-blue-2); font-weight: var(--w-regular); }
.footer-mail { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--space-l); }
  .footer-visit { grid-column: auto; }
}
@media (min-width: 1120px) {
  .footer-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); column-gap: clamp(2rem, 3vw, 3.5rem); }
  .footer-brand { grid-column: auto; display: block; }
  .footer-brand p { margin-block-start: 1rem; }
  .footer-social { margin-block-start: .5rem; }
}
/* Mouse users on desktop get denser link rows (36px, above WCAG 2.5.8's 24px); touch keeps 44px. */
@media (min-width: 1120px) and (pointer: fine) {
  .footer-links a, .footer-contact .link, .footer-tels a, .footer-mail, .footer-social a, .footer-areas a, .footer-legal-links a, .footer-legal-links button { min-block-size: 2.25rem; }
}
/* Base: area links, legal links, then the company line. From 1120px the company line and the legal
   links share the last row. */
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 2rem; border-block-start: 1px solid var(--rule-blue); }
.footer-areas { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; padding-block: .5rem; border-block-end: 1px solid var(--rule-blue); }
.footer-areas h2 { flex-basis: 100%; padding-block-start: .5rem; font: var(--w-bold) var(--step--1)/1.3 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--on-blue-2); }
.footer-areas ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-areas a { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; color: var(--on-blue); text-decoration: none; }
.footer-areas a:hover { text-decoration: underline; }
@media (min-width: 768px) { .footer-areas h2 { flex-basis: auto; padding: 0; margin-inline-end: .25rem; }
}
.footer-legal-links { list-style: none; padding: .25rem 0 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-size: var(--step--2); }
.footer-legal-links a, .footer-legal-links button { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--on-blue-2); text-decoration: underline; text-decoration-color: rgb(195 197 235 / .4); text-underline-offset: .25em; font-size: inherit; }
.footer-legal-links a:hover, .footer-legal-links button:hover { color: var(--on-blue); text-decoration-color: var(--on-blue-2); }
.footer-legal { flex: 1 1 100%; padding-block: .5rem 1.5rem; font-size: var(--step--2); line-height: 1.55; }
@media (min-width: 1120px) {
  .footer-legal { flex: 1 1 0; order: 2; padding-block: 1rem 1.25rem; }
  .footer-legal-links { order: 3; padding: 0; }
}

/* Sticky call bar (< 1120px): appears once the hero CTAs have scrolled away. The footer reserves
   --callbar-h at the bottom and html scroll-padding keeps focused fields clear of it. */
.callbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-callbar);
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem;
  padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));
  background: var(--blue-deep); border-block-start: 1px solid var(--rule-blue);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.callbar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.callbar .btn { min-block-size: 3.25rem; padding-inline: .5rem; font-size: 1rem; white-space: nowrap; }
@media (min-width: 1120px) { .callbar { display: none; }
}

.to-top {
  position: fixed; inset-inline-end: 1.5rem; inset-block-end: 1.5rem; z-index: var(--z-totop);
  display: none; place-items: center; inline-size: 3rem; block-size: 3rem;
  background: var(--blue); color: var(--on-blue); border-radius: var(--r-xs); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--blue-deep); }
@media (min-width: 1120px) { .to-top { display: grid; }
}
/* 21 INNER PAGES ---------------------------------------------------------- */
/* Page-title banner: catalogue title page, content bottom-left */
.page-banner {
  position: relative; isolation: isolate; overflow: hidden; background: var(--blue); color: var(--on-blue);
  display: grid; align-items: end; min-block-size: clamp(20rem, 14rem + 18vw, 31rem);
  padding-block: calc(var(--header-h) + var(--space-l)) var(--section-s);
}
.page-banner__media { position: absolute; inset: 0; z-index: -2; }
.page-banner__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* v3: one flat blue tint (86%), no fades. The photo reads as texture; white text keeps >= 11:1 even over a white photo area. */
  background: rgb(0 0 126 / .86);
}
.page-banner--plain::before { background: none; }
.page-banner__title { font-size: var(--step-5); max-inline-size: 18ch; margin-block-start: .75rem; }
.page-banner__stand { margin-block-start: var(--space-s); max-inline-size: 52ch; color: var(--on-blue-2); font-size: var(--step-1); line-height: 1.5; }
.page-banner__actions { margin-block-start: var(--space-l); display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 639.98px) { .page-banner__actions .btn { inline-size: 100%; }
}
@media (min-width: 1120px) { .page-banner { padding-block-start: calc(var(--header-h-lg) + var(--space-xl)); padding-block-end: var(--space-2xl); }
}

.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--step--1); color: var(--on-blue-2); }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-inline: .625rem; color: var(--on-blue-2); }
.breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; color: var(--on-blue-2); text-decoration: underline; text-decoration-color: rgb(195 197 235 / .45); text-underline-offset: .25em; }
.breadcrumb a:hover { color: var(--on-blue); text-decoration-color: var(--on-blue-2); }
.breadcrumb [aria-current="page"] { color: var(--on-blue); font-weight: var(--w-bold); }

/* "In short" answer panel: 40-60 word direct answer for AEO + contact facts */
.answer { display: grid; gap: var(--space-l); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--ground-2); border-inline-start: 3px solid var(--blue); border-radius: 0 var(--r-s) var(--r-s) 0; }
.answer__label { font-family: var(--font-sans); line-height: 1.3; color: var(--blue); font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.answer__text { margin-block-start: .5rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.answer__facts { display: grid; gap: .875rem; align-content: start; font-size: var(--step--1); }
.answer__facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; padding-block-end: .875rem; border-block-end: 1px solid var(--rule); }
.answer__facts div:last-child { border: 0; padding: 0; }
.answer__facts dt { color: var(--ink-2); }
.answer__facts dd { color: var(--ink); font-weight: var(--w-bold); }
@media (max-width: 1023.98px) { .answer__facts .is-tel { display: none; }
}   /* the contact strip carries the numbers on small screens */
/* tel links in the facts list: 44px hit area without changing the row rhythm */
.answer__facts a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; color: inherit; text-decoration-color: var(--blue); text-underline-offset: .2em; }
@media (min-width: 1024px) { .answer { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); } .answer__facts { padding-inline-start: clamp(1.5rem, 3vw, 3rem); border-inline-start: 1px solid var(--rule); }
}

/* Content + sidebar */
.with-aside { display: grid; gap: var(--section); }
.aside { display: grid; gap: var(--space-m); align-content: start; }
@media (min-width: 1024px) {
  .with-aside { grid-template-columns: minmax(0, 1fr) clamp(18.5rem, 12rem + 10vw, 21.5rem); gap: clamp(2.5rem, 6vw, 6rem); }
  .aside { position: sticky; inset-block-start: 6.5rem; align-self: start; }
}
.aside-card { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-m); background: var(--white); border: 1px solid var(--rule); }
.aside-card--dark { background: var(--blue); border-color: var(--blue); color: var(--on-blue-2); }
.aside-card h2 { font: var(--w-bold) 1.5rem/1.15 var(--font-sans); letter-spacing: -.01em; color: var(--c-heading); }
.aside-card__tel { display: grid; gap: .125rem; margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--c-rule); color: var(--on-blue); text-decoration: none; }
.aside-card__tel span { color: var(--on-blue-2); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.aside-card__tel strong { font: var(--w-bold) 1.75rem/1.1 var(--font-sans); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.aside-card__tel:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.aside-card .btn { margin-block-start: 1.25rem; }
.aside-card__hours { margin-block-start: 1.25rem; font-size: var(--step--1); line-height: 1.5; }
.aside-card__hours strong { color: var(--on-blue); }
.aside-links { list-style: none; padding: 0; margin-block-start: .75rem; }
.aside-links li + li { border-block-start: 1px solid var(--rule); }
.aside-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3rem; color: var(--blue); text-decoration: none; font-weight: var(--w-bold); }
.aside-links a .i { color: var(--blue); transition: transform var(--dur-1) var(--ease); }
.aside-links a:hover .i { transform: translateX(3px); }
.related-links { display: grid; column-gap: var(--space-l); border-block: 1px solid var(--rule); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.related-links li { border-block-end: 1px solid var(--rule); }
.related-links li + li { border-block-start: 0; }
.related-links { border-block-end: 0; }
.aside-label { color: var(--c-accent); font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }

/* Mobile compact contact strip (sidebar card's small-screen stand-in) */
.contact-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .625rem; }
.contact-strip a { display: grid; gap: .125rem; min-block-size: 2.75rem; padding: .75rem 1rem; border: 1px solid var(--rule-strong); border-radius: var(--r-xs); color: var(--ink); text-decoration: none; }
.contact-strip span { color: var(--blue); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; }
.contact-strip strong { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .contact-strip { display: none; }
}

/* Prose: block-editor content (core blocks) */
.prose { color: var(--ink); max-inline-size: 42rem; }
.prose > * + * { margin-block-start: 1.1em; }
.prose > h2 { margin-block-start: 2.2em; font-size: var(--step-3); line-height: 1.1; }
.prose > h3 { margin-block-start: 1.8em; font-size: var(--step-1); }
.prose > h2 + *, .prose > h3 + * { margin-block-start: .65em; }
.prose > :first-child { margin-block-start: 0; }
.prose ul:not([class]), .prose ol:not([class]) { padding-inline-start: 1.375rem; }
.prose ul:not([class]) li::marker { color: var(--blue); }
.prose ol:not([class]) li::marker { color: var(--blue); font-weight: var(--w-bold); }
.prose :is(ul, ol):not([class]) > li + li { margin-block-start: .4em; }
.prose blockquote, .prose .wp-block-quote { padding-inline-start: 1.5rem; border-inline-start: 3px solid var(--blue); font: 400 var(--step-1)/1.5 var(--font-sans); color: var(--ink); }
.prose blockquote cite { display: block; margin-block-start: .5rem; font: var(--w-bold) var(--step--1)/1.4 var(--font-sans); font-style: normal; color: var(--ink-2); }
.prose hr, .prose .wp-block-separator { border: 0; block-size: 1px; background: var(--rule); margin-block: 2.5em; }
.prose strong { color: var(--ink); }
.prose figure, .figure { margin-block: 2em; }
.prose figure img, .figure img { border-radius: var(--r-s); inline-size: 100%; }
.prose figcaption, .figure figcaption { display: flex; gap: .75rem; margin-block-start: .875rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Tick list (key facts / what's included) */
.checklist { list-style: none; padding: 1.5rem 1.75rem; background: var(--ground-2); border-radius: var(--r-s); display: grid; gap: .875rem; }
.checklist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .875rem; align-items: start; }
.checklist .i { color: var(--blue); stroke-width: 2; margin-block-start: .2rem; }
.prose .checklist { padding-inline-start: 1.75rem; }

/* Notices */
.notice { display: grid; grid-template-columns: 1.5rem 1fr; gap: .875rem; padding: 1.125rem 1.25rem; border-radius: var(--r-s); border: 1px solid var(--rule); border-inline-start-width: 4px; background: var(--white); font-size: var(--step--1); line-height: 1.55; color: var(--ink); }
.notice .i { margin-block-start: .15rem; }
.notice__title { font-weight: var(--w-bold); color: var(--ink); }
.notice--info { border-inline-start-color: var(--blue); }
.notice--info .i { color: var(--ink); }
.notice--key { border-inline-start-color: var(--ink); background: var(--ground-2); }
.notice--key .i { color: var(--ink); }
.notice--success { border-inline-start-color: var(--success); background: var(--success-bg); }
.notice--success .i { color: var(--success); }
.notice--error { border-inline-start-color: var(--error); background: var(--error-bg); }
.notice--error .i { color: var(--error); }

/* Tables (fees). Wrap wide tables in .table-scroll (tabindex=0, role=region, aria-label). */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 2px; }
.fee-table, .prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.45; }
.fee-table caption, .prose table caption { caption-side: top; text-align: start; padding-block-end: .75rem; color: var(--ink-2); font-size: var(--step--1); }
.fee-table th, .fee-table td, .prose th, .prose td { padding: .875rem 1rem .875rem 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--rule); }
.fee-table thead th, .prose thead th { color: var(--blue); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; border-block-end: 1px solid var(--blue); }
.fee-table tbody th { color: var(--ink); font-weight: var(--w-bold); }
.fee-table td:last-child, .fee-table th:last-child { padding-inline-end: 0; }
.fee-table .amount { font: var(--w-bold) 1.25rem/1.1 var(--font-sans); color: var(--blue); font-variant-numeric: lining-nums; white-space: nowrap; }

/* Service cards (hub -> sub-services; valuations comparison). Intrinsic: two or three up as room allows. */
.service-cards { list-style: none; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.service-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.service-card {
  position: relative; display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--white); border: 1px solid var(--rule); border-block-start: 3px solid var(--blue); border-radius: var(--r-m);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.service-card > .i { inline-size: 2.5rem; block-size: 2.5rem; stroke-width: 1.4; color: var(--c-icon); margin-block-end: .5rem; }
.service-card h3 { font: var(--w-bold) var(--step-2)/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--c-heading); }
.service-card h3 a { color: inherit; text-decoration: none; }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-card p { color: var(--c-text-2); }
.service-card__meta { margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--c-rule); display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); color: var(--c-text-2); }
.service-card__meta strong { color: var(--c-heading); }
.service-card:hover { border-color: var(--blue); }
.service-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.service-card h3 a:focus-visible { outline: none; }
.service-card--dark { background: var(--blue); border-color: var(--blue); border-block-start-color: var(--on-blue); }

/* Area cards (hub -> area pages) */
.area-grid { list-style: none; padding: 0; display: grid; gap: .75rem; margin-block-start: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.area-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; align-content: center; padding: 1.125rem 1.25rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
.area-card h3 { font: var(--w-bold) var(--step-1)/1.2 var(--font-sans); }
.area-card h3 a { color: var(--ink); text-decoration: none; }
.area-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.area-card p { grid-column: 1; color: var(--ink-2); font-size: var(--step--1); }
.area-card .i { grid-column: 2; grid-row: 1 / span 2; color: var(--blue); transition: transform var(--dur-1) var(--ease); }
.area-card:hover { border-color: var(--blue); }
.area-card:hover .i { transform: translateX(3px); }
.area-card:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.area-card h3 a:focus-visible { outline: none; }

/* Closing CTA band (inner pages) */
.cta-band { background: var(--blue); color: var(--on-blue); }
.cta-band__inner { display: grid; gap: var(--space-l); padding-block: var(--section); align-items: center; }
.cta-band h2 { font-size: var(--step-4); max-inline-size: 18ch; }
.cta-band p { margin-block-start: .75rem; color: var(--on-blue-2); max-inline-size: 48ch; }
@media (min-width: 1024px) { .cta-band__inner { grid-template-columns: 1fr auto; }
}

/* 404 */
.not-found { text-align: center; padding-block: var(--section); }
.not-found__num { font: var(--w-bold) clamp(6rem, 4rem + 8vw, 11rem)/1 var(--font-sans); letter-spacing: var(--track-tight); color: var(--blue); }

/* Content blocks shared by inner pages */
.content-section + .content-section { margin-block-start: var(--space-2xl); }
.section-rule { border: 0; block-size: 1px; background: var(--rule); margin-block: var(--space-2xl); }

/* 22 UTILITIES + MOTION --------------------------------------------------- */
.text-center { text-align: center; }
.mt-s { margin-block-start: var(--space-s); }
.mt-m { margin-block-start: var(--space-m); }
.mt-l { margin-block-start: var(--space-l); }
.mt-xl { margin-block-start: var(--space-xl); }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .rail__scroller { scroll-snap-type: none; }
  .btn:active { transform: none; }
  .guide:hover .guide__img img,
.lot-card:hover .lot-card__img img,
.more:hover .i,
.feature:hover h3 .i,
.area-card:hover .i,
.aside-links a:hover .i { transform: none; }
}

@media (forced-colors: active) {
  .btn, .chip, .icon-btn, .menu-btn { border: 1px solid ButtonText; }
  .page-banner::before, .banner__media::after { display: none; }
  .tag, .step__tag, .week, .sale-card { border: 1px solid CanvasText; }
  .feature:focus-within, .lot-card:focus-within, .guide:focus-within { outline: 3px solid Highlight; }
}

@media print {
  .site-header, .callbar, .to-top, .drawer, .banner__media, .split__media, .footer-cta, .rail__hint { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .on-dark { background: #fff !important; color: #000 !important; --c-heading: #000; --c-text: #000; --c-text-2: #222; }
  .rail__scroller { overflow: visible; margin: 0; padding: 0; }
  .rail__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}
/* 23 WORDPRESS GLUE: STATE, HEADER EXTRAS, LAYOUT ------------------------- */
/* Account links: JS-only buttons vs the no-JS link (AF-INTEGRATION §4.5) */
html:not(.js) .hdr-js { display: none !important; }
html.js .hdr-nojs { display: none !important; }
.bp-login-early body .drawer__account .hdr-bidder, body.bp-login .drawer__account .hdr-bidder { display: inline !important; }

/* Pages whose first screen is not a dark banner can opt into a solid header (filter shelbys_solid_header). */
.has-solid-header .site-header { position: relative; background: var(--blue); }
@media (min-width: 1120px) { .has-solid-header .site-header.is-stuck { position: fixed; } }

/* Drawer extras */
.drawer__sub ul { list-style: none; padding: 0; }
.drawer__sub-title { margin-block: .875rem .25rem; color: var(--on-blue-2); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.drawer__account { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.drawer__account a, .drawer__account button { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--on-blue); text-decoration: underline; text-decoration-color: var(--on-blue-2); text-underline-offset: .25em; }
.drawer__nav a[aria-current="page"] { color: var(--on-blue); }
.drawer__nav > ul > li > a[aria-current="page"], .drawer__row > a[aria-current="page"] { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.utility .hdr-guest span[aria-hidden] { color: var(--on-blue-2); }
.utility a[aria-current="page"] { color: var(--on-blue); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .3em; }

/* Footer address (an <address> inside the contact list) */
.footer-address { font-style: normal; }

/* Page body wrappers used by the templates */
.page-body { padding-block: var(--section); }
.page-body--tight { padding-block: calc(var(--section) * .66); }
.page-body > .wrap > :first-child { margin-block-start: 0; }
.wrap--cq { container-type: inline-size; }
.prose--centred { margin-inline: auto; }
.prose--wide { max-inline-size: var(--wrap-narrow); }
.lead-block + .with-aside, .lead-block + .prose { margin-block-start: var(--space-xl); }
.with-aside > .aside { min-inline-size: 0; }
@media (min-width: 1024px) {
  .with-aside--toc > .aside { grid-column: 2; grid-row: 1; }
  .with-aside--toc > .prose { grid-column: 1; grid-row: 1; }
}
.page-banner__eyebrow { margin-block: .25rem 0; }
.page-banner__meta { margin-block-start: var(--space-m); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; color: var(--on-blue-2); font-size: var(--step--1); }
.page-banner__meta strong { color: var(--on-blue); font-weight: var(--w-bold); }
.page-banner--compact { min-block-size: clamp(18rem, 20vw + 8rem, 24rem); }

/* 24 CORE BLOCKS INSIDE .prose ------------------------------------------- */
.prose { counter-reset: fig; }
.prose > .alignwide { inline-size: 100cqi; max-inline-size: none; margin-inline: calc(50% - 50cqi); }
.prose > .alignfull { inline-size: 100vw; max-inline-size: none; margin-inline: calc(50% - 50vw); }
.prose > .alignfull img { border-radius: 0; }
.prose .alignleft { float: left; margin: .25em 1.5em 1em 0; max-inline-size: 50%; }
.prose .alignright { float: right; margin: .25em 0 1em 1.5em; max-inline-size: 50%; }
.prose .aligncenter { margin-inline: auto; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 639.98px) { .prose .alignleft, .prose .alignright { float: none; margin-inline: 0; max-inline-size: none; } }

/* Lists from core/list carry class="wp-block-list": treat a bare one like an unclassed list */
.prose :is(ul, ol)[class="wp-block-list"] { padding-inline-start: 1.375rem; }
.prose ul[class="wp-block-list"] li::marker { color: var(--blue); }
.prose ol[class="wp-block-list"] li::marker { color: var(--blue); font-weight: var(--w-bold); }
.prose :is(ul, ol)[class="wp-block-list"] > li + li { margin-block-start: .4em; }
.prose li > :is(ul, ol) { margin-block-start: .4em; }

/* Images and the "Fig. n" caption style (block style "fig", numbered per page) */
.wp-block-image { margin-inline: 0; }
.wp-block-image img { block-size: auto; }
.prose .wp-block-image figcaption, .prose .wp-element-caption { display: block; margin-block-start: .875rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; text-align: start; }
.prose figure.is-style-fig { counter-increment: fig; }
.prose figure.is-style-fig figcaption { position: relative; padding-inline-start: 3.5rem; min-block-size: 1.5em; }
.prose figure.is-style-fig figcaption::before { content: "Fig. " counter(fig); position: absolute; inset-inline-start: 0; inset-block-start: 0; font: var(--w-bold) var(--step--1)/1.5 var(--font-sans); color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose .fig-caption__no { flex: none; font: var(--w-bold) var(--step--1)/1.5 var(--font-sans); color: var(--blue); }

/* Buttons block: the .btn system on core/button (styles: default blue, cta = white on blue, ghost, line; "brass" kept as a legacy alias of cta) */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button .wp-block-button__link {
  --btn-bg: var(--blue); --btn-fg: var(--on-blue); --btn-bd: var(--blue);
  --btn-bg-h: var(--blue-deep); --btn-fg-h: var(--on-blue); --btn-bd-h: var(--blue-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-block-size: 3.25rem; padding: .5rem 1.5rem; inline-size: auto;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--r-xs); box-shadow: none;
  font: var(--w-bold) var(--step-btn)/1.2 var(--font-sans); letter-spacing: .005em; text-align: center; text-decoration: none; white-space: normal;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.wp-block-button .wp-block-button__link:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button:is(.is-style-cta, .is-style-brass) .wp-block-button__link { --btn-bg: var(--white); --btn-fg: var(--blue); --btn-bd: var(--white); --btn-bg-h: var(--blue-tint); --btn-fg-h: var(--blue); --btn-bd-h: var(--blue-tint); }
.wp-block-button.is-style-ghost .wp-block-button__link { --btn-bg: transparent; --btn-fg: var(--on-blue); --btn-bd: rgb(255 255 255 / .7); --btn-bg-h: rgb(255 255 255 / .1); --btn-fg-h: var(--on-blue); --btn-bd-h: var(--on-blue); }
.wp-block-button:is(.is-style-line, .is-style-outline) .wp-block-button__link { --btn-bg: transparent; --btn-fg: var(--blue); --btn-bd: var(--blue); --btn-bg-h: var(--blue); --btn-fg-h: var(--on-blue); --btn-bd-h: var(--blue); }
.on-dark .wp-block-button:is(.is-style-line, .is-style-outline) .wp-block-button__link { --btn-fg: var(--on-blue); --btn-bd: rgb(255 255 255 / .7); --btn-bg-h: rgb(255 255 255 / .1); --btn-bd-h: var(--on-blue); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
@media (max-width: 639.98px) {
  :is(.banner, .cta-band, .page-banner) .wp-block-buttons, :is(.banner, .cta-band, .page-banner) .wp-block-button { inline-size: 100%; }
  :is(.banner, .cta-band, .page-banner) .wp-block-button__link { inline-size: 100%; }
}

/* Tables (core/table): fee-table look for every prose table, caption above, no core cell borders */
.wp-block-table { margin-inline: 0; display: flex; flex-direction: column; }
.wp-block-table > figcaption, .wp-block-table > .wp-element-caption { order: -1; margin: 0; padding-block-end: .75rem; color: var(--ink-2); font-size: var(--step--1); text-align: start; }
.wp-block-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.45; }
.wp-block-table :is(th, td) { border: 0; border-block-end: 1px solid var(--rule); padding: .875rem 1rem .875rem 0; text-align: start; vertical-align: top; }
.wp-block-table :is(thead, tfoot) { border: 0; }
.wp-block-table thead :is(th, td) { color: var(--blue); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; border-block-end: 1px solid var(--blue); }
.wp-block-table tbody :is(th, td):first-child { color: var(--ink); font-weight: var(--w-bold); }
.wp-block-table :is(th, td):last-child { padding-inline-end: 0; }
.wp-block-table td strong { font: var(--w-bold) 1.25rem/1.1 var(--font-sans); color: var(--blue); font-variant-numeric: lining-nums; white-space: nowrap; }
.wp-block-table .table-scroll { overflow-x: auto; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--ground-2); }

/* Quote, separator, details outside FAQ, code */
.prose .wp-block-quote p { margin: 0; }
.prose .wp-block-quote > * + * { margin-block-start: .5em; }
.prose .wp-block-separator { opacity: 1; }
.prose details:not(.shelbys-faq details) { border-block: 1px solid var(--rule); padding-block: .75rem; }
.prose details:not(.shelbys-faq details) > summary { cursor: pointer; font-weight: var(--w-bold); color: var(--ink); min-block-size: 2.75rem; display: flex; align-items: center; }
.prose code { font-size: .9em; background: var(--ground-2); padding: .1em .3em; border-radius: var(--r-xs); }

/* Groups are layout-neutral by default; spacing comes from the component classes below */
.wp-block-group { box-sizing: border-box; }
.prose > .wp-block-group:where(:not([class*="shelbys-"]):not(.answer):not(.notice):not(.checklist)) > * + * { margin-block-start: 1.1em; }

/* Paragraph styles */
.is-style-lead { font-size: var(--step-1); line-height: 1.5; color: var(--c-text-2); }
.is-style-small { font-size: var(--step--1); color: var(--c-text-2); }
p.is-style-eyebrow, p.eyebrow:not(:has(> .eyebrow__label, > .eyebrow__lot)) {
  display: flex; align-items: center; gap: .875rem; color: var(--c-accent);
  font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.3;
}
p.is-style-eyebrow::before { content: ""; inline-size: 1.5rem; block-size: 2px; background: currentColor; flex: none; }

/* 25 PATTERN COMPONENTS (core-block markup of the design components) ------ */
/* Answer panel: group.answer.shelbys-answer; the theme wraps the text in .answer__main and appends the facts */
.answer > * { margin-block: 0; }
.answer__main > * { margin-block: 0; }
.answer__main > .answer__text, .answer__main > p + p { margin-block-start: .5rem; }
.answer__main > .answer__label + p:not(.answer__text) { margin-block-start: .5rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.prose > .answer { margin-block-end: var(--space-l); }

/* Checklist (core/list with class "checklist" or style "checklist") */
.is-style-checklist { list-style: none; padding: 1.5rem 1.75rem; background: var(--ground-2); border-radius: var(--r-s); display: grid; gap: .875rem; }
.prose .is-style-checklist { padding-inline-start: 1.75rem; }
:is(.checklist, .is-style-checklist) > li { display: block; position: relative; padding-inline-start: 2.375rem; margin: 0; }
:is(.checklist, .is-style-checklist) > li > svg.i { position: absolute; inset-inline-start: 0; inset-block-start: .2rem; }
:is(.checklist, .is-style-checklist) > li:not(:has(> svg.i))::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .2rem; inline-size: 1.25em; block-size: 1.25em;
  background: var(--blue);
  -webkit-mask: 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.5 12.5 4.5 4.5L19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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.5 12.5 4.5 4.5L19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.checklist, .is-style-checklist) > li::marker { content: none; }

/* Steps (group markup): .steps > .step > p.step__tag + .step__body (ring injected) > h3 + p */
.step__body { row-gap: 0; }
.step__body > .ring { grid-column: 1; grid-row: 1 / span 2; }
.step__body > :not(.ring) { grid-column: 2; }
.step__body > h3 + p { margin-block-start: .375rem; }
.step__body > p + p { margin-block-start: .5rem; }
.prose .steps { margin-block-start: 1.5rem; }
.prose .step h3 { font-size: var(--step-1); }

/* Notice (group markup): .notice > svg.i (injected) + p.notice__title + p */
.notice > :not(.i) { grid-column: 2; margin: 0; }
.notice { row-gap: 0; }
.notice > .i { grid-column: 1; grid-row: 1 / span 2; }
.notice > :not(.i) + :not(.i) { margin-block-start: .25rem; }
.notice a { color: var(--blue); font-weight: var(--w-bold); }

/* Service cards (group markup) */
.service-card > .i + * { margin-block-start: 0; }
.service-card__meta { align-items: baseline; }
.service-card__meta strong { text-align: end; }
.service-card.on-dark h3, .service-card--dark h3 { color: var(--on-blue); }
.service-card--dark .service-card__meta { border-block-start-color: var(--rule-blue); }
.service-cards + * { margin-block-start: var(--space-l); }

/* Features (group markup): .features > .feature > svg.i (injected) + h3 + p + p.feature__more > a */
.feature > h3 + p { margin-block-start: .375rem; }
.feature__more { margin-block-start: .25rem; }
.feature__more a, a.more-link {
  display: inline-flex; align-items: center; gap: .5em; min-block-size: 2.75rem;
  color: var(--c-link); font-weight: var(--w-bold); font-size: var(--step--1);
  text-decoration: underline; text-decoration-color: var(--c-link-line); text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.feature__more a::after, a.more-link::after {
  content: ""; inline-size: 1.25em; block-size: 1.25em; flex: none; background: var(--c-accent);
  -webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M14 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M14 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-1) var(--ease);
}
.feature__more a:hover, a.more-link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.feature__more a:hover::after, a.more-link:hover::after { transform: translateX(3px); }
.prose .features { margin-block-start: 1.5rem; }

/* Related links (core/list with class "aside-links related-links") */
.aside-links > li { margin: 0; }
.aside-links a:not(:has(svg))::after {
  content: ""; inline-size: 1.25em; block-size: 1.25em; flex: none; background: var(--blue);
  -webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M14 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M14 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-1) var(--ease);
}
.aside-links a:hover::after { transform: translateX(3px); }
.prose .aside-links, .prose .related-links { list-style: none; padding: 0; }
.prose .aside-links a { font-weight: var(--w-bold); text-decoration: none; }
.prose .aside-links a:hover span, .prose .aside-links a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .25em; }

/* Area grid inside prose; chips on light grounds */
.prose .area-grid { padding: 0; }
.prose .area-card h3 { margin: 0; }
.area-chips { margin-block-start: var(--space-m); }
.area-chips .chip { border-color: var(--rule-strong); }
.area-chips__label { color: var(--c-text-2); font-size: var(--step--1); margin-block-end: .75rem; }

/* Photo CTA banner from core blocks (group.banner > figure.banner__media + group.wrap.banner__content) */
figure.banner__media { margin: 0; }
figure.banner__media img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
.banner__copy > .banner__title { margin-block-start: 0; }
.banner__copy > .banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-block-start: var(--flow); }
.banner__actions > * { margin: 0; }
.banner__actions > p { margin: 0; }
.banner:not(:has(.banner__media img)) .banner__content { padding-block: var(--space-2xl); }
@media (min-width: 1024px) { .banner:not(:has(.banner__media img)) { min-block-size: 0; } }
.banner__copy > .banner__actions { max-inline-size: none; }
.call-line strong { white-space: nowrap; }

/* CTA band from core blocks (group.cta-band > group.wrap.cta-band__inner > group + group) */
.cta-band__inner > * { margin: 0; }
.cta-band__inner h2 { margin: 0; }
.cta-band__inner .eyebrow, .cta-band__inner .is-style-eyebrow { margin-block-end: var(--space-s); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.cta-band__actions > * { margin: 0; }
.cta-band__copy > * { margin-block: 0; }
.cta-band__copy > * + * { margin-block-start: .75rem; }

/* Quote aside card inside content */
.prose .aside-card { margin-block: var(--space-xl); }
.aside-card__title { font: var(--w-bold) var(--step-2)/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--c-heading); }
.aside-card--dark .aside-card__title { color: var(--on-blue); }

/* Table scroll region (injected around core tables) */
.table-scroll[tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* 26 CONTENTS LIST (_shelbys_toc) ------------------------------------------ */
.toc { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m); }
.toc__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3.5rem; padding: .75rem 1.25rem; cursor: pointer; color: var(--ink); }
.toc__summary::-webkit-details-marker { display: none; }
.toc__title { color: var(--blue); font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.toc__summary .i { color: var(--blue); transition: transform var(--dur-2) var(--ease); }
.toc[open] > .toc__summary .i { transform: rotate(180deg); }
.toc__nav { padding: 0 1.25rem 1rem; }
.toc__list, .toc__sub { list-style: none; padding: 0; margin: 0; }
.toc__list > li { border-block-start: 1px solid var(--rule); }
.toc a { display: flex; align-items: center; min-block-size: 2.75rem; padding-block: .375rem; color: var(--blue); font-size: var(--step--1); line-height: 1.35; text-decoration: none; }
.toc a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .25em; }
.toc__sub { padding-block-end: .5rem; }
.toc__sub a { min-block-size: 2.5rem; padding-inline-start: .875rem; border-inline-start: 1px solid var(--rule); color: var(--ink-2); }
@media (min-width: 1024px) {
  .with-aside--toc .toc { position: sticky; inset-block-start: 6.5rem; max-block-size: calc(100vh - 8rem); overflow: auto; }
}

/* 27 TEMPLATES: CONTACT, QUOTE, ARTICLE, LISTINGS, SEARCH, 404 ------------- */
.contact-layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); } }
.contact-col { display: grid; gap: var(--space-xl); align-content: start; min-inline-size: 0; }
.nap-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--white); border: 1px solid var(--rule); border-block-start: 3px solid var(--blue); border-radius: var(--r-m); }
.nap-card__name { font: var(--w-bold) var(--step-2)/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.nap-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin-block-start: 1.25rem; }
.nap-list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .875rem; line-height: 1.5; }
.nap-list .i { color: var(--blue); margin-block-start: .2rem; }
.nap-list address { font-style: normal; }
.nap-list a { color: var(--blue); font-weight: var(--w-bold); text-decoration-color: currentColor; text-underline-offset: .22em; }
.nap-list .nap-label { display: block; color: var(--ink-3); font-size: var(--step--1); }
.nap-list .num { font-size: var(--step-1); }
.map-figure { margin: 0; }
.map-figure a { display: block; position: relative; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow-card); background: var(--ground-3); }
.map-figure img { inline-size: 100%; block-size: auto; }
.map-figure a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 40 / .06); }
.map-figure a:hover { border-color: var(--blue); }
.map-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-block-start: .75rem; color: var(--ink-2); font-size: var(--step--1); }
.map-figure figcaption a { display: inline; border: 0; box-shadow: none; background: none; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); }
.map-figure .map-open { display: inline-flex; align-items: center; gap: .4rem; font-weight: var(--w-bold); color: var(--blue); }
.who-list { display: grid; gap: 0; border-block: 1px solid var(--rule); }
.who-list > div { display: grid; gap: .25rem 1.25rem; padding-block: 1rem; }
.who-list > div + div { border-block-start: 1px solid var(--rule); }
.who-list dt { font-weight: var(--w-bold); color: var(--ink); }
.who-list dd { color: var(--ink-2); }
.who-list dd a { color: var(--blue); font-weight: var(--w-bold); white-space: nowrap; }
@media (min-width: 640px) { .who-list > div { grid-template-columns: 9rem minmax(0, 1fr); } }
.section-title { font: var(--w-bold) var(--step-3)/1.15 var(--font-sans); letter-spacing: var(--track-tight); color: var(--ink); }
.section-title + * { margin-block-start: var(--space-s); }
.form-panel { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--r-m); min-inline-size: 0; }
.form-panel > * + * { margin-block-start: var(--space-s); }
.form-panel .sf-form { margin-block-start: var(--space-m); }
.form-fallback { color: var(--ink-2); }
.form-fallback a { color: var(--blue); font-weight: var(--w-bold); }
.next-steps { list-style: none; padding: 0; display: grid; gap: .875rem; }
.next-steps li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .875rem; color: var(--ink-2); }
.next-steps .i { color: var(--blue); margin-block-start: .2rem; }

.quote-layout { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .quote-layout { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: var(--space-3xl); align-items: start; } }
.quote-layout .aside { display: grid; gap: var(--space-m); }
.aside-panel { padding: 1.75rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m); }
.aside-panel > * + * { margin-block-start: .75rem; }
.aside-panel h2 { font: var(--w-bold) var(--step-2)/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }

.article-body { margin-inline: auto; }
.article-foot { margin-block-start: var(--space-2xl); padding-block-start: var(--space-m); border-block-start: 1px solid var(--rule); color: var(--ink-3); font-size: var(--step--1); }
.related-guides { padding-block: var(--section); background: var(--ground-2); border-block: 1px solid var(--rule); }
.related-guides .section-head { margin-block-end: var(--space-xl); }
.listing-empty { max-inline-size: 42rem; color: var(--ink-2); font-size: var(--step-1); }
.listing-empty a { color: var(--blue); font-weight: var(--w-bold); }

.pagination { margin-block-start: var(--space-2xl); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pagination .page-numbers {
  display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: .75rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r-xs); color: var(--blue); text-decoration: none; font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
}
.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.pagination a.page-numbers:hover { background: var(--blue-tint); }
.pagination .dots { border-color: transparent; }

.results { list-style: none; padding: 0; border-block-start: 1px solid var(--rule); max-inline-size: 48rem; }
.result { position: relative; padding-block: 1.5rem; border-block-end: 1px solid var(--rule); }
.result h2 { font: var(--w-bold) var(--step-2)/1.2 var(--font-sans); letter-spacing: -.01em; }
.result h2 a { color: var(--ink); text-decoration: none; }
.result h2 a::after { content: ""; position: absolute; inset: 0; }
.result h2 a:focus-visible { outline: none; }
.result:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: var(--r-xs); }
.result:hover h2 a { color: var(--blue); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .15em; }
.result__type { color: var(--blue); font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.result p { margin-block-start: .5rem; color: var(--ink-2); }
.search-note { margin-block-end: var(--space-l); color: var(--ink-2); }
.search-note a { color: var(--blue); font-weight: var(--w-bold); }
.search-form { display: grid; gap: .75rem; max-inline-size: 36rem; }
@media (min-width: 640px) { .search-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.search-form label { font-size: var(--step--1); font-weight: var(--w-bold); color: var(--ink); }
.search-form input[type="search"] { inline-size: 100%; min-block-size: 3.375rem; padding: .75rem 1rem; background: var(--white); color: var(--ink); border: 1px solid var(--field-line); border-radius: var(--r-xs); font-size: max(1.0625rem, 16px); }
.search-form input[type="search"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; box-shadow: 0 0 0 4px rgb(0 0 126 / .18); }
.search-form .search-form__field { display: grid; gap: .375rem; }

.page-banner .not-found__num { display: block; font: var(--w-bold) clamp(5rem, 3.5rem + 6vw, 9rem)/.9 var(--font-sans); letter-spacing: -.045em; color: var(--on-blue); margin-block: .5rem .25rem; }
.not-found-body { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) { .not-found-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.more-list { list-style: none; padding: 0; border-block: 1px solid var(--rule); }
.more-list li + li { border-block-start: 1px solid var(--rule); }
.more-list .more { min-block-size: 3.5rem; inline-size: 100%; justify-content: space-between; font-size: var(--step-1); }
.more-list .more span { text-decoration-thickness: 1px; }

/* WordPress-required classes */
.screen-reader-text { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static !important; inline-size: auto; block-size: auto; margin: 0; clip: auto; white-space: normal; }
.alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-inline: auto; }
.wp-caption, .gallery-caption { max-inline-size: 100%; color: var(--ink-2); font-size: var(--step--1); }
.sticky, .bypostauthor { outline: 0; }
.post-password-form { display: grid; gap: .75rem; max-inline-size: 30rem; }
.post-password-form input[type="password"] { min-block-size: 3.375rem; padding: .75rem 1rem; border: 1px solid var(--field-line); border-radius: var(--r-xs); background: var(--white); }
.post-password-form input[type="submit"] { min-block-size: 3.25rem; padding-inline: 1.5rem; background: var(--blue); color: var(--on-blue); border: 0; border-radius: var(--r-xs); font-weight: var(--w-bold); cursor: pointer; }

/* Forced colours + reduced motion for the glue above */
@media (forced-colors: active) {
  :is(.checklist, .is-style-checklist) > li::before, .aside-links a::after, .feature__more a::after, a.more-link::after { background: CanvasText; }
  .wp-block-button__link { border: 1px solid ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  .aside-links a:hover::after, .feature__more a:hover::after, a.more-link:hover::after, .wp-block-button .wp-block-button__link:active { transform: none; }
}
@media (min-width: 1024px) { .contact-strip--always { display: grid; } }

/* Component links inside .prose keep their own look (the .prose a rule would otherwise restyle them) */
.prose :is(.btn, .chip, .call-line, .aside-card__tel, .wp-block-button__link, .more, .area-card h3 a, .service-card h3 a, .lot-card h4 a, .guide h3 a) { text-decoration: none; }
.prose .btn, .prose .wp-block-button__link { color: var(--btn-fg); font-weight: var(--w-bold); }
.prose .btn:hover, .prose .wp-block-button__link:hover { color: var(--btn-fg-h); }
.prose .aside-card__tel { color: var(--on-blue); font-weight: inherit; }
.prose .call-line { color: var(--on-blue); font-weight: inherit; }
.prose .chip { color: var(--c-link); font-weight: var(--w-regular); }
.answer__facts dt { font-weight: 400; }
.prose .on-dark strong { color: var(--on-blue); }
.quote-form { min-inline-size: 0; }
.quote-form > * + * { margin-block-start: var(--space-m); }
.quote-form > .prose { max-inline-size: 42rem; }

/* "In short" inside a single column (articles, plain pages): stacked, facts under a hairline */
.prose .answer { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
.prose .answer__facts { padding-inline-start: 0; border-inline-start: 0; padding-block-start: var(--space-m); border-block-start: 1px solid var(--rule); }
@media (min-width: 640px) { .prose .answer__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); } .prose .answer__facts div:last-child { border-block-end: 1px solid var(--rule); padding-block-end: .875rem; } }

/* Guide cards used as top-level items (h2 on listings) look the same as h3 cards */
.guide h2 { margin-block-start: .5rem; font: var(--w-bold) var(--step-2)/1.2 var(--font-sans); letter-spacing: -.01em; }
.guide h2 a { color: var(--ink); text-decoration: none; }
.guide h2 a::after { content: ""; position: absolute; inset: 0; }
.guide h2 a:focus-visible { outline: none; }
.guide:hover h2 a { color: var(--blue); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.guide .more { pointer-events: none; }
/* NAP card links: 44px hit areas without changing the row rhythm (same trick as .answer__facts a) */
.nap-list a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }

/* 28 COMPATIBILITY: v2 NAMES STILL USED BY OTHER MODULES -------------------- */
/* v3 renamed classes (DESIGN-SPEC v3.5). The old names stay as aliases while forms.css, auctionforge.css, the
   forms/auctions templates and older post content still print them. New markup uses the v3 names. */
.btn--brass { --btn-bg: var(--white); --btn-fg: var(--blue); --btn-bd: var(--white); --btn-bg-h: var(--blue-tint); --btn-fg-h: var(--blue); --btn-bd-h: var(--blue-tint); }
.tag--brass { background: var(--white); color: var(--blue); }
.notice--brass { border-inline-start-color: var(--ink); background: var(--ground-2); }
.notice--brass .i { color: var(--ink); }

/* v2 token names, mapped to v3 values so module CSS that still uses them renders in the v3 palette and font.
   Remove each alias once spec/REQUESTS.md "foundation -> forms/auctions: v3 tokens" is done (grep the theme first).
   --brass-500 is mapped to the non-text blue tint: it was used both as a fill on navy (buttons, badges with dark text)
   and as a decorative rule/underline on paper, and the tint is the one value that stays legible in both roles. */
:root {
  --navy-950: var(--blue-deep);
  --navy-900: var(--blue);
  --navy-800: var(--blue-deep);
  --navy-700: var(--blue-deep);
  --navy-logo: var(--blue);
  --brass-300: var(--on-blue);
  --brass-400: var(--on-blue-2);
  --brass-500: var(--blue-tint);
  --brass-600: var(--blue);
  --brass-700: var(--blue);
  --paper: var(--white);
  --paper-2: var(--ground-2);
  --paper-3: var(--ground-3);
  --surface: var(--white);
  --field: var(--white);
  --on-navy: var(--on-blue);
  --on-navy-2: var(--on-blue-2);
  --rule-navy: var(--rule-blue);
  --error-on-navy: var(--error-on-blue);
  --font-display: var(--font-sans);
}
:root, .on-light, .on-dark { --c-italic: var(--c-heading); }