/* ============================================================
   Bates Auction 2026
   Scoped to .b26-* so untouched sections keep their old styles.
   Palette is drawn from the logo: the deep green is the furrow
   green sampled out of the plowed-field mark, so the site and the
   badge agree without the page turning blue and bright green.
   ============================================================ */

.b26-scope,
/* ------------------------------------------------------------
   LOCKED: link hover
   A text link turns Bates green on hover. Nothing else changes.
   No underline appears. Transition is always .16s.
   Two deliberate exceptions:
     - buttons invert to a solid fill instead
     - the current nav item keeps a green underline, because that
       marks which page you are on and is information, not hover
   Do not introduce another variant.
   ------------------------------------------------------------ */
:root {
  --b26-ink: #14181C;
  --b26-ink-soft: #2C3430;
  --b26-field: #006634;
  --b26-field-deep: #004D27;
  --b26-field-pale: #E8F0EB;
  --b26-paper: #FFFFFF;
  --b26-band: #EFF2F0;
  --b26-rule: #DDE3DF;
  --b26-rule-2: #C3CCC7;
  --b26-muted: #626C67;
  --b26-live: #C4271F;
  --b26-disp: "Archivo Narrow", "Arial Narrow", Helvetica, sans-serif;
  --b26-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --b26-wrap: 1240px;
}

