/* ============================================================
   Bespoke Auctions — homepage concepts
   One stylesheet, four themes via body[data-theme]
   Themes: saleroom (approved design) · refined · cloth · balanced
   ============================================================ */

:root {
  --max: 1216px;
  --radius: 2px;
  /* Softened easing: gentler acceleration, no snap at the end */
  --ease: cubic-bezier(.33,.02,.24,1);
  --ease-soft: cubic-bezier(.4,.08,.2,1);
}

/* ---------- Theme: The Modern Saleroom (approved) ---------- */
body[data-theme="saleroom"], body[data-theme="balanced"] {
  --display: "Bricolage Grotesque", sans-serif;
  --body: "Inter", sans-serif;
  --bg: #F5EFE7;
  --surface: #FFFFFF;
  --ink: #25282A;
  --muted: #4E4B45;
  --panel: #93B1AF;          /* patina band */
  --panel-ink: #25282A;
  --panel-muted: #3A4442;
  --dark: #25282A;           /* charcoal sections */
  --dark-2: #1E2123;         /* footer */
  --on-dark: #F5EFE7;
  --on-dark-muted: #B9B4AB;
  --accent: #B87943;         /* copper: eyebrows, prices */
  --accent-link: #345B54;    /* cotswold green: text links on light */
  --accent-on-dark: #93B1AF; /* patina links on dark */
  --hairline: #DDD5C8;
  --hairline-dark: #3A3D3F;
  --btn-bg: #25282A;
  --btn-ink: #F5EFE7;
  --btn-outline: #25282A;
  --bar-bg: #93B1AF;
  --bar-ink: #25282A;
  --num: #93B1AF;            /* step numerals */
  --probate-bg: #93B1AF;
  --probate-ink: #25282A;
  --cta-bg: #93B1AF;
  --cta-ink: #25282A;
  --tick: #345B54;
  --quote: #93B1AF;
  --offset-rect: #93B1AF;
}

/* ---------- Theme: Balanced (less patina) ---------- */
body[data-theme="balanced"] {
  --bar-bg: #25282A;
  --bar-ink: #93B1AF;
  --num: #B87943;
  --probate-bg: #345B54;
  --probate-ink: #F5EFE7;
  /* Final CTA stays Patina in this variant, as in the approved design */
  --quote: #345B54;
  --offset-rect: #B87943;
}

/* ---------- Theme: The Refined House (concept 1) ---------- */
body[data-theme="refined"] {
  --display: "Playfair Display", serif;
  --body: "Inter", sans-serif;
  --bg: #F5F2EB;
  --surface: #FFFFFF;
  --ink: #1C1B18;
  --muted: #4A4843;
  --panel: #E7E2D6;          /* bone band */
  --panel-ink: #1C1B18;
  --panel-muted: #4A4843;
  --dark: #1C1B18;
  --dark-2: #151412;
  --on-dark: #F5F2EB;
  --on-dark-muted: #B5B0A3;
  --accent: #A8874F;         /* brass */
  --accent-link: #7A2E2E;    /* claret */
  --accent-on-dark: #A8874F;
  --hairline: #DDD6C6;
  --hairline-dark: #35332E;
  --btn-bg: #1C1B18;
  --btn-ink: #F5F2EB;
  --btn-outline: #1C1B18;
  --bar-bg: #1C1B18;
  --bar-ink: #E7E2D6;
  --num: #A8874F;
  --probate-bg: #E7E2D6;
  --probate-ink: #1C1B18;
  --cta-bg: #E7E2D6;
  --cta-ink: #1C1B18;
  --tick: #A8874F;
  --quote: #A8874F;
  --offset-rect: #A8874F;
}

