/* Stage 1 page styles, shipped verbatim and deliberately UNLAYERED,
   with every .esa-* selector prefixed by `body`.
   Bricks' element defaults (.brxe-section flex-direction, .brxe-div
   resets) sit at the same specificity as our class selectors and print
   after this file, so a plain copy kept losing property by property.
   One element in the compound outranks them all without !important.
   Trade-off: builder per-element styling still wins (id selectors),
   but class-level tweaks in the UI will not. Edit pages/<page>/styles.css. */
/* =============================================================================
   Equipment Sales Australia — Home
   Standalone build (Stage 1 of docs/SPEC-PLAN.md), converted to Bricks later.

   Rules that keep Stage 2 mechanical:
   - Tokens mirror the Bricks global variables 1:1 (same names, same values).
   - 1rem = 16px, matching the Bricks theme style (html 100%).
   - Media queries ONLY at the Bricks breakpoints, desktop-first:
     1279 / 991 / 767 / 478. Everything between them is fluid via clamp().
   ============================================================================= */


/* Animatable number for the "lift out of shadow" half of the image reveal.
   Registering it lets GSAP tween it smoothly instead of swapping strings. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--alloy);          /* light sections in the design are Alloy, cards Workshop White */
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  /* No `text-wrap: balance` here on purpose — it fights SplitText's line
     splitting and produces wrong line breaks in the masked reveals. */
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--esa-violet);
  outline-offset: 3px;
}

input, button { font: inherit; color: inherit; }body .esa-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}body .esa-skip-link {
  position: absolute;
  left: var(--space-m);
  top: -4rem;
  z-index: 100;
  padding: var(--space-s) var(--space-m);
  background: var(--esa-violet);
  color: var(--ice-grey);
  border-radius: var(--radius-m);
  transition: top var(--transition-base);
}body .esa-skip-link:focus { top: var(--space-m); }

/* The skip-link target is focusable only programmatically; never draw a ring
   around the whole page when it receives focus. */
main[tabindex="-1"]:focus { outline: none; }

/* ---------- Layout primitives -------------------------------------------- */
.esa-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}body .esa-section { padding-block: var(--section-pad-y); }

/* ---------- Buttons ------------------------------------------------------ */
.esa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;                 /* WCAG touch target */
  padding: var(--space-s) var(--space-l);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  font-size: var(--text-s);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}body .esa-btn--primary {
  background: var(--esa-violet);
  color: var(--ice-grey);
  box-shadow: 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.1);
}body .esa-btn--primary:hover { background: var(--esa-violet-d-1); }body .esa-btn--ghost {
  border-color: var(--steel-violet);
  color: var(--ice-grey);
}body .esa-btn--ghost:hover {
  border-color: var(--ice-grey);
  background: rgb(220 220 238 / 0.1);
}

/* ---------- Eyebrow pill ------------------------------------------------- */
.esa-pill {
  display: inline-block;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--esa-violet);
  border-radius: var(--radius-pill);
  background: rgb(220 220 238 / 0.1);
  color: var(--ice-grey);
  font-size: var(--text-s);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

/* =============================================================================
   HEADER — Figma 1:394
   ============================================================================= */
.esa-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  padding-block: var(--space-xl);
  transition: padding-block var(--transition-base);
}

/* Liquid glass plate.
   Its own layer rather than a background on the header, so it can fade in
   once the page is scrolled without touching the header's own layout.

   Legibility never depends on backdrop-filter: the tint and the inset
   highlights alone already separate the bar from the page, so browsers with
   no backdrop support still get a readable header. */
.esa-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(245 12% 10% / 0.82);
  box-shadow:
    inset 0 0 2px 1px rgb(255 255 255 / 0.35),
    inset 0 0 10px 4px rgb(255 255 255 / 0.14),
    inset 0 4px 16px rgb(17 17 26 / 0.05),
    inset 0 8px 24px rgb(17 17 26 / 0.05),
    inset 0 6px 56px rgb(17 17 26 / 0.05);
  border-block-end: 1px solid rgb(255 255 255 / 0.12);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

/* Tier 1: frost. Supported everywhere backdrop-filter is. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {body .esa-header::before {
    /* Still clearly a dark bar. The header's logo and links are light
       artwork, so the plate has to stay dark enough for them regardless of
       what scrolls behind — glass is the finish, not the contrast strategy. */
    background: hsl(245 12% 10% / 0.62);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    backdrop-filter: blur(10px) saturate(1.5);
  }
}

/* Tier 2: refraction. Only Chromium actually renders an SVG filter inside
   backdrop-filter — Safari and Firefox parse it but paint nothing, so this is
   gated on a class that motion-free JS sets after probing at runtime rather
   than on @supports, which would report a false positive. */
.esa-glass .esa-header::before {
  -webkit-backdrop-filter: url(#esa-glass-filter) saturate(1.45);
  backdrop-filter: url(#esa-glass-filter) saturate(1.45);
}

/* Scrolled away from the top, or the mobile menu is open. */
.esa-header.is-stuck { padding-block: var(--space-m); }body .esa-header.is-stuck::before, body .esa-header.is-open::before { opacity: 1; }

/* The filter element itself is never painted. */
.esa-glass-filter {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}body .esa-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}body .esa-header__logo img { width: clamp(11rem, 16vw, 14.6875rem); height: auto; }body .esa-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xl);
  flex: 1;
}body .esa-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.2vw, 2rem);
}body .esa-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-xs);
  color: var(--ice-grey);
  font-size: var(--text-m);
  text-transform: uppercase;
  transition: color var(--transition-base);
}body .esa-nav__link:hover { color: var(--electric-lilac); }

/* =============================================================================
   GROWING UNDERLINE — header nav + footer link lists
   One rule for every navigational link. Each context supplies its own inset
   and offset through custom properties, because the header links are 44px
   tall touch targets (so the line is measured from their centre) while the
   footer links are plain inline text (measured from their bottom).
   Painted in currentColor, so it inherits each link's hover colour.
   ============================================================================= */