.b26-wrap { max-width: var(--b26-wrap); margin: 0 auto; padding: 0 32px; }
img { max-width: 100%; height: auto; }
.b26-skip { position: absolute; left: -9999px; }
.b26-skip:focus { left: 12px; top: 12px; z-index: 200; background: #fff; padding: 10px 16px; border: 2px solid var(--b26-field); }
.b26-dot { color: #55605B; }

/* ---------------- buttons ---------------- */
.b26-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--b26-body); font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 15px 26px; border-radius: 2px;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; line-height: 1;
  transition: background .18s, color .18s, border-color .18s;
}
.b26-btn-go { background: var(--b26-field); color: #fff; border-color: var(--b26-field); }
.b26-btn-go:hover { background: var(--b26-field-deep); border-color: var(--b26-field-deep); color: #fff; }
.b26-btn-hot { background: var(--b26-live); color: #fff; border-color: var(--b26-live); }
.b26-btn-hot:hover { background: #A61F18; border-color: #A61F18; color: #fff; }
.b26-btn-quiet { background: transparent; color: var(--b26-ink); border-color: var(--b26-rule-2); }
.b26-btn-quiet:hover { background: var(--b26-ink); color: #fff; border-color: var(--b26-ink); }
.b26-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.b26-btn-ghost:hover { background: #fff; color: var(--b26-ink); border-color: #fff; }
.b26-btn-sm { padding: 11px 18px; font-size: 12px; }
.b26-tlink {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--b26-muted); border-bottom: 1px solid var(--b26-rule-2); padding-bottom: 2px;
  white-space: nowrap; text-decoration: none; transition: color .16s, border-color .16s;
}
.b26-tlink:hover { color: var(--b26-field); border-bottom-color: var(--b26-field); }  /* permanent rule, follows the text */

/* ---------------- utility bar + header ---------------- */
.b26-util { background: var(--b26-ink); color: #B9C2BD; font-size: 12.5px; line-height: 1; font-family: var(--b26-body); }
.b26-util .b26-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.b26-util strong { color: #fff; font-weight: 700; }
.b26-util a { color: inherit; text-decoration: none; }
.b26-util a:hover { color: #fff; }
.b26-util-l,
.b26-util-r { display: flex; align-items: center; line-height: 1; }
.b26-util-l { gap: 7px; }
.b26-util-r { gap: 22px; }
/* every child sits on one centre line: same box type, same line-height, no
   baseline drift between a plain span and an anchor wrapping a <strong> */
.b26-util-l > *,
.b26-util-r > * { display: inline-flex; align-items: center; line-height: 1; font-size: 12.5px; }

.b26-hdr { background: var(--b26-paper); border-bottom: 1px solid var(--b26-rule); position: sticky; top: 0; z-index: 60; font-family: var(--b26-body); }
.b26-hdr .b26-wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 84px; }
.b26-brand { flex: none; display: flex; align-items: center; }
.b26-brand img { height: 52px; width: auto; display: block; }
.b26-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; line-height: 1; }
.b26-nav a {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1; display: inline-flex; align-items: center;
  padding: 6px 0; border-bottom: 2px solid transparent; color: var(--b26-ink); text-decoration: none;
  transition: color .16s, border-color .16s;
}
.b26-nav a:hover { color: var(--b26-field); }
/* current page keeps the rule underneath it: that is state, not hover */
.b26-nav a.on, .b26-nav .current-menu-item > a { border-bottom-color: var(--b26-field); color: var(--b26-field); }
/* mobile-drawer CTA. Needs to outrank `.b26-nav a`, which sets display,
   or it leaks onto desktop beside the green button. */
.b26-nav a.b26-nav-cta-m { display: none; }
.b26-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.b26-burger span { display: block; width: 22px; height: 2px; background: var(--b26-ink); margin: 4px 0; transition: transform .2s, opacity .2s; }
.b26-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.b26-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.b26-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- hero slider ----------------
   Matches the batescorp.com hero: a real horizontal slide, dots only (no
   arrows, those live on the promo bar over there), 56x4 bars bottom right,
   and the active bar filled by a CSS keyframe over the autoplay interval.
   ------------------------------------------------------------------ */
.b26-hero { position: relative; background: var(--b26-ink); overflow: hidden; font-family: var(--b26-body); }

/* flex track: container is as tall as the tallest slide, and translating it
   gives the slide its horizontal movement */
.b26-slides { display: flex; transition: transform .62s cubic-bezier(.4,0,.2,1);
  will-change: transform; backface-visibility: hidden; }
.b26-slide { flex: 0 0 100%; min-width: 100%; position: relative; display: flex; align-items: center;
  backface-visibility: hidden; }

.b26-slide-img { position: absolute; inset: 0; background-size: cover; background-position: 58% 62%; }
.b26-slide-veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,12,.94), rgba(10,14,12,.86) 38%, rgba(10,14,12,.38) 70%, rgba(10,14,12,.30)); }
.b26-slide .b26-wrap { position: relative; width: 100%; padding-top: 82px; padding-bottom: 82px; }
.b26-hero-in { max-width: 640px; }

.b26-pill { display: inline-flex; align-items: center; background: var(--b26-field); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 2px; }
.b26-pill.is-hot { background: var(--b26-live); }
.b26-hero-t { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase; color: #fff;
  font-size: clamp(38px, 5.2vw, 70px); line-height: .98; letter-spacing: .004em;
  margin: 20px 0 0; text-wrap: balance; }
.b26-hero-when { margin: 20px 0 0; font-size: 19px; color: #EAEFEC; font-weight: 700; font-variant-numeric: tabular-nums; }
.b26-hero-where { margin: 5px 0 0; font-size: 16px; color: #A9B5AF; }
.b26-hero-note { margin: 16px 0 0; font-size: 14.5px; color: #A9B5AF; max-width: 48ch; }
.b26-hero-intro { margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: #C0CAC5; max-width: 46ch; }
.b26-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.b26-timer { display: inline-block; max-width: 100%; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); }
.b26-timer-lab { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #8FBBA2; margin-bottom: 14px; }
.b26-cd { display: flex; gap: 10px; }
.b26-cd-u { min-width: 78px; }
.b26-cd-n { font-family: var(--b26-disp); font-weight: 700; font-size: 42px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.b26-cd-l { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #8FBBA2; margin-top: 7px; }
.b26-cd-l .b26-sm { display: none; }
.b26-tstate { display: flex; align-items: center; gap: 13px; }
.b26-tmark { width: 11px; height: 11px; background: var(--b26-live); flex: none; }
.b26-ttxt { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase; font-size: 27px; color: #fff; line-height: 1.1; }
.b26-tsub { font-size: 14px; color: #A9B5AF; margin: 9px 0 0; max-width: 42ch; }

/* dots, positioned exactly like the parts site */
.b26-dots { position: absolute; bottom: 28px; right: 60px; z-index: 10; display: flex; gap: 10px; margin: 0; }
.b26-dots .b26-dot { width: 56px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.3); overflow: hidden; position: relative; transition: background .2s; }
.b26-dots .b26-dot span { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #fff; display: block; }
/* The bar IS the clock: it fills across the interval and its animationend
   advances the slider, so the two cannot drift. Gated on .is-ready so the
   keyframe never starts before the script can control it. */
.b26-hero.is-ready .b26-dots .b26-dot.is-active span { animation: b26fill var(--b26-auto, 7000ms) linear forwards; }
/* hover, focus or a hidden tab freezes the bar where it is, rather than resetting it */
.b26-hero.is-ready.is-paused .b26-dots .b26-dot.is-active span { animation-play-state: paused; }

@keyframes b26fill { from { width: 0 } to { width: 100% } }

/* ---------------- section frame ---------------- */
.b26-sec { padding: 82px 0; background: var(--b26-paper); font-family: var(--b26-body); overflow: hidden; }
.b26-sec-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 20px; }
.b26-head { grid-column: 1; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.b26-arrows { grid-column: 2; justify-self: end; margin-bottom: 28px; }
.b26-track { grid-column: 1 / -1; }
.b26-h2 {
  font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1; margin: 0;
}
.b26-head-r { display: flex; align-items: center; gap: 20px; }
.b26-more { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--b26-field);
  border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap; text-decoration: none;
  transition: color .16s, border-color .16s; }
.b26-more:hover { color: var(--b26-field-deep); }
.b26-arrows { display: flex; gap: 8px; }
.b26-arrows[hidden] { display: none; }
.b26-arrows button { width: 40px; height: 40px; border: 1px solid var(--b26-rule-2); background: var(--b26-paper);
  border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .16s, border-color .16s, opacity .16s; }
.b26-arrows button:hover:not(:disabled) { background: var(--b26-ink); border-color: var(--b26-ink); }
.b26-arrows button:hover:not(:disabled) svg { stroke: #fff; }
.b26-arrows button:disabled { opacity: .3; cursor: default; }
.b26-arrows svg { width: 15px; height: 15px; stroke: var(--b26-ink); stroke-width: 2; fill: none; stroke-linecap: square; }

/* ---------------- auction cards ---------------- */
.b26-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; align-items: start; }
.b26-track::-webkit-scrollbar { display: none; }
.b26-card {
  scroll-snap-align: start; flex: 0 0 calc((100% - 22px) / 2); min-width: 0;
  display: flex; flex-direction: column; background: var(--b26-paper);
  border: 1px solid var(--b26-rule); border-top: 3px solid var(--b26-field); transition: border-color .2s;
}
.b26-card:hover { border-color: var(--b26-rule-2); }
.b26-card.is-hot { border-top-color: var(--b26-live); }
.b26-card.is-past { border-top-color: var(--b26-rule-2); }
.b26-track.is-solo .b26-card { flex: 0 0 100%; }

/* fixed head so every card matches whatever the title length */
/* Fixed height, not min-height. With the title clamped to two lines and the
   date line unable to wrap, the head content is bounded, so pinning the height
   makes every card identical regardless of how long the auction is named.
   Any slack falls at the bottom, above the photo, where it reads as padding. */
.b26-card-head { display: flex; gap: 16px; padding: 18px 18px 16px; height: 154px; overflow: hidden; }
.b26-date { flex: none; width: 70px; text-align: center; border: 1px solid var(--b26-rule); border-radius: 2px;
  overflow: hidden; align-self: flex-start; }
.b26-date-mo { background: var(--b26-field); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 0; }
.b26-date-dy { font-family: var(--b26-disp); font-weight: 700; font-size: 33px; line-height: 1; padding: 6px 0 1px;
  font-variant-numeric: tabular-nums; }
.b26-date-yr { font-size: 10.5px; color: var(--b26-muted); padding-bottom: 6px; font-variant-numeric: tabular-nums; }
.b26-card.is-hot .b26-date-mo { background: var(--b26-live); }
.b26-card.is-past .b26-date-mo { background: var(--b26-muted); }
/* The head is a fixed height so every card matches, which leaves slack when a
   title runs to one line. Rather than pooling it all above the photo, spread it
   between the rows: the status stays pinned to the top and the format chip to
   the bottom, so the two lines the eye aligns on still line up across cards,
   and the leftover is split invisibly between title and date. */
.b26-card-hd { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* status is a label, not a control: square marker, no box */
.b26-status { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; color: var(--b26-muted); }
.b26-status::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }
.b26-status.is-hot { color: var(--b26-live); }
.b26-status.is-go { color: var(--b26-field); }
.b26-status.is-off { color: var(--b26-rule-2); }   /* finished: reads back, not away */

.b26-card-t { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase; font-size: 21px;
  line-height: 1.08; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-wrap: balance; }
.b26-card-t a { color: inherit; text-decoration: none; transition: color .16s; }
.b26-card-t a:hover { color: var(--b26-field); }
.b26-card-when { font-size: 13px; color: var(--b26-muted); margin: 6px 0 0; line-height: 1.45;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b26-card-meta { margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--b26-field); }
.b26-card.is-past .b26-card-meta { color: var(--b26-muted); }

/* photo: fixed ratio, so every image is the same height on every card */
.b26-card-ph { display: block; aspect-ratio: 2.1; overflow: hidden; border-top: 1px solid var(--b26-rule);
  background: var(--b26-band); position: relative; }
.b26-card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.b26-card:hover .b26-card-ph img { transform: scale(1.03); }
.b26-card.is-past .b26-card-ph img { filter: grayscale(1); opacity: .62;
  transition: filter .3s ease, opacity .3s ease, transform .4s ease; }
.b26-ph-need { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--b26-rule-2); }

.b26-card-f { padding: 16px 18px; margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; }
.b26-card-f .b26-btn { font-size: 11.5px; padding: 12px 20px; }

/* ---------------- responsive ---------------- */
/* ============================================================
   Responsive
   Three bands: laptop, tablet with the nav still inline, and the
   burger range where the header and hero need real reproportioning
   rather than just shrinking.
   ============================================================ */

/* ---- laptop ---- */
@media (max-width: 1200px) {
  .b26-nav { gap: 22px; }
  .b26-nav a { font-size: 12.5px; letter-spacing: .07em; }
}

/* ---- tablet landscape, nav still fits ---- */
@media (max-width: 1000px) {
  .b26-hdr .b26-wrap { min-height: 74px; gap: 18px; }
  .b26-brand img { height: 44px; }
  .b26-nav { gap: 16px; }
  .b26-nav a { font-size: 11.5px; letter-spacing: .05em; }
  .b26-hdr-cta { padding: 10px 14px; font-size: 11px; }

  .b26-slide .b26-wrap { padding-top: 62px; padding-bottom: 76px; }
  /* Card centred in the track, lining up with the centred heading and the
     arrows below it.

     flex-basis percentages resolve against the CONTENT box, not the track
     width, so "padding 6% + card 88%" does NOT centre: it leaves 6% on the
     left and 6%+4% on the right. The card must be exactly 100% of the content
     box, and the peek comes from the padding instead. */
  .b26-track { padding-inline: 56px; scroll-padding-inline: 56px; }
  .b26-card { flex: 0 0 100%; scroll-snap-align: center; }
  .b26-track.is-solo { padding-inline: 0; }
  .b26-card-head { height: 150px; }

  /* hero centres from tablet down. The left-weighted scrim only makes sense
     behind left-aligned text, so it becomes a vertical one here. */
  .b26-slide-veil { background: linear-gradient(180deg, rgba(10,14,12,.72), rgba(10,14,12,.88) 55%, rgba(10,14,12,.95)); }
  .b26-hero-in { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
  .b26-hero-intro { margin-left: auto; margin-right: auto; }
  .b26-hero-cta { justify-content: center; }
  .b26-timer { display: inline-block; text-align: center; }
  .b26-cd { justify-content: center; }
  .b26-tstate { justify-content: center; }
  .b26-tsub { margin-left: auto; margin-right: auto; }
}

/* ---- burger range: phones and tablet portrait ---- */
@media (max-width: 860px) {
  .b26-wrap { padding: 0 20px; }

  /* utility bar: centred, one tidy stack instead of a ragged left edge */
  .b26-util { font-size: 12px; }
  .b26-util .b26-wrap { height: auto; padding: 9px 20px; flex-direction: column;
    align-items: center; text-align: center; gap: 5px; }
  .b26-util-l, .b26-util-r { justify-content: center; flex-wrap: wrap; }
  .b26-util-r { gap: 16px; }

  /* header: hamburger on the left, logo centred in the bar.
     The logo is absolutely positioned so it centres on the VIEWPORT rather
     than on the space left over beside the burger, which would sit it slightly
     off to the right. */
  .b26-hdr .b26-wrap { min-height: 66px; position: relative; justify-content: flex-start; }
  .b26-burger { display: block; order: 1; margin-left: -8px; }
  .b26-brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .b26-brand img { height: 40px; }
  .b26-hdr-cta { display: none; }
  .b26-nav {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 1px solid var(--b26-rule); flex-direction: column; align-items: stretch;
    gap: 0; padding: 6px 20px 18px; display: none; box-shadow: 0 8px 20px rgba(20,24,28,.08);
  }
  .b26-nav.is-open { display: flex; }
  .b26-nav a { padding: 14px 0; font-size: 13px; letter-spacing: .09em;
    border-bottom: 1px solid var(--b26-rule); }
  .b26-nav a:last-of-type { border-bottom: 0; }
  .b26-nav a.b26-nav-cta-m { display: flex; justify-content: center; margin-top: 14px;
    background: var(--b26-field); color: #fff; padding: 15px 0; border-radius: 2px; border-bottom: 0; }
  .b26-nav a.b26-nav-cta-m:hover { background: var(--b26-field-deep); color: #fff; }

  /* hero */
  .b26-slide .b26-wrap { padding-top: 44px; padding-bottom: 64px; }
  .b26-hero-t { font-size: clamp(27px, 7.6vw, 40px); margin-top: 16px; }
  .b26-hero-when { font-size: 16px; margin-top: 15px; }
  .b26-hero-intro { font-size: 15px; margin-top: 13px; }
  .b26-hero-cta { gap: 10px; margin-top: 22px; }
  .b26-hero-cta .b26-btn { padding: 14px 18px; font-size: 12px; }

  /* countdown: share the row evenly and use the short labels */
  .b26-timer { display: block; width: 100%; margin-top: 24px; padding-top: 18px; text-align: center; }
  .b26-timer-lab { margin-bottom: 10px; }
  .b26-cd { gap: 6px; }
  .b26-cd-u { min-width: 0; flex: 1 1 0; }
  .b26-cd-n { font-size: clamp(24px, 7vw, 34px); }
  .b26-cd-l { font-size: 9.5px; letter-spacing: .1em; margin-top: 5px; }
  .b26-cd-l .b26-lg { display: none; }
  .b26-cd-l .b26-sm { display: inline; }
  .b26-tsub { max-width: none; }

  .b26-dots { left: 0; right: 0; bottom: 18px; justify-content: center; }
  .b26-dots .b26-dot { width: 40px; }

  /* sections */
  .b26-sec { padding: 46px 0; }

  /* one column: heading, cards, then the arrows underneath and centred */
  .b26-sec-grid { grid-template-columns: 1fr; }
  .b26-head { grid-column: 1; order: 1; flex-direction: column; align-items: center;
    text-align: center; gap: 14px; margin-bottom: 22px; }
  .b26-track { grid-column: 1; order: 2; }
  .b26-arrows { grid-column: 1; order: 3; justify-self: center; margin: 22px 0 0; }

  /* Card head stacks and centres. Height goes auto here, and the track
     stretches instead, so every card still matches the tallest without a
     hardcoded height that a three-line title on a narrow screen would break. */
  .b26-track { align-items: stretch; }
  .b26-card-head { height: auto; flex-direction: column; align-items: center;
    text-align: center; gap: 14px; padding: 22px 18px 16px; }
  .b26-date { align-self: center; }
  .b26-card-hd { flex: 0 1 auto; display: block; width: 100%; }
  .b26-card-when { margin-top: 7px; }
  .b26-card-meta { margin-top: 9px; }
  .b26-status { justify-content: center; }
  .b26-card-t { -webkit-line-clamp: 3; }

  /* align-items:center, NOT stretch: stretch made the text link full width and
     its underline ran the whole card */
  .b26-card-f { flex-direction: column; align-items: center; gap: 12px; }
  .b26-card-f .b26-btn { width: 100%; }
  .b26-card-f .b26-tlink { text-align: center; }
  .b26-card-f > span:empty { display: none; }
}

/* ---- phones ---- */
@media (max-width: 480px) {
  .b26-util-l { font-size: 11.5px; }
  .b26-hero-cta { flex-direction: column; }
  .b26-hero-cta .b26-btn { width: 100%; }
  .b26-track { padding-inline: 40px; scroll-padding-inline: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .b26-slides { transition: none; }
  .b26-dots .b26-dot.is-active span { animation: none; width: 100%; }
  .b26-modal-veil, .b26-modal-card { transition: none; }
  .b26-card-ph img, .b26-btn, .b26-arrows button { transition: none; }
}

/* ---------------- auction alerts popup ---------------- */

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

.b26-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 24px; font-family: var(--b26-body);
  /* scrollable so a tall card is reachable once the keyboard halves the screen */
  overflow-y: auto; overscroll-behavior: contain;
  /* JS overrides these from visualViewport while the keyboard is open */
  height: 100dvh; }
.b26-modal[hidden] { display: none; }
.b26-modal-veil { position: absolute; inset: 0; background: rgba(20,24,28,.6); opacity: 0;
  transition: opacity .22s ease; }
.b26-modal.is-open .b26-modal-veil { opacity: 1; }

.b26-modal-card { position: relative; margin: auto; background: var(--b26-paper); border: 1px solid var(--b26-rule);
  border-top: 3px solid var(--b26-field); border-radius: 2px; width: 100%; max-width: 460px;
  opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; }
.b26-modal.is-open .b26-modal-card { opacity: 1; transform: none; }

.b26-modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0;
  border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; transition: background .16s; }
.b26-modal-x:hover { background: var(--b26-band); }
.b26-modal-x svg { width: 15px; height: 15px; stroke: var(--b26-muted); stroke-width: 2; fill: none; stroke-linecap: square; }

.b26-modal-body, .b26-modal-done { padding: 34px 34px 30px; }
.b26-modal-done { text-align: center; }
.b26-modal-kick { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--b26-field); margin-bottom: 12px; }
.b26-modal-t { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 30px; line-height: 1.05; margin: 0; color: var(--b26-ink); }
.b26-modal-p { font-size: 15px; line-height: 1.6; color: var(--b26-muted); margin: 12px 0 0; }

.b26-modal-form { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.b26-modal-row { display: flex; gap: 8px; }
.b26-field { flex: 1; min-width: 0; }
/* flex:none matters: the form is a COLUMN flex container, so flex:1 here made
   the email field grow vertically instead of matching the 46px name fields */
.b26-modal-input { flex: none; display: block; width: 100%; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--b26-rule-2); border-radius: 2px; font-family: var(--b26-body);
  font-size: 15px; line-height: 1.2; color: var(--b26-ink); background: #fff; }
.b26-modal-input::placeholder { color: var(--b26-rule-2); }
.b26-modal-input:focus { outline: none; border-color: var(--b26-field); }
.b26-modal-input.is-bad { border-color: var(--b26-live); background: #FDF4F3; }
.b26-modal-input.is-bad:focus { border-color: var(--b26-live); }
.b26-modal-submit { height: 46px; width: 100%; margin-top: 2px; }
.b26-modal-form .b26-btn[disabled] { opacity: .6; cursor: default; }

.b26-modal-msg { font-size: 13.5px; margin: 12px 0 0; color: var(--b26-live); text-align: center; }
.b26-modal-msg[hidden] { display: none; }
.b26-modal-fine { font-size: 12.5px; color: var(--b26-muted); margin: 14px 0 0; text-align: center; }

.b26-modal-tick { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--b26-field-pale); margin-bottom: 16px; }
.b26-modal-tick svg { width: 22px; height: 22px; stroke: var(--b26-field); stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.b26-modal-done .b26-btn { margin-top: 22px; }

@media (max-width: 480px) {
  .b26-modal { padding: 14px; align-items: center; }
  .b26-modal-card { max-width: none; }
  .b26-modal-body, .b26-modal-done { padding: 28px 22px 24px; }
  .b26-modal-t { font-size: 25px; }
  .b26-modal-row { flex-direction: column; }
}


/* ---------------- empty state, no auctions scheduled ---------------- */
.b26-card-empty { border-top-color: var(--b26-rule-2); }
.b26-empty { padding: 44px 32px 40px; text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 320px; }
.b26-empty .b26-status { justify-content: center; margin-bottom: 12px; }
.b26-empty-t { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 26px; line-height: 1.1; margin: 0; }
.b26-empty-p { font-size: 15px; color: var(--b26-muted); margin: 12px 0 0; max-width: 46ch; }
.b26-empty-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: center; margin-top: 24px; }

/* ============================================================
   Why sell with Bates
   The panel fills the viewport below the header exactly, so no blank
   band is ever parked on screen while the reasons scrub past. A photo
   sits behind each reason and cross-fades with it; the left column is
   a running index of the four, not a second paragraph.
   ============================================================ */
.b26-why { position: relative; }
.b26-why-pin { position: sticky; top: 84px; height: calc(100dvh - 84px); min-height: 520px;
  overflow: hidden; display: flex; flex-direction: column; }

.b26-why-bg { position: absolute; inset: 0; z-index: 0; background: var(--b26-ink); }
.b26-why-ph { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
  background-size: cover; background-position: center; }
/* a real photograph is softened so type reads over it; the scale hides the
   transparent fringe blur leaves at the edges. Placeholders stay sharp so the
   "photo needed" marker is legible. */
.b26-why-ph[style] { filter: blur(var(--b26-why-blur, 3px)); transform: scale(1.06); }
.b26-why-ph.is-on { opacity: 1; }
/* unset slot: a marker, never a stand-in photograph */
.b26-why-ph:not([style]) { background:
  repeating-linear-gradient(45deg, #20262B 0 14px, #242B31 14px 28px); }
.b26-why-ph span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: var(--b26-disp); font-weight: 700; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap;
  border: 1px dashed rgba(255,255,255,.35); padding: 12px 20px; }
.b26-why-veil { position: absolute; inset: 0; z-index: 1;
  background: rgba(10,14,12,.72); }

.b26-why-body { position: relative; z-index: 2; flex: 1; display: flex; align-items: center;
  padding-block: 44px; }
/* columns are sized to what the copy actually needs and the pair is centred.
   Fractional columns left the paragraph filling only part of its track, which
   read as the whole module sitting left of centre. The left column has to hold
   "Bates Auction & Realty" on one line at the largest heading size. */
.b26-why-grid { display: grid; grid-template-columns: minmax(0,520px) minmax(0,520px);
  justify-content: center; gap: 72px; align-items: center; width: 100%; }

.b26-why-col .b26-h2 { color: #fff; margin: 0 0 30px; text-wrap: balance; }
.b26-why-idx { list-style: none; margin: 0 0 32px; padding: 0;
  border-top: 1px solid rgba(255,255,255,.16); }
.b26-why-idx li { display: flex; gap: 16px; align-items: baseline; padding: 13px 0; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.42);
  transition: color .4s ease; }
.b26-why-idx li:hover { color: rgba(255,255,255,.72); }
.b26-why-idx li em { font-family: var(--b26-disp); font-style: normal; font-weight: 700;
  font-size: 11px; letter-spacing: .18em; min-width: 22px; }
.b26-why-idx li b { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: .02em; line-height: 1.2; }
.b26-why-idx li.is-on { color: #fff; }
.b26-why-col .b26-btn { background: #fff; color: var(--b26-field-deep); border-color: #fff; }
.b26-why-col .b26-btn:hover { background: var(--b26-field-pale); border-color: var(--b26-field-pale);
  color: var(--b26-field-deep); }

.b26-why-stage { position: relative; display: grid; }
.b26-why-item { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(22px);
  pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
.b26-why-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.b26-why-num { font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .2em; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.b26-why-item h3 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.04; margin: 0; color: #fff; text-wrap: balance; }
.b26-why-item p { font-size: 17px; color: rgba(255,255,255,.76); margin: 20px 0 0;
  line-height: 1.6; }

/* scroll distance that drives the advance, 60vh per panel */
.b26-why-track { height: 240vh; }

@media (max-width: 1000px) {
  /* No pinning here. Each panel becomes its own full-bleed photo block.
     The wrap is neutralised inside this section so the photographs run
     edge to edge; the text carries its own gutter instead. */
  .b26-why-pin { position: static; height: auto; min-height: 0; display: block; }
  .b26-why-bg, .b26-why-veil { display: none; }
  .b26-why-body { display: block; padding-block: 0; }
  .b26-why-body > .b26-wrap { max-width: none; padding: 0; }
  .b26-why-grid { grid-template-columns: 1fr; gap: 0; }
  .b26-why-idx { display: none; }
  .b26-why-track { display: none; }

  .b26-why-col { text-align: center; padding: 48px 26px 42px; background: var(--b26-ink); }
  .b26-why-col .b26-h2 { margin-bottom: 26px; }
  .b26-why-col .b26-btn { margin-bottom: 4px; }

  .b26-why-stage { display: block; }
  .b26-why-item { opacity: 1; transform: none; pointer-events: auto; position: relative;
    text-align: center; padding: 64px 26px; min-height: 60vh;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--b26-ink); overflow: hidden; }
  /* The photograph is its own layer so it can be blurred without taking the
     type with it. Scaled up because blur leaves a soft transparent fringe at
     the edges of whatever it is applied to. */
  .b26-why-item::after { content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--b26-wi) center / cover no-repeat;
    filter: blur(1px); transform: scale(1.03); }
  .b26-why-item::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,14,12,.62) 0%, rgba(10,14,12,.74) 50%, rgba(10,14,12,.8) 100%); }
  .b26-why-item > * { position: relative; z-index: 2; }
  .b26-why-num { margin-bottom: 14px; }
  .b26-why-item h3 { font-size: clamp(26px, 6.4vw, 34px); }
  .b26-why-item p { max-width: 38ch; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .b26-why-item, .b26-why-ph { transition: none; }
}

/* ============================================================
   Single auction
   The photograph runs the full width; the type sits in a column on the
   left and the details panel takes the space the photograph was wasting
   on the right. Facts on a solid panel rather than laid over an image.
   ============================================================ */
.b26-ad { font-family: var(--b26-body); }

.b26-ad-hero { position: relative; background: var(--b26-ink); color: #fff; overflow: hidden;
  min-height: calc(100dvh - 84px); display: flex; align-items: center; }
.b26-ad-img { position: absolute; inset: 0; background-size: cover; background-position: 58% 62%; }
.b26-ad-veil { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,14,12,.88) 0%, rgba(10,14,12,.66) 44%, rgba(10,14,12,.5) 100%); }

.b26-ad-hero-in { position: relative; z-index: 2; width: 100%;
  padding-top: 56px; padding-bottom: 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 64px; align-items: center; }

.b26-ad-t { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; margin: 12px 0 0; text-wrap: balance; }
.b26-ad-blurb { margin: 18px 0 0; font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,.82); max-width: 52ch; }
.b26-ad-lead .b26-timer { margin-top: 32px; }
.b26-ad-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* the details panel */
.b26-ad-panel { background: var(--b26-paper); color: var(--b26-ink);
  border-top: 3px solid var(--b26-field); padding: 22px 24px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.b26-ad-sh { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .16em; color: var(--b26-muted); margin: 0 0 14px; }
.b26-ad-facts { margin: 0; }
.b26-ad-fact { padding: 11px 0; border-top: 1px solid var(--b26-rule); }
.b26-ad-fact:first-child { border-top: 0; padding-top: 0; }
.b26-ad-fact dt { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .14em; color: var(--b26-muted); margin: 0 0 4px; }
.b26-ad-fact dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--b26-ink); font-weight: 700; }

/* write-up, only rendered when the auction has one */
.b26-ad-body { background: var(--b26-paper); padding: 64px 0 72px; }
.b26-ad-main { max-width: 68ch; }
.b26-rte { font-size: 16.5px; line-height: 1.72; color: var(--b26-ink-soft); }
.b26-rte > *:first-child { margin-top: 0; }
.b26-rte p { margin: 0 0 18px; }
.b26-rte h2, .b26-rte h3 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  color: var(--b26-ink); margin: 32px 0 12px; line-height: 1.15; }
.b26-rte h2 { font-size: 26px; } .b26-rte h3 { font-size: 20px; }
.b26-rte ul, .b26-rte ol { margin: 0 0 18px; padding-left: 22px; }
.b26-rte li { margin-bottom: 7px; }
.b26-rte a { color: var(--b26-field); text-decoration: none; border-bottom: 1px solid var(--b26-rule-2);
  transition: color .16s, border-color .16s; }
.b26-rte a:hover { color: var(--b26-field); border-bottom-color: var(--b26-field); }
.b26-rte img { max-width: 100%; height: auto; }

.b26-ad-hero .b26-status { color: rgba(255,255,255,.85); font-size: 11.5px; }
.b26-ad-hero .b26-status.is-go { color: #7ED0A4; }
.b26-ad-hero .b26-status.is-hot { color: #FF7A6E; }
.b26-ad-hero .b26-status.is-off { color: rgba(255,255,255,.5); }
.b26-ad-hero .b26-status::before { width: 7px; height: 7px; }

@media (max-width: 1040px) {
  .b26-ad-hero { min-height: 0; display: block; }
  .b26-ad-hero-in { grid-template-columns: 1fr; gap: 34px; padding-top: 34px; padding-bottom: 40px; }
}
@media (max-width: 860px) {
  /* centred on a phone, matching the homepage hero */
  .b26-ad-lead { text-align: center; }
  .b26-ad-hero .b26-status { justify-content: center; }
  .b26-ad-lead .b26-timer, .b26-ad-lead .b26-cd { justify-content: center; }
  .b26-ad-cta { justify-content: center; }
  .b26-ad-body { padding: 42px 0 48px; }
}
@media (max-width: 640px) {
  .b26-ad-cta { flex-direction: column; align-items: stretch; }
  .b26-ad-cta .b26-btn { text-align: center; }
}

/* ============================================================
   Auction archive, /auctions/
   Reuses the homepage card so a sale looks identical wherever it
   appears. Only the container changes: a grid here, a scroller there.
   ============================================================ */
.b26-phead { background: var(--b26-paper); border-bottom: 1px solid var(--b26-rule);
  padding: 54px 0 46px; font-family: var(--b26-body); }
.b26-phead-kick { display: block; font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--b26-field); margin-bottom: 12px; }
.b26-phead p { margin: 14px 0 0; font-size: 16px; color: var(--b26-muted); max-width: 54ch; }

.b26-sec-alt { background: var(--b26-band); }
.b26-arch-foot { margin: 34px 0 0; text-align: center; }
/* Reserves its own height whether or not it has a count in it, so the two
   listing pages start their grids at exactly the same point. */
.b26-arch-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 30px; min-height: 15px; }
.b26-arch-count { margin: 0; font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--b26-muted); white-space: nowrap; }

.b26-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.b26-grid .b26-card { scroll-snap-align: none; }

/* A finished sale has one destination, its results, so the whole card is the
   link. Safe here because an ended card has no second link competing with it;
   the footer button goes to the same place and stays above the overlay. */
.b26-card.is-past { position: relative; }
.b26-card.is-past .b26-card-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.b26-card.is-past .b26-card-f { position: relative; z-index: 2; }
.b26-card.is-past:hover { border-color: var(--b26-rule-2); }
.b26-card.is-past:hover .b26-card-t a { color: var(--b26-field); }
/* A finished sale sits greyed back and returns to full colour on hover. The
   state is the point: these are over, and the colour coming back is the
   invitation to go and see what they brought. */
.b26-card.is-past:hover .b26-card-ph img { filter: grayscale(0); opacity: 1; }
.b26-sec-alt .b26-empty { background: var(--b26-paper); border: 1px solid var(--b26-rule); }

@media (max-width: 1000px) { .b26-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .b26-grid { grid-template-columns: 1fr; }
  .b26-arch-h { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ============================================================
   Recent results on the homepage
   The same card used everywhere else, three of them, on the band
   grey so it reads as its own chapter after Why Sell.
   ============================================================ */
.b26-recent .b26-head { margin-bottom: 30px; }

/* 404: the row of ways back out */
.b26-404-links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 34px;
  padding-top: 24px; border-top: 1px solid var(--b26-rule-2); }

/* ============================================================
   FAQ
   Native <details> accordions, so it works with JavaScript off and
   the browser handles keyboard and find-on-page for us.
   ============================================================ */
.b26-faq { padding-top: 48px; padding-bottom: 60px; }
.b26-faq-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 60px; align-items: start; }
.b26-faq-side { position: sticky; top: 104px; }
.b26-faq-side h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em; color: var(--b26-muted); margin: 0 0 12px; }

.b26-faq-sec { margin-bottom: 36px; scroll-margin-top: 104px; }
.b26-faq-sec:last-child { margin-bottom: 0; }
.b26-faq-sec > h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 19px; letter-spacing: .02em; margin: 0 0 14px; color: var(--b26-ink); }
.b26-faq-list { background: var(--b26-paper); border: 1px solid var(--b26-rule);
  border-top: 3px solid var(--b26-field); }
.b26-faq-item { border-top: 1px solid var(--b26-rule); }
.b26-faq-item:first-child { border-top: 0; }
.b26-faq-item summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 24px;
  font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--b26-ink);
  position: relative; transition: color .16s; }
.b26-faq-item summary::-webkit-details-marker { display: none; }
.b26-faq-item summary:hover { color: var(--b26-field); }
/* a plus that becomes a minus, drawn rather than an icon file */
.b26-faq-item summary::after,
.b26-faq-item summary::before { content: ""; position: absolute; right: 24px; top: 50%;
  background: var(--b26-field); transition: transform .18s ease, opacity .18s ease; }
.b26-faq-item summary::before { width: 13px; height: 2px; margin-top: -1px; }
.b26-faq-item summary::after  { width: 2px; height: 13px; margin-top: -6.5px; right: 29.5px; }
.b26-faq-item[open] summary::after { opacity: 0; transform: rotate(90deg); }
.b26-faq-a { padding: 0 52px 20px 24px; }
.b26-faq-a p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--b26-ink-soft); }
.b26-faq-a a { color: var(--b26-field); text-decoration: none;
  border-bottom: 1px solid var(--b26-rule-2); transition: border-color .16s; }