/* ---------- Theme: Cut From Different Cloth (concept 2) ---------- */
body[data-theme="cloth"] {
  --display: "Fraunces", serif;
  --body: "Manrope", sans-serif;
  --bg: #F4F0E6;
  --surface: #FFFFFF;
  --ink: #191C22;
  --muted: #454B56;
  --panel: #A9BFD1;          /* silver-blue band */
  --panel-ink: #191C22;
  --panel-muted: #33404E;
  --dark: #22334E;           /* suiting navy */
  --dark-2: #1A2438;
  --on-dark: #F4F0E6;
  --on-dark-muted: #AEB9C9;
  --accent: #A44A38;         /* brick */
  --accent-link: #A44A38;
  --accent-on-dark: #C4A377; /* camel prices on navy */
  --hairline: #DCD5C5;
  --hairline-dark: #33415C;
  --btn-bg: #22334E;
  --btn-ink: #F4F0E6;
  --btn-outline: #22334E;
  --bar-bg: #22334E;
  --bar-ink: #A9BFD1;
  --num: #A9BFD1;
  --probate-bg: #A9BFD1;
  --probate-ink: #191C22;
  --cta-bg: #A9BFD1;
  --cta-ink: #191C22;
  --tick: #A44A38;
  --quote: #A9BFD1;
  --offset-rect: #A9BFD1;
}

/* ============================================================ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3 { font-family: var(--display); line-height: 1.15; margin: 0; }
section { scroll-margin-top: 96px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* Typography: no single-word last lines. Headings balance their lines; running text
   avoids orphans where the browser supports it (client review, Sept 2026). */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, blockquote, summary, dd { text-wrap: pretty; }
.nb { white-space: nowrap; }

/* Small caps utility — never below 14px anywhere */
.caps {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { color: var(--accent); display: block; margin-bottom: 16px; }
.on-dark .eyebrow { color: var(--accent-on-dark); }

/* Buttons — square, tracked caps */
.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .38s var(--ease-soft), color .38s var(--ease-soft), border-color .38s var(--ease-soft);
  cursor: pointer;
}
.btn-solid { background: var(--btn-bg); color: var(--btn-ink); }
@media (hover: hover) { .btn-solid:hover { background: var(--accent); color: #fff; border-color: var(--accent); } }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--btn-outline); }
@media (hover: hover) { .btn-outline:hover { background: var(--btn-bg); color: var(--btn-ink); } }
.on-dark .btn-outline, .on-panel .btn-outline { color: inherit; border-color: currentColor; }
@media (hover: hover) { .on-dark .btn-outline:hover { background: var(--on-dark); color: var(--dark); } }
/* On a colour panel the outline button fills with the dark button colour,
   so the label must flip to the light ink or it goes dark-on-dark. */
@media (hover: hover) { .on-panel .btn-outline:hover {
  background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg);
} }

.link {
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--accent-link);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .34s var(--ease-soft), color .34s var(--ease-soft);
}
@media (hover: hover) { .link:hover { border-color: var(--accent-link); } }
.on-dark .link { color: var(--accent-on-dark); }
@media (hover: hover) { .on-dark .link:hover { border-color: var(--accent-on-dark); } }
.on-panel .link { color: var(--panel-ink); }
@media (hover: hover) { .on-panel .link:hover { border-color: var(--panel-ink); } }

/* ============================================================ Announcement bar */
.announce {
  background: var(--bar-bg); color: var(--bar-ink);
  text-align: center; padding: 14px 24px;
}
.announce a { text-decoration: none; color: inherit; }
@media (hover: hover) { .announce a:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ============================================================ Header */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  transition: transform .4s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.header.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.07); }
.header-in {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; height: 88px;
}
.brand { margin-right: auto; display: flex; align-items: center; }
.brand img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav > .nav-item { position: relative; }
.nav a.top {
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 0;
}
@media (hover: hover) { .nav a.top:hover { color: var(--accent-link); } }
/* Chevron rotates slowly and smoothly rather than snapping */
.nav .chev {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .42s var(--ease-soft), opacity .42s var(--ease-soft);
  transform-origin: 60% 60%; opacity: .7;
}
.nav-item.open .chev { transform: rotate(225deg) translateY(-1px); opacity: 1; }

/* Dropdowns fade and settle instead of appearing instantly */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: -18px; min-width: 244px;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(0,0,0,.11);
  padding: 18px 0 14px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .34s var(--ease-soft), transform .34s var(--ease-soft), visibility .34s;
  pointer-events: none;
}
.nav-item.open .dropdown {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.dropdown a {
  display: block; padding: 9px 24px; font-size: 14.5px; text-decoration: none; color: var(--ink);
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft), padding-left .3s var(--ease-soft);
}
@media (hover: hover) { .dropdown a:hover { background: var(--bg); color: var(--accent-link); padding-left: 29px; } }