.esa-nav__link,
.esa-footer__list a,
.esa-footer__legal a {
  position: relative;
}body .esa-footer__list a, body .esa-footer__legal a {
  display: inline-block;   /* gives the pseudo-element a box to measure */
}body .esa-nav__link::after, body .esa-footer__list a::after, body .esa-footer__legal a::after {
  content: "";
  position: absolute;
  inset-inline: var(--underline-inset, 0);
  inset-block-end: var(--underline-offset, -0.1em);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}body .esa-nav__link:hover::after, body .esa-nav__link:focus-visible::after, body .esa-footer__list a:hover::after, body .esa-footer__list a:focus-visible::after, body .esa-footer__legal a:hover::after, body .esa-footer__legal a:focus-visible::after {
  transform: scaleX(1);
}

/* Header links carry padding and a 44px height; pull the line back to the text. */
.esa-nav__link {
  --underline-inset: var(--space-xs);
  --underline-offset: calc(50% - 0.85em);
}body .esa-nav__link.is-current { color: var(--esa-violet); }

/* ESA Violet reads well against the dark hero, but washes out once the glass
   plate is over a light section — lift the current link to Electric Lilac
   there. The state is also carried by aria-current, so colour is not the only
   signal either way. */
.esa-header.is-stuck .esa-nav__link.is-current { color: var(--electric-lilac); }body .esa-search {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 171px;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--steel-violet);
  border-radius: var(--radius-m);
  background: rgb(220 220 238 / 0.1);
  color: var(--ice-grey);
}body .esa-search__icon { flex: none; }body .esa-search__input {
  width: 100%;
  border: 0;
  background: none;
  font-size: var(--text-m);
  text-transform: uppercase;
}body .esa-search__input::placeholder { color: var(--ice-grey); opacity: 0.9; }body .esa-search__input:focus { outline: none; }

/* Burger — hidden until the nav collapses */
.esa-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--steel-violet);
  border-radius: var(--radius-m);
  background: rgb(220 220 238 / 0.1);
  cursor: pointer;
}body .esa-header__toggle-bar {
  width: 18px;
  height: 2px;
  background: var(--ice-grey);
  transition: transform var(--transition-base), opacity var(--transition-base);
}body .esa-header__toggle[aria-expanded="true"] .esa-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }body .esa-header__toggle[aria-expanded="true"] .esa-header__toggle-bar:nth-child(2) { opacity: 0; }body .esa-header__toggle[aria-expanded="true"] .esa-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   HERO — Figma 1:5
   ============================================================================= */
.esa-hero {
  position: relative;
  display: flex;
  /* Bricks' own `.brxe-section` sets flex-direction: column. A plain page
     defaults to row, so this was never needed in the standalone build — but
     without it the converted hero stops centring its content vertically. */
  flex-direction: row;
  align-items: center;
  min-height: clamp(34rem, 62vw, 56.25rem);   /* 900px at 1440 */
  padding-block: var(--space-4xl) var(--space-3xl);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}body .esa-hero__bg {
  position: absolute;
  inset-inline: 0;
  /* Taller than the section so the parallax drift never exposes an edge. */
  top: -9%;
  z-index: -2;
  width: 100%;
  height: 118%;
  object-fit: cover;
  will-change: transform;
}body .esa-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Figma runs this gradient's transparent stop to 213%, so the image never
     fully clears the scrim inside the frame — keeps the right side readable. */
  background: linear-gradient(120deg, rgb(37 36 45 / 1) 4%, rgb(37 36 45 / 0) 213%);
}

/* Keeps .esa-container's centring so the copy stays flush with the header
   logo on viewports wider than --container-max. The block is narrowed by
   capping its children, never by detaching it from the container. */
.esa-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}body .esa-hero__inner > * { max-width: min(100%, 600px); }body .esa-hero__title {
  max-width: 15ch;
  color: var(--ice-grey);
  font-size: var(--text-4xl);
  line-height: 1.2;
  text-transform: uppercase;
}body .esa-hero__lead {
  max-width: 600px;
  color: var(--ice-grey);
  font-size: var(--text-l);
  line-height: 1.4;
}body .esa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block-start: var(--space-xs);
}

/* =============================================================================
   SECTION HEADING — shared by every light section
   ============================================================================= */
.esa-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
  margin-block-end: var(--space-xl);
}body .esa-section-head__title {
  margin-block-start: var(--space-xs);
  font-size: var(--text-3xl);
  text-transform: uppercase;
}body .esa-pill--light {
  border-color: var(--esa-violet);
  background: transparent;
  color: var(--charcoal);
}body .esa-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  color: var(--esa-violet);
  font-size: var(--text-s);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transition-base);
}body .esa-link-arrow:hover { color: var(--esa-violet-d-1); }body .esa-link-arrow svg { transition: transform var(--transition-base); }body .esa-link-arrow:hover svg { transform: translateX(3px); }

/* =============================================================================
   CATEGORY CARDS — Figma 1:31
   ============================================================================= */
.esa-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}body .esa-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--workshop-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}body .esa-card:hover {
  box-shadow: 0 12px 24px -12px rgb(37 36 45 / 0.35);
}body .esa-card__media {
  position: relative;
  display: block;
  aspect-ratio: 389 / 225;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;   /* keeps the blend scoped to the card */
}

/* Duotone, built so it can be transitioned away on hover.
   `mix-blend-mode` itself is not animatable, so the greyscale lives on the
   image (a filter, which animates) and the brand hue lives on an overlay
   whose opacity animates. Colour-blending violet over a greyscale photo is
   equivalent to the luminosity-over-violet plate used in Figma. */
.esa-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 450ms ease;
}

/* Brand hue */
.esa-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--esa-violet);
  mix-blend-mode: color;
  opacity: 0.9;
  transition: opacity 450ms ease;
}

/* Grounding scrim so the card reads as one block against the light section. */
.esa-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, #0D0E1A 0%, rgb(111 112 181 / 0) 100%);
  opacity: 0.55;
  transition: opacity 450ms ease;
}

/* Hover / keyboard focus: the photo returns to full colour and both
   overlays clear. Focus is included so the effect is reachable without a
   pointer; on touch, the resting duotone simply stays. */