.b26-faq-a a:hover { border-bottom-color: var(--b26-field); }

@media (max-width: 1000px) {
  .b26-faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .b26-faq-side { position: static; }
  .b26-faq { padding-top: 36px; padding-bottom: 48px; }
}

/* ============================================================
   About
   Opens on a photograph like the auction pages. The story is capped
   by its own measure, not by centring the container, so it stays
   left aligned with everything else on the page.
   ============================================================ */
.b26-ahero { position: relative; overflow: hidden; background: var(--b26-ink); color: #fff;
  min-height: 460px; display: flex; align-items: flex-end; }
.b26-ahero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.b26-ahero-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,12,.38) 0%, rgba(10,14,12,.72) 62%, rgba(10,14,12,.84) 100%); }
/* width:100% matters: the hero is a flex container and .b26-wrap carries
   margin:0 auto, so without it the wrap shrink-wraps to its text and that
   narrow box gets centred. */
.b26-ahero-in { position: relative; z-index: 2; width: 100%;
  padding-top: 72px; padding-bottom: 54px; }
.b26-ahero-in .b26-phead-kick { color: var(--b26-field-pale); }
.b26-ahero-in .b26-ad-t { max-width: none; }
.b26-ahero-in p { margin: 16px 0 0; font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,.82); max-width: 66ch; }