/* Grouped, multi-column dropdown for the Sell With Us branch */
.dropdown.grouped {
  left: -18px; display: grid; grid-template-columns: repeat(3, minmax(178px, 1fr));
  gap: 4px 10px; padding: 22px 12px 20px; min-width: 640px;
}
.dd-group + .dd-group { border-left: 1px solid var(--hairline); }
.dd-group h4 {
  margin: 0 0 8px; padding: 0 12px;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
}
.dropdown.grouped a { padding: 8px 12px; }
@media (hover: hover) { .dropdown.grouped a:hover { padding-left: 17px; } }
.head-phone { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
@media (hover: hover) { .head-phone:hover { color: var(--accent-link); } }
.header .btn { padding: 13px 22px; }

/* Mobile nav */
/* Header steps away on scroll down and returns on a slight scroll up (see main.js). */
body.head-away .header { transform: translateY(-101%); }
body.menu-open .header { transform: none; }
@media (prefers-reduced-motion: reduce) { .header { transition: none; }{ }}
.burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .38s var(--ease-soft), opacity .3s var(--ease-soft); }
.mobile-menu {
  /* A fixed overlay that starts under the header and fills the rest of the
     screen. Keeping it out of the sticky header means it can never be cut off
     by the header's own height or by the announcement bar above it. */
  display: none; position: fixed; left: 0; right: 0; top: var(--menu-top, 88px); bottom: 0; z-index: 59;
  background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 24px 40px;
}
body.menu-open { overflow: hidden; }
.mobile-menu a { display: block; padding: 12px 0; font-size: 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--hairline); }
.mobile-menu .caps { color: var(--accent); margin: 20px 0 4px; display: block; }
.mobile-menu a.sub { color: var(--ink); }
body.menu-open .mobile-menu { display: block; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================ Hero */
/* Anchored to the top of the image so the whole sky shows and the crop is
   taken off the bottom instead. Height is explicit: do NOT combine
   aspect-ratio with max-height here, because once the height is clamped
   Chrome derives the WIDTH from the ratio too and the image stops short of
   the viewport edge. */
.hero-img { width: 100%; height: clamp(420px, 46vw, 680px); overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-band { background: var(--panel); color: var(--panel-ink); }
.hero-band-in {
  max-width: var(--max); margin: 0 auto; padding: 56px 24px 60px;
  display: grid; grid-template-columns: 1.15fr 1px .85fr; gap: 48px; align-items: center;
}
.hero-band .rule { background: color-mix(in srgb, var(--panel-ink) 26%, transparent); width: 1px; height: 100%; min-height: 120px; }
.hero-band h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 700; margin-top: 16px; }
/* Band labels behave as block eyebrows so the 16px label->heading gap
   matches .eyebrow elsewhere (an inline span sits inside a taller line box). */
.hero-band .caps, .probate .caps { display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-band .micro { margin-top: 22px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-muted); }
.hero-band .cb { margin-top: 18px; display: inline-block; }

/* ============================================================ Next auction banner */
.next-auction { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.next-auction-in {
  max-width: var(--max); margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.next-auction .tag { color: var(--accent); }
.next-auction h3 { font-size: 20px; font-weight: 600; }
.next-auction p { margin: 0; color: var(--muted); font-size: 14.5px; }
.next-auction .link { margin-left: auto; }

/* ============================================================ Trust band */
.trust { background: var(--dark); color: var(--on-dark); }
.trust-in {
  max-width: 1320px; margin: 0 auto; padding: 30px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.trust span { font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.trust .sep { width: 1px; height: 22px; background: var(--accent-on-dark); opacity: .6; flex: none; }

/* ============================================================ Sections */
.section { padding: 88px 0; }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; }
.section-head .sub { color: var(--muted); margin: 20px 0 0; }

/* Start cards */
.start { background: var(--bg); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
@media (hover: hover) { .card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0,0,0,.09); } }
.card .photo { height: 210px; overflow: hidden; }
.card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--ease-soft); }
@media (hover: hover) { .card:hover .photo img { transform: scale(1.04); } }
.card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.card-body p { color: var(--muted); font-size: 15px; margin: 0 0 24px; flex: 1; }
/* Card CTAs fill the full card width, as per the design */
.card-body .btn { width: 100%; text-align: center; }
/* A link inside a column flex container gets blockified and stretched, which
   drags its underline across the whole card. Shrink it back to its text. */
.card-body .link { align-self: flex-start; }
.divert {
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.divert p { margin: 0; color: var(--muted); font-size: 15px; max-width: 640px; }

/* Steps */
.steps { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.step { padding: 8px 36px 8px 28px; border-left: 1px solid var(--hairline); }
.step .num { font-family: var(--display); font-size: 60px; font-weight: 700; color: var(--num); line-height: 1; }
.step h3 { font-size: 20px; font-weight: 600; margin: 22px 0 12px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }
.steps .see-link { text-align: center; margin-top: 52px; }

/* Specialisms */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tile { position: relative; height: 300px; overflow: hidden; display: block; text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .95s var(--ease-soft); }
@media (hover: hover) { .tile:hover img { transform: scale(1.05); } }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(20,22,23,.82) 100%);
}
.tile-label {
  position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: #fff;
}
.tile-label h3 { font-size: 21px; font-weight: 600; color: #fff; }
.tile-label .view { font-size: 14px; font-weight: 600; letter-spacing: .1em; opacity: 0; transform: translateX(-6px); transition: opacity .42s var(--ease-soft), transform .42s var(--ease-soft); }
@media (hover: hover) { .tile:hover .view { opacity: 1; transform: none; } }
.tiles-foot { margin-top: 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.tiles-foot p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Why sell — split with offset rect */
.why { background: var(--surface); border-top: 1px solid var(--hairline); }
.split { display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: center; }
.portrait { position: relative; }
.portrait::before {
  content: ""; position: absolute; top: 22px; left: -22px; right: 22px; bottom: -22px;
  background: var(--offset-rect); z-index: 0; opacity: .9;
}
.portrait img { position: relative; z-index: 1; width: 100%; height: 500px; object-fit: cover; }
.portrait .chip {
  position: absolute; z-index: 2; left: 18px; bottom: 18px;
  background: rgba(20,22,23,.82); color: #fff; padding: 9px 14px;
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.why h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 700; margin: 16px 0 20px; }
.why .lead { color: var(--muted); margin: 0 0 26px; }
.ticks { list-style: none; padding: 0; margin: 0 0 30px; }
.ticks li {
  padding: 11px 0 11px 34px; position: relative;
  font-size: 15.5px; font-weight: 500; border-bottom: 1px solid var(--hairline);
}
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 12px; height: 7px; border-left: 2px solid var(--tick); border-bottom: 2px solid var(--tick);
  transform: rotate(-45deg);
}

/* Proof wall */
.proof { background: var(--dark); color: var(--on-dark); }
.proof .section-head h2 { color: var(--on-dark); }
.proof .section-head .sub { color: var(--on-dark-muted); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lot .photo { height: 230px; overflow: hidden; background: #fff; }
.lot .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
@media (hover: hover) { .lot:hover .photo img { transform: scale(1.04); } }
.lot .desc { margin: 16px 0 8px; font-size: 14.5px; color: var(--on-dark-muted); min-height: 44px; }
.lot .price { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
body[data-theme="cloth"] .lot .price { color: var(--accent-on-dark); }
.proof .see-link { text-align: center; margin-top: 52px; }

/* Probate band */
.probate { background: var(--probate-bg); color: var(--probate-ink); }
.probate-in {
  max-width: var(--max); margin: 0 auto; padding: 76px 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.probate h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; margin: 16px 0 20px; }
.probate .lead { margin: 0 0 26px; opacity: .85; }
/* The probate band has its own ground colour per theme, so its link must take
   the band's own ink rather than the generic panel ink. */
.probate .link { color: var(--probate-ink); }
@media (hover: hover) { .probate .link:hover { border-color: var(--probate-ink); } }
.svc { border-top: 1px solid color-mix(in srgb, var(--probate-ink) 25%, transparent); padding: 20px 4px; display: block; text-decoration: none; color: inherit; }
.svc:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--probate-ink) 25%, transparent); }
.svc .row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.svc h3 { font-size: 22px; font-weight: 600; }
.svc .arrow { font-family: var(--display); font-size: 22px; line-height: 1.15; transition: transform .4s var(--ease-soft); }
@media (hover: hover) { .svc:hover .arrow { transform: translateX(6px); } }
.svc p { margin: 12px 0 0; font-size: 15px; opacity: .8; }

/* Auctions */
.auctions { background: var(--bg); }
.auction-grid { display: grid; grid-template-columns: 1fr 1fr 1.85fr; gap: 24px; align-items: stretch; }
.au-card { background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft); }
@media (hover: hover) { .au-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.08); } }
.au-card .photo { height: 220px; overflow: hidden; }
.au-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.au-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.au-card .when { color: var(--accent); }
.au-card h3 { font-size: 20px; font-weight: 600; }
.au-card .link { margin-top: auto; align-self: flex-start; }
.au-feature { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 380px; text-decoration: none; }
.au-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.05s var(--ease-soft); }
@media (hover: hover) { .au-feature:hover img { transform: scale(1.04); } }
.au-feature .panel {
  position: relative; z-index: 2; background: var(--dark); color: var(--on-dark);
  margin: 0; padding: 26px 30px; width: min(430px, 88%);
}
.au-feature .panel .when { color: var(--accent-on-dark); }
.au-feature .panel h3 { color: var(--on-dark); font-size: 22px; margin: 8px 0 14px; }
/* This panel sits on the dark section colour, so Register Interest needs the
   light on-dark accent, not the dark-on-light link colour. */