.esa-card:hover .esa-card__media img,
.esa-card:focus-visible .esa-card__media img {
  filter: grayscale(0) contrast(1);
}body .esa-card:hover .esa-card__media::before, body .esa-card:focus-visible .esa-card__media::before, body .esa-card:hover .esa-card__media::after, body .esa-card:focus-visible .esa-card__media::after {
  opacity: 0;
}body .esa-card__badge {
  position: absolute;
  z-index: 2;   /* above both overlays */
  inset-block-start: var(--space-m);
  inset-inline-end: var(--space-m);
  padding: 0.5625rem 0.8125rem;
  border: 1px solid var(--esa-violet);
  border-radius: var(--radius-pill);
  background: var(--ice-grey);
  color: var(--esa-violet);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}body .esa-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  flex: 1;
  padding: var(--space-m);
}body .esa-card__icon { width: 48px; height: 48px; }body .esa-card__title {
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
}body .esa-card__text {
  color: var(--machine-grey);
  font-size: var(--text-m);
  line-height: 1.4;
}body .esa-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 50px;
  padding: var(--space-m);
  border-block-start: 1px solid var(--esa-violet);
  color: var(--esa-violet);
  font-size: var(--text-s);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}body .esa-card__foot svg { transition: transform var(--transition-base); }body .esa-card:hover .esa-card__foot svg { transform: translateX(3px); }

/* =============================================================================
   WHY ESA + ACCORDION — Figma 52:836
   Content column is capped to the container's left half; the photo runs
   edge-to-edge on the right, so the section is a grid, not a container.
   ============================================================================= */
.esa-why {
  display: grid;
  /* 772 / 668 split, measured off the 1440 frame */
  grid-template-columns: minmax(0, 772fr) minmax(0, 668fr);
  align-items: center;
  background: var(--ink);
  color: var(--ice-grey);
  /* The photo bleeds to the right edge, so this section cannot use
     .esa-container. Instead the start gutter grows past --container-pad once
     the viewport exceeds --container-max, so the copy lines up with the
     header. `100%` resolves against the full-width section, which — unlike
     100vw — excludes the scrollbar. */
  padding-inline-start: max(
    var(--container-pad),
    calc((100% - var(--container-max)) / 2 + var(--container-pad))
  );
}body .esa-why__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-block: var(--space-4xl);
  padding-inline-end: var(--space-xl);
}body .esa-why__content > * { max-width: 564px; }body .esa-why__intro {
  font-size: clamp(1.25rem, 1.07rem + 0.89vw, 1.75rem);   /* 20 → 28 */
  font-weight: 600;
  line-height: 1.35;
}body .esa-why__media { align-self: stretch; }body .esa-why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(1 - var(--esa-veil) * 0.6));
}body .esa-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}body .esa-accordion__item {
  border: 1px solid var(--workshop-white);
  border-radius: var(--radius-m);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}body .esa-accordion__item h3 { margin: 0; font: inherit; }body .esa-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
  padding: var(--space-xl);
  color: var(--ice-grey);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

/* The icons ship from Figma with their colour baked in — one violet (for the
   open item) and three ice-grey (for the closed ones). That only holds while
   the first item is the open one; opening any other left an ice-grey icon on
   the light plate, i.e. invisible. Painting them as masks in `currentColor`
   makes every icon follow its trigger's text colour instead. */
.esa-accordion__icon {
  flex: none;
  width: 26px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--transition-base);
}body .esa-accordion__panel {
  padding: 0 var(--space-xl) var(--space-xl) calc(var(--space-xl) + 26px + var(--space-m));
  color: var(--machine-grey);
  font-size: var(--text-m);
  line-height: 1.4;
}

/* Open state — light plate with a violet spine, per the design. */
.esa-accordion__item.is-open {
  border-color: transparent;
  border-inline-start: 4px solid var(--esa-violet);
  background: var(--workshop-white);
  box-shadow: 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.1);
}body .esa-accordion__item.is-open .esa-accordion__trigger {
  color: var(--esa-violet);
  padding-block-end: var(--space-m);   /* design gap between title and body is 16px */
}

/* =============================================================================
   BRAND STRIP — Figma 1:169
   ============================================================================= */
.esa-brands {
  padding-block: var(--space-2xl);
  background: var(--ice-grey);
  text-align: center;
}body .esa-brands__label {
  margin-block-end: var(--space-xl);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}body .esa-brands__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}body .esa-brands__list li { flex: 1 1 140px; display: flex; justify-content: center; }body .esa-brands__list img {
  width: auto;
  max-height: 3.25rem;
  /* Logos ship in full colour; the design greys them so no single brand shouts. */
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--transition-base), opacity var(--transition-base);
}body .esa-brands__list img:hover { filter: none; opacity: 1; }

/* =============================================================================
   SPLIT SECTIONS — Figma 1:209 (service) and 27:591 (finance)
   ============================================================================= */
.esa-split__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-3xl);
}

/* Finance mirrors the service section: content first, image second. */
.esa-split--reverse .esa-split__media { order: 2; }body .esa-split__media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  filter: grayscale(1) brightness(calc(1 - var(--esa-veil) * 0.6));
}body .esa-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}body .esa-split__title {
  font-size: var(--text-3xl);
  line-height: 1.15;
  text-transform: uppercase;
}body .esa-split__text {
  max-width: 52ch;
  color: var(--charcoal);
  font-size: var(--text-m);
  line-height: 1.5;
}body .esa-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-block: var(--space-xs);
}body .esa-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--text-m);
}body .esa-checklist img { flex: none; width: 16px; height: 16px; }

/* =============================================================================
   PRE-FOOTER CTA CARDS — Figma 1:274
   ============================================================================= */
.esa-cta { background: var(--ink); }body .esa-cta__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}body .esa-cta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-xl);
  border-radius: 8px;
  background: var(--workshop-white);
  text-align: center;
}body .esa-cta__title {
  font-size: var(--text-2xl);
  text-transform: uppercase;
}body .esa-cta__text {
  flex: 1;
  color: var(--machine-grey);
  font-size: var(--text-m);
  line-height: 1.4;
}body .esa-cta__card .esa-btn { width: 100%; }body .esa-btn--outline {
  border-color: var(--machine-grey);
  color: var(--charcoal);
}body .esa-btn--outline:hover {
  border-color: var(--esa-violet);
  color: var(--esa-violet);
}