/* One column. The measure is opened up rather than split, so there is no
   second column to leave half empty under a short heading. */
.b26-story { padding-top: 58px; padding-bottom: 62px; }
.b26-story-t .b26-h2 { line-height: 1.02; margin-bottom: 4px; }
.b26-story-t p { margin: 18px 0 0; font-size: 17px; line-height: 1.7;
  color: var(--b26-ink-soft); max-width: 92ch; }

/* A ruled row, not outlined chips. Boxes around facts read as dead buttons. */
.b26-creds { list-style: none; display: flex; flex-wrap: wrap; margin: 38px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--b26-rule); }
.b26-creds li { font-family: var(--b26-disp); font-weight: 700; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--b26-muted); padding: 2px 22px; border-left: 1px solid var(--b26-rule); }
.b26-creds li:first-child { padding-left: 0; border-left: 0; }

/* the specialism, set apart from the breadth below it */
.b26-what { padding-top: 56px; padding-bottom: 64px; }
.b26-spec { background: var(--b26-paper); border: 1px solid var(--b26-rule);
  border-top: 3px solid var(--b26-field); padding: 32px 34px 34px; margin-bottom: 42px; }
.b26-spec-k { display: block; font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--b26-field); margin-bottom: 10px; }
.b26-spec p { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--b26-ink-soft); max-width: 62ch; }