.au-feature .panel .link { color: var(--on-dark); opacity: .92; }
@media (hover: hover) { .au-feature .panel .link:hover { border-color: var(--on-dark); opacity: 1; } }
.auctions-foot { margin-top: 44px; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; align-items: center; }

/* Reviews */
.reviews { background: var(--surface); border-top: 1px solid var(--hairline); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.review .mark { font-family: var(--display); font-size: 56px; font-weight: 700; color: var(--quote); line-height: 1; }
.review p { color: var(--muted); font-size: 15.5px; margin: 14px 0 20px; }
.review .stars { color: var(--accent); font-size: 14px; letter-spacing: .2em; }
.review .who { margin-top: 12px; color: var(--ink); }
.reviews .see-link { text-align: center; margin-top: 52px; }

/* Story */
.story { background: var(--bg); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.story-img { min-height: 480px; }
.story-img img { width: 100%; height: 100%; object-fit: cover; }
.story-body { background: var(--surface); border: 1px solid var(--hairline); border-left: 0; padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; }
.story-body h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; margin: 0 0 20px; }
.story-body p { color: var(--muted); margin: 0 0 16px; }
.story-body .bella { font-size: 15px; }
.story-body .link { margin-top: 14px; align-self: flex-start; }

/* Final CTA */
.cta { background: var(--cta-bg); color: var(--cta-ink); text-align: center; }
.cta-in { max-width: 860px; margin: 0 auto; padding: 84px 24px; }
.cta h2 { font-size: clamp(28px, 3.2vw, 36px); font-weight: 700; }
.cta .sub { margin: 20px 0 30px; opacity: .85; }
.cta .actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta .micro { margin-top: 30px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

/* Footer */
.footer { background: var(--dark-2); color: var(--on-dark); }
.footer a { text-decoration: none; }
.footer-main {
  max-width: var(--max); margin: 0 auto; padding: 64px 24px 52px;
  display: grid; grid-template-columns: 1.35fr 1fr 1.05fr 1fr 1.25fr; gap: 44px 30px; align-items: start;
}
.footer .brandcol img { height: 74px; width: auto; }
.footer .brandcol p { color: var(--on-dark-muted); font-size: 14px; margin: 18px 0 0; }
.footer-main h4 { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-dark); margin: 6px 0 16px; }
.footer-main a, .footer-main span { display: block; color: var(--on-dark-muted); font-size: 14px; padding: 5px 0; }
.footer-main .brandcol a { padding: 0; }
@media (hover: hover) { .footer-main a:hover { color: var(--on-dark); } }

/* Final nudge to the mailing list, full width so it does not leave a void */
.footer-signup { border-top: 1px solid var(--hairline-dark); }
.footer-signup-in {
  max-width: var(--max); margin: 0 auto; padding: 30px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-signup h3 { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 0; }
.footer-signup p { color: var(--on-dark-muted); font-size: 14px; margin: 8px 0 0; }
.footer-base { border-top: 1px solid var(--hairline-dark); }
.footer-base-in {
  max-width: var(--max); margin: 0 auto; padding: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.footer-base p { margin: 0; color: var(--on-dark-muted); font-size: 14px; }
.footer-base a { color: var(--on-dark-muted); }
@media (hover: hover) { .footer-base a:hover { color: var(--on-dark); } }
/* Thin rule between the legal links, in place of interpuncts.
   Sized to the 14px text's cap height and optically centred on it. */
/* Inline hairline separator, replaces the old interpunct.
   height .86em + vertical-align -.066em centres the rule on Inter's .727em cap box. */
.divide {
  display: inline-block; width: 1px; height: .86em;
  background: currentColor; opacity: .45;
  margin: 0 .65em; vertical-align: -.066em;
}
/* "Looking to buy?" cards: shorter and heavier, so the rule holds its own
   next to the caps type. vertical-align = (cap .727em - height) / 2 keeps it
   centred on the cap box, same formula as the default above. */
/* Tab labels are width-capped and ellipsise: keep their gap tight. */
.tabs .divide { margin: 0 .3em; }
.auctions .divide { height: .62em; vertical-align: .0535em; opacity: .7; }
/* "Live" picks up the cotswold green to flag a live-bid sale. */
.au-card .caps.when .live { color: var(--accent-link); }
/* NB weight comes from contrast, not width: a 1.5px hairline cannot be reproduced
   by the Figma separator (a glyph, capped at ~12% stem-to-height), so both sides
   use 1px at .7 opacity and stay identical. */
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px; border: 1px solid var(--hairline-dark); border-radius: var(--radius);
  display: grid; place-items: center; color: var(--on-dark-muted);
  transition: border-color .2s, color .2s;
}
.socials a svg { width: 17px; height: 17px; fill: currentColor; }
@media (hover: hover) { .socials a:hover { border-color: var(--accent-on-dark); color: var(--on-dark); } }

/* The announcement bar is charcoal in this variant, so brighten its hover */
@media (hover: hover) { body[data-theme="balanced"] .announce a:hover { color: #fff; } }

/* Concept switcher */
.switcher { position: fixed; left: 20px; bottom: 20px; z-index: 90; font-family: "Inter", sans-serif; }
.switcher .sw-toggle {
  background: #1E2123; color: #F5EFE7; border: 1px solid #3A3D3F; border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: .04em;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.switcher .sw-list {
  position: absolute; bottom: calc(100% + 10px); left: 0; min-width: 250px;
  background: #1E2123; border: 1px solid #3A3D3F; border-radius: 10px; overflow: hidden;
  display: none; box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.switcher.open .sw-list { display: block; }
.switcher .sw-list a { display: block; padding: 12px 18px; color: #CFC9BE; font-size: 14px; text-decoration: none; }
@media (hover: hover) { .switcher .sw-list a:hover { background: #2A2E30; color: #fff; } }
.switcher .sw-list a.active { color: #93B1AF; font-weight: 600; }
.switcher .sw-list .sw-note { padding: 10px 18px; font-size: 12.5px; color: #8B867C; border-top: 1px solid #3A3D3F; }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }{
}}

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ============================================================ Responsive */
@media (max-width: 1080px) {
  .cards, .tiles, .steps-grid, .review-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .auction-grid { grid-template-columns: 1fr 1fr; }
  .au-feature { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; gap: 56px; }
  .portrait { max-width: 440px; }
  .hero-band-in { grid-template-columns: 1fr; gap: 28px; }
  .hero-band .rule { display: none; }
  .probate-in { grid-template-columns: 1fr; gap: 36px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-body { border-left: 1px solid var(--hairline); border-top: 0; }
  .footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 36px 28px; }
  .footer-main .brandcol { grid-column: 1 / -1; }
  .nav, .head-phone, .header .btn { display: none; }
  .burger { display: block; }
  .brand img { height: 44px; }
  /* Taller crop on narrow screens, still anchored to the sky at the top. */
  .hero-img { height: 52vh; min-height: 360px; }
  .hero-img img { object-position: center top; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .cards, .tiles, .steps-grid, .review-grid, .proof-grid, .auction-grid { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 1px solid var(--hairline); padding: 24px 4px 8px; }
  .trust-in { flex-direction: column; gap: 12px; }
  .trust .sep { display: none; }
  .trust span { white-space: normal; text-align: center; }
  .hero-img { height: 46vh; }
  .next-auction .link { margin-left: 0; }
  .divert, .tiles-foot { flex-direction: column; align-items: flex-start; }
  .footer-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .footer-main a, .footer-main span, .footer-main p { overflow-wrap: anywhere; }
  .story-grid { grid-template-columns: minmax(0,1fr); }
  .story-body { padding: 44px 28px; }
  .footer-signup-in { flex-direction: column; align-items: flex-start; gap: 18px; }{
}}
@media (max-width: 380px) {
  .footer-main { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .footer-main .brandcol { grid-column: auto; }{
}}

/* ============================================================
   Vertical trim on heading/body pairs
   Without this, a margin sits between LINE BOXES, so the visual
   baseline->cap gap varies with font size and line-height (measured
   30.1-33.3 / 35.2-37.2 / 22.8-24.2 across the page). Trimming the
   relevant edges makes the margin itself the true baseline->cap
   distance, so the rhythm holds at every clamp() size.
   Scale matches the Figma design: label->heading 24,
   heading->body 32, subheading->body 18.
   Trim is deliberately ASYMMETRIC - bottom-only on labels,
   top-only on body copy - so gaps OUTSIDE these pairs are
   untouched. Guarded, so browsers without text-box-trim keep
   the previous line-box spacing.
   ============================================================ */
@supports (text-box-trim: trim-both) {
  .eyebrow, .hero-band .caps, .probate .caps {
    text-box-trim: trim-end; text-box-edge: cap alphabetic;
    margin-bottom: 24px;
  }
  .section-head h2, .hero-band h1, .why h2, .probate h2, .story-body h2,
  .cta h2, .card-body h3, .step h3, .svc h3, .svc .arrow, .newsletter h3 {
    text-box-trim: trim-both; text-box-edge: cap alphabetic;
  }
  .section-head .sub, .why .lead, .probate .lead, .story-body p,
  .cta .sub, .card-body p, .step p, .svc p, .newsletter p {
    text-box-trim: trim-start; text-box-edge: cap alphabetic;
  }

  /* heading -> body = 32 */
  .section-head .sub { margin-top: 32px; }
  .why h2 { margin: 24px 0 32px; }
  .probate h2 { margin: 24px 0 32px; }
  .story-body h2 { margin: 0 0 32px; }
  .cta .sub { margin-top: 32px; }

  /* subheading -> body = 18 */
  .card-body h3 { margin-bottom: 18px; }
  .step h3 { margin: 26px 0 18px; }
  .svc p { margin-top: 18px; }

  /* trimmed body copy lost its top leading, which pulled the
     following element up - restore the gap below each */
  .card-body p { margin-bottom: 31px; }
  .why .lead { margin-bottom: 33px; }
  .probate .lead { margin-bottom: 33px; }
  .story-body p { margin-bottom: 23px; }
  .cta .sub { margin-bottom: 37px; }
}
.footer .newsletter-btn { display: inline-block; flex: none; color: var(--on-dark); border-color: rgba(245,239,231,.55); }
@media (hover: hover) { .footer .newsletter-btn:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); } }{
}