/* =============================================================================
   FOOTER — Figma 132:1989
   ============================================================================= */
.esa-footer {
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--alloy);
}body .esa-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
  gap: var(--space-3xl);
}body .esa-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l);
}body .esa-footer__heading {
  margin-block-end: var(--space-m);
  color: var(--esa-violet);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}body .esa-footer__list { display: flex; flex-direction: column; gap: var(--space-s); }body .esa-footer__list a {
  color: var(--steel-violet);
  font-size: var(--text-m);
  transition: color var(--transition-base);
}body .esa-footer__list a:hover { color: var(--esa-violet); }body .esa-contact-card {
  padding: var(--space-l);
  border-radius: 8px;
  background: var(--ink);
  color: var(--ice-grey);
}body .esa-contact-card__title {
  margin-block-end: var(--space-l);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}body .esa-contact-card__list { display: flex; flex-direction: column; gap: var(--space-l); }body .esa-contact-card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-s);
  align-items: start;
  font-size: var(--text-m);
  line-height: 1.4;
}body .esa-contact-card__list img { margin-block-start: 0.2em; }body .esa-contact-card__list a { transition: color var(--transition-base); }body .esa-contact-card__list a:hover { color: var(--electric-lilac); }body .esa-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--esa-violet);
  color: var(--machine-grey);
  font-size: var(--text-s);
}body .esa-footer__legal { display: flex; gap: var(--space-l); }body .esa-footer__legal a { transition: color var(--transition-base); }body .esa-footer__legal a:hover { color: var(--esa-violet); }

/* =============================================================================
   RESPONSIVE — Bricks breakpoints only (desktop-first)
   ============================================================================= */

/* Tablet portrait */
@media (max-width: 991px) {body .esa-header__toggle { display: flex; }body .esa-nav {
    position: absolute;
    inset-inline: var(--container-pad);
    top: calc(100% + var(--space-s));
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-m);
    padding: var(--space-l);
    border: 1px solid var(--steel-violet);
    border-radius: var(--radius-l);
    background: var(--ink);
    display: none;
  }body .esa-nav[data-esa-open] { display: flex; }body .esa-nav__list { flex-direction: column; align-items: stretch; gap: 0; }body .esa-nav__link { min-height: 48px; }body .esa-search { width: 100%; }body .esa-hero__inner { max-width: 100%; }body .esa-card-grid { grid-template-columns: repeat(2, 1fr); }body .esa-why { grid-template-columns: 1fr; padding-inline-start: 0; }body .esa-why__content {
    justify-self: stretch;
    max-width: none;
    padding-inline: var(--container-pad);
  }body .esa-why__media { order: -1; }body .esa-why__media img { max-height: 60vh; }body .esa-split__inner { grid-template-columns: 1fr; gap: var(--space-xl); }body .esa-split--reverse .esa-split__media { order: 0; }body .esa-split__media img { max-height: 55vh; object-fit: cover; }body .esa-cta__grid { grid-template-columns: 1fr; }body .esa-footer__top { grid-template-columns: 1fr; gap: var(--space-xl); }body .esa-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}

/* Mobile landscape */
@media (max-width: 767px) {body .esa-hero { min-height: 32rem; }body .esa-hero__scrim { background: linear-gradient(180deg, rgb(37 36 45 / 0.92) 0%, rgb(37 36 45 / 0.75) 100%); }body .esa-hero__actions .esa-btn { flex: 1 1 100%; }body .esa-section-head { flex-direction: column; align-items: flex-start; }body .esa-brands__list { gap: var(--space-l); }body .esa-footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Single column from here down. Deliberately switched at 767 rather than 478:
     on HiDPI screens the viewport can be fractional (478.4px), so a
     `max-width: 478px` query misses by a hair right at the breakpoint. */
  .esa-card-grid { grid-template-columns: 1fr; }body .esa-hero__title { max-width: 100%; }
}

/* Mobile portrait */
@media (max-width: 478px) {body .esa-footer__cols { grid-template-columns: 1fr; }body .esa-contact-card { padding: var(--space-m); }
}

/* =============================================================================
   MOTION START STATES
   Only applied while `esa-js` is on <html>. motion.js drops that class the
   moment it has set the real start states, and a failsafe in <head> drops it
   if GSAP never runs — so the page is never left invisible.
   ============================================================================= */
.esa-js [data-esa-hero-pill],
.esa-js .esa-hero__title,
.esa-js [data-esa-hero-lead],
.esa-js [data-esa-hero-actions],
.esa-js [data-esa-reveal],
.esa-js [data-esa-fade],
.esa-js [data-esa-stagger] > * {
  opacity: 0;
}

[data-esa-reveal="image"] { will-change: clip-path, transform, filter; }

/* ---------- Motion preferences ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==ESA-EQUIPMENT-START== */
/* =============================================================================
   EQUIPMENT CARD — shared by the listing grid and the detail page's
   "You might be interested in" row. The grid that lays the cards out stays
   with each page, since the column counts differ.
   Figma V7Jfat2FjJXWvsBDlQN3Uk 221:847 (260x440). The whole card is one link:
   the design has no separate targets, and three links to the same machine is
   noise for anyone tabbing or listening.
   ============================================================================= */
body .esa-eq-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--workshop-white);
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
body .esa-eq-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -22px rgb(37 36 45 / 0.45);
}
body .esa-eq-card:focus-visible{ outline: 2px solid var(--esa-violet); outline-offset: 3px; }

/* The machine sits on a white plate, desaturated, under an ink gradient that
   grounds the card and gives the badge something to sit on. */
body .esa-eq-card__media{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 260 / 192;
  overflow: hidden;
  background: var(--white);
}
body .esa-eq-card__media img{
  /* 173 of the design's 260-wide plate. Sized off the width because a
     percentage height here resolves against the replaced element's own box,
     not the grid area, and overflows. */
  width: 66.5%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 500ms ease, filter var(--transition-base);
}