.b26-what-h { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em; color: var(--b26-muted); margin: 0 0 16px; }

/* Four columns sharing one border container. Centred, and the items are
   separated by hairlines rather than bullets: a bullet in a centred column
   hangs off the left and pulls the whole line off axis. */
.b26-what-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--b26-rule); border: 1px solid var(--b26-rule); }
.b26-what-col { background: var(--b26-paper); padding: 26px 22px 28px; text-align: center; }
.b26-what-col h4 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 16px; line-height: 1.2; margin: 0 0 16px; color: var(--b26-ink); }
.b26-what-col ul { list-style: none; margin: 0; padding: 0; }
.b26-what-col li { font-size: 14.5px; line-height: 1.5; color: var(--b26-muted);
  padding: 10px 0; border-top: 1px solid var(--b26-rule); }
.b26-what-col li:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 1000px) {
  .b26-ahero { min-height: 340px; }
  .b26-ahero-in { padding-top: 48px; padding-bottom: 40px; }
  .b26-story { padding-top: 40px; padding-bottom: 44px; }
  .b26-creds li { padding: 4px 0; border-left: 0; flex: 1 1 100%; text-align: center; }
  .b26-what { padding-top: 40px; padding-bottom: 48px; }
  .b26-spec { padding: 26px 24px 28px; margin-bottom: 32px; }
  .b26-what-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .b26-what-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Contact
   Form on the left, the details that let someone skip the form on
   the right. A caller is worth more than a form fill, so the number
   is the largest thing in the panel.
   ============================================================ */
.b26-contact { padding-top: 48px; padding-bottom: 60px; background: var(--b26-band); }
.b26-contact-panel { background: var(--b26-paper); border: 1px solid var(--b26-rule);
  border-top: 3px solid var(--b26-field); padding: 34px 36px 36px; }
.b26-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
.b26-contact-h { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 2.8vw, 33px); line-height: 1.05; margin: 0; }
.b26-contact-lede { margin: 14px 0 28px; font-size: 17px; line-height: 1.6;
  color: var(--b26-muted); max-width: 54ch; }

/* form */
.b26-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.b26-field { margin-bottom: 20px; }
.b26-field label { display: block; font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--b26-muted); margin-bottom: 7px; }
.b26-field label span { color: var(--b26-rule-2); letter-spacing: .12em; }
.b26-field input, .b26-field select, .b26-field textarea {
  width: 100%; font-family: var(--b26-body); font-size: 16px; color: var(--b26-ink);
  padding: 14px 16px; border: 1px solid var(--b26-rule-2); background: var(--b26-paper);
  transition: border-color .16s; }
.b26-field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.b26-field input:focus, .b26-field select:focus, .b26-field textarea:focus {
  outline: none; border-color: var(--b26-field); }
.b26-form button { margin-top: 6px; }
/* honeypot: present for a bot, gone for everyone else */
.b26-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.b26-note { border: 1px solid var(--b26-rule); border-left: 3px solid var(--b26-field);
  background: var(--b26-band); padding: 22px 24px; margin-bottom: 30px; }
.b26-note h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 21px; margin: 0 0 8px; }
.b26-note p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--b26-ink-soft); }
.b26-note ul { margin: 10px 0 0; padding-left: 20px; font-size: 15px; color: var(--b26-ink-soft); }
.b26-note li { margin-bottom: 5px; }
.b26-note.is-bad { border-left-color: var(--b26-live); }
.b26-note a { color: var(--b26-field); text-decoration: none; }