/* Pointing at a card drops both the overlay and the desaturation, so the
   machine comes up in its real colours. */
body .esa-eq-card:hover .esa-eq-card__media img,
body .esa-eq-card:focus-visible .esa-eq-card__media img{
  filter: grayscale(0);
  transform: scale(1.05);
}

body .esa-eq-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0D0E1A 0%, rgb(111 112 181 / 0) 100%);
  opacity: 1;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

/* Keyboard focus gets the same reveal as hover. */
body .esa-eq-card:hover .esa-eq-card__media::after,
body .esa-eq-card:focus-visible .esa-eq-card__media::after{ opacity: 0; }

body .esa-eq-card__badge{
  position: absolute;
  z-index: 1;
  inset-block-start: var(--space-m);
  inset-inline-end: var(--space-m);
  padding: 9px 13px;
  border: 1px solid var(--esa-violet);
  border-radius: var(--radius-m);
  background: var(--ice-grey);
  /* d-1 rather than the brand tint: 12px violet on Ice Grey is 3.8:1. */
  color: var(--esa-violet-d-1);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

body .esa-eq-card__body{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
}

/* Model code leads, price sits on its baseline at the other end of the row. */
body .esa-eq-card__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-end: var(--space-xs);
}

body .esa-eq-card__model{
  min-width: 0;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-l);
  font-weight: 400;
  line-height: 1.2;
}

body .esa-eq-card__price{
  flex: none;
  color: var(--esa-violet-d-1);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

body .esa-eq-card__subtitle{
  padding-block-end: var(--space-m);
  color: var(--machine-grey);
  font-size: var(--text-s);
  line-height: 1.4;
}

/* Two columns of icon + value, carrying only the specs a machine actually has,
   so the card is 2, 4 or 6 rows deep depending on the data. */
body .esa-eq-card__specs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--space-xs);
}

body .esa-eq-spec{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  color: var(--machine-grey);
  font-size: var(--text-xs);
  line-height: 1.4;
}
body .esa-eq-spec svg{ flex: none; width: 12px; height: 12px; color: var(--esa-violet); }
body .esa-eq-spec span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body .esa-eq-card__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 50px;
  padding: var(--space-s) var(--space-m);
  border-block-start: 1px solid var(--esa-violet);
  color: var(--esa-violet-d-1);
  font-size: var(--text-s);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
body .esa-eq-card__foot svg{ flex: none; width: 12px; height: 12px; transition: transform var(--transition-base); }
body .esa-eq-card:hover .esa-eq-card__foot svg{ transform: translateX(3px); }


/* =============================================================================
   Equipment Sales Australia — Equipment listing (archive)
   Standalone build (Stage 1 of docs/SPEC-PLAN.md). Shared shell lives in
   ../_shared/base.css; this file only adds the listing-specific sections.
   Figma node 1:422. Becomes the Bricks CPT archive (query loop + query filters).
   ============================================================================= */

/* ---------- Hero copy (uses the shared .esa-hero shell) ------------------ */
body .esa-hero__eyebrow{ /* alias so the shared pill sits above the title */ }

/* =============================================================================
   LISTING — filter sidebar + results
   ============================================================================= */
body .esa-listing{ background: var(--alloy); }

body .esa-listing__grid{
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2xl);
}

/* ---------- Filter sidebar ----------------------------------------------- */
body .esa-filters{
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-l);
  border-radius: var(--radius-l);
  background: var(--workshop-white);
  /* Sticks under the fixed header while the results scroll past. */
  position: sticky;
  top: calc(var(--space-4xl) + var(--space-m));
}

/* The gap on .esa-filters only separates the mobile toggle from this body, and
   the toggle is hidden on desktop — so without a gap here the three groups
   stacked flush and the last option of one ran into the next heading. */
body .esa-filters__body{
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

body .esa-filter-group{ display: flex; flex-direction: column; gap: var(--space-s); }

body .esa-filter-group__heading{
  margin: 0 0 var(--space-2xs);
  color: var(--esa-violet-d-1);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body .esa-filter-options{ display: flex; flex-direction: column; gap: var(--space-2xs); }

/* Category rows — full-width pill buttons */
body .esa-filter-option{
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--charcoal);
  font-size: var(--text-s);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
body .esa-filter-option:hover{ background: var(--ice-grey); }
body .esa-filter-option[aria-pressed="true"]{
  background: var(--esa-violet);
  border-color: var(--esa-violet);
  color: var(--white);
}

/* Brand + condition — inline chips */
body .esa-filter-chips{ display: flex; flex-wrap: wrap; gap: var(--space-xs); }

body .esa-chip-toggle{
  min-height: 40px;
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--technical-grey);
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--charcoal);
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
body .esa-chip-toggle:hover{ border-color: var(--esa-violet); }
body .esa-chip-toggle[aria-pressed="true"]{
  background: var(--esa-violet);
  border-color: var(--esa-violet);
  color: var(--white);
}
body .esa-filter-group--condition .esa-chip-toggle{ flex: 1; text-align: center; }

/* ---------- Results column ----------------------------------------------- */
body .esa-listing__main{ display: flex; flex-direction: column; gap: var(--space-l); }

body .esa-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
}

body .esa-toolbar__count{
  color: var(--machine-grey);
  font-size: var(--text-m);
}
body .esa-toolbar__count b{ color: var(--charcoal); font-weight: 600; }

body .esa-sort{
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--machine-grey);
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body .esa-sort__select{
  min-height: 40px;
  padding: var(--space-xs) var(--space-l) var(--space-xs) var(--space-s);
  border: 1px solid var(--technical-grey);
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--charcoal);
  font-size: var(--text-s);
  text-transform: uppercase;
  cursor: pointer;
  /* native chevron replaced by an inline one for consistent cross-browser look */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235E5E5E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
}

/* ---------- Results grid (card itself lives in _shared/base.css) --------- */
body .esa-eq-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
}


/* ---------- Pagination --------------------------------------------------- */
body .esa-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}

body .esa-pagination a,
body .esa-pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding-inline: var(--space-xs);
  border: 1px solid var(--technical-grey);
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--charcoal);
  font-size: var(--text-s);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