/* details panel */
.b26-contact-card { background: var(--b26-paper); border: 1px solid var(--b26-rule);
  border-top: 3px solid var(--b26-field); padding: 26px 26px 28px; position: sticky; top: 104px; }
.b26-contact-card h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em; color: var(--b26-muted); margin: 0 0 10px; }
.b26-contact-h2 { margin-top: 26px !important; padding-top: 22px; border-top: 1px solid var(--b26-rule); }
.b26-contact-tel { display: block; font-family: var(--b26-disp); font-weight: 700; font-size: 30px;
  line-height: 1.1; color: var(--b26-ink); text-decoration: none; transition: color .16s; }
.b26-contact-tel:hover { color: var(--b26-field); }
.b26-contact-mail { display: block; margin-top: 10px; font-size: 15px; color: var(--b26-ink);
  text-decoration: none; word-break: break-word; transition: color .16s; }
.b26-contact-mail:hover { color: var(--b26-field); }
.b26-contact-addr { display: block; font-size: 16px; line-height: 1.55; color: var(--b26-ink);
  text-decoration: none; transition: color .16s; }
.b26-contact-addr:hover { color: var(--b26-field); }
.b26-contact-note { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--b26-muted); }

@media (max-width: 1000px) {
  .b26-contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .b26-contact-card { position: static; }
  .b26-contact { padding-top: 40px; padding-bottom: 52px; }
}
@media (max-width: 640px) {
  .b26-form-row { grid-template-columns: 1fr; gap: 0; }
  .b26-contact-panel { padding: 26px 22px 28px; }
}

/* ============================================================
   Legal pages
   One layout for every legal document: contents on the left, prose
   on the right, capped at a readable measure.
   ============================================================ */
.b26-legal { padding-top: 56px; padding-bottom: 72px; }
.b26-legal-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }

.b26-legal-side { position: sticky; top: 104px; }
.b26-legal-side h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em; color: var(--b26-muted); margin: 0 0 12px; }
.b26-legal-side-2 { margin-top: 30px !important; padding-top: 22px; border-top: 1px solid var(--b26-rule); }
.b26-legal-toc a { display: block; font-size: 14px; line-height: 1.4; color: var(--b26-ink);
  text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--b26-rule);
  transition: color .16s; }
.b26-legal-toc a:last-child { border-bottom: 0; }
.b26-legal-toc a:hover { color: var(--b26-field); }

.b26-legal-body { max-width: 68ch; }
.b26-legal-updated { margin: 0 0 40px; font-family: var(--b26-disp); font-weight: 700;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--b26-muted);
  padding-bottom: 16px; border-bottom: 1px solid var(--b26-rule); }
.b26-legal-sec { margin-bottom: 44px; scroll-margin-top: 104px; }
.b26-legal-n { display: block; font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; color: var(--b26-field); margin-bottom: 8px; }
.b26-legal-sec h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 21px; line-height: 1.15; margin: 0 0 14px; color: var(--b26-ink); }
.b26-legal-sec .b26-rte { font-size: 16px; }
.b26-legal-sec .b26-rte p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .b26-legal-grid { grid-template-columns: 1fr; gap: 34px; }
  .b26-legal-side { position: static; }
  .b26-legal-body { max-width: none; }
  .b26-legal { padding-top: 40px; padding-bottom: 52px; }
}

/* ============================================================
   Sell with Bates
   The closing ask as the last card on the page, carrying the same
   3px green edge the auction cards and the details panel use. Sits
   on the band grey so the white panel reads against it, and so the
   white footer below is separated without needing a rule of its own.
   ============================================================ */
.b26-sell { background: var(--b26-band); border-top: 1px solid var(--b26-rule);
  padding-top: 56px; padding-bottom: 60px; }
/* Wherever the panel follows a section already on the band grey, the rule
   between them divides nothing and the gap reads as dead space. The homepage
   keeps its rule because Recent Results above it is white. */