body .esa-pagination a:hover{ border-color: var(--esa-violet); color: var(--esa-violet); }
body .esa-pagination [aria-current="page"]{
  background: var(--esa-violet);
  border-color: var(--esa-violet);
  color: var(--white);
}
body .esa-pagination__gap{ border: 0; background: none; color: var(--machine-grey); min-width: auto; }

/* =============================================================================
   CTA BAND — full-bleed dark band with one action ("Can't find your equipment?")
   ============================================================================= */
body .esa-cta-band{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-4xl);
  background: var(--ink);
  color: var(--ice-grey);
}
/* Fixed-scroll background: the image stays pinned to the viewport while the band
   scrolls over it (a reveal/parallax effect). A CSS background is used rather
   than an <img> because background-attachment is what produces the effect. */
body .esa-cta-band__bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/hero-equipment.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
body .esa-cta-band__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(37 36 45 / 0.92) 0%, rgb(37 36 45 / 0.6) 100%);
}
body .esa-cta-band__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
body .esa-cta-band__title{
  max-width: 16ch;
  font-size: var(--text-3xl);
  text-transform: uppercase;
  color: var(--ice-grey);
}

/* The filter accordion toggle only exists on mobile; base state is hidden and
   the ≤991 media query below reveals it. Declared BEFORE the media query so the
   query's `display: flex` wins on source order. */
body .esa-filters__toggle{
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--technical-grey);
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--charcoal);
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
body .esa-filters__toggle svg{ transition: transform var(--transition-base); }
body .esa-filters[data-esa-open] .esa-filters__toggle svg{ transform: rotate(180deg); }

/* =============================================================================
   RESPONSIVE — Bricks breakpoints
   ============================================================================= */
@media (max-width: 1279px) {
  body .esa-eq-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  /* Filters move above the results and stop sticking. */
  body .esa-listing__grid{ grid-template-columns: 1fr; gap: var(--space-l); }
  body .esa-filters{ position: static; }
  body .esa-filters__body{ display: none; }
  body .esa-filters[data-esa-open] .esa-filters__body{ display: flex; flex-direction: column; gap: var(--space-xl); }
  body .esa-filters__toggle{ display: flex; }
}

@media (max-width: 767px) {
  body .esa-eq-grid{ grid-template-columns: 1fr; }
  body .esa-toolbar{ flex-direction: column; align-items: flex-start; }
  body .esa-cta-band__inner{ flex-direction: column; align-items: flex-start; }
  body .esa-cta-band__title{ max-width: 100%; }
  /* iOS Safari janks/ignores background-attachment: fixed — scroll on mobile. */
  body .esa-cta-band__bg{ background-attachment: scroll; }
}

/* ==ESA-EQUIPMENT-END== */

/* ==ESA-EQUIP-OVERRIDES-START== */
/* =============================================================================
   Equipment archive — Bricks-only overrides (Stage 2)
   These rules exist because Bricks' native query-filter and pagination elements
   emit their own markup, which the Stage-1 stylesheet never saw. They restyle
   that markup to the approved design. Not used by the standalone Stage-1 page.

   Filter markup (per option):
     ul.esa-filter-radio | ul.esa-filter-check
       > li > label(.brx-option-active|.brx-option-disabled)
           > input.brx-a11y-hidden
           + span.brx-input-indicator
           + span.brx-option-text > span.brx-option-count
   ============================================================================= */

/* Shared: reset list chrome, hide native indicator + count, drop empty terms */
body .esa-filter-radio,
body .esa-filter-check{ list-style: none; margin: 0; padding: 0; }
body .esa-filter-radio .brx-input-indicator,
body .esa-filter-check .brx-input-indicator{ display: none; }
body .esa-filter-radio .brx-option-count,
body .esa-filter-check .brx-option-count{ display: none; }
body .esa-filter-radio li:has(> label.brx-option-disabled),
body .esa-filter-check li:has(> label.brx-option-disabled){ display: none; }
body .esa-filter-radio .brx-option-text,
body .esa-filter-check .brx-option-text{ color: inherit; }
body .esa-filter-radio label,
body .esa-filter-check label{
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  cursor: pointer;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Category — full-width pill buttons (single-select radio) */
body .esa-filter-radio{ display: flex; flex-direction: column; gap: var(--space-xs); }
body .esa-filter-radio label{
  width: 100%;
  min-height: 48px;
  padding: var(--space-s) var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--charcoal);
  text-align: left;
}
body .esa-filter-radio label:hover{ background: color-mix(in srgb, var(--esa-violet) 14%, #fff); }
body .esa-filter-radio label.brx-option-active,
body .esa-filter-radio label:has(input:checked){
  background: var(--esa-violet);
  border-color: var(--esa-violet);
  color: var(--white);
}

/* Brand + condition — 2-column chip grid (multi-select checkbox).
   Bricks' .brxe-filter-checkbox defaults to flex-direction:column, so use grid. */
body .esa-filter-check{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
body .esa-filter-check li{ display: block; }
body .esa-filter-check label{
  width: 100%;
  min-height: 56px;
  justify-content: center;
  text-align: center;
  padding: var(--space-s);
  border: 1px solid var(--technical-grey);
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--charcoal);
}
body .esa-filter-check label:hover{ border-color: var(--esa-violet); }
body .esa-filter-check label.brx-option-active,
body .esa-filter-check label:has(input:checked){
  background: var(--esa-violet);
  border-color: var(--esa-violet);
  color: var(--white);
}

/* Pagination — Bricks renders .bricks-pagination > (ul li)? a.page-numbers */
body .esa-pagination .bricks-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}
body .esa-pagination .bricks-pagination ul,
body .esa-pagination .bricks-pagination li{ display: contents; }
body .esa-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding-inline: var(--space-xs);
  border: 1px solid var(--technical-grey);
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--charcoal);
  font-size: var(--text-s);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
body .esa-pagination a.page-numbers:hover{ border-color: var(--esa-violet); color: var(--esa-violet); }
body .esa-pagination .page-numbers.current{
  background: var(--esa-violet);
  border-color: var(--esa-violet);
  color: var(--white);
}
body .esa-pagination .page-numbers.dots{ border: 0; background: none; min-width: auto; }

/* The equipment archive uses the colour Figma split photo — drop the shared
   grayscale treatment here only (scoped to the archive so Home is untouched).
   Starts with `body` so the prefixer leaves it, keeping specificity above the
   shared `body .esa-split__media img` grayscale rule. */
body.post-type-archive-equipment .esa-split__media img { filter: none; }

/* ==ESA-EQUIP-OVERRIDES-END== */

/* ==ESA-DETAIL-START== */
/* =============================================================================
   Equipment Sales Australia — Equipment detail (single machine)
   Standalone build (Stage 1 of docs/SPEC-PLAN.md). Shared shell, tokens and the
   equipment card live in ../_shared/base.css; this file adds only what is
   specific to the machine page. Figma node 153:542.
   Becomes the Bricks single template for the `equipment` CPT.
   ============================================================================= */

:root {
  /* The Figma frame is 1440 wide: 104 gutters, a 737 content column, a 74 gap
     and a 421 rail. Below 1279 the rail drops under the content. */
  --detail-rail: 421px;
  --detail-gap: clamp(2rem, 5.14vw, 74px);

  /* Section headings are Barlow SemiBold 32 in the design (Subtitle token), not
     the condensed display face the page title uses. */
  --detail-heading: clamp(1.5rem, 1.29rem + 1.07vw, 2rem);
  /* Price is Title Page 48 in the design, between --text-2xl and --text-3xl. */
  --detail-price: clamp(2rem, 1.57rem + 2.14vw, 3rem);
}

/* =============================================================================
   TITLE — category pill + machine name, full width above the two columns
   ============================================================================= */
body .esa-detail-head{
  /* Clears the fixed header, which is ~151px tall at 1440. */
  padding-block: clamp(7.5rem, 5.9rem + 8vw, 14rem) var(--space-xl);
  background: var(--alloy);
}

body .esa-detail-head__title{
  max-width: 40ch;
  margin-block-start: var(--space-m);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* The shared start-state block in base.css does not know this page's title,
   so it would flash at full opacity before motion.js takes over. */
body .esa-js .esa-detail-head__title{ opacity: 0; }

/* =============================================================================
   LAYOUT — content column + buy rail
   ============================================================================= */
body .esa-detail{
  padding-block-end: var(--space-4xl);
  background: var(--alloy);
}

body .esa-detail__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--detail-rail);
  align-items: start;
  gap: var(--detail-gap);
}

body .esa-detail__main{
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 0;
}

body .esa-detail__rail{
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  min-width: 0;
}

/* =============================================================================
   GALLERY — one stage image driven by a thumbnail strip
   ============================================================================= */
/* <figure> carries a 40px browser margin that would eat into the column. */
body .esa-gallery{ display: flex; flex-direction: column; gap: var(--space-l); margin: 0; }

body .esa-gallery__stage{
  position: relative;
  aspect-ratio: 737 / 365;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--workshop-white);
}

body .esa-gallery__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body .esa-gallery__badges{
  position: absolute;
  inset-block-start: var(--space-l);
  inset-inline-end: var(--space-l);
  display: flex;
  gap: var(--space-xs);
}

/* The design draws these as the same outlined chip as the category pill. Over a
   photo that needs a backing, so it is a light glass plate rather than a plain
   border — dark text on it stays readable whatever the machine is shot against. */
body .esa-badge{
  padding: 0.5rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: var(--radius-m);
  background: rgb(242 242 242 / 0.82);
  backdrop-filter: blur(6px);
  color: var(--charcoal);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body .esa-gallery__thumbs{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-l);
}

body .esa-gallery__thumb{
  display: block;
  width: 100%;
  aspect-ratio: 122 / 118;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  background: var(--workshop-white);
  cursor: pointer;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
body .esa-gallery__thumb img{ width: 100%; height: 100%; object-fit: cover; }
body .esa-gallery__thumb:hover{ transform: translateY(-2px); }
body .esa-gallery__thumb[aria-current="true"]{ border-color: var(--esa-violet); }

/* =============================================================================
   CONTENT BLOCKS — description, overview, specifications
   ============================================================================= */
body .esa-detail-block{ display: flex; flex-direction: column; gap: var(--space-m); }

body .esa-detail-block__title{
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--detail-heading);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

body .esa-detail-block__text{
  color: var(--machine-grey);
  font-size: var(--text-m);
  line-height: 1.4;
}

/* The source is a bullet list; the design shows plain lines, so the markers go
   but the list semantics stay. The gap has to clear the line-height, or a
   wrapped item reads as two separate points. */
body .esa-detail-block__list{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--machine-grey);
  font-size: var(--text-m);
  line-height: 1.4;
}

/* Bare headings the source writes inside the body ("STANDARD FEATURES",
   "Specifications:") — a label for the lines under it, not one of them. */
body .esa-detail-block__lead{
  margin-block-start: var(--space-xs);
  color: var(--charcoal);
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}
body .esa-detail-block__lead:first-child{ margin-block-start: 0; }

/* ---------- Specification bento ------------------------------------------ */
body .esa-spec-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
}

body .esa-spec{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--workshop-white);
}

body .esa-spec__icon{ width: auto; height: 20px; }

/* The five designed tiles carry an icon; the tiles built from the imported spec
   rows do not, and would otherwise reserve the space where one would sit. */
body .esa-spec:not(:has(.esa-spec__icon)) .esa-spec__label{ margin-block-start: 0; }

body .esa-spec__label{
  margin-block-start: var(--space-m);
  color: var(--charcoal);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

body .esa-spec__value{
  margin-block-start: var(--space-2xs);
  color: var(--machine-grey);
  font-size: var(--text-l);
  line-height: 1.2;
  text-transform: uppercase;
}

/* =============================================================================
   RAIL — price, finance calculator, enquiry. One card chrome, three payloads.
   ============================================================================= */
body .esa-rail-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-l);
  border-radius: 10px;
  background: var(--workshop-white);
}