.b26-list, .b26-what { padding-bottom: 30px; }
.b26-sec-alt + .b26-sell { border-top: 0; padding-top: 0; padding-bottom: 56px; }
.b26-sell-panel { background: var(--b26-paper); border: 1px solid var(--b26-rule);
  border-top: 3px solid var(--b26-field); }
.b26-sell-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 48px; align-items: center; padding: 44px 44px 46px; }
.b26-sell-t .b26-h2 { font-size: clamp(26px, 2.8vw, 33px); line-height: 1.05; }
.b26-sell-t p { margin: 18px 0 0; font-size: 17px; line-height: 1.6;
  color: var(--b26-muted); max-width: 46ch; }

.b26-sell-a { text-align: right; }
.b26-sell-k { display: block; font-family: var(--b26-disp); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--b26-field); margin-bottom: 8px; }
.b26-sell-tel { display: block; font-family: var(--b26-disp); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; color: var(--b26-ink);
  text-decoration: none; margin-bottom: 20px; transition: color .16s; }
.b26-sell-tel:hover { color: var(--b26-field); }

@media (max-width: 860px) {
  .b26-sell { padding-top: 40px; padding-bottom: 44px; }
  .b26-sell-in { grid-template-columns: 1fr; gap: 26px; text-align: center; padding: 32px 26px 34px; }
  .b26-sell-t p { margin-left: auto; margin-right: auto; }
  .b26-sell-a { text-align: center; }
}

/* ============================================================
   Footer
   White, because the logo is blue and two greens on transparent and
   only reads on a light ground. Separated from the page by the same
   3px green edge the auction cards and the details panel carry, so
   it cannot dissolve into a white page. One ground the whole way
   down; hairlines do the internal dividing.
   ============================================================ */
.b26-ftr { background: var(--b26-paper); border-top: 1px solid var(--b26-rule);
  font-family: var(--b26-body); }
.b26-ftr-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.1fr);
  gap: 48px; padding-top: 54px; padding-bottom: 48px; }

.b26-ftr-logo { display: inline-block; }
.b26-ftr-logo img { display: block; height: 58px; width: auto; }
.b26-ftr-brand p { margin: 20px 0 0; font-size: 15px; line-height: 1.65;
  color: var(--b26-muted); max-width: 32ch; }

.b26-ftr-col h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em; color: var(--b26-muted); margin: 6px 0 14px; }
.b26-ftr-col a { display: block; color: var(--b26-ink); text-decoration: none;
  font-size: 15px; line-height: 1.5; padding: 6px 0; transition: color .16s; }
.b26-ftr-col a:hover { color: var(--b26-field); }
.b26-ftr-tel { font-family: var(--b26-disp); font-weight: 700; font-size: 26px;
  line-height: 1.15; padding: 0 0 8px; }

/* signup, same ground, divided by a hairline */
.b26-ftr-signup { border-top: 1px solid var(--b26-rule); }
.b26-ftr-signup-in { display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 28px; }
.b26-ftr-signup-t h2 { font-family: var(--b26-disp); font-weight: 700; text-transform: uppercase;
  font-size: 20px; margin: 0; line-height: 1.15; color: var(--b26-ink); }
.b26-ftr-signup-t p { margin: 7px 0 0; font-size: 14px; color: var(--b26-muted); }
.b26-ftr-form { display: flex; gap: 10px; flex: 0 1 470px; }
.b26-ftr-form input { flex: 1; min-width: 0; font-family: var(--b26-body); font-size: 15px;
  padding: 14px 16px; border: 1px solid var(--b26-rule-2); background: var(--b26-paper);
  color: var(--b26-ink); transition: border-color .16s; }
.b26-ftr-form input::placeholder { color: var(--b26-muted); }
.b26-ftr-form input:focus { outline: none; border-color: var(--b26-field); }
.b26-ftr-form input.is-bad { border-color: var(--b26-live); }
.b26-ftr-form .b26-btn { white-space: nowrap; }

.b26-ftr-bot { border-top: 1px solid var(--b26-rule); }
.b26-ftr-bot .b26-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px;
  padding-top: 16px; padding-bottom: 20px; font-size: 12.5px; color: var(--b26-muted); }
.b26-ftr-bot strong { color: var(--b26-ink-soft); font-weight: 700; }
.b26-ftr-bot .b26-dot { opacity: .6; }
.b26-ftr-legal { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.b26-ftr-legal a { color: var(--b26-muted); text-decoration: none; transition: color .16s; }
.b26-ftr-legal a:hover { color: var(--b26-field); }

.b26-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1000px) {
  .b26-ftr-top { grid-template-columns: 1fr 1fr; gap: 34px 40px; padding-top: 42px; padding-bottom: 38px; }
  .b26-ftr-brand { grid-column: 1 / -1; }
  .b26-ftr-form { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .b26-ftr-top { grid-template-columns: 1fr; text-align: center; }
  .b26-ftr-brand p { margin-left: auto; margin-right: auto; }
  .b26-ftr-logo img { margin: 0 auto; }
  .b26-ftr-signup-in { justify-content: center; text-align: center; }
  .b26-ftr-form { flex-direction: column; flex-basis: 100%; }
  .b26-ftr-bot .b26-wrap { justify-content: center; text-align: center; }
  .b26-ftr-legal { margin-left: 0; flex-basis: 100%; justify-content: center; margin-top: 10px; }
}

/* ============================================================
   Recent results on the homepage
   The same card used everywhere else, three of them, on the band
   grey so it reads as its own chapter after Why Sell.
   ============================================================ */
.b26-recent .b26-head { margin-bottom: 30px; }

/* ============================================================
   Phone pass
   Page headers, headings and standalone blocks centre. Deliberately
   NOT centred: form labels and fields, FAQ questions and answers, and
   the legal documents. Centring a form makes it harder to scan down,
   and centring several paragraphs of terms makes them harder to read,
   which is the opposite of what those pages are for.
   ============================================================ */
@media (max-width: 860px) {
  .b26-phead { padding: 34px 0 30px; text-align: center; }
  .b26-phead p { margin-left: auto; margin-right: auto; }

  .b26-story-t .b26-h2 { text-align: center; }

  .b26-spec { text-align: center; }
  .b26-spec p { margin-left: auto; margin-right: auto; text-align: left; }

  .b26-arch-h { align-items: center; text-align: center; }
  .b26-arch-foot { text-align: center; }
  .b26-404-links { justify-content: center; }

  .b26-legal-sec h2, .b26-faq-sec > h2 { text-align: center; }
  .b26-legal-updated { text-align: center; }
  .b26-legal-side h2, .b26-faq-side h2 { text-align: center; }
  .b26-legal-toc a { text-align: center; }

  .b26-empty { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 640px) {
  .b26-phead { padding: 28px 0 26px; }
  .b26-ahero-in { text-align: center; }
  .b26-ahero-in p { margin-left: auto; margin-right: auto; }
  .b26-ad-panel { padding: 20px 20px 22px; }
  .b26-404-links { gap: 12px 22px; }
  .b26-contact-h, .b26-contact-lede { text-align: center; }
  .b26-contact-lede { margin-left: auto; margin-right: auto; }
}