body .esa-rail-card__title{
  color: var(--machine-grey);
  font-family: var(--font-body);
  font-size: var(--text-l);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---------- Price -------------------------------------------------------- */
body .esa-price{ display: flex; flex-direction: column; gap: var(--space-2xs); }

body .esa-price__value{
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: var(--detail-price);
  font-weight: 700;
  line-height: 1.2;
}

body .esa-price__note{
  color: var(--machine-grey);
  font-size: var(--text-m);
  line-height: 1.4;
}

/* ---------- Rail buttons — 38px tall, quieter than the hero CTAs ---------- */
body .esa-rail-actions{ display: flex; flex-direction: column; gap: var(--space-m); }

body .esa-rail-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;               /* design draws 38; 44 keeps the tap target legal */
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--steel-violet);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--machine-grey);
  font-family: inherit;
  font-size: var(--text-s);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
body .esa-rail-btn:hover{ border-color: var(--esa-violet); color: var(--esa-violet-d-1); }

body .esa-rail-btn--primary{
  border-color: var(--esa-violet-d-1);
  background: var(--esa-violet-d-1);   /* d-1 rather than the brand tint: 14px label needs AA */
  color: var(--ice-grey);
  box-shadow: 0 4px 3px rgb(0 0 0 / 0.1), 0 10px 7.5px rgb(0 0 0 / 0.1);
}
body .esa-rail-btn--primary:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* ---------- Two icon actions under a violet rule ------------------------- */
body .esa-rail-split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--esa-violet);
}

body .esa-rail-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  color: var(--machine-grey);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  transition: color var(--transition-base);
}
/* Stage 1 ships these as <img>; the Bricks build inlines the same exports as
   <svg>, which has no intrinsic size to fall back on. Size both. */
body .esa-rail-link img,
body .esa-rail-link svg{ width: auto; height: 20px; }
body .esa-rail-link:hover{ color: var(--esa-violet-d-1); }

/* ---------- Form fields — shared by the calculator and the enquiry ------- */
body .esa-field{ display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }

body .esa-field-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}

body .esa-field__label{
  color: var(--machine-grey);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body .esa-input{
  width: 100%;
  min-height: 50px;
  padding: var(--space-s) var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: var(--alloy);
  color: var(--charcoal);
  font-family: inherit;
  font-size: var(--text-m);
  line-height: 1.4;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
body .esa-input::placeholder{ color: var(--machine-grey); }
body .esa-input:hover{ border-color: var(--technical-grey); }
body .esa-input:focus-visible{
  outline: 2px solid var(--esa-violet);
  outline-offset: 2px;
  border-color: transparent;
}

body .esa-input--area{ min-height: 84px; resize: vertical; }

body .esa-input--select{
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='7.5' viewBox='0 0 13.5 7.5' fill='none'%3E%3Cpath d='M0.75 0.75L6.75 6.75L12.75 0.75' stroke='%235E5E5E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-m) center;
  background-size: 12px 6px;
  padding-inline-end: var(--space-xl);
}

/* ---------- Calculator result ------------------------------------------- */
body .esa-estimate{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--esa-violet);
  text-align: center;
}

body .esa-estimate__label{
  color: var(--machine-grey);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body .esa-estimate__value{
  color: var(--charcoal);
  font-size: var(--detail-heading);
  font-weight: 600;
  line-height: 1.2;
}

body .esa-form-status{
  color: var(--esa-violet-d-1);
  font-size: var(--text-s);
  line-height: 1.4;
}
body .esa-form-status:empty{ display: none; }
body .esa-form-status[data-state="error"]{ color: #A4343A; }

/* =============================================================================
   RELATED — dark band carrying the same equipment card
   ============================================================================= */
body .esa-related{
  padding-block: var(--space-4xl);
  background: var(--ink);
  color: var(--ice-grey);
}

body .esa-related__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-block-end: var(--space-2xl);
}

body .esa-related__title{
  max-width: 30ch;
  margin-block-start: var(--space-m);
  color: var(--ice-grey);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

body .esa-related__nav{ display: flex; flex: none; gap: var(--space-l); }

body .esa-related__btn{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--steel-violet);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ice-grey);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
}
body .esa-related__btn:hover{ border-color: var(--electric-lilac); color: var(--electric-lilac); }
body .esa-related__btn[disabled]{ opacity: 0.35; cursor: default; }
body .esa-related__btn[disabled]:hover{ border-color: var(--steel-violet); color: var(--ice-grey); }

/* Four across at 1440, and a swipeable snap rail once they no longer fit. */
body .esa-related__grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--space-l) * 3) / 4);
  gap: var(--space-l);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Cards lift on hover; without room the transform clips against the scroller. */
  padding-block: 4px;
}
body .esa-related__grid::-webkit-scrollbar{ display: none; }
body .esa-related__grid > li{ scroll-snap-align: start; }

/* =============================================================================
   RESPONSIVE — Bricks breakpoints
   ============================================================================= */
@media (max-width: 1279px) {
  /* The rail can no longer hold 421px next to a readable content column. */
  body .esa-detail__grid{ grid-template-columns: 1fr; }
  body .esa-detail__rail{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body .esa-related__grid{ grid-auto-columns: calc((100% - var(--space-l) * 2) / 3); }
}

@media (max-width: 991px) {
  body .esa-gallery__thumbs{ gap: var(--space-m); }
  body .esa-related__grid{ grid-auto-columns: calc((100% - var(--space-l)) / 2); }
  body .esa-related__head{ align-items: flex-start; }
}

@media (max-width: 767px) {
  body .esa-detail__rail{ grid-template-columns: 1fr; }
  body .esa-spec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
  body .esa-gallery__stage{ aspect-ratio: 4 / 3; }
  body .esa-related__grid{ grid-auto-columns: 82%; }
  body .esa-related__nav{ display: none; }   /* swipe replaces the buttons */
}

@media (max-width: 478px) {
  body .esa-spec-grid{ grid-template-columns: 1fr; }
  body .esa-gallery__thumbs{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
  body .esa-field-row{ grid-template-columns: 1fr; }
}

/* The Bricks header template is shared, so this page opts into the solid plate
   by body class instead of a markup change. */
body.single-equipment .esa-header::before { opacity: 1; }

/* ==ESA-DETAIL-END